[GH-15906][MM-22844] Redesign welcome and verify email. (#16824)

Automatic Merge

templates/partials/email_footer.mjml

@@ -0,0 +1,8 @@
+<mj-section padding="0px">
+  <mj-column>
+    <mj-text css-class="emailFooter" padding="0px">
+      {{.Props.Organization}}
+      {{.Props.FooterV2}}
+    </mj-text>
+  </mj-column>
+</mj-section>

templates/partials/header.mjml

@@ -0,0 +1,11 @@
+<mj-section padding="0px 24px 40px 24px">
+  <mj-column>
+    <mj-text css-class="title" padding="0px">
+      {{.Props.Title}}
+    </mj-text>
+    <mj-text css-class="subTitle" padding="16px 24px 16px 24px">
+      {{.Props.SubTitle}}
+    </mj-text>
+    <mj-button href="{{.Props.ButtonURL}}" padding="0px" css-class="button">{{.Props.Button}}</mj-button>
+  </mj-column>
+</mj-section>

templates/partials/header_verify.mjml

@@ -0,0 +1,16 @@
+<mj-section padding="0px 24px 40px 24px">
+  <mj-column>
+    <mj-text css-class="title" padding="0px">
+      {{.Props.Title}}
+    </mj-text>
+    <mj-text css-class="subTitle" padding="16px 24px 0px 24px">
+      {{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a>
+    </mj-text>
+    <mj-raw>{{if .Props.ButtonURL}}</mj-raw>
+      <mj-text css-class="subTitle" padding="0px 24px 16px 24px">
+        {{.Props.SubTitle2}}
+      </mj-text>
+      <mj-button href="{{.Props.ButtonURL}}" padding="0px" css-class="button">{{.Props.Button}}</mj-button>
+    <mj-raw>{{end}}</mj-raw>
+  </mj-column>
+</mj-section>

templates/partials/logo.mjml

@@ -0,0 +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-column>
+</mj-section>

templates/partials/questions_footer.mjml

@@ -0,0 +1,12 @@
+<mj-section padding="16px 0px 40px 0px">
+  <mj-column>
+    <mj-text css-class="footerTitle" padding="0px">
+      {{.Props.QuestionTitle}}
+    </mj-text>
+    <mj-text css-class="footerInfo" padding="0px">
+      {{.Props.QuestionInfo}}
+      <a href='mailto:{{.Props.SupportEmail}}'>
+      {{.Props.SupportEmail}}</a>
+    </mj-text>
+ </mj-column>
+</mj-section>

templates/partials/style.mjml

@@ -0,0 +1,103 @@
+<mj-attributes>
+  <mj-raw><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700" rel="stylesheet" type="text/css"></link></mj-raw>
+  <mj-text font-family="Open Sans, sans-serif" align="center" />
+  <mj-button font-family="Open Sans, sans-serif" background-color="#FFFFFF" border-radius="4px" padding="0px" />
+  <mj-image alt="" align="center" />
+  <mj-class name="email" align="center" padding="24px" background-color="#FFFFFF" border-radius="8px" />
+  <mj-class name="logo" width="132px" height="21.76px" padding="0px" />
+</mj-attributes>
+
+<mj-style>
+  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+  
+  .emailBody {
+    background:#F3F3F3 !important;
+  }
+
+  .emailBody a{
+    text-decoration:none !important;
+    color:#166DE0 !important;
+  }
+
+  .title div {
+    font-weight:600 !important;
+    font-size:28px !important;
+    line-height:36px !important;
+    letter-spacing:-0.02em !important;
+    color:#3D3C40 !important;
+  }
+
+  .subTitle div {
+    font-size:16px !important;
+    line-height:24px !important;
+    color:rgba(61, 60, 64, 0.64) !important;
+  }
+
+  .button a {
+    background-color:#166DE0 !important;
+    font-weight:600 !important;
+    font-size:16px !important;
+    line-height:18px !important;
+    color:#FFFFFF !important;
+    padding:15px 24px !important;
+  }
+
+  .info div {
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:40px 0px !important;
+  }
+
+  .footerTitle div {
+    font-weight:600 !important;
+    font-size:16px !important;
+    line-height:24px !important;
+    color:#3D3C40 !important;
+    padding:0px 0px 4px 0px !important;
+  }
+
+  .footerInfo div {
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:0px !important;
+  }
+
+  .appDownloadButton a{
+    background-color:#FFFFFF !important;
+    border:1px solid #166DE0 !important;
+    box-sizing: border-box !important;
+    color:#166DE0 !important;
+    padding:13px 20px !important;
+    font-weight:600 !important;
+    font-size:14px !important;
+    line-height:14px !important;
+  }
+
+  .emailFooter div {
+    font-size:12px !important;
+    line-height:16px !important;
+    color:rgba(61, 60, 64, 0.56) !important;
+    padding:8px 24px 8px 24px !important;
+  }
+
+  @media all and (min-width: 541px) {
+    .emailBody {
+      padding:32px !important;
+    }
+  }
+
+  @media all and (max-width: 540px) and (min-width: 401px) {
+    .emailBody {
+      padding:16px !important;
+    }
+  }
+
+  @media all and (max-width: 400px) {
+    .emailBody {
+      padding:0px !important;
+    }
+  }
+
+</mj-style>

templates/partials/verify.mjml

@@ -0,0 +1,12 @@
+<mj-section padding="0px">
+  <mj-column>
+    <mj-image src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" width="320px" padding="0px" />
+  </mj-column>
+</mj-section>
+<mj-section padding="0px">
+  <mj-column>
+    <mj-text css-class="info" padding="0px">
+      {{.Props.Info}}<br>{{.Props.Info1}}
+    </mj-text>
+  </mj-column>
+</mj-section>