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/mailers/devise_mailer.rb b/app/mailers/devise_mailer.rb index d152cb912af..962570a0efd 100644 --- a/app/mailers/devise_mailer.rb +++ b/app/mailers/devise_mailer.rb @@ -2,7 +2,7 @@ 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 'mailer' + layout 'mailer/devise' helper EmailsHelper 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 b378540e03c..5ec515285f2 100644 --- a/app/views/devise/mailer/password_change.html.haml +++ b/app/views/devise/mailer/password_change.html.haml @@ -1,9 +1,8 @@ -= render layout: 'layouts/mailer/default_content' do - 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 9ae240ba309..47e192afa52 100644 --- a/app/views/devise/mailer/reset_password_instructions.html.haml +++ b/app/views/devise/mailer/reset_password_instructions.html.haml @@ -1,11 +1,10 @@ -= render layout: 'layouts/mailer/default_content' do - 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..53268cc22f8 --- /dev/null +++ b/app/views/layouts/_mailer.html.haml @@ -0,0 +1,72 @@ + +%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 + · + %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 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 @@ - -%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 - · - %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..6f15f427369 --- /dev/null +++ b/app/views/layouts/mailer/devise.html.haml @@ -0,0 +1,3 @@ += render layout: 'layouts/mailer' do + = render layout: 'layouts/mailer/default_content' do + = yield