[MM-37730] - Self-managed: Update email template to new branding - Batch Email (#18221)

* [MM-37730] - Self-managed: Update email template to new branding - Batch Email

* batch email fixes

* simplify email title

* More fixes

* fix tests

* fix group message name on card

* fix bracket issue

* style the count

* account for  merged changes

* change truncating rule

templates/partials/card.mjml

@@ -14,8 +14,15 @@
               {{end}}
               {{if .ChannelName}}
                 <div class="channelBg">
-                  <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
-                  <div class="channelName">{{.ChannelName}}</div>
+                {{if .ShowChannelIcon}}
+                <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
+                {{end}}
+                  <div class="channelName">
+                  {{if .OtherChannelMembersCount}}
+                  <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
+                  {{end}}
+                  {{.ChannelName}}
+                  </div>
                 </div>
               {{end}}
             </div>
@@ -25,6 +32,8 @@
       <mj-text css-class="senderMessage" padding="0px">
         {{.Message}}
       </mj-text>
+    </mj-column>
+    <mj-column width=100%>
       <mj-raw>{{if .MessageURL}}</mj-raw>
         <mj-button href="{{.MessageURL}}" padding="16px 0px 0px 0px" css-class="messageButton">{{$.Props.MessageButton}}</mj-button>
       <mj-raw>{{end}}</mj-raw>

templates/partials/style.mjml

@@ -152,6 +152,7 @@
     background: rgba(63, 67, 80, 0.08);
     border-radius: 4px;
     display: flex;
+    padding-left: 4px; 
   }
 
   .channelLogo {
@@ -171,6 +172,13 @@
     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;