UX: Add CSS classes to digest email template to allow for easier styling

UX: Add CSS classes to digest email template to allow for easier styling

diff --git a/app/views/user_notifications/digest.html.erb b/app/views/user_notifications/digest.html.erb
index f24dd64688..fd188c9f6c 100644
--- a/app/views/user_notifications/digest.html.erb
+++ b/app/views/user_notifications/digest.html.erb
@@ -5,7 +5,7 @@
 </span>
 
 <%- if I18n.t('user_notifications.digest.custom.html.header').present? %>
-  <table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%;border-spacing:0;padding:0;">
+  <table class="digest-header logo-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%;border-spacing:0;padding:0;">
     <tr>
       <td style="padding:0;">
         <%= raw(t 'user_notifications.digest.custom.html.header') %>
@@ -13,7 +13,7 @@
     </tr>
   </table>
 <%- else %>
-<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="background-color:#<%= @header_bgcolor -%>;width:100%;">
+<table class="digest-header text-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="background-color:#<%= @header_bgcolor -%>;width:100%;">
   <tr>
     <td align="center" style="text-align: center;padding: 20px 0; font-family:Helvetica,Arial,sans-serif;">
 
@@ -30,7 +30,7 @@
 </table>
 <%- end %>
 
-<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="body" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
+<table class="digest-content" dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="body" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
   <tr>
     <td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
       <div class="with-accent-colors">
@@ -44,26 +44,26 @@
       </div>
     </td>
     <td style="vertical-align:top;padding:0;font-family:Helvetica,Arial,sans-serif;">
-      <table dir="<%= rtl? ? 'rtl' : 'ltr' %>" align="center" class="with-accent-colors" style="border-spacing:0;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
+      <table class="digest-content-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" align="center" class="with-accent-colors" style="border-spacing:0;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
         <tbody>
           <tr>
             <td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">
 
 <br/>
-<center class="with-accent-colors" style="font-size:22px;font-weight:400;"><%=t 'user_notifications.digest.since_last_visit' %></center>
+<center class="header-since-last-visit with-accent-colors" style="font-size:22px;font-weight:400;"><%=t 'user_notifications.digest.since_last_visit' %></center>
 
 
 
-<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%">
+<table class="header-stats" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%">
 <tbody>
-  <tr>
+  <tr class="header-stat-count">
     <%- @counts.each do |count| -%>
       <td style="text-align:center;font-size:36px;font-weight:400;">
         <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%= count[:value] -%></strong></a>
       </td>
     <%- end -%>
   </tr>
-  <tr>
+  <tr class="header-stat-description">
     <%- @counts.each do |count| -%>
       <td style="font-size:14px;font-weight:400;text-align:center;">
         <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%=t count[:label_key] -%></strong></a>
@@ -73,7 +73,7 @@
 </tbody>
 </table>
 
-<center class="with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px;"><%=t 'user_notifications.digest.popular_topics' %></center>
+<center class="header-popular-topics with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px;"><%=t 'user_notifications.digest.popular_topics' %></center>
 
 
             </td>
@@ -83,20 +83,20 @@
       <table dir="<%= rtl? ? 'rtl' : 'ltr' %>" align="center" style="border-spacing:0;background:#fefefe;margin:0;padding:0;text-align:center;vertical-align:top;width:100%">
         <tbody>
           <tr>
-            <td style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">
+            <td class="digest-popular-topic-wrapper" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">
 
 <% @popular_topics.each_with_index do |t, i| %>
 <!--   Beginning of Popular Topic   -->
-<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%">
+<table class="digest-topic popular-topic" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%">
   <tbody>
     <tr>
-      <td style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
+      <td class="digest-topic-category" style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
         <p style="color:#8f8f8f;line-height:1.3;margin: 20px 0 0 0;">
           <%= category_badge(t.category, inline_style: true, absolute_url: true) %>
         </p>
       </td>
       <td style="margin:0;padding:<%= rtl? ? '0 0 0 16px' : '0 16px 0 0' %>;text-align:<%= rtl? ? 'left' : 'right' %>;vertical-align:top;">
-        <p class="text-right" style="color:#8f8f8f;line-height:1.3;margin:20px 0 0 0;font-weight:400;">
+        <p class="text-right digest-created-at" style="color:#8f8f8f;line-height:1.3;margin:20px 0 0 0;font-weight:400;">
           <%= short_date(t.created_at) %>
         </p>
       </td>
@@ -108,7 +108,7 @@
   <tbody>
     <tr>
       <td style="padding:<%= rtl? ? '0 16px 8px 8px' : '0 8px 8px 16px' %>; text-align:<%= rtl? ? 'right' : 'left' %>; width:100%;">
-        <h2 style="font-size:18px;font-weight:400;line-height:1.3;margin:0;padding:0;word-wrap:normal">
+        <h2 class="digest-topic-title" style="font-size:18px;font-weight:400;line-height:1.3;margin:0;padding:0;word-wrap:normal">
           <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
             <strong><%= gsub_emoji_to_unicode(t.title.truncate(100, separator: /\s/)) -%></strong>
           </a>
@@ -124,15 +124,15 @@
 <table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="padding:0;position:relative;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
   <tbody>
     <tr>
-      <td style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;">
+      <td class="digest-topic-op" style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;">
         <img src="<%= t.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:block;float:none;height:50px;width:50px;margin:0;max-width:100%;outline:0;text-align:center;text-decoration:none;" align="center">
       </td>
       <td style="color:#0a0a0a;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
         <% if t.user %>
           <% if SiteSetting.enable_names? && t.user.name.present? && t.user.name.downcase != t.user.username.downcase %>
-            <h6 style="color:inherit;line-height:1.3;margin:0;padding:0;font-weight: normal;font-size:16px;"><%= t.user.name -%></h6>
+            <h6 class="digest-topic-username" style="color:inherit;line-height:1.3;margin:0;padding:0;font-weight: normal;font-size:16px;"><%= t.user.name -%></h6>
           <% end %>

[... diff too long, it was truncated ...]

GitHub sha: 50b618dd

1 Like