Clean up styles

VCG · Jun 6, 2022 · 83b9571 · 83b9571
1 parent 88943ce
commit 83b9571
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
@@ -40,7 +40,7 @@ const Hero: React.VoidFunctionComponent = () => {
           </Link>
         </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}>
           <div className="relative inline-block">
             <motion.div
@@ -64,7 +64,7 @@ const Hero: React.VoidFunctionComponent = () => {
               <ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
             </motion.div>
             <motion.div
-              className="rounded-lg shadow-lg"
+              className="rounded-lg"
               transition={{ type: "spring", delay: 0.5 }}
               initial={{ opacity: 0, translateY: -100 }}
               animate={{ opacity: 1, translateY: 0 }}

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

diff --git a/src/components/poll/desktop-poll.tsx b/src/components/poll/desktop-poll.tsx
@@ -120,7 +120,7 @@ const Poll: React.VoidFunctionComponent = () => {
         ref={ref}
       >
         <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">
               {timeZone ? (
                 <div className="flex grow items-center">
@@ -207,7 +207,7 @@ const Poll: React.VoidFunctionComponent = () => {
                   transition={{ duration: 0.2 }}
                   initial={{ opacity: 0, height: 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 }) => {
                     await addParticipant.mutateAsync({
                       name,

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,9 @@ module.exports = {
   content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
   theme: {
     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: {
         primary: colors.indigo,
       },