diff --git a/changelog/0.51.md b/changelog/0.51.md new file mode 100644 index 000000000..e69de29bb diff --git a/packages/twenty-emails/src/common-style.ts b/packages/twenty-emails/src/common-style.ts index 9a66772c0..082578a40 100644 --- a/packages/twenty-emails/src/common-style.ts +++ b/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%)`, - radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, + button: grayScale.gray60, transparent: { medium: 'rgba(0, 0, 0, 0.08)', light: 'rgba(0, 0, 0, 0.04)', diff --git a/packages/twenty-emails/src/components/CallToAction.tsx b/packages/twenty-emails/src/components/CallToAction.tsx index c5e71911c..3a86dcbb0 100644 --- a/packages/twenty-emails/src/components/CallToAction.tsx +++ b/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 = { diff --git a/packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx b/packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx index f47532a85..66f735484 100644 --- a/packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx +++ b/packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx @@ -42,10 +42,13 @@ export const CleanSuspendedWorkspaceEmail = ({
+
+
+
); }; diff --git a/packages/twenty-emails/src/emails/password-reset-link.email.tsx b/packages/twenty-emails/src/emails/password-reset-link.email.tsx index 0511885d2..f3a0b4c2f 100644 --- a/packages/twenty-emails/src/emails/password-reset-link.email.tsx +++ b/packages/twenty-emails/src/emails/password-reset-link.email.tsx @@ -21,7 +21,6 @@ export const PasswordResetLinkEmail = ({ return ( - <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> ); }; diff --git a/packages/twenty-emails/src/emails/password-update-notify.email.tsx b/packages/twenty-emails/src/emails/password-update-notify.email.tsx index 3129c92d4..541293ecd 100644 --- a/packages/twenty-emails/src/emails/password-update-notify.email.tsx +++ b/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> ); }; diff --git a/packages/twenty-emails/src/emails/send-email-verification-link.email.tsx b/packages/twenty-emails/src/emails/send-email-verification-link.email.tsx index b29864038..a81409266 100644 --- a/packages/twenty-emails/src/emails/send-email-verification-link.email.tsx +++ b/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> ); }; diff --git a/packages/twenty-emails/src/emails/test.email.tsx b/packages/twenty-emails/src/emails/test.email.tsx index c4d05840a..a5719a576 100644 --- a/packages/twenty-emails/src/emails/test.email.tsx +++ b/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> ); }; diff --git a/packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx b/packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx index fd33ab3e6..1fc25586e 100644 --- a/packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx +++ b/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> ); }; diff --git a/packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx b/packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx index bc8a3886d..f75889780 100644 --- a/packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx +++ b/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> ); };