Merge branch 'feature/unify-email-layouts' into 'master'

Unify email layouts: devise emails

See merge request !10483

12 files changed, 157 insertions, 294 deletions

diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss
deleted file mode 100644
index 9f613710cf4..00000000000
--- a/app/assets/stylesheets/mailers/devise.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-@import "framework/variables";
-
-// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
-// used for Devise email templates, and _should not_ be included in any
-// application stylesheets.
-//
-// Styles defined here are embedded directly into the resulting email HTML via
-// the `premailer` gem.
-
-$body-background-color: #363636;
-$message-background-color: #fafafa;
-
-$header-color: #6b4fbb;
-$body-color: #444;
-$cta-color: #e14329;
-$footer-link-color: #7e7e7e;
-
-$font-family: Helvetica, Arial, sans-serif;
-
-body {
-  background-color: $body-background-color;
-  font-family: $font-family;
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  -premailer-cellpadding: 0;
-  -premailer-cellspacing: 0;
-
-  border: 0;
-  border-collapse: separate;
-
-  &#wrapper {
-    background-color: $body-background-color;
-    width: 100%;
-  }
-
-  &#header {
-    margin: 0 auto;
-    text-align: left;
-    width: 600px;
-
-    & > td {
-      text-align: center;
-    }
-  }
-
-  &#body {
-    background-color: $message-background-color;
-    border: 1px solid $black;
-    border-radius: 4px;
-    margin: 0 auto;
-    width: 600px;
-  }
-
-  &#footer {
-    color: $footer-link-color;
-    font-size: 14px;
-    text-align: center;
-    width: 100%;
-  }
-
-  td {
-    &#body-container {
-      padding: 20px 40px;
-    }
-  }
-}
-
-.center {
-  text-align: center;
-}
-
-#logo {
-  border: none;
-  outline: none;
-  min-height: 88px;
-  width: 134px;
-}
-
-#content {
-  h2 {
-    color: $header-color;
-    font-size: 30px;
-    font-weight: 400;
-    line-height: 34px;
-    margin-top: 0;
-  }
-
-  p {
-    color: $body-color;
-    font-size: 17px;
-    line-height: 24px;
-    margin-bottom: 0;
-  }
-}
-
-#cta {
-  border: 1px solid $cta-color;
-  border-radius: 3px;
-  display: inline-block;
-  margin: 20px 0;
-  padding: 12px 24px;
-
-  a {
-    background-color: $message-background-color;
-    color: $cta-color;
-    display: inline-block;
-    text-decoration: none;
-  }
-}
-
-#tanuki {
-  padding: 40px 0 0;
-
-  img {
-    border: none;
-    outline: none;
-    width: 37px;
-    min-height: 36px;
-  }
-}
-
-#tagline {
-  font-size: 22px;
-  font-weight: 100;
-  padding: 4px 0 40px;
-}
-
-#social {
-  padding: 0 10px 20px;
-  width: 600px;
-  word-spacing: 20px;
-
-  a {
-    color: $footer-link-color;
-    text-decoration: none;
-  }
-}
diff --git a/app/helpers/emails_helper.rb b/app/helpers/emails_helper.rb
index 3b24f183785..fdbca789d21 100644
--- a/app/helpers/emails_helper.rb
+++ b/app/helpers/emails_helper.rb
@@ -66,4 +66,17 @@ module EmailsHelper
       )
     end
   end
+
+  def email_default_heading(text)
+    content_tag :h1, text, style: [
+      "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif",
+      'color:#333333',
+      'font-size:18px',
+      'font-weight:400',
+      'line-height:1.4',
+      'padding:0',
+      'margin:0',
+      'text-align:center'
+    ].join(';')
+  end
 end
diff --git a/app/mailers/devise_mailer.rb b/app/mailers/devise_mailer.rb
index f7ed61625f4..962570a0efd 100644
--- a/app/mailers/devise_mailer.rb
+++ b/app/mailers/devise_mailer.rb
@@ -2,7 +2,9 @@ class DeviseMailer < Devise::Mailer
   default from: "#{Gitlab.config.gitlab.email_display_name} <#{Gitlab.config.gitlab.email_from}>"
   default reply_to: Gitlab.config.gitlab.email_reply_to
 
-  layout 'devise_mailer'
+  layout 'mailer/devise'
+
+  helper EmailsHelper
 
   protected
 
diff --git a/app/views/devise/mailer/confirmation_instructions.html.haml b/app/views/devise/mailer/confirmation_instructions.html.haml
index 086bb8e083d..a508b7537a2 100644
--- a/app/views/devise/mailer/confirmation_instructions.html.haml
+++ b/app/views/devise/mailer/confirmation_instructions.html.haml
@@ -1,16 +1,15 @@
-.center
-  - if @resource.unconfirmed_email.present?
-    #content
-      %h2= @resource.unconfirmed_email
-      %p Click the link below to confirm your email address.
-    #cta
-      = link_to 'Confirm your email address', confirmation_url(@resource, confirmation_token: @token)
-  - else
-    #content
-      - if Gitlab.com?
-        %h2 Thanks for signing up to GitLab!
-      - else
-        %h2 Welcome, #{@resource.name}!
-      %p To get started, click the link below to confirm your account.
-    #cta
-      = link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token)
+- if @resource.unconfirmed_email.present?
+  #content
+    = email_default_heading(@resource.unconfirmed_email)
+    %p Click the link below to confirm your email address.
+  #cta
+    = link_to 'Confirm your email address', confirmation_url(@resource, confirmation_token: @token)
+- else
+  #content
+    - if Gitlab.com?
+      = email_default_heading('Thanks for signing up to GitLab!')
+    - else
+      = email_default_heading("Welcome, #{@resource.name}!")
+    %p To get started, click the link below to confirm your account.
+  #cta
+    = link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token)
diff --git a/app/views/devise/mailer/password_change.html.haml b/app/views/devise/mailer/password_change.html.haml
index 3349ee84807..5ec515285f2 100644
--- a/app/views/devise/mailer/password_change.html.haml
+++ b/app/views/devise/mailer/password_change.html.haml
@@ -1,10 +1,8 @@
-.center
-  #content
-    %h2 Hello, #{@resource.name}!
-    %p
-      The password for your GitLab account on
-      #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}
-      has successfully been changed.
-    %p
-      If you did not initiate this change, please contact your administrator
-      immediately.
+= email_default_heading("Hello, #{@resource.name}!")
+%p
+  The password for your GitLab account on
+  #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}
+  has successfully been changed.
+%p
+  If you did not initiate this change, please contact your administrator
+  immediately.
diff --git a/app/views/devise/mailer/reset_password_instructions.html.haml b/app/views/devise/mailer/reset_password_instructions.html.haml
index e91c9522520..47e192afa52 100644
--- a/app/views/devise/mailer/reset_password_instructions.html.haml
+++ b/app/views/devise/mailer/reset_password_instructions.html.haml
@@ -1,12 +1,10 @@
-.center
-  #content
-    %h2 Hello, #{@resource.name}!
-    %p
-      Someone, hopefully you, has requested to reset the password for your
-      GitLab account on #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}.
-    %p
-      If you did not perform this request, you can safely ignore this email.
-    %p
-      Otherwise, click the link below to complete the process.
-    #cta
-      = link_to('Reset password', edit_password_url(@resource, reset_password_token: @token))
+= email_default_heading("Hello, #{@resource.name}!")
+%p
+  Someone, hopefully you, has requested to reset the password for your
+  GitLab account on #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}.
+%p
+  If you did not perform this request, you can safely ignore this email.
+%p
+  Otherwise, click the link below to complete the process.
+#cta
+  = link_to('Reset password', edit_password_url(@resource, reset_password_token: @token))
diff --git a/app/views/devise/mailer/unlock_instructions.html.haml b/app/views/devise/mailer/unlock_instructions.html.haml
index 9990d1ccac6..79e3a35cc9a 100644
--- a/app/views/devise/mailer/unlock_instructions.html.haml
+++ b/app/views/devise/mailer/unlock_instructions.html.haml
@@ -1,9 +1,8 @@
-.center
-  #content
-    %h2 Hello, #{@resource.name}!
-    %p
-      Your GitLab account has been locked due to an excessive amount of unsuccessful
-      sign in attempts. Your account will automatically unlock in #{time_ago_in_words(Devise.unlock_in.from_now)}
-      or you may click the link below to unlock now.
-    #cta
-      = link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
+#content
+  = email_default_heading("Hello, #{@resource.name}!")
+  %p
+    Your GitLab account has been locked due to an excessive amount of unsuccessful
+    sign in attempts. Your account will automatically unlock in #{time_ago_in_words(Devise.unlock_in.from_now)}
+    or you may click the link below to unlock now.
+  #cta
+    = link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
diff --git a/app/views/layouts/_mailer.html.haml b/app/views/layouts/_mailer.html.haml
new file mode 100644
index 00000000000..983ed22a506
--- /dev/null
+++ b/app/views/layouts/_mailer.html.haml
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+%html{ lang: "en" }
+  %head
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
+    %title= message.subject
+    :css
+      /* CLIENT-SPECIFIC STYLES */
+      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+      img { -ms-interpolation-mode: bicubic; }
+
+      /* iOS BLUE LINKS */
+      a[x-apple-data-detectors] {
+          color: inherit !important;
+          text-decoration: none !important;
+          font-size: inherit !important;
+          font-family: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+      }
+
+      /* ANDROID MARGIN HACK */
+      body { margin:0 !important; }
+      div[style*="margin: 16px 0"] { margin:0 !important; }
+
+      @media only screen and (max-width: 639px) {
+          body, #body {
+              min-width: 320px !important;
+          }
+          table.wrapper {
+              width: 100% !important;
+              min-width: 320px !important;
+          }
+          table.wrapper > tbody > tr > td {
+              border-left: 0 !important;
+              border-right: 0 !important;
+              border-radius: 0 !important;
+              padding-left: 10px !important;
+              padding-right: 10px !important;
+          }
+      }
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
+      %tbody
+        %tr.line
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }  
+        %tr.header
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            = header_logo
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
+                      %tbody
+                        = yield
+
+        %tr.footer
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "33", src: image_url('mailers/gitlab_footer_logo.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
+            %div
+              %a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
+              &middot;
+              %a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
+            %div
+              You're receiving this email because of your account on
+              = succeed "." do
+                %a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
+
+        = yield :additional_footer
diff --git a/app/views/layouts/devise_mailer.html.haml b/app/views/layouts/devise_mailer.html.haml
deleted file mode 100644
index e1e1f9ae516..00000000000
--- a/app/views/layouts/devise_mailer.html.haml
+++ /dev/null
@@ -1,34 +0,0 @@
-!!! 5
-%html
-  %head
-    %meta{ content: 'text/html; charset=UTF-8', 'http-equiv'=> 'Content-Type' }
-    = stylesheet_link_tag 'mailers/devise'
-
-  %body
-    %table#wrapper
-      %tr
-        %td
-          %table#header
-            %td{ valign: "top" }
-              = image_tag('mailers/gitlab_header_logo.png', id: 'logo', alt: 'GitLab Wordmark')
-
-          %table#body
-            %tr
-              %td#body-container
-                = yield
-
-          - if Gitlab.com?
-            %table#footer
-              %tr
-                %td#tanuki
-                  = image_tag('mailers/gitlab_tanuki_2x.png', alt: 'GitLab Logo')
-              %tr
-                %td#tagline
-                  Everyone can contribute
-              %tr
-                %td#social
-                  = link_to 'Blog',     'https://about.gitlab.com/blog/'
-                  = link_to 'Twitter',  'https://twitter.com/gitlab'
-                  = link_to 'Facebook', 'https://www.facebook.com/gitlab/'
-                  = link_to 'YouTube',  'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg'
-                  = link_to 'LinkedIn', 'https://www.linkedin.com/company/gitlab-com'
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
index 53268cc22f8..28dcbce7183 100644
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@@ -1,72 +1 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-%html{ lang: "en" }
-  %head
-    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
-    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
-    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
-    %title= message.subject
-    :css
-      /* CLIENT-SPECIFIC STYLES */
-      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
-      img { -ms-interpolation-mode: bicubic; }
-
-      /* iOS BLUE LINKS */
-      a[x-apple-data-detectors] {
-          color: inherit !important;
-          text-decoration: none !important;
-          font-size: inherit !important;
-          font-family: inherit !important;
-          font-weight: inherit !important;
-          line-height: inherit !important;
-      }
-
-      /* ANDROID MARGIN HACK */
-      body { margin:0 !important; }
-      div[style*="margin: 16px 0"] { margin:0 !important; }
-
-      @media only screen and (max-width: 639px) {
-          body, #body {
-              min-width: 320px !important;
-          }
-          table.wrapper {
-              width: 100% !important;
-              min-width: 320px !important;
-          }
-          table.wrapper > tbody > tr > td {
-              border-left: 0 !important;
-              border-right: 0 !important;
-              border-radius: 0 !important;
-              padding-left: 10px !important;
-              padding-right: 10px !important;
-          }
-      }
-  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
-    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
-      %tbody
-        %tr.line
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }  
-        %tr.header
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
-            = header_logo
-        %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
-            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
-              %tbody
-                %tr
-                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
-                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
-                      %tbody
-                        = yield
-
-        %tr.footer
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
-            %img{ alt: "GitLab", height: "33", src: image_url('mailers/gitlab_footer_logo.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
-            %div
-              %a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
-              &middot;
-              %a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
-            %div
-              You're receiving this email because of your account on
-              = succeed "." do
-                %a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
+= render 'layouts/mailer'
diff --git a/app/views/layouts/mailer/devise.html.haml b/app/views/layouts/mailer/devise.html.haml
new file mode 100644
index 00000000000..054b2c2fa26
--- /dev/null
+++ b/app/views/layouts/mailer/devise.html.haml
@@ -0,0 +1,21 @@
+- if Gitlab.com?
+  - content_for :additional_footer do
+    %tr
+      %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+        %div
+          Everyone can contribute
+        %div
+          = link_to 'Blog', 'https://about.gitlab.com/blog/', style: "color:#3777b0;text-decoration:none;"
+          &middot;
+          = link_to 'Twitter', 'https://twitter.com/gitlab', style: "color:#3777b0;text-decoration:none;"
+          &middot;
+          = link_to 'Facebook', 'https://www.facebook.com/gitlab/', style: "color:#3777b0;text-decoration:none;"
+          &middot;
+          = link_to 'YouTube', 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg', style: "color:#3777b0;text-decoration:none;"
+          &middot;
+          = link_to 'LinkedIn', 'https://www.linkedin.com/company/gitlab-com', style: "color:#3777b0;text-decoration:none;"
+
+= render layout: 'layouts/mailer' do
+  %tr
+    %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 5px;text-align:center;" }
+      = yield
diff --git a/changelogs/unreleased/feature-unify-email-layouts.yml b/changelogs/unreleased/feature-unify-email-layouts.yml
new file mode 100644
index 00000000000..7a2e3f20b6b
--- /dev/null
+++ b/changelogs/unreleased/feature-unify-email-layouts.yml
@@ -0,0 +1,4 @@
+---
+title: Update the devise mail templates to match the design of the pipeline emails
+merge_request: 10483
+author: Alexis Reigel