Further Iterations on Email Template UI (#624)

* working on email template using react email * done with email template * resolve biome lint issue * remove unused lines * biome linting * update jest module file extension * done with design responsiveness * biome linting * update template style * restructure email folder to help the email preview work * done with email template * resolve image responsiveness * biome linting * revert resolution config * update package.json file * done improving email template --------- Co-authored-by: AshakaE <ashakaegerega@gmail.com>
EveripediaNetwork · Feb 21, 2025 · 3f3457a · 3f3457a
1 parent 290f41b
commit 3f3457a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/emails/components/content.tsx b/emails/components/content.tsx
@@ -205,14 +205,21 @@ export default function Content({
                     {title}
                   </Text>
                   <Text
-                    style={{ margin: 0 }}
+                    style={{ 
+                      margin: 0,
+                      overflow: 'hidden',
+                      display: '-webkit-box',
+                      WebkitBoxOrient: 'vertical',
+                      WebkitLineClamp: 3,
+                     }}
                     className="text-base sm:text-xl text-foreground dark:text-foreground-dark"
                   >
                     {summary}
                   </Text>
                   <Button
-                    className="border-1 border-solid border-border dark:border-border-dark bg-secondary dark:bg-secondary-dark font-medium text-base px-7 sm:px-10 rounded-md sm:mt-3 py-3 sm:py-4 mt-3 text-secondary-foreground dark:text-secondary-foreground-dark"
+                    className="border-1 border-solid border-border dark:border-border-dark bg-secondary dark:bg-secondary-dark font-medium text-base sm:text-lg text-center w-[176px] sm:w-[193px] rounded-md sm:mt-3 py-3 sm:py-4 mt-3 text-secondary-foreground dark:text-secondary-foreground-dark"
                     href={wikiUrl}
+                    style={{lineHeight: '0 !important'}}
                   >
                     Read now
                   </Button>

diff --git a/emails/components/footer.tsx b/emails/components/footer.tsx
@@ -9,16 +9,16 @@ export default function Footer({iqUrl, unsubscribeLink}: {iqUrl: string, unsubsc
         <Text className="text-center mx-auto">
           <Link href="https://iq.wiki/categories" className="text-brand dark:text-brand-dark">
             Explore
-          </Link>{' '}
-          -{' '}
+          </Link>
+          <span className='px-2'>-</span>
           <Link href="https://iq.wiki/#tags" className="text-brand dark:text-brand-dark">
             Tags
-          </Link>{' '}
-          -{' '}
+          </Link>
+          <span className='px-2'>-</span>
           <Link href="https://iq.wiki/events" className="text-brand dark:text-brand-dark">
             Events
-          </Link>{' '}
-          -{' '}
+          </Link>
+          <span className='px-2'>-</span>
           <Link href="https://iqai.com/" className="text-brand dark:text-brand-dark">
             IQ AI
           </Link>

diff --git a/emails/index.tsx b/emails/index.tsx
@@ -83,7 +83,7 @@ const Email = ({ wiki, wikiImage, url, suggestions, iqUrl, unsubscribeLink }: Em
               style={{ margin: 0 }}
               className="text-base sm:text-xl text-center my-0 text-foreground dark:text-foreground-dark"
             >
-              What’s new and what to read next. 👀
+              What's new and what to read next. 👀
             </Text>
           </Section>
           <Section className="bg-[#FFFFFF] dark:bg-card-dark max-w-full w-full p-3 sm:p-6 border border-solid border-border dark:border-border-dark mb-3 sm:mb-6 rounded-[12px] sm:rounded-3xl mt-3 sm:mt-6">
@@ -109,12 +109,13 @@ const Email = ({ wiki, wikiImage, url, suggestions, iqUrl, unsubscribeLink }: Em
               <span className="text-brand dark:text-brand-dark font-semibold">
                 {wiki}
               </span>{' '}
-              has been updated. You don’t want to miss. it. Click below to check
+              has been updated. You don't want to miss. it. Click below to check
               out the lastest information.
             </Text>
             <Button
-              className="bg-brand dark:bg-brand-dark text-base px-7 sm:px-10 rounded-md sm:mt-3 py-3 sm:py-4 mt-3 text-primary-foreground"
+              className="bg-brand dark:bg-brand-dark font-medium text-base sm:text-lg text-center w-[176px] sm:w-[193px] rounded-md sm:mt-3 py-3 sm:py-4 mt-3 text-primary-foreground"
               href={url}
+              style={{lineHeight: '0 !important'}}
             >
               Check it out
             </Button>