MM-35847: fixes email templates (#18634)

Some email clients don't support style tags which results in CTA buttons
not being visible, and other styling being "broken".

This commit tries to fix that issue by both including style tags and
inlining the same CSS.
Этот коммит содержится в:
Kyriakos Z
2021-10-22 11:13:06 +03:00
коммит произвёл GitHub
родитель deac72d2be
Коммит e9308640ec
10 изменённых файлов: 356 добавлений и 338 удалений

Просмотреть файл

@@ -58,6 +58,12 @@
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
@@ -317,7 +323,7 @@
</head>
<body style="word-spacing:normal;">
<div class="emailBody" style="">
<div class="emailBody" style="background: #F3F3F3;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
@@ -340,7 +346,7 @@
<tbody>
<tr>
<td style="width:132px;">
<img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.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_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
</td>
</tr>
</tbody>
@@ -368,7 +374,7 @@
<tbody>
<tr>
<td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.Title}}</div>
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
</td>
</tr>
<tr>
@@ -381,7 +387,7 @@
<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;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
<a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Arial;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="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
{{.Props.Button}}
</a>
</td>
@@ -414,7 +420,7 @@
<tbody>
<tr>
<td style="width:320px;">
<img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.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/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
</td>
</tr>
</tbody>
@@ -442,13 +448,13 @@
<tbody>
<tr>
<td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
</td>
</tr>
<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}}" style="text-decoration: none; color: #1C58D9;"> feedback-cloud@mattermost.com </a>
</div>
</td>
</tr>
@@ -473,7 +479,7 @@
<tbody>
<tr>
<td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
<div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
{{.Props.FooterV2}}
</div>
</td>