[GH-15906][MM-22844] Redesign reset password and invite emails (#17029)

Automatic Merge

templates/partials/card.mjml

@@ -0,0 +1,15 @@
+<mj-section css-class="messageCard" padding="0px">
+  <mj-group>
+    <mj-column css-class="messageAvatarCol">
+      <mj-image css-class="messageAvatar" src="cid:user-avatar.png" padding="0px" />
+    </mj-column>
+    <mj-column css-class="senderInfoCol" width=90% >
+      <mj-text css-class="senderName" padding="0px">
+        {{.Props.SenderName}}
+      </mj-text>
+      <mj-text css-class="senderMessage" padding="0px">
+        {{.Props.Message}}
+      </mj-text>
+    </mj-column>
+  </mj-group>
+</mj-section>

templates/partials/style.mjml

@@ -61,7 +61,11 @@
     font-size:14px !important;
     line-height:20px !important;
     color:#3D3C40 !important;
-    padding:0px !important;
+    padding:0px 48px 0px 48px !important;
+  }
+
+  .footerInfo a {
+    color:#166DE0 !important;
   }
 
   .appDownloadButton a{
@@ -82,6 +86,52 @@
     padding:8px 24px 8px 24px !important;
   }
 
+  .postCard {
+    padding:0px 24px 40px 24px !important;
+  }
+
+  .messageCard {
+    background:#FFFFFF !important;
+    border:1px solid rgba(61, 60, 64, 0.08) !important;
+    box-sizing:border-box !important;
+    box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12) !important;
+    border-radius:4px !important;
+    padding:32px !important;
+  }
+
+  .messageAvatar img {
+    width:32px !important;
+    height:32px !important;
+    padding:0px !important;
+    border-radius:32px !important;
+  }
+
+  .messageAvatarCol {
+    width:32px !important;
+  }
+
+  .senderName div {
+    text-align:left !important;
+    font-weight:600 !important;
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:0px 0px 4px 0px !important;
+  }
+
+  .senderMessage div {
+    text-align:left !important;
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:0px !important;
+  }
+
+  .senderInfoCol {
+    width:394px !important;
+    padding:0px 0px 0px 12px !important;
+  }
+
   @media all and (min-width: 541px) {
     .emailBody {
       padding:32px !important;
@@ -92,12 +142,38 @@
     .emailBody {
       padding:16px !important;
     }
+
+    .messageCard {
+      padding:16px !important;
+    }
+
+    .senderInfoCol {
+      width:80% !important;
+      padding:0px 0px 0px 12px !important;
+    }
   }
 
   @media all and (max-width: 400px) {
     .emailBody {
       padding:0px !important;
     }
+
+    .footerInfo div {
+      padding:0px !important;
+    }
+
+    .messageCard {
+      padding:16px !important;
+    }
+
+    .postCard {
+      padding:0px 0px 40px 0px !important;
+    }
+    
+    .senderInfoCol {
+      width:80% !important;
+      padding:0px 0px 0px 12px !important;
+    }
   }
 
 </mj-style>