Updated several emails template styles (#11797)

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

packages/twenty-emails/src/common-style.ts

@@ -54,8 +54,7 @@ export const emailTheme = {
   },
   background: {
     colors: { highlight: grayScale.gray15 },
-    radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+    button: grayScale.gray60,
-    radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
     transparent: {
       medium: 'rgba(0, 0, 0, 0.08)',
       light: 'rgba(0, 0, 0, 0.04)',

packages/twenty-emails/src/components/CallToAction.tsx

@@ -3,15 +3,16 @@ import { Button } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
 
 const callToActionStyle = {
-  display: 'flex',
+  display: 'inline-flex',
   padding: '8px 32px',
   borderRadius: emailTheme.border.radius.md,
   border: `1px solid ${emailTheme.background.transparent.light}`,
-  background: emailTheme.background.radialGradient,
+  background: emailTheme.background.button,
   boxShadow: `0px 2px 4px 0px ${emailTheme.background.transparent.light}, 0px 0px 4px 0px ${emailTheme.background.transparent.medium}`,
   color: emailTheme.font.colors.inverted,
   fontSize: emailTheme.font.size.md,
   fontWeight: emailTheme.font.weight.bold,
+  width: 'auto',
 };
 
 type CallToActionProps = {

packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx

@@ -42,10 +42,13 @@ export const CleanSuspendedWorkspaceEmail = ({
         <br />
         <Trans id="If you wish to use Twenty again, you can create a new workspace." />
       </MainText>
+      <br />
       <CallToAction
         href="https://app.twenty.com/"
         value={i18n._('Create a new workspace')}
       />
+      <br />
+      <br />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/password-reset-link.email.tsx

@@ -21,7 +21,6 @@ export const PasswordResetLinkEmail = ({
   return (
     <BaseEmail locale={locale}>
       <Title value={i18n._('Reset your password 🗝')} />
-      <CallToAction href={link} value={i18n._('Reset')} />
       <MainText>
         <Trans
           id="This link is only valid for the next {duration}. If the link does not work, you can use the login verification link directly:"
@@ -30,6 +29,10 @@ export const PasswordResetLinkEmail = ({
         <br />
         <Link href={link} value={link} />
       </MainText>
+      <br />
+      <CallToAction href={link} value={i18n._('Reset')} />
+      <br />
+      <br />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/password-update-notify.email.tsx

@@ -41,7 +41,10 @@ export const PasswordUpdateNotifyEmail = ({
         <Trans id="If you did not initiate this change, please contact your workspace owner immediately." />
         <br />
       </MainText>
+      <br />
       <CallToAction value={i18n._('Connect to Twenty')} href={link} />
+      <br />
+      <br />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/send-email-verification-link.email.tsx

@@ -18,12 +18,13 @@ export const SendEmailVerificationLinkEmail = ({
   return (
     <BaseEmail width={333} locale={locale}>
       <Title value={i18n._('Confirm your email address')} />
+      <MainText>
+        <Trans id="Thanks for registering for an account on Twenty! Before we get started, we just need to confirm that this is you. Click below to verify your email address." />
+      </MainText>
+      <br />
       <CallToAction href={link} value={i18n._('Verify Email')} />
       <br />
       <br />
-      <MainText>
-        <Trans id="Thanks for registering for an account on Twenty! Before we get started, we just need to confirm that this is you. Click above to verify your email address." />
-      </MainText>
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/test.email.tsx

@@ -13,6 +13,8 @@ export const TestEmail = ({ locale }: TestEmailProps) => {
   return (
     <BaseEmail locale={locale}>
       <Title value={i18n._('Test email')} />
+      <br />
+      <br />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx

@@ -76,6 +76,7 @@ export const SendApprovedAccessDomainValidation = ({
         {workspace.name ? <HighlightedText value={workspace.name} /> : <></>}
         <CallToAction href={link} value={i18n._('Validate domain')} />
       </HighlightedContainer>
+      <br />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx

@@ -54,10 +54,13 @@ export const WarnSuspendedWorkspaceEmail = ({
           values={{ remainingDays, dayOrDays }}
         />
       </MainText>
+      <br />
       <CallToAction
         href="https://app.twenty.com/settings/billing"
         value={i18n._('Update your subscription')}
       />
+      <br />
+      <br />
     </BaseEmail>
   );
 };