adjust email template for mobile

layerx-labs · Aug 16, 2024 · 6384b29 · 6384b29
1 parent f52a01a
commit 6384b29
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/src/integrations/send-grid/notifications/templates/handlebars/base-template.hbs b/src/integrations/send-grid/notifications/templates/handlebars/base-template.hbs
@@ -9,32 +9,34 @@
     {{> styles}}
 </head>
 <body id="body">
-<table id="container" cellspacing="0" cellpadding="0" border="0">
-    <tr>
-        <td>
-            {{> logo}}
-            <h1>{{notificationTitleHeading}}</h1>
-            <table id="action-card" cellspacing="0" cellpadding="0" border="0">
-                <tr>
-                    <td>
-                        <p>{{taskTitleParagraph}}</p>
-                        <a id="action-button" href="{{actionHref}}">View task</a>
-                    </td>
-                </tr>
-            </table>
-            <div id="notification-manage">Manage your BEPRO notifications</div>
-            <table id="links" cellspacing="0" cellpadding="0" border="0">
-                <tr>
-                    <td>
-                        <a href="https://app.bepro.network" class="link-item">App</a>
-                        <a href="https://bepro.network" class="link-item">Website</a>
-                        <a href="https://discord.gg/layerx" class="link-item">Discord</a>
-                        <a href="https://twitter.com/bepronet" class="link-item">Twitter</a>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
-</table>
+    <div class="main">
+        <table id="container" cellspacing="0" cellpadding="0" border="0">
+            <tr>
+                <td>
+                    {{> logo}}
+                    <h1>{{notificationTitleHeading}}</h1>
+                    <table id="action-card" cellspacing="0" cellpadding="0" border="0">
+                        <tr>
+                            <td>
+                                <p>{{taskTitleParagraph}}</p>
+                                <a id="action-button" href="{{actionHref}}">View task</a>
+                            </td>
+                        </tr>
+                    </table>
+                    <div id="notification-manage">Manage your BEPRO notifications</div>
+                    <table id="links" cellspacing="0" cellpadding="0" border="0">
+                        <tr>
+                            <td>
+                                <a href="https://app.bepro.network" class="link-item">App</a>
+                                <a href="https://bepro.network" class="link-item">Website</a>
+                                <a href="https://discord.gg/layerx" class="link-item">Discord</a>
+                                <a href="https://twitter.com/bepronet" class="link-item">Twitter</a>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </div>
 </body>
 </html>
diff --git a/src/integrations/send-grid/notifications/templates/handlebars/partials/styles.hbs b/src/integrations/send-grid/notifications/templates/handlebars/partials/styles.hbs
@@ -1,13 +1,29 @@
 <style>
-    #body {
-        padding: 4.4375em 10.25em;
+   .main {
+        width: 100%;
         background: #09090B;
         font-family: 'Inter', sans-serif;
     }
 
+    @media only screen and (min-width: 601px) {
+        #container {
+            padding: 4.4375em 10.25em;
+        }
+    }
+
+     @media only screen and (max-width: 600px) {
+        #container {
+            padding: 2em;
+        }
+
+        h1 {
+            font-size: 1rem;
+        }
+    }
+
     #container {
         width: 100%;
-        padding: 4.4375em 10.25em;
+        box-sizing: border-box;
         font-family: 'Inter', sans-serif;
         background-color: #09090B;
     }
@@ -61,6 +77,7 @@
         font-style: normal;
         font-weight: 500;
         line-height: 140%;
+        text-decoration: none;
     }
 
     #notification-manage {
@@ -71,13 +88,21 @@
         line-height: 1.05em;
     }
 
+    #notification-manage {
+        margin-top: 8px;
+    }
+
+    #links {
+        margin-top: 8px;
+    }
+
     #links a {
         color: rgba(255, 255, 255, 0.60);
         font-size: 0.75em;
         font-style: normal;
         font-weight: 500;
         line-height: 1.05em;
-        text-decoration: none;
+        text-decoration: underline;
         margin: 0 1em;
     }