[MM-37616] Self-managed: Update email template to new branding - Welcome and Verification email (#18076)

* [MM-37616] - Update Welcome and Verify emails to new branding

* make build-templates

* styling feedback

templates/partials/logo.mjml

@@ -1,5 +1,5 @@
 <mj-section padding="0px 0px 40px 0px">
   <mj-column>
-    <mj-image mj-class="logo" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" />
+    <mj-image mj-class="logo" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" />
   </mj-column>
 </mj-section>

templates/partials/style.mjml

@@ -33,8 +33,12 @@
     color: rgba(61, 60, 64, 0.64) !important;
   }
 
+  .subTitle a {
+    color: rgba(28, 88, 217, 1) !important;
+  }
+
   .button a {
-    background-color: #166DE0 !important;
+    background-color: #1C58D9 !important;
     font-weight: 600 !important;
     font-size: 16px !important;
     line-height: 18px !important;
@@ -56,7 +60,7 @@
   .info div {
     font-size: 14px !important;
     line-height: 20px !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
     padding: 40px 0px !important;
   }
 
@@ -64,14 +68,14 @@
     font-weight: 600 !important;
     font-size: 16px !important;
     line-height: 24px !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
     padding: 0px 0px 4px 0px !important;
   }
 
   .footerInfo div {
     font-size: 14px !important;
     line-height: 20px !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
     padding: 0px 48px 0px 48px !important;
   }
 
@@ -81,9 +85,9 @@
 
   .appDownloadButton a{
     background-color: #FFFFFF !important;
-    border: 1px solid #166DE0 !important;
+    border: 1px solid #1C58D9 !important;
     box-sizing: border-box !important;
-    color: #166DE0 !important;
+    color: #1C58D9 !important;
     padding: 13px 20px !important;
     font-weight: 600 !important;
     font-size: 14px !important;

templates/partials/verify.mjml

@@ -1,6 +1,6 @@
 <mj-section padding="0px">
   <mj-column>
-    <mj-image src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" width="320px" padding="0px" />
+    <mj-image src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" width="320px" padding="0px" />
   </mj-column>
 </mj-section>
 <mj-section padding="0px">

templates/verify_body.html

@@ -115,8 +115,12 @@
       color: rgba(61, 60, 64, 0.64) !important;
     }
 
+    .subTitle a {
+      color: rgba(28, 88, 217, 1) !important;
+    }
+
     .button a {
-      background-color: #166DE0 !important;
+      background-color: #1C58D9 !important;
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 18px !important;
@@ -138,7 +142,7 @@
     .info div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 40px 0px !important;
     }
 
@@ -146,14 +150,14 @@
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 24px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 0px 4px 0px !important;
     }
 
     .footerInfo div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 48px 0px 48px !important;
     }
 
@@ -163,9 +167,9 @@
 
     .appDownloadButton a {
       background-color: #FFFFFF !important;
-      border: 1px solid #166DE0 !important;
+      border: 1px solid #1C58D9 !important;
       box-sizing: border-box !important;
-      color: #166DE0 !important;
+      color: #1C58D9 !important;
       padding: 13px 20px !important;
       font-weight: 600 !important;
       font-size: 14px !important;
@@ -334,7 +338,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
                                         </td>
                                       </tr>
                                     </tbody>
@@ -415,7 +419,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
                                         </td>
                                       </tr>
                                     </tbody>
@@ -475,7 +479,8 @@
                               <tr>
                                 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
                                   <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionInfo}}
-                                    <a href="mailto:{{.Props.SupportEmail}}"> {{.Props.SupportEmail}}</a>
+                                    <a href="mailto:{{.Props.SupportEmail}}">
+                                      {{.Props.SupportEmail}}</a>
                                   </div>
                                 </td>
                               </tr>

templates/welcome_body.html

@@ -115,8 +115,12 @@
       color: rgba(61, 60, 64, 0.64) !important;
     }
 
+    .subTitle a {
+      color: rgba(28, 88, 217, 1) !important;
+    }
+
     .button a {
-      background-color: #166DE0 !important;
+      background-color: #1C58D9 !important;
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 18px !important;
@@ -138,7 +142,7 @@
     .info div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 40px 0px !important;
     }
 
@@ -146,14 +150,14 @@
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 24px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 0px 4px 0px !important;
     }
 
     .footerInfo div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 48px 0px 48px !important;
     }
 
@@ -163,9 +167,9 @@
 
     .appDownloadButton a {
       background-color: #FFFFFF !important;
-      border: 1px solid #166DE0 !important;
+      border: 1px solid #1C58D9 !important;
       box-sizing: border-box !important;
-      color: #166DE0 !important;
+      color: #1C58D9 !important;
       padding: 13px 20px !important;
       font-weight: 600 !important;
       font-size: 14px !important;
@@ -334,7 +338,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
                                         </td>
                                       </tr>
                                     </tbody>
@@ -415,7 +419,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
                                         </td>
                                       </tr>
                                     </tbody>