Update follow and follow_request emails (#28755)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/helpers/accounts_helper.rb

@@ -27,20 +27,24 @@ module AccountsHelper
     end
   end
 
+  def account_formatted_stat(value)
+    number_to_human(value, precision: 3, strip_insignificant_zeros: true)
+  end
+
   def account_description(account)
     prepend_str = [
       [
-        number_to_human(account.statuses_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.statuses_count),
         I18n.t('accounts.posts', count: account.statuses_count),
       ].join(' '),
 
       [
-        number_to_human(account.following_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.following_count),
         I18n.t('accounts.following', count: account.following_count),
       ].join(' '),
 
       [
-        number_to_human(account.followers_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.followers_count),
         I18n.t('accounts.followers', count: account.followers_count),
       ].join(' '),
     ].join(', ')

app/javascript/styles/mailer.scss

@@ -88,6 +88,85 @@ table + p {
   padding: 24px;
 }
 
+// Account
+.email-account-banner-table {
+  background-color: #f3f2f5;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.email-account-banner-td {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  height: 140px;
+  vertical-align: bottom;
+  background-color: #f3f2f5;
+  background-position: center;
+  background-size: cover;
+}
+
+.email-account-banner-inner-td {
+  padding: 24px 24px 0;
+  mso-padding-alt: 24px;
+}
+
+.email-account-banner-overlap-div {
+  max-height: 42px;
+}
+
+.email-account-banner-icon-table {
+  width: auto;
+  margin: 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border-collapse: separate;
+  background-color: #fff;
+  border: 2px solid #fff;
+
+  img {
+    display: block;
+    max-width: 100%;
+    border: none;
+    border-radius: 6px;
+  }
+}
+
+.email-account-body-td {
+  padding: 56px 24px 24px;
+  mso-padding-alt: 24px;
+}
+
+.email-account-name {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #17063b;
+}
+
+.email-account-handle {
+  font-size: 14px;
+  line-height: 20px;
+  color: #746a89;
+}
+
+.email-account-stats-table {
+  td {
+    padding-right: 16px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #746a89;
+  }
+
+  b {
+    font-weight: 600;
+    color: #17063b;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+}
+
 // Utility classes
 .email-w-full {
   width: 100%;
@@ -122,6 +201,14 @@ table + p {
   padding-top: 24px;
 }
 
+.email-padding-top-16 {
+  padding-top: 16px;
+}
+
+.email-padding-top-0 {
+  padding-top: 0;
+}
+
 .email-border-top {
   border-top: 1px solid #dfdee3;
 }

app/views/application/mailer/_account.html.haml

@@ -0,0 +1,30 @@
+%table.email-w-full.email-account-banner-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-account-banner-td{ height: 140, background: full_asset_url(account.header.url) }
+      %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+        %tr
+          %td.email-account-banner-inner-td
+            .email-account-banner-overlap-div
+              %table.email-account-banner-icon-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+                %tr
+                  %td
+                    %img{ src: full_asset_url(account.avatar.url), width: 80, height: 80, alt: '' }
+%table.email-w-full.email-account-body-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-account-body-td
+      %p.email-account-name= display_name(account)
+      %p.email-account-handle= acct(account)
+      %table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+        %tr
+          %td.email-padding-top-16
+            %table.email-w-full.email-account-stats-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+              %tr
+                %td
+                  %b= account_formatted_stat(account.statuses_count)
+                  %span= t('accounts.posts', count: account.statuses_count)
+                %td
+                  %b= account_formatted_stat(account.following_count)
+                  %span= t('accounts.following')
+                %td
+                  %b= account_formatted_stat(account.followers_count)
+                  %span= t('accounts.followers', count: account.followers_count)

app/views/notification_mailer/follow.html.haml

@@ -5,5 +5,9 @@
     %td.email-body-padding-td
       %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
         %tr
-          %td.email-inner-card-td
+          %td.email-inner-card-td-without-padding
+            = render 'application/mailer/account', account: @account
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+              %tr
+                %td.email-padding-24.email-padding-top-0
                   = render 'application/mailer/button', text: t('application_mailer.view_profile'), url: web_url("@#{@account.pretty_acct}")

app/views/notification_mailer/follow_request.html.haml

@@ -5,5 +5,9 @@
     %td.email-body-padding-td
       %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
         %tr
-          %td.email-inner-card-td
+          %td.email-inner-card-td-without-padding
+            = render 'application/mailer/account', account: @account
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+              %tr
+                %td.email-padding-24.email-padding-top-0
                   = render 'application/mailer/button', text: t('notification_mailer.follow_request.action'), url: web_url('follow_requests')