feat: add centered shadow and use it (#1070)

* feat: add centered shadow to twind config * feat: update shadow and apply it to profiles
helpwave · May 31, 2024 · 0adec26 · 0adec26
1 parent d90f188
commit 0adec26
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/landing-page/components/sections/landing/StartSection.tsx b/landing-page/components/sections/landing/StartSection.tsx
@@ -36,7 +36,7 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<LandingPageT
           <Span className={tw('font-space font-semibold !text-2xl')}><MarkdownInterpreter text={translation.description}/></Span>
         </div>
       </div>
-      <div className={tw('desktop:relative desktop:right-0 p-4 pr-0 mobile:pr-4 rounded-l-3xl mobile:rounded-3xl bg-white w-2/5 tablet:min-w-[360px] mobile:w-4/5 z-10 h-fit shadow-xl')}>
+      <div className={tw('desktop:relative desktop:right-0 p-4 pr-0 mobile:pr-4 rounded-l-3xl mobile:rounded-3xl bg-white w-2/5 tablet:min-w-[360px] mobile:w-4/5 z-10 h-fit shadow-around-lg')}>
         <Image
           // TODO make attribution to https://www.freepik.com/free-vector/medics-working-charts_4950249.htm
           src="https://cdn.helpwave.de/landing_page/doctor_statistics.svg"

diff --git a/lib/components/Profile.tsx b/lib/components/Profile.tsx
@@ -85,7 +85,7 @@ export const Profile = ({
   return (
     <div
       {...divProps}
-      className={tx(`flex flex-col items-center text-center rounded-3xl p-3 pb-4 bg-white w-min`, className)}
+      className={tx(`flex flex-col items-center text-center rounded-3xl p-3 pb-4 bg-white w-min shadow-around-lg`, className)}
     >
       <div className={tw('relative mb-6')}>
         <div className={tx('relative rounded-xl flex flex-row items-center justify-center overflow-hidden', imageClassName)}>

diff --git a/lib/twind/config.ts b/lib/twind/config.ts
@@ -193,6 +193,12 @@ export const config = defineConfig({
           '100%': { strokeDashoffset: '-1000' },
         },
       },
+      boxShadow: {
+        'around': '0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 2px 0 2px 0 rgba(0, 0, 0, 0.02), -2px 0 2px 0 rgba(0, 0, 0, 0.02)',
+        'around-md': '0 5px 5px 0 rgba(0, 0, 0, 0.02), 0 -5px 5px 0 rgba(0, 0, 0, 0.02), 5px 0 5px 0 rgba(0, 0, 0, 0.02), -5px 0 5px 0 rgba(0, 0, 0, 0.02)',
+        'around-lg': '0 10px 10px 0 rgba(0, 0, 0, 0.02), 0 -10px 10px 0 rgba(0, 0, 0, 0.02), 10px 0 10px 0 rgba(0, 0, 0, 0.02), -10px 0 10px 0 rgba(0, 0, 0, 0.02)',
+        'around-xl': '0 20px 20px 0 rgba(0, 0, 0, 0.02), 0 -20px 20px 0 rgba(0, 0, 0, 0.02), 20px 0 20px 0 rgba(0, 0, 0, 0.02), -20px 0 20px 0 rgba(0, 0, 0, 0.02)',
+      }
     }
   },
   presets: [presetAutoprefix(), presetTailwind(), presetTailwindForms(), presetTypography()]