refactor(email): unify email template shell between production and Storybook

packages/email/src/templates/default.ts

@@ -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>
+      &nbsp;&middot;&nbsp;
+      <a href="https://classroomio.com/tos" style="color:#94a3b8;text-decoration:none;">Terms</a>
+      &nbsp;&middot;&nbsp;
+      <a href="https://classroomio.com/privacy" style="color:#94a3b8;text-decoration:none;">Privacy</a>
+    </div>
   </div>
 </body>