refactor(email): unify email template shell between production and Storybook
This commit is contained in:
Rotimi Best
@@ -9,7 +9,7 @@ export const getDefaultTemplate = (content: string): string =>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #F6F9FF;
|
||||
background-color: #F0F5FF;
|
||||
font-family: "Poppins", "Helvetica Neue", "Segoe UI", Helvetica,
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
@@ -38,15 +38,6 @@ export const getDefaultTemplate = (content: string): string =>
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
width: initial;
|
||||
margin: 0 auto;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.brandcolor {
|
||||
color: #00c4b8;
|
||||
}
|
||||
@@ -66,37 +57,26 @@ export const getDefaultTemplate = (content: string): string =>
|
||||
|
||||
.button {
|
||||
margin-top: 12px;
|
||||
background: #0233BD;
|
||||
border-radius: 8px;
|
||||
background: #1D4EE2;
|
||||
border-radius: 6px;
|
||||
text-decoration: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
padding: 10px 30px;
|
||||
padding: 8px 16px;
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #0233BD;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
padding: 5px 30px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid rgb(221, 208, 208);
|
||||
max-width: 525px;
|
||||
margin: 0 auto;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -104,86 +84,48 @@ export const getDefaultTemplate = (content: string): string =>
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.gutter img {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wrap {
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="
|
||||
background-color: #F6F9FF;
|
||||
background-color: #F0F5FF;
|
||||
font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica,
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
padding: 20px 0;
|
||||
padding: 20px 15px;
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
">
|
||||
<div class="gutter">
|
||||
<a href="https://classroomio.com" target="_blank">
|
||||
<img src="https://brand.cdn.clsrio.com/cio-bg-transparent.png" alt="ClassroomIO Logo" /></a>
|
||||
</div>
|
||||
<div class="wrap" style="
|
||||
background-color: #fff;
|
||||
padding: 40px 30px;
|
||||
max-width: 525px;
|
||||
margin: 0 auto;
|
||||
">
|
||||
${content}
|
||||
</div>
|
||||
|
||||
<div class="footer" style="
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 30px;
|
||||
background-color: #0542CC;
|
||||
max-width: 525px;
|
||||
margin: 0 auto;">
|
||||
<p>Find us on</p>
|
||||
<table class="socialicons">
|
||||
<tr>
|
||||
<td>
|
||||
<a target="_blank" href="https://twitter.com/classroomio"><img title="X"
|
||||
src="https://brand.cdn.clsrio.com/socials/twitter.png" alt="X" width="19" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<a target="_blank" href="https://www.youtube.com/@ClassroomIO"><img title="Youtube"
|
||||
src="https://brand.cdn.clsrio.com/socials/youtube.png" alt="Youtube" width="24" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<a target="_blank" href="https://www.facebook.com/classroomiohq"><img title="Facebook"
|
||||
src="https://brand.cdn.clsrio.com/socials/facebook.png" alt="Facebook" width="24" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="padding-top: 8px; line-height: initial">
|
||||
ClassroomIO ${new Date().getFullYear()}. All rights reserved.<br />
|
||||
<a style="text-decoration: none" href="https://classroomio.com/tos"
|
||||
target="_blank">Terms</a>
|
||||
|
|
||||
<a style="text-decoration: none"
|
||||
href="https://classroomio.com/privacy" target="_blank">Privacy
|
||||
Policy</a>
|
||||
</p>
|
||||
<div style="background-color:#fff;max-width:525px;margin:0 auto;border-radius:4px;">
|
||||
<div style="padding:10px;border-bottom:1px solid #f0f0f0;">
|
||||
<a href="https://classroomio.com" target="_blank">
|
||||
<img src="https://brand.cdn.clsrio.com/cio-bg-transparent.png" alt="ClassroomIO" width="130" style="width:130px;height:auto;display:block;" />
|
||||
</a>
|
||||
</div>
|
||||
<div style="padding:10px 15px;">
|
||||
${content}
|
||||
</div>
|
||||
<div class="footer" style="
|
||||
text-align:center;
|
||||
font-size:11px;
|
||||
color:#94a3b8;
|
||||
padding:24px 30px;
|
||||
border-top:1px solid #f0f0f0;">
|
||||
ClassroomIO ${new Date().getFullYear()}. All rights reserved.
|
||||
<br />
|
||||
<a href="https://classroomio.com" style="color:#94a3b8;text-decoration:none;">Website</a>
|
||||
·
|
||||
<a href="https://classroomio.com/tos" style="color:#94a3b8;text-decoration:none;">Terms</a>
|
||||
·
|
||||
<a href="https://classroomio.com/privacy" style="color:#94a3b8;text-decoration:none;">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@cio/certificates": "workspace:*",
|
||||
"@cio/email": "workspace:*",
|
||||
"@cio/ui": "workspace:*",
|
||||
"@cio/utils": "workspace:*",
|
||||
"svelte-inview": "^4.0.4",
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { getDefaultTemplate } from '@cio/email';
|
||||
|
||||
// ─── Sample content for each use case ────────────────────────────────────────
|
||||
|
||||
const VERIFY_EMAIL_CONTENT = `
|
||||
<p><strong>Hey there 👋</strong></p>
|
||||
<p>Welcome to ClassroomIO! In order to get your account ready for usage, we need to verify your email.</p>
|
||||
<p>We do this to make sure we don't get fake user emails in our signup. To get the best out of our product, we'll need you to verify your email by clicking the <strong>Verify</strong> button below.</p>
|
||||
<div><a class="button" href="#">Verify</a></div>
|
||||
`;
|
||||
|
||||
const WELCOME_CONTENT = `
|
||||
<p>Dear Alex,</p>
|
||||
<p>My name is Best, the founder of ClassroomIO. I saw you signed up, any questions so far?</p>
|
||||
<p>Would you like to get a walkthrough of the platform in a 30 minute product demo? It's free and we won't try to sell you anything, just want to learn from your use case and show you all the cool features and flows we thought about.</p>
|
||||
<p>Interested? just book a 30-minute demo slot in our calendar!</p>
|
||||
<div><a class="button" href="https://classroomio.com/demo">Book demo</a></div>
|
||||
<p>PS: I reply personally to every email. We don't have an outsourced support team at the other end of the globe.. ;-)</p>
|
||||
`;
|
||||
|
||||
const FORGOT_PASSWORD_CONTENT = `
|
||||
<p>Hello Jane,</p>
|
||||
<p>You are receiving this email because you have requested a password reset for your ClassroomIO account.</p>
|
||||
<p>Please click the button below to reset your password:</p>
|
||||
<div><a class="button" href="#">Reset my password</a></div>
|
||||
<p>PS: If you did not initiate this request, reply to this email or write to [email protected] so we can look into a possible attempt to breach your account.</p>
|
||||
`;
|
||||
|
||||
const COURSE_WELCOME_CONTENT = `
|
||||
<p>Hi there,</p>
|
||||
<p>You now have access to <strong>Introduction to Web Development</strong> in <strong>Acme Coding School</strong>.</p>
|
||||
<p><a href="#">Sign in to ClassroomIO</a> to open the course and get started.</p>
|
||||
<p>If you run into any issues, reach out to your instructor(s).</p>
|
||||
<p>Cheers,</p>
|
||||
<p>Acme Coding School</p>
|
||||
`;
|
||||
|
||||
const INVITE_TEACHER_CONTENT = `
|
||||
<p>Hey there,</p>
|
||||
<p>You have been invited to join <strong>Acme Coding School</strong> on ClassroomIO as <strong>Admin</strong> 🎉🎉🎉.</p>
|
||||
<p>This invite expires on <strong>Jul 15, 2026</strong> (UTC).</p>
|
||||
<div><a class="button" href="#">Accept Invitation</a></div>
|
||||
`;
|
||||
|
||||
const NEWSFEED_POST_CONTENT = `
|
||||
<p><strong>Sarah Johnson</strong> made a post in a course you are taking: <strong>Advanced JavaScript</strong>.</p>
|
||||
<div style="font-style:italic;margin-top:10px;padding:12px;border-left:3px solid #0233BD;background:#f8fafc;">
|
||||
Don't forget — the final project is due next Friday! Make sure to submit your repository link before the deadline. Let me know if you have any questions.
|
||||
</div>
|
||||
<div><a class="button" href="#">View post</a></div>
|
||||
`;
|
||||
|
||||
const STUDENT_JOINED_CONTENT = `
|
||||
<p>Hi amazing tutor,</p>
|
||||
<p>Congratulations 🎉, a new student: <strong>Alex Rivera ([email protected])</strong> has joined a course you are teaching: <strong>Advanced JavaScript</strong>.</p>
|
||||
<p>We hope they have a great experience learning from the best (YOU).</p>
|
||||
<p>If you run into any issues, please don't fail to reach out to us, we'd love to make your teaching experience as easy as possible.</p>
|
||||
`;
|
||||
|
||||
// ─── Exported email HTML strings ──────────────────────────────────────────
|
||||
|
||||
export const verifyEmailHtml = getDefaultTemplate(VERIFY_EMAIL_CONTENT);
|
||||
export const forgotPasswordHtml = getDefaultTemplate(FORGOT_PASSWORD_CONTENT);
|
||||
export const welcomeHtml = getDefaultTemplate(WELCOME_CONTENT);
|
||||
export const courseWelcomeHtml = getDefaultTemplate(COURSE_WELCOME_CONTENT);
|
||||
export const inviteTeacherHtml = getDefaultTemplate(INVITE_TEACHER_CONTENT);
|
||||
export const newsfeedPostHtml = getDefaultTemplate(NEWSFEED_POST_CONTENT);
|
||||
export const studentJoinedHtml = getDefaultTemplate(STUDENT_JOINED_CONTENT);
|
||||
Reference in New Issue
Block a user