Merge pull request #235 from layerx-labs/BEPRO-2250-adapt-email-templ…

…ates-for-mobile Bepro 2250 adapt email templates for mobile
layerx-labs · Aug 26, 2024 · d9ec005 · d9ec005
2 parents 21111f0 + 67b393e
commit d9ec005
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 57 deletions.
diff --git a/src/actions/get-pullrequest-created-event.ts b/src/actions/get-pullrequest-created-event.ts
@@ -79,7 +79,7 @@ export async function action(block: DecodedLog<BountyPullRequestCreatedEvent['re
       bountyId: dbBounty.id, bountyContractId: dbBounty.contractId,
       deliverableId: dbDeliverable.id, deliverableContractId: pullRequestId,
       actor: pullRequest.creator,
-      title: dbBounty.title,
+      title: dbDeliverable.title,
     }
   }
 

diff --git a/src/actions/get-pullrequest-ready-for-review.ts b/src/actions/get-pullrequest-ready-for-review.ts
@@ -105,7 +105,7 @@ export async function action(block: DecodedLog<BountyPullRequestReadyForReviewEv
         bountyId: dbBounty.id, bountyContractId: dbBounty.contractId,
         deliverableId: dbDeliverable.id, deliverableContractId: pullRequestId,
         actor: pullRequest.creator,
-        title: dbBounty.title,
+        title: dbDeliverable.title,
       }
     };
 

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,40 @@
     {{> 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>
+
+                    <table id="links" cellspacing="0" cellpadding="0" border="0">
+                        <tr>
+                            <td>
+                                <a href="https://app.bepro.network/dashboard" id="manage-link">Manage your Bepro Notifications</a>
+                            </td>
+                        </tr>
+
+                        <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/logo.hbs b/src/integrations/send-grid/notifications/templates/handlebars/partials/logo.hbs
@@ -1 +1 @@
-<img src="https://app.bepro.network/images/bepro-icon.png" alt="Bepro Logo" height="40" width="40"/>
+<img src="https://app.bepro.network/images/Bepro_Logo_Light.svg" alt="Bepro Logo" height="24" width="90"/>
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,36 +1,61 @@
 <style>
-    #body {
-        padding: 4.4375em 10.25em;
+    @media only screen and (min-width: 601px) {
+        #container {
+            padding: 4.4375rem 10.25rem;
+        }
+
+        html {
+            font-size: 16px;
+        }
+    }
+
+     @media only screen and (max-width: 600px) {
+        #container {
+            padding: 2.5rem;
+        }
+
+        html {
+            font-size: 12px;
+        }
+    }
+
+    .main {
+        width: 100%;
         background: #09090B;
         font-family: 'Inter', sans-serif;
+        min-height: 700px;
     }
 
     #container {
         width: 100%;
-        padding: 4.4375em 10.25em;
+        box-sizing: border-box;
         font-family: 'Inter', sans-serif;
         background-color: #09090B;
     }
 
-    img {
-        margin-bottom: 32px;
-    }
-
     h1 {
         color: #FFF;
-        font-size: 1.5em;
+        font-size: 1.125rem;
         font-style: normal;
         font-weight: 500;
-        line-height: 2.1em;
+        line-height: 1.575rem;
+        margin: 2rem 0;
     }
 
     p {
         color: #FFF;
         text-align: center;
-        font-size: 1.25em;
+        font-size: .875rem;
         font-style: normal;
-        font-weight: 500;
-        line-height: 2.25em;
+        font-weight: 400;
+        line-height: 1.575rem;
+    }
+
+    p + p {
+        margin-top: .5rem;
+    }
+    p + a {
+        margin-top: 1.25rem;
     }
 
     #action-card,
@@ -42,47 +67,68 @@
     }
 
     #action-card {
-        padding: 2em;
-        border-radius: 1em;
-        border: 1px solid rgba(250, 250, 250, 0.10);
+        padding: 20px;
+        border-radius: 10px;
+        border: 1px solid #FAFAFA1A;
         background: #18181B;
     }
 
     #action-button {
         display: inline-block;
-        padding: 0.5em 1em;
-        border-radius: 0.5em;
-        border: 1px solid rgba(250, 250, 250, 0.20);
+        padding: 0.5rem 1rem;
+        border-radius: 8px;
+        border: 1px solid #FAFAFA33;
         background: #6B65FF;
-        box-shadow: 0 0 0 1px #09090B, 0 1px 1px 0 rgba(250, 250, 250, 0.20) inset;
+        box-shadow: 0px 0px 0px 1px #09090B;
+        box-shadow: 0px 1px 1px 0px #FAFAFA33 inset;
         color: white;
         font-feature-settings: 'cv05' on;
-        font-size: 1em;
+        font-size: .875rem;
         font-style: normal;
         font-weight: 500;
-        line-height: 140%;
+        line-height: 1.225rem;
+        text-decoration: none;
     }
 
     #notification-manage {
         color: #6B65FF;
-        font-size: 0.75em;
+        font-size: 0.75rem;
         font-style: normal;
         font-weight: 500;
-        line-height: 1.05em;
+        line-height: 1.05rem;
+    }
+
+    #links {
+        margin-top: 2rem;
+    }
+
+    #links tr + tr td {
+        padding-top: 2rem;
     }
 
-    #links a {
+    .link-item {
         color: rgba(255, 255, 255, 0.60);
-        font-size: 0.75em;
+        font-size: 0.75rem;
         font-style: normal;
         font-weight: 500;
-        line-height: 1.05em;
+        line-height: 1.05rem;
         text-decoration: none;
-        margin: 0 1em;
+        margin: 0 1rem;
     }
 
     table {
         padding-bottom: 1rem;
     }
 
+    #manage-link {
+        color: #6B65FF;
+        font-size: .75rem;
+        font-weight: 500;
+        line-height: 1.05rem;
+        text-decoration: none;
+    }
+    #manage-link:hover, #links a:hover {
+        text-decoration: underline;
+    }
+
 </style>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<img src="https://app.bepro.network/images/bepro-icon.png" alt="Bepro Logo" height="40" width="40"/>
		<img src="https://app.bepro.network/images/Bepro_Logo_Light.svg" alt="Bepro Logo" height="24" width="90"/>