new colors and styles

XOXNO · Aug 31, 2024 · c6bb7ff · c6bb7ff
1 parent c2072f2
commit c6bb7ff
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 51 deletions.
diff --git a/src/email/event-email-2.tsx b/src/email/event-email-2.tsx
@@ -107,10 +107,10 @@ const EventEmail = ({
           </Section>
           <Section className="p-5">
             <Center>
-              <Heading style={headingStyle} className="my-0">
+              <Heading style={headingStyle} className="my-0 heading-style">
                 {t('title', { eventName: event.name })}
               </Heading>
-              <Text style={bodyStyle}>
+              <Text style={bodyStyle} className="body-style">
                 {t.rich('description', {
                   eventName: event.name,
                   name,
@@ -131,8 +131,14 @@ const EventEmail = ({
           </Section>
           <Section>
             <Center>
-              <Text style={bodyStyle}>{t('hint')}</Text>
-              <Button href={href} style={buttonStyle} className="mb-3 block">
+              <Text className="body-style" style={bodyStyle}>
+                {t('hint')}
+              </Text>
+              <Button
+                href={href}
+                style={buttonStyle}
+                className="mb-3 block button-style"
+              >
                 {t('action')}
               </Button>
               <table

diff --git a/src/email/event-email.tsx b/src/email/event-email.tsx
@@ -104,7 +104,7 @@ const EventEmail = ({
           </Section>
           <Section className="p-5">
             <Center>
-              <Heading style={headingStyle} className="my-0">
+              <Heading style={headingStyle} className="my-0 heading-style">
                 {t('title', { name })}
               </Heading>
               <Text style={bodyStyle}>
@@ -113,7 +113,7 @@ const EventEmail = ({
               <Button
                 href={href}
                 style={buttonStyle}
-                className="mt-2 mb-[40px]"
+                className="mt-2 mb-[40px] button-style"
               >
                 {t('action')}
               </Button>

diff --git a/src/email/utils.tsx b/src/email/utils.tsx
@@ -108,44 +108,94 @@ export const GeneralEmail = ({
           />
           <style>
             {`
-            .no-scrollbar {
-              -ms-overflow-style: none;
-              scrollbar-width: none;
-            }
-            .no-scrollbar::-webkit-scrollbar {
-              display: none;
-            }
-            .warning-label {
-              color: #E8EC0D;
-            }
-            .warning-label-bg {
-              background-color: #161502;
-              border-color: #E8EC0D;
-            }
-            .warning-label-border {
-              border-color: #161502;
-            }
-            @media (prefers-color-scheme: dark) {
-             --color-palettes-primary-text-fill: #FFF;
-             --color-palettes-lime-fill: #AEFB4F;
-             --color-palettes-button-tertiary-text: #D0D0D0;
-             --color-palettes-button-primary-fill: #AEFB4F;
-             --color-palettes-button-primary-text: #000;
-             --color-palettes-background-color: #121212;
-
-             .warning-label {
-                color: #E8EC0D;
-              }
-              
-            .warning-label-bg {
-              background-color: #161502;
-              border-color: #E8EC0D;
-              }
-            }
-          `}
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .body-style {
+    color: #D0D0D0 !important;
+  }
+
+  .heading-style {
+    color: #FFF !important;
+  }
+
+  .small-heading-style {
+    color: #FFF !important;
+  }
+
+  .button-style {
+    color: #000 !important;
+    background: #AEFB4F !important;
+  }
+
+  .warning-label {
+    color: #E8EC0D;
+  }
+
+  .warning-label-bg {
+    background-color: #161502;
+    border-color: #E8EC0D;
+  }
+
+  .warning-label-border {
+    border-color: #161502;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      --color-palettes-primary-text-fill: #FFF;
+      --color-palettes-lime-fill: #AEFB4F;
+      --color-palettes-button-tertiary-text: #D0D0D0;
+      --color-palettes-button-primary-fill: #AEFB4F;
+      --color-palettes-button-primary-text: #000;
+      --color-palettes-background-color: #121212;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-palettes-primary-text-fill: #FFF;
+      --color-palettes-lime-fill: #AEFB4F;
+      --color-palettes-button-tertiary-text: #D0D0D0;
+      --color-palettes-button-primary-fill: #AEFB4F;
+      --color-palettes-button-primary-text: #000;
+      --color-palettes-background-color: #121212;
+    }
+
+    .body-style {
+      color: #D0D0D0 !important;
+    }
+
+    .heading-style {
+      color: #FFF !important;
+    }
+
+    .small-heading-style {
+      color: #FFF !important;
+    }
+
+    .button-style {
+      color: #000 !important;
+      background: #AEFB4F !important;
+    }
+
+    .warning-label {
+      color: #E8EC0D !important;
+    }
+
+    .warning-label-bg {
+      background-color: #161502 !important;
+      border-color: #E8EC0D !important;
+    }
+  }
+`}
           </style>
-          <meta name="color-scheme" content="light only" />
-          <meta name="supported-color-schemes" content="light only" />
         </Head>
         <Preview>{title}</Preview>
         {children}
@@ -174,7 +224,7 @@ export function Center({ children }: PropsWithChildren) {
 }
 
 export const headingStyle = {
-  color: 'var(--color-palettes-primary-text-fill, #FFF)',
+  color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Heading, ${fallbackFont}`,
   textAlign: 'center',
   fontSize: '28px',
@@ -184,7 +234,7 @@ export const headingStyle = {
 } satisfies CSSProperties
 
 export const smallHeadingStyle = {
-  color: 'var(--color-palettes-primary-text-fill, #FFF)',
+  color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Button, ${fallbackFont}`,
   textAlign: 'center',
   fontSize: '19px',
@@ -194,7 +244,7 @@ export const smallHeadingStyle = {
 } satisfies CSSProperties
 
 export const linkStyle = {
-  color: 'var(--color-palettes-lime-fill, #AEFB4F)',
+  color: 'var(--color-palettes-lime-fill, #AEFB4F) !important',
   fontFamily: `Body, ${fallbackFont}`,
   fontSize: '16px',
   fontStyle: 'normal',
@@ -204,7 +254,7 @@ export const linkStyle = {
 } satisfies CSSProperties
 
 export const bodyStyle = {
-  color: 'var(--color-palettes-button-tertiary-text, #D0D0D0)',
+  color: 'var(--color-palettes-button-tertiary-text, #D0D0D0) !important',
   textAlign: 'center',
   fontFamily: `Body, ${fallbackFont}`,
   fontSize: '16px',
@@ -214,7 +264,7 @@ export const bodyStyle = {
 } satisfies CSSProperties
 
 export const hintStyle = {
-  color: 'var(--color-palettes-button-tertiary-text, #D0D0D0)',
+  color: 'var(--color-palettes-button-tertiary-text, #D0D0D0) !important',
   textAlign: 'center',
   fontFamily: `Body, ${fallbackFont}`,
   fontSize: '14px',
@@ -224,7 +274,7 @@ export const hintStyle = {
 } satisfies CSSProperties
 
 export const highlightStyle = {
-  color: 'var(--color-palettes-primary-text-fill, #FFF)',
+  color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Body, ${fallbackFont}`,
   fontSize: '16px',
   fontStyle: 'normal',
@@ -236,8 +286,8 @@ export const buttonStyle = {
   fontFamily: `Button, ${fallbackFont}`,
   padding: '12px 20px',
   borderRadius: '8px',
-  background: 'var(--color-palettes-button-primary-fill, #AEFB4F)',
-  color: 'var(--color-palettes-button-primary-text, #000)',
+  background: 'var(--color-palettes-button-primary-fill, #AEFB4F) !important',
+  color: 'var(--color-palettes-button-primary-text, #000) !important',
   fontSize: '14px',
   fontStyle: 'normal',
   fontWeight: '500',