feat: update background colors (#1065)

* chore: update background colors * chore: merge main and correct carousel blur color * fix: fix styling on credits and join page
helpwave · Sep 15, 2024 · 69a8ebb · 69a8ebb
1 parent 7e69e9d
commit 69a8ebb
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 16 deletions.
diff --git a/landing-page/components/Header.tsx b/landing-page/components/Header.tsx
@@ -107,7 +107,7 @@ const Header = () => {
 
   return (
     <>
-      <div className={tw('absolute flex flex-row justify-center top-0 w-screen z-[50] bg-white mobile:px-6 tablet:px-12 desktop:px-24')}>
+      <div className={tw('absolute flex flex-row justify-center top-0 w-screen z-[50] bg-hw-grayscale-50 mobile:px-6 tablet:px-12 desktop:px-24')}>
         <nav className={tw('flex pt-2 items-center justify-between w-full max-w-[1200px]')}>
           <Link href={homeURL} className={tw('flex flex-row gap-x-1 items-center text-2xl')}>
             <Helpwave />
@@ -176,7 +176,7 @@ const Header = () => {
       </div>
 
       {navbarOpen && (
-        <div className={tw('absolute w-screen h-screen z-[100] bg-white')}>
+        <div className={tw('absolute w-screen h-screen z-[100] bg-hw-grayscale-50')}>
           <div className={tw('text-center content-center fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2')}>
             <button onClick={() => setNavbarOpen(false)} className={tw('mb-5')}>
               <X size={64} />

diff --git a/landing-page/components/NewsLetterForm.tsx b/landing-page/components/NewsLetterForm.tsx
@@ -197,7 +197,7 @@ export const NewsLetterForm = ({
                 ...prevState,
                 industry
               }))}
-              className={tw('!w-full !max-w-[300px]')}
+              className={tw('!w-full !max-w-[300px] bg-white')}
             />
           </div>
           <div className={tw('flex flex-row justify-end mt-4')}>

diff --git a/landing-page/components/sections/SectionBase.tsx b/landing-page/components/sections/SectionBase.tsx
@@ -13,15 +13,15 @@ type SectionBaseProps = PropsWithChildren & {
 export const SectionBase = ({
   children,
   useDefaultStyle = true,
-  backgroundColor = 'white',
+  backgroundColor = 'gray',
   outerClassName,
   className,
 }: SectionBaseProps) => {
   return (
     <div className={tx('flex flex-col items-center w-full', {
-      'bg-white': backgroundColor === 'white',
-      'bg-gray-100': backgroundColor === 'gray',
-      'bg-black': backgroundColor === 'black',
+      'bg-hw-grayscale-0': backgroundColor === 'white',
+      'bg-hw-grayscale-50': backgroundColor === 'gray',
+      'bg-hw-grayscale-1000': backgroundColor === 'black',
       'bg-hw-secondary-800': backgroundColor === 'darkSecondary',
       'bg-hw-primary-900': backgroundColor === 'darkPrimary',
       'desktop:px-24 tablet:px-12 mobile:px-6 py-16': useDefaultStyle

diff --git a/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx b/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx
@@ -100,7 +100,12 @@ export const StepsToDigitalizationSection = () => {
         <h2><Span type="title" className={tw('!text-3xl')}><MarkdownInterpreter text={translation.title}/></Span></h2>
         <Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
       </div>
-      <Carousel hintNext={true} heights={{ tablet: 300 }} onCardClick={index => items[index]!.onShowMoreClicked!()}>
+      <Carousel
+        hintNext={true}
+        heights={{ tablet: 300 }}
+        onCardClick={index => items[index]!.onShowMoreClicked!()}
+        blurColor="hw-grayscale-50"
+      >
         {items.map((value, index) => (
           <div key={index} className={tw('px-[2.5%] h-full')}>
             <TextImage {...value} className={tw('h-full overflow-hidden')}/>

diff --git a/landing-page/components/sections/landing/StoriesSliderSection.tsx b/landing-page/components/sections/landing/StoriesSliderSection.tsx
@@ -94,7 +94,7 @@ export const StorySliderSection = () => {
 
   return (
     <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
-      <Carousel hintNext={true} onCardClick={index => items[index]!.onShowMoreClicked!()}>
+      <Carousel hintNext={true} onCardClick={index => items[index]!.onShowMoreClicked!()} blurColor="hw-grayscale-50">
         {items.map((value, index) => (
           <div key={index} className={tw('px-[2.5%] h-full')}>
             <TextImage {...value} className={tw('h-full overflow-hidden')}/>

diff --git a/landing-page/components/sections/landing/TasksDemoSection.tsx b/landing-page/components/sections/landing/TasksDemoSection.tsx
@@ -65,7 +65,7 @@ export const TasksDemoSection = () => {
         </div>
         <Link
           href={demoURL}
-          className={tw('bg-black rounded-lg text-lg text-white h-min px-6 py-2')}
+          className={tw('bg-white rounded-lg text-lg font-bold text-hw-secondary-800 h-min px-6 py-2')}
           style={{ textWrap: 'nowrap' }} // TODO does not seem supported by the current twind version (throws warnings for text-nowrap)
         >
           {translation.tryDemo}

diff --git a/landing-page/components/sections/landing/VisionSection.tsx b/landing-page/components/sections/landing/VisionSection.tsx
@@ -34,6 +34,7 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<VisionSectio
     <SectionBase
       className={tw('flex flex-row mobile:flex-col-reverse gap-8 items-center justify-center w-full')}
       outerClassName={tw('py-24')}
+      backgroundColor="white"
     >
       <div className={tw('flex flex-col w-1/2 mobile:w-full gap-y-2')}>
         <Chip className={tw('!w-fit bg-gray-200 font-semibold px-4')}>{translation.ourVision}</Chip>

diff --git a/landing-page/components/sections/mediQuu/InformationSection.tsx b/landing-page/components/sections/mediQuu/InformationSection.tsx
@@ -46,7 +46,7 @@ const defaultMediQuuInformationTranslation: Record<Languages, MediQuuInformation
 export const MediQuuInformationSection = () => {
   const translation = useTranslation(defaultMediQuuInformationTranslation)
   return (
-    <SectionBase className={tw('flex desktop:flex-row mobile:flex-wrap gap-8 desktop:justify-between mobile:justify-center')}>
+    <SectionBase className={tw('flex desktop:flex-row mobile:flex-wrap gap-8 desktop:justify-between mobile:justify-center')} backgroundColor="white">
       <div className={tw('max-w-[300px]')}>
         <Image src="https://cdn.helpwave.de/icons/agreement.svg" alt="two pages ready for signatures" width={400}
                height={150}/>

diff --git a/landing-page/components/sections/talks/EpisodeSection.tsx b/landing-page/components/sections/talks/EpisodeSection.tsx
@@ -71,7 +71,7 @@ const EpisodeSection = ({ overwriteTranslation }: PropsForTranslation<EpisodeSec
         <h1 className={tw('font-space text-5xl overline')}>{translation.allEpisodes}</h1>
         {isLoading ? (<LoadingAnimation />) : data?.map(episode => (
           <Link key={episode.id} href={episode.link} target="_blank">
-            <div className={tw('w-full shadow-sm hover:border-solid hover:border-hw-pool-orange rounded-md transition-all duration-500 border-dashed border-2 p-8 my-8 flex gap-16')}>
+            <div className={tw('w-full shadow-sm hover:border-solid hover:border-hw-pool-orange rounded-md transition-all duration-500 border-dashed border-2 p-8 my-8 flex gap-16 bg-white')}>
               <div className={tw('w-3/4 mobile:!w-full')}>
                 <h4 className={tw('font-space text-2xl font-bold')}>{episode.title}</h4>
                 <p className={tw('text-gray-600 text-justify')}>published on {episode.date.toLocaleDateString('de-DE')}</p>

diff --git a/landing-page/components/sections/tasks/DemoSection.tsx b/landing-page/components/sections/tasks/DemoSection.tsx
@@ -7,7 +7,7 @@ const DemoSection = () => {
   const demoURL = 'https://staging-tasks.helpwave.de'
 
   return (
-    <SectionBase>
+    <SectionBase backgroundColor="white">
       <Link href={demoURL} target="_blank">
         <div className={tw('font-space text-4xl font-bold underline text-center justify-center')}>
           Try <span className={tw('text-blue-400 text-6xl')}>Open Beta</span> now!

diff --git a/landing-page/components/sections/tasks/PropertiesSection.tsx b/landing-page/components/sections/tasks/PropertiesSection.tsx
@@ -34,7 +34,6 @@ export const PropertiesSection = ({ overwriteTranslation }: PropsForTranslation<
   return (
     <SectionBase
       className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
-      backgroundColor="white"
     >
       <div
         className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full desktop:min-w-[40%] w-2/5 z-10')}

diff --git a/landing-page/pages/credits/index.tsx b/landing-page/pages/credits/index.tsx
@@ -85,6 +85,7 @@ const CreditsPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<Cre
     <Page pageTitleAddition={translation.title}>
       <SectionBase
         className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
+        backgroundColor="white"
       >
         <div className={tw('flex flex-col gap-y-2 pb-16 mobile:pb-0')}>
           <div className={tw('flex flex-col gap-y-2')}>

diff --git a/landing-page/pages/join/index.tsx b/landing-page/pages/join/index.tsx
@@ -9,6 +9,7 @@ import type { NewsLetterFormType } from '@/components/NewsLetterForm'
 import { NewsLetterForm } from '@/components/NewsLetterForm'
 import { submitHubSpotForm } from '@/utils/hubspot'
 import { Page } from '@/components/Page'
+import { SectionBase } from '@/components/sections/SectionBase'
 
 const submitNewsLetterForm = (form: NewsLetterFormType) => submitHubSpotForm(
   '26536657',
@@ -81,7 +82,7 @@ const NewsLetter: NextPage = () => {
 
   return (
     <Page className={tw('w-screen h-screen relative z-0')} pageTitleAddition={translation.title}>
-      <div className={tw('h-screen z-[1]')}>
+      <SectionBase className={tw('h-screen z-[1] w-full !max-w-full')} outerClassName={tw('!p-0')}>
         <div className={tw('relative h-full overflow-hidden')}>
           <div className={tw(`absolute left-0 top-1/2 z-[-1] -translate-x-1/2 -translate-y-1/2`)}>
             {width !== 0 && height !== 0 && (
@@ -107,7 +108,7 @@ const NewsLetter: NextPage = () => {
             />
           </div>
         </div>
-      </div>
+      </SectionBase>
     </Page>
   )
 }

diff --git a/lib/twind/config.ts b/lib/twind/config.ts
@@ -82,6 +82,20 @@ export const colors = {
     600: '#C48435',
     700: '#AD6915',
     800: '#996628',
+  },
+  grayscale: {
+    0: '#FFFFFF',
+    50: '#F6F6F6',
+    100: '#EEEEEE',
+    200: '#DDDDDD',
+    300: '#CCCCCC',
+    400: '#AAAAAA',
+    500: '#888888',
+    600: '#777777',
+    700: '#555555',
+    800: '#444444',
+    900: '#222222',
+    1000: '#000000',
   }
 } as const
 
@@ -94,6 +108,7 @@ export const config = defineConfig({
         'hw-positive': colors.positive,
         'hw-negative': colors.negative,
         'hw-warn': colors.warn,
+        'hw-grayscale': colors.grayscale,
         'hw-neutral': {
           // TODO: 300 is still missing, see figma
           400: '#FF9933'