Merge pull request #13216 from drummer83/email_header

Email header: Improve logo, resizing and styles

app/assets/stylesheets/mail/email.scss

@@ -12,11 +12,6 @@ img {
   max-width: 100%;
 }
 
-.collapse {
-  margin: 0;
-  padding: 0;
-}
-
 body {
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
@@ -32,18 +27,6 @@ a {
   color: #0096ad;
 }
 
-.btn {
-  text-decoration: none;
-  color: #FFF;
-  background-color: #666;
-  padding: 10px 16px;
-  font-weight: bold;
-  margin-right: 10px;
-  text-align: center;
-  cursor: pointer;
-  display: inline-block;
-}
-
 p.callout {
   padding: 15px;
   background-color: #e1f0f5;
@@ -121,6 +104,12 @@ table.order-summary {
   text-align: right;
 }
 
+.logo {
+  vertical-align: middle;
+  max-height: 50px;
+  max-width: 247px;
+}
+
 .social .soc-btn {
   padding: 3px 7px;
   font-size: 12px;
@@ -178,17 +167,11 @@ del.quantity_was {
 
 table.head-wrap {
   width: 100%;
+  background-color: #f2f2f2;
 }
 
-.header.container table td {
-  &.logo {
-    padding: 15px;
-  }
-
-  &.label {
-    padding: 15px;
-    padding-left: 0px;
-  }
+.collapse {
+  margin: 0;
 }
 
 /* -------------------------------------
@@ -267,10 +250,6 @@ h6 {
   color: #999;
 }
 
-.collapse {
-  margin: 0 !important;
-}
-
 p, ul {
   margin-bottom: 10px;
   font-weight: normal;
@@ -382,12 +361,6 @@ ul {
   }
 }
 
-.column-wrap {
-  padding: 0 !important;
-  margin: 0 auto;
-  max-width: 600px !important;
-}
-
 .column table {
   width: 100%;
 }

app/views/layouts/mailer.html.haml

@@ -8,16 +8,16 @@
     = stylesheet_link_tag 'mail'
   %body{:bgcolor => "#FFFFFF" }
     - unless @hide_ofn_navigation
-      %table.head-wrap{:bgcolor => "#f2f2f2"}
+      %table.head-wrap
         %tr
           %td
-          %td.header.container
+          %td.container
             .content
-              %table{:bgcolor => "#f2f2f2"}
+              %table
                 %tr
                   %td
-                    = image_tag ContentConfig.url_for(:footer_logo), width: "144", height: "50"
-                  %td{:align => "right"}
+                    = image_tag ContentConfig.url_for(:logo), class: "logo"
+                  %td.text-right
                     %h6.collapse
                       = Spree::Config[:site_name]
           %td

spec/mailers/order_mailer_spec.rb

@@ -46,7 +46,7 @@ RSpec.describe Spree::OrderMailer do
     end
 
     it "display the OFN header by default" do
-      expect(email.body).to include(ContentConfig.url_for(:footer_logo))
+      expect(email.body).to include(ContentConfig.url_for(:logo))
     end
 
     context 'when hide OFN navigation is enabled for the distributor of the order' do
@@ -55,7 +55,7 @@ RSpec.describe Spree::OrderMailer do
       end
 
       it 'does not display the OFN navigation' do
-        expect(email.body).not_to include(ContentConfig.url_for(:footer_logo))
+        expect(email.body).not_to include(ContentConfig.url_for(:logo))
       end
     end
   end

spec/mailers/subscription_mailer_spec.rb

@@ -117,7 +117,7 @@ RSpec.describe SubscriptionMailer, type: :mailer do
     end
 
     it "display the OFN header by default" do
-      expect(email.body).to include(ContentConfig.url_for(:footer_logo))
+      expect(email.body).to include(ContentConfig.url_for(:logo))
     end
 
     describe "linking to order page" do
@@ -162,7 +162,7 @@ RSpec.describe SubscriptionMailer, type: :mailer do
       end
 
       it 'does not display the OFN navigation' do
-        expect(email.body).not_to include(ContentConfig.url_for(:footer_logo))
+        expect(email.body).not_to include(ContentConfig.url_for(:logo))
       end
     end
   end