Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(email): CSS change change for OTP emails and auth side image #2653

Merged
merged 5 commits into from
Aug 30, 2023
Merged

fix(email): CSS change change for OTP emails and auth side image #2653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d208ca8
fix(email): CSS change change for OTP emails and auth side image
Cosmin-Parvulescu Aug 30, 2023
48151b5
Reverted breakpoint for side image
Cosmin-Parvulescu Aug 30, 2023
bc696ab
Adapted logo
Cosmin-Parvulescu Aug 30, 2023
2000992
Added div bg image hack
Cosmin-Parvulescu Aug 30, 2023
8244fa0
Updated spacing
Cosmin-Parvulescu Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/console/app/routes/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default function Onboarding() {
>
<Outlet context={{ connectedEmails, PASSPORT_URL, currentPage }} />
</div>
<div className="basis-3/5 h-[100dvh] w-full hidden 2xl:flex justify-end items-center bg-gray-50 dark:bg-gray-800 overflow-hidden">
<div className="basis-3/5 h-[100dvh] w-full hidden lg:flex justify-end items-center bg-gray-50 dark:bg-gray-800 overflow-hidden">
<img
className="max-h-fit mt-[10%]"
alt="onboarding"
Expand Down
4 changes: 2 additions & 2 deletions apps/console/app/routes/spuorg.enroll.$groupID.$invitationCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export default () => {
>
<div
className={
'basis-2/5 h-[100dvh] w-full hidden 2xl:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
}
style={{
backgroundImage: `url(${sideGraphics})`,
Expand All @@ -228,7 +228,7 @@ export default () => {
></div>
<div
className={
'basis-full basis-full 2xl:basis-3/5 flex flex-col justify-center items-center'
'basis-full basis-full lg:basis-3/5 flex flex-col justify-center items-center'
}
>
<div className="bg-white rounded rounded-lg border p-6 max-w-lg">
Expand Down
4 changes: 2 additions & 2 deletions apps/passport/app/routes/authenticate/$clientId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default () => {
>
<div
className={
'basis-2/5 h-[100dvh] w-full hidden 2xl:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
}
style={{
backgroundImage: `url(${
Expand All @@ -91,7 +91,7 @@ export default () => {
backgroundRepeat: 'no-repeat',
}}
></div>
<div className={'basis-full basis-full 2xl:basis-3/5'}>
<div className={'basis-full basis-full lg:basis-3/5'}>
<Outlet context={{ clientId, appProps, rollup_action, dark }} />
</div>
</div>
Expand Down
118 changes: 45 additions & 73 deletions platform/email/emailTemplate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,47 @@ import { type EmailPlans } from './src/jsonrpc/methods/sendSuccesfullPaymentNoti

export const darkModeStyles = `
body {
background-color: #1A202C;
color: #E2E8F0;
background-color: #1A202C !important;
color: #E2E8F0 !important;
}
.content, .container {
background-color: #1A202C;
background-color: #1A202C !important;
}
.divider {
border-bottom-color: #4A5568;
border-bottom-color: #4A5568 !important;
}
#passcode {
background-color: #2D3748;
background-color: #2D3748 !important;
}
.footer-links {
color: #E2E8F0;
border-bottom-color: #E2E8F0;
color: #E2E8F0 !important;
border-bottom-color: #E2E8F0 !important;
}
.vl {
border-color: #E2E8F0;
border-color: #E2E8F0 !important;
}
`

export const lightModeStyles = `
body {
background-color: #ffffff;
color: #6b7280;
background-color: #ffffff !important;
color: #6b7280 !important;
}
.content, .container {
background-color: #ffffff;
background-color: #ffffff !important;
}
.divider {
border-bottom-color: #e5e7eb;
border-bottom-color: #e5e7eb !important;
}
#passcode {
background-color: #f3f4f6;
background-color: #f3f4f6 !important;
}
.footer-links {
color: #6b7280;
border-bottom-color: #6b7280;
color: #6b7280 !important;
border-bottom-color: #6b7280 !important;
}
.vl {
border-color: #6b7280;
border-color: #6b7280 !important;
}
`

Expand Down Expand Up @@ -75,6 +75,7 @@ const EmailTemplateBase = (
rel="stylesheet"
/>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

<style type="text/css">
body,
.container,
Expand All @@ -96,13 +97,6 @@ const EmailTemplateBase = (
border-radius: 8px;
}

.logo {
display: block
max-width: 375px;
max-height: 48px;
margin-bottom: 37px;
}

.heading,
.heading-logo {
font-size: 36px;
Expand Down Expand Up @@ -162,69 +156,54 @@ const EmailTemplateBase = (
${darkModeStyles}
}
</style>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
</head>

<body class="adaptive">
<div class="container adaptive">
<div class="content adaptive">
<div class="heading-logo">
<img class="logo" src="${logoURL}" alt="" style="display:block; max-width: 375px; max-height: 48px;"/>
</div>
<body class="adaptive" style="font-family: 'Inter', sans-serif; background-color: #ffffff; color: #6b7280;">
<div class="container adaptive" style="display: block; width: 98%; text-align: center; background-color: #ffffff;">
<div class="content adaptive" style="display: inline-block; vertical-align: top; text-align: left; max-width: 375px; border-radius: 8px; background-color: #ffffff;">
<div style="position: relative; width: 375px; height: 48px; background-image: url(${logoURL}); background-size: contain; background-repeat: no-repeat; background-position: left center;" />
<div style="height: 48px"></div>
${content}
<div class="divider"></div>
<div style="width: 100%">
<div class="divider" style="border-bottom: 1px solid #e5e7eb; width: 100%; margin-bottom: 10px;"></div>
<div style="width: 100%;">
<a
class="footer-links"
style="font-size: 12px; text-decoration: none; border-bottom: 1px solid #6b7280; margin-right: 10px; color: #6b7280; width: auto;"
href="${termsURL}"
target="_blank"
rel="noreferrer"
>Terms & Conditions</a
>
<div class="vl"></div>
>Terms & Conditions</a>
<div class="vl" style="border: 0.5px solid #6b7280; display: inline; margin-right: 15px;"></div>
<a
class="footer-links"
style="font-size: 12px; text-decoration: none; border-bottom: 1px solid #6b7280; margin-right: 10px; color: #6b7280; width: auto;"
href="${privacyURL}"
target="_blank"
rel="noreferrer"
>Privacy Policy</a
>
>Privacy Policy</a>
${
contactURL && contactURL !== ''
? `
<div class="vl"></div>
<div class="vl" style="border: 0.5px solid #6b7280; display: inline; margin-right: 15px;"></div>
<a
class="footer-links"
style="font-size: 12px; text-decoration: none; border-bottom: 1px solid #6b7280; margin-right: 10px; color: #6b7280; width: auto;"
href="${contactURL}"
target="_blank"
rel="noreferrer"
>Contact Us</a
>`
>Contact Us</a>`
: ''
}
</div>

${
address && address !== ''
? `
<pre
style="
font-size: 12px;
line-height: 16px;
color: #6b7280;
margin-bottom: 4px;
margin-top: 10px;
"
style="font-size: 12px; line-height: 16px; color: #6b7280; margin-bottom: 4px; margin-top: 10px;"
>${address}</pre>`
: ''
}
<p
style="
font-size: 12px;
line-height: 20px;
color: #6b7280;
margin-bottom: 10px;
"
style="font-size: 12px; line-height: 20px; color: #6b7280; margin-bottom: 10px;"
>
All rights reserved.
</p>
Expand All @@ -235,22 +214,16 @@ const EmailTemplateBase = (
style="max-width: 11px; display: inline-block"
/>
<p
style="
font-size: 12px;
line-height: 12px;
color: #9ca3af;
display: inline-block;
margin-bottom: 10px;
"
style="font-size: 12px; line-height: 12px; color: #9ca3af; display: inline-block; margin-bottom: 10px;"
>
Powered by
<a
href="https://rollup.id"
target="_blank"
rel="noreferrer"
class="powered-by"
>rollup.id</a
>
style="font-size: 12px; text-decoration: none;"
>rollup.id</a>
</p>
</div>
</div>
Expand All @@ -265,15 +238,14 @@ export const EmailTemplateOTP = (
params: EmailTemplateParams
): EmailContent => {
const content = `
<div class="heading">Confirm Your Email Address</div>
<p>Please copy the code below into the email verification screen.</p>
<div id="passcode">${passcode}</div>
<p>Please note: the code will be valid for the next 10 minutes.</p>
<p>
If you didn&apos;t request this email, there&apos;s nothing to worry
about - you can safely ignore it.
</p>
`
<div class="heading" style="font-size: 36px; font-weight: bold; line-height: 44px; margin-bottom: 16px;">Confirm Your Email Address</div>
<p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please copy the code below into the email verification screen.</p>
<div id="passcode" style="width: 100%; text-align: center; font-size: 46px; font-weight: bold; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; padding: 15px 0; background-color: #f3f4f6;">${passcode}</div>
<p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please note: the code will be valid for the next 10 minutes.</p>
<p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">
If you didn&apos;t request this email, there&apos;s nothing to worry about - you can safely ignore it.
</p>
`

const subject = `Your ${params.appName ?? `Rollup ID`} one-time passcode`

Expand Down
Loading