Header: Improve logo, resizing and styles

Use the site's main logo instead of footer logo to allow for better contrast on gray background (dark text on gray instead of white text on gray)

The table's background color is defined in the parent table already

Limit the max width and max height of the logo and resize the logo accordingly instead of forcing it to squeeze into a fixed size

app/assets/stylesheets/mail/email.scss

@@ -121,6 +121,12 @@ table.order-summary {
   text-align: right;
 }
 
+.logo {
+  vertical-align: middle;
+  max-height: 50px;
+  max-width: 300px;
+}
+
 .social .soc-btn {
   padding: 3px 7px;
   font-size: 12px;
@@ -178,17 +184,7 @@ del.quantity_was {
 
 table.head-wrap {
   width: 100%;
-}
-
-.header.container table td {
-  &.logo {
-    padding: 15px;
-  }
-
-  &.label {
-    padding: 15px;
-    padding-left: 0px;
-  }
+  background-color: #f2f2f2;
 }
 
 /* -------------------------------------

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