Clean up styles

This commit is contained in:
Luke Vella 2022-06-04 09:32:05 +01:00
parent 88943ce1ba
commit 83b95717e4
4 changed files with 9 additions and 6 deletions

View file

@ -40,7 +40,7 @@ const Hero: React.VoidFunctionComponent = () => {
</Link> </Link>
</div> </div>
</div> </div>
<div className="pointer-events-none mt-16 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-0 lg:ml-24"> <div className="pointer-events-none mt-24 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-8 lg:ml-24">
<UserAvatarProvider seed="mock" names={names}> <UserAvatarProvider seed="mock" names={names}>
<div className="relative inline-block"> <div className="relative inline-block">
<motion.div <motion.div
@ -64,7 +64,7 @@ const Hero: React.VoidFunctionComponent = () => {
<ScribbleArrow className="absolute -right-8 top-3 text-slate-400" /> <ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
</motion.div> </motion.div>
<motion.div <motion.div
className="rounded-lg shadow-lg" className="rounded-lg"
transition={{ type: "spring", delay: 0.5 }} transition={{ type: "spring", delay: 0.5 }}
initial={{ opacity: 0, translateY: -100 }} initial={{ opacity: 0, translateY: -100 }}
animate={{ opacity: 1, translateY: 0 }} animate={{ opacity: 1, translateY: 0 }}

View file

@ -37,10 +37,10 @@ const PollDemo: React.VoidFunctionComponent = () => {
return ( return (
<div <div
className="rounded-lg border bg-white shadow-md" className="rounded-lg bg-white py-1 shadow-huge"
style={{ width: 600 }} style={{ width: 600 }}
> >
<div className="flex border-b shadow-sm"> <div className="flex">
<div <div
className="flex shrink-0 items-center py-2 pl-4 pr-2 font-medium" className="flex shrink-0 items-center py-2 pl-4 pr-2 font-medium"
style={{ width: sidebarWidth }} style={{ width: sidebarWidth }}

View file

@ -120,7 +120,7 @@ const Poll: React.VoidFunctionComponent = () => {
ref={ref} ref={ref}
> >
<div className=" border-t border-b bg-white shadow-sm md:rounded-lg md:border"> <div className=" border-t border-b bg-white shadow-sm md:rounded-lg md:border">
<div className="sticky top-12 z-10 rounded-t-lg border-b border-gray-200 bg-white/80 shadow-sm shadow-slate-50 backdrop-blur-md lg:top-0"> <div className="sticky top-12 z-10 rounded-t-lg border-gray-200 bg-white/80 shadow-slate-50 backdrop-blur-md lg:top-0">
<div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4"> <div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4">
{timeZone ? ( {timeZone ? (
<div className="flex grow items-center"> <div className="flex grow items-center">
@ -207,7 +207,7 @@ const Poll: React.VoidFunctionComponent = () => {
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 55, y: 0 }} animate={{ opacity: 1, height: 55, y: 0 }}
className="border-t bg-slate-100 bg-opacity-0" className="border-t border-b bg-gray-50"
onSubmit={async ({ name, votes }) => { onSubmit={async ({ name, votes }) => {
await addParticipant.mutateAsync({ await addParticipant.mutateAsync({
name, name,

View file

@ -5,6 +5,9 @@ module.exports = {
content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"], content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
theme: { theme: {
extend: { extend: {
boxShadow: {
huge: "0px 51px 78px rgb(17 7 53 / 5%), 0px 21.3066px 35.4944px rgb(17 7 53 / 4%), 0px 11.3915px 18.9418px rgb(17 7 53 / 3%), 0px 6.38599px 9.8801px rgb(17 7 53 / 3%), 0px 3.39155px 4.58665px rgb(17 7 53 / 2%), 0px 1.4113px 1.55262px rgb(17 7 53 / 1%), inset 0px 1px 0px rgb(41 56 78 / 5%)",
},
colors: { colors: {
primary: colors.indigo, primary: colors.indigo,
}, },