[MM-39072] - Run make build-templates on latest master (#18541)

* [MM-39072] - Run make build-templates on latest master * fix guest template failure
2025-02-25 18:55:24 -06:00 · 2021-10-06 09:50:51 +03:00
parent 4fbcc85c3e
commit 2a40a7d649
9 changed files with 272 additions and 88 deletions
--- a/app/email/email.go
+++ b/app/email/email.go
@@ -515,11 +515,6 @@ func (es *Service) SendGuestInviteEmails(team *model.Team, channels []*model.Cha
 			data.Props["Title"] = i18n.T("api.templates.invite_body.title", map[string]interface{}{"SenderName": senderName, "TeamDisplayName": team.DisplayName})
 			data.Props["SubTitle"] = i18n.T("api.templates.invite_body_guest.subTitle")
 			data.Props["Button"] = i18n.T("api.templates.invite_body.button")
-			data.Props["SenderName"] = senderName
-			data.Props["Message"] = ""
-			if message != "" {
-				data.Props["Message"] = message
-			}
 			data.Props["InviteFooterTitle"] = i18n.T("api.templates.invite_body_footer.title")
 			data.Props["InviteFooterInfo"] = i18n.T("api.templates.invite_body_footer.info")
 			data.Props["InviteFooterLearnMore"] = i18n.T("api.templates.invite_body_footer.learn_more")
@@ -555,16 +550,25 @@ func (es *Service) SendGuestInviteEmails(team *model.Team, channels []*model.Cha
 				mlog.Info("sending invitation ", mlog.String("to", invite), mlog.String("link", data.Props["ButtonURL"].(string)))
 			}

+			senderPhoto := ""
 			embeddedFiles := make(map[string]io.Reader)
 			if message != "" {
 				if senderProfileImage != nil {
-					data.Props["SenderPhoto"] = "user-avatar.png"
+					senderPhoto = "user-avatar.png"
 					embeddedFiles = map[string]io.Reader{
-						"user-avatar.png": bytes.NewReader(senderProfileImage),
+						senderPhoto: bytes.NewReader(senderProfileImage),
 					}
 				}
 			}

+			pData := postData{
+				SenderName:  senderName,
+				Message:     template.HTML(message),
+				SenderPhoto: senderPhoto,
+			}
+
+			data.Props["Posts"] = []postData{pData}
+
 			body, err := es.templatesContainer.RenderToString("invite_body", data)
 			if err != nil {
 				mlog.Error("Failed to send invite email successfully", mlog.Err(err))
--- a/templates/cloud_trial_end_warning.html
+++ b/templates/cloud_trial_end_warning.html
@@ -99,14 +99,18 @@
      font-weight: 600 !important;
      font-size: 28px !important;
      line-height: 36px !important;
-      letter-spacing: -0.02em !important;
-      color: #3D3C40 !important;
+      letter-spacing: -0.01em !important;
+      color: #3F4350 !important;
    }

    .subTitle div {
      font-size: 16px !important;
      line-height: 24px !important;
-      color: rgba(61, 60, 64, 0.64) !important;
+      color: rgba(63, 67, 80, 0.64) !important;
+    }
+
+    .subTitle a {
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -118,10 +122,21 @@
      padding: 15px 24px !important;
    }

+    .messageButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #FFFFFF !important;
+      box-sizing: border-box !important;
+      color: #1C58D9 !important;
+      padding: 12px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
    .info div {
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 40px 0px !important;
    }

@@ -129,14 +144,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;
    }

@@ -158,7 +173,7 @@
    .emailFooter div {
      font-size: 12px !important;
      line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
      padding: 8px 24px 8px 24px !important;
    }

@@ -186,20 +201,67 @@
      width: 32px !important;
    }

-    .senderName div {
+    .postNameAndTime {
+      padding: 0px 0px 4px 0px !important;
+      display: flex;
+    }
+
+    .senderName {
+      font-family: Open Sans, sans-serif;
      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;
+      color: #3F4350 !important;
+    }
+
+    .time {
+      font-family: Open Sans, sans-serif;
+      font-size: 12px;
+      line-height: 16px;
+      color: rgba(63, 67, 80, 0.56);
+      padding: 2px 6px;
+      align-items: center;
+      float: left;
+    }
+
+    .channelBg {
+      background: rgba(63, 67, 80, 0.08);
+      border-radius: 4px;
+      display: flex;
+      padding-left: 4px;
+    }
+
+    .channelLogo {
+      width: 10px;
+      height: 10px;
+      padding: 5px 4px 5px 6px;
+      float: left;
+    }
+
+    .channelName {
+      font-family: Open Sans, sans-serif;
+      font-weight: 600;
+      font-size: 10px;
+      line-height: 16px;
+      letter-spacing: 0.01em;
+      text-transform: uppercase;
+      color: rgba(63, 67, 80, 0.64);
+      padding: 2px 6px 2px 0px;
+    }
+
+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
    }

    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }

@@ -386,9 +448,7 @@
                              <tr>
                                <td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
                                  <div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
-                                    <a href='mailto:{{.Props.SupportEmail}}'>
-                                      feedback-cloud@mattermost.com
-                                    </a>
+                                    <a href='mailto:{{.Props.SupportEmail}}'> feedback-cloud@mattermost.com </a>
                                  </div>
                                </td>
                              </tr>
--- a/templates/cloud_trial_ended_email.html
+++ b/templates/cloud_trial_ended_email.html
@@ -99,14 +99,18 @@
      font-weight: 600 !important;
      font-size: 28px !important;
      line-height: 36px !important;
-      letter-spacing: -0.02em !important;
-      color: #3D3C40 !important;
+      letter-spacing: -0.01em !important;
+      color: #3F4350 !important;
    }

    .subTitle div {
      font-size: 16px !important;
      line-height: 24px !important;
-      color: rgba(61, 60, 64, 0.64) !important;
+      color: rgba(63, 67, 80, 0.64) !important;
+    }
+
+    .subTitle a {
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -118,10 +122,21 @@
      padding: 15px 24px !important;
    }

+    .messageButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #FFFFFF !important;
+      box-sizing: border-box !important;
+      color: #1C58D9 !important;
+      padding: 12px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
    .info div {
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 40px 0px !important;
    }

@@ -129,14 +144,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;
    }

@@ -158,7 +173,7 @@
    .emailFooter div {
      font-size: 12px !important;
      line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
      padding: 8px 24px 8px 24px !important;
    }

@@ -186,20 +201,67 @@
      width: 32px !important;
    }

-    .senderName div {
+    .postNameAndTime {
+      padding: 0px 0px 4px 0px !important;
+      display: flex;
+    }
+
+    .senderName {
+      font-family: Open Sans, sans-serif;
      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;
+      color: #3F4350 !important;
+    }
+
+    .time {
+      font-family: Open Sans, sans-serif;
+      font-size: 12px;
+      line-height: 16px;
+      color: rgba(63, 67, 80, 0.56);
+      padding: 2px 6px;
+      align-items: center;
+      float: left;
+    }
+
+    .channelBg {
+      background: rgba(63, 67, 80, 0.08);
+      border-radius: 4px;
+      display: flex;
+      padding-left: 4px;
+    }
+
+    .channelLogo {
+      width: 10px;
+      height: 10px;
+      padding: 5px 4px 5px 6px;
+      float: left;
+    }
+
+    .channelName {
+      font-family: Open Sans, sans-serif;
+      font-weight: 600;
+      font-size: 10px;
+      line-height: 16px;
+      letter-spacing: 0.01em;
+      text-transform: uppercase;
+      color: rgba(63, 67, 80, 0.64);
+      padding: 2px 6px 2px 0px;
+    }
+
+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
    }

    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }

--- a/templates/invite_body.html
+++ b/templates/invite_body.html
@@ -71,9 +71,9 @@
        max-width: 100%;
      }

-      .mj-column-per-50 {
-        width: 50% !important;
-        max-width: 50%;
+      .mj-column-per-33-333333333333336 {
+        width: 33.333333333333336% !important;
+        max-width: 33.333333333333336%;
      }

      .mj-column-per-90 {
@@ -88,9 +88,9 @@
      max-width: 100%;
    }

-    .moz-text-html .mj-column-per-50 {
-      width: 50% !important;
-      max-width: 50%;
+    .moz-text-html .mj-column-per-33-333333333333336 {
+      width: 33.333333333333336% !important;
+      max-width: 33.333333333333336%;
    }

    .moz-text-html .mj-column-per-90 {
@@ -255,6 +255,7 @@
      background: rgba(63, 67, 80, 0.08);
      border-radius: 4px;
      display: flex;
+      padding-left: 4px;
    }

    .channelLogo {
@@ -275,6 +276,13 @@
      padding: 2px 6px 2px 0px;
    }

+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
@@ -417,7 +425,7 @@
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
-              {{if .Props.Message}}
+              {{if .Props.Message}}{{range .Props.Posts}}
              <div class="postCard">
                <!--[if mso | IE]><tr><td class="messageCard-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="messageCard-outlook" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div class="messageCard" style="margin:0px auto;max-width:552px;">
@@ -427,8 +435,8 @@
                        <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]-->
                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
-                            <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:276px;" ><![endif]-->
-                            <div class="mj-column-per-50 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
+                            <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:184px;" ><![endif]-->
+                            <div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
                              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                  <tr>
@@ -436,8 +444,8 @@
                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                        <tbody>
                                          <tr>
-                                            <td style="width:276px;">
-                                              <img alt="" height="auto" src="cid:{{.Props.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="276" />
+                                            <td style="width:184px;">
+                                              <img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="184" />
                                            </td>
                                          </tr>
                                        </tbody>
@@ -454,14 +462,21 @@
                                  <tr>
                                    <td>
                                      <div class="postNameAndTime">
-                                        <div class="senderName">{{.Props.SenderName}}</div>
-                                        {{if .Props.Time}}
-                                        <div class="time">{{.Props.Time}}</div>
+                                        <div class="senderName">{{.SenderName}}</div>
+                                        {{if .Time}}
+                                        <div class="time">{{.Time}}</div>
                                        {{end}}
-                                        {{if .Props.ChannelName}}
+                                        {{if .ChannelName}}
                                        <div class="channelBg">
+                                          {{if .ShowChannelIcon}}
                                          <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
-                                          <div class="channelName">{{.Props.ChannelName}}</div>
+                                          {{end}}
+                                          <div class="channelName">
+                                            {{if .OtherChannelMembersCount}}
+                                            <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
+                                            {{end}}
+                                            {{.ChannelName}}
+                                          </div>
                                        </div>
                                        {{end}}
                                      </div>
@@ -469,16 +484,23 @@
                                  </tr>
                                  <tr>
                                    <td align="center" class="senderMessage" 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.Message}}</div>
+                                      <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div>
                                    </td>
                                  </tr>
-                                  {{if .Props.MessageURL}}
+                                </tbody>
+                              </table>
+                            </div>
+                            <!--[if mso | IE]></td><td style="vertical-align:top;width:552px;" ><![endif]-->
+                            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                                <tbody>
+                                  {{if .MessageURL}}
                                  <tr>
                                    <td align="center" vertical-align="middle" class="messageButton" style="font-size:0px;padding:16px 0px 0px 0px;word-break:break-word;">
                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                        <tr>
                                          <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                            <a href="{{.Props.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                            <a href="{{.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
                                              {{$.Props.MessageButton}}
                                            </a>
                                          </td>
@@ -499,7 +521,7 @@
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
-              </div>
+              </div>{{end}}
              {{else}}
                <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div style="margin:0px auto;max-width:552px;">
--- a/templates/invite_body.mjml
+++ b/templates/invite_body.mjml
@@ -7,9 +7,9 @@
      <mj-include path="./partials/logo.mjml" />
      <mj-include path="./partials/header.mjml" />
      <mj-raw>{{if .Props.Message}}</mj-raw>
-        <mj-raw><div class="postCard"></mj-raw>
-        <mj-include path="./partials/card.mjml" />
-        <mj-raw></div></mj-raw>
+          <mj-raw>{{range .Props.Posts}}<div class="postCard"></mj-raw>
+            <mj-include path="./partials/card.mjml" />
+          <mj-raw></div>{{end}}</mj-raw>
      <mj-raw>{{else}}</mj-raw>
      <mj-section padding="0px 0px 40px 0px">
        <mj-column>
--- a/templates/license_up_for_renewal.html
+++ b/templates/license_up_for_renewal.html
@@ -100,13 +100,17 @@
      font-size: 28px !important;
      line-height: 36px !important;
      letter-spacing: -0.01em !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .subTitle div {
      font-size: 16px !important;
      line-height: 24px !important;
-      color: rgba(61, 60, 64, 0.64) !important;
+      color: rgba(63, 67, 80, 0.64) !important;
+    }
+
+    .subTitle a {
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -132,7 +136,7 @@
    .info div {
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 40px 0px !important;
    }

@@ -140,14 +144,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;
    }

@@ -169,7 +173,7 @@
    .emailFooter div {
      font-size: 12px !important;
      line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
      padding: 8px 24px 8px 24px !important;
    }

@@ -208,23 +212,24 @@
      font-weight: 600 !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .time {
      font-family: Open Sans, sans-serif;
      font-size: 12px;
      line-height: 16px;
-      color: rgba(61, 60, 64, 0.56);
+      color: rgba(63, 67, 80, 0.56);
      padding: 2px 6px;
      align-items: center;
      float: left;
    }

    .channelBg {
-      background: rgba(61, 60, 64, 0.08);
+      background: rgba(63, 67, 80, 0.08);
      border-radius: 4px;
      display: flex;
+      padding-left: 4px;
    }

    .channelLogo {
@@ -241,15 +246,22 @@
      line-height: 16px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
-      color: rgba(61, 60, 64, 0.64);
+      color: rgba(63, 67, 80, 0.64);
      padding: 2px 6px 2px 0px;
    }

+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }

--- a/templates/reset_body.html
+++ b/templates/reset_body.html
@@ -116,7 +116,7 @@
    }

    .subTitle a {
-    color: rgb(28, 88, 217) !important;
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -218,23 +218,24 @@
      font-weight: 600 !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .time {
      font-family: Open Sans, sans-serif;
      font-size: 12px;
      line-height: 16px;
-      color: rgba(61, 60, 64, 0.56);
+      color: rgba(63, 67, 80, 0.56);
      padding: 2px 6px;
      align-items: center;
      float: left;
    }

    .channelBg {
-      background: rgba(61, 60, 64, 0.08);
+      background: rgba(63, 67, 80, 0.08);
      border-radius: 4px;
      display: flex;
+      padding-left: 4px;
    }

    .channelLogo {
@@ -251,15 +252,22 @@
      line-height: 16px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
-      color: rgba(61, 60, 64, 0.64);
+      color: rgba(63, 67, 80, 0.64);
      padding: 2px 6px 2px 0px;
    }

+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }

--- a/templates/verify_body.html
+++ b/templates/verify_body.html
@@ -106,7 +106,7 @@
      font-size: 28px !important;
      line-height: 36px !important;
      letter-spacing: -0.01em !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .subTitle div {
@@ -116,7 +116,7 @@
    }

    .subTitle a {
-      color: rgba(28, 88, 217, 1) !important;
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -179,7 +179,7 @@
    .emailFooter div {
      font-size: 12px !important;
      line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
      padding: 8px 24px 8px 24px !important;
    }

@@ -218,23 +218,24 @@
      font-weight: 600 !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .time {
      font-family: Open Sans, sans-serif;
      font-size: 12px;
      line-height: 16px;
-      color: rgba(61, 60, 64, 0.56);
+      color: rgba(63, 67, 80, 0.56);
      padding: 2px 6px;
      align-items: center;
      float: left;
    }

    .channelBg {
-      background: rgba(61, 60, 64, 0.08);
+      background: rgba(63, 67, 80, 0.08);
      border-radius: 4px;
      display: flex;
+      padding-left: 4px;
    }

    .channelLogo {
@@ -251,15 +252,22 @@
      line-height: 16px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
-      color: rgba(61, 60, 64, 0.64);
+      color: rgba(63, 67, 80, 0.64);
      padding: 2px 6px 2px 0px;
    }

+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }

--- a/templates/welcome_body.html
+++ b/templates/welcome_body.html
@@ -106,7 +106,7 @@
      font-size: 28px !important;
      line-height: 36px !important;
      letter-spacing: -0.01em !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .subTitle div {
@@ -116,7 +116,7 @@
    }

    .subTitle a {
-      color: rgba(28, 88, 217, 1) !important;
+      color: rgb(28, 88, 217) !important;
    }

    .button a {
@@ -179,7 +179,7 @@
    .emailFooter div {
      font-size: 12px !important;
      line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
      padding: 8px 24px 8px 24px !important;
    }

@@ -218,23 +218,24 @@
      font-weight: 600 !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
    }

    .time {
      font-family: Open Sans, sans-serif;
      font-size: 12px;
      line-height: 16px;
-      color: rgba(61, 60, 64, 0.56);
+      color: rgba(63, 67, 80, 0.56);
      padding: 2px 6px;
      align-items: center;
      float: left;
    }

    .channelBg {
-      background: rgba(61, 60, 64, 0.08);
+      background: rgba(63, 67, 80, 0.08);
      border-radius: 4px;
      display: flex;
+      padding-left: 4px;
    }

    .channelLogo {
@@ -251,15 +252,22 @@
      line-height: 16px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
-      color: rgba(61, 60, 64, 0.64);
+      color: rgba(63, 67, 80, 0.64);
      padding: 2px 6px 2px 0px;
    }

+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
    .senderMessage div {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
      padding: 0px !important;
    }