Create in product marketing email layout

app/mailers/emails/in_product_marketing.rb

@@ -29,7 +29,7 @@ module Emails
         format.html do
           @message.format = :html
 
-          render layout: nil
+          render layout: 'in_product_marketing_mailer'
         end
 
         format.text do

app/views/layouts/in_product_marketing_mailer.html.haml

+!!!
+%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" }
+    %link{ href: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600", rel: "stylesheet", type: "text/css", data: { premailer: 'ignore' } }
+    %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;
+      }
+
+      /* RESET STYLES */
+      img {
+        border: 0;
+        height: auto;
+        line-height: 100%;
+        outline: none;
+        text-decoration: none;
+      }
+
+      table {
+        border-collapse: collapse !important;
+      }
+
+      body {
+        height: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        background-color: #ffffff;
+        color: #424242;
+      }
+
+      a {
+        color: #6b4fbb;
+        text-decoration: underline;
+      }
+
+      .cta_link a {
+        font-size: 24px;
+        font-family: 'Source Sans Pro', helvetica, arial, sans-serif;
+        color: #ffffff;
+        text-decoration: none;
+        border-radius: 5px;
+        -webkit-border-radius: 5px;
+        background-color: #6e49cb;
+        border-top: 15px solid #6e49cb;
+        border-bottom: 15px solid #6e49cb;
+        border-right: 40px solid #6e49cb;
+        border-left: 40px solid #6e49cb;
+        display: inline-block;
+      }
+
+      .footernav {
+        display: inline !important;
+      }
+
+      .footernav a {
+        color: #6e49cb;
+      }
+
+      .address {
+        margin: 0;
+        font-size: 16px;
+        line-height: 26px;
+      }
+
+    :css
+      /* 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;
+      }
+    /[if gte mso 9]
+      <xml>
+      <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+      </xml>
+    /[if (mso)|(mso 16)]
+      <style type="text/css">
+      body, table, td, a, span {  font-family: Arial, Helvetica, sans-serif !important;  }
+      </style>
+    :css
+      @media only screen and (max-width: 595px) {
+
+      .wrapper {
+        width: 100% !important;
+        margin: 0 auto !important;
+        padding: 0 !important;
+        }
+
+        p,
+        li {
+        font-size: 18px !important;
+        line-height: 26px !important;
+        }
+
+        .stack {
+          width: 100% !important;
+        }
+
+        .stack-mobile-padding {
+          width: 100% !important;
+          margin-top: 20px !important;
+        }
+
+        .callout {
+          padding-bottom: 20px !important;
+        }
+
+        .redbutton {
+          text-align: center;
+        }
+
+        .stack33 {
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          direction: ltr !important;
+          text-align: center !important;
+        }
+      }
+
+      @media only screen and (max-width: 480px) {
+        u~div {
+          width: 100vw !important;
+        }
+
+        div>u~div {
+          width: 100% !important;
+        }
+      }
+  %body#body{ width: "100%" }
+    %table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
+      %tr
+        %td{ align: "center", style: "padding: 0px;" }
+          %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "600" }
+            %tr
+              %td{ style: "padding: 0px;" }
+                #main-story.mktEditable{ mktoname: "main-story" }
+                  %table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
+                    %tr
+                      %td{ align: "left", style: "padding: 0 20px;" }
+                        = about_link('mailers/in_product_marketing/gitlab-logo-gray-rgb.png', 200)
+                    %tr
+                      %td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
+
+                    = yield
+
+                    %tr{ style: "background-color: #ffffff;" }
+                      %td{ align: "center", style: "padding:75px 20px 25px;" }
+                        = about_link('gitlab_logo.png', 80)
+                    %tr{ style: "background-color: #ffffff;" }
+                      %td{ align: "center", style: "padding:0px ;" }
+                    %tr{ style: "background-color: #ffffff;" }
+                      %td{ align: "center", style: "padding:0px 10px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; " }
+                        %span.footernav{ style: "color: #6e49cb; font-size: 16px; line-height: 26px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
+                          = @message.footer_links.join('&nbsp;' * 3 + '|' + '&nbsp;' * 4).html_safe
+                    %tr{ style: "background-color:#ffffff;" }
+                      %td{ align: "center", style: "padding: 40px 30px 20px 30px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
+                        .address= @message.address
+                    %tr{ style: "background-color: #ffffff;" }
+                      %td{ align: "left", style: "padding:20px 30px 20px 30px;" }
+                        %span.footernav{ style: "color: #6e49cb; font-size: 14px; line-height: 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#424242;" }
+                          = @message.unsubscribe.html_safe

lib/gitlab/email/message/in_product_marketing/base.rb

@@ -88,29 +88,6 @@ module Gitlab
             end
           end
 
-          def address
-            s_('InProductMarketing|%{strong_start}GitLab Inc.%{strong_end} 268 Bush Street, #350, San Francisco, CA 94104, USA').html_safe % strong_options
-          end
-
-          def footer_links
-            links = [
-              [s_('InProductMarketing|Blog'), 'https://about.gitlab.com/blog'],
-              [s_('InProductMarketing|Twitter'), 'https://twitter.com/gitlab'],
-              [s_('InProductMarketing|Facebook'), 'https://www.facebook.com/gitlab'],
-              [s_('InProductMarketing|YouTube'), 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg']
-            ]
-            case format
-            when :html
-              links.map do |text, link|
-                ActionController::Base.helpers.link_to(text, link)
-              end
-            else
-              '| ' + links.map do |text, link|
-                [text, link].join(' ')
-              end.join("\n| ")
-            end
-          end
-
           def logo_path
             ["mailers/in_product_marketing", "#{track}-#{series}.png"].join('/')
           end

lib/gitlab/email/message/in_product_marketing/helper.rb

@@ -8,6 +8,29 @@ module Gitlab
           include ActionView::Context
           include ActionView::Helpers::TagHelper
 
+          def footer_links
+            links = [
+              [s_('InProductMarketing|Blog'), 'https://about.gitlab.com/blog'],
+              [s_('InProductMarketing|Twitter'), 'https://twitter.com/gitlab'],
+              [s_('InProductMarketing|Facebook'), 'https://www.facebook.com/gitlab'],
+              [s_('InProductMarketing|YouTube'), 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg']
+            ]
+            case format
+            when :html
+              links.map do |text, link|
+                ActionController::Base.helpers.link_to(text, link)
+              end
+            else
+              '| ' + links.map do |text, link|
+                [text, link].join(' ')
+              end.join("\n| ")
+            end
+          end
+
+          def address
+            s_('InProductMarketing|%{strong_start}GitLab Inc.%{strong_end} 268 Bush Street, #350, San Francisco, CA 94104, USA').html_safe % strong_options
+          end
+
           private
 
           def list(array)