From db3a8a6b302726f58ce27fb17d6e2ad72a29a617 Mon Sep 17 00:00:00 2001 From: Konrad Date: Tue, 18 Mar 2025 15:17:32 +0100 Subject: [PATCH 1/4] 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 | 18 +++++++----------- app/views/layouts/mailer.html.haml | 10 +++++----- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/mail/email.scss b/app/assets/stylesheets/mail/email.scss index bfb0684f9c..928b9e5807 100644 --- a/app/assets/stylesheets/mail/email.scss +++ b/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; } /* ------------------------------------- diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml index f12aad1928..23d7e412b1 100644 --- a/app/views/layouts/mailer.html.haml +++ b/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 From 9ee37ee0b6605f43811d7c2cebc8cbb6ef30bb33 Mon Sep 17 00:00:00 2001 From: Konrad Date: Tue, 18 Mar 2025 15:18:49 +0100 Subject: [PATCH 2/4] Update specs --- spec/mailers/order_mailer_spec.rb | 4 ++-- spec/mailers/subscription_mailer_spec.rb | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/spec/mailers/order_mailer_spec.rb b/spec/mailers/order_mailer_spec.rb index 345ad9247a..020f54c3b8 100644 --- a/spec/mailers/order_mailer_spec.rb +++ b/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 diff --git a/spec/mailers/subscription_mailer_spec.rb b/spec/mailers/subscription_mailer_spec.rb index aca63f8f58..9653423b9a 100644 --- a/spec/mailers/subscription_mailer_spec.rb +++ b/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 From 3b0b023624e1bf2f1b9d347c23b2f1553538cc61 Mon Sep 17 00:00:00 2001 From: Konrad Date: Tue, 18 Mar 2025 15:24:44 +0100 Subject: [PATCH 3/4] Remove unused styles Class "btn": not used in any of the emails and invoices Class "column-wrap": not used in any of the emails and invoices Class "collapse": margin and padding are set globally to zero already, padding is not used, but we need margin to overwrite it for h6 --- app/assets/stylesheets/mail/email.scss | 31 ++++---------------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/mail/email.scss b/app/assets/stylesheets/mail/email.scss index 928b9e5807..d137f6c7f8 100644 --- a/app/assets/stylesheets/mail/email.scss +++ b/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; @@ -187,6 +170,10 @@ table.head-wrap { background-color: #f2f2f2; } +.collapse { + margin: 0; +} + /* ------------------------------------- * BODY *------------------------------------- */ @@ -263,10 +250,6 @@ h6 { color: #999; } -.collapse { - margin: 0 !important; -} - p, ul { margin-bottom: 10px; font-weight: normal; @@ -378,12 +361,6 @@ ul { } } -.column-wrap { - padding: 0 !important; - margin: 0 auto; - max-width: 600px !important; -} - .column table { width: 100%; } From d42d86b76314bd00a90f6317b3241a96a7437989 Mon Sep 17 00:00:00 2001 From: Konrad Date: Fri, 21 Mar 2025 13:56:15 +0100 Subject: [PATCH 4/4] Reduce max-width of logo to reflect the proposed aspect ratio of 640px / 130px (= 247px / 50px) --- app/assets/stylesheets/mail/email.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mail/email.scss b/app/assets/stylesheets/mail/email.scss index d137f6c7f8..7a5a7e83da 100644 --- a/app/assets/stylesheets/mail/email.scss +++ b/app/assets/stylesheets/mail/email.scss @@ -107,7 +107,7 @@ table.order-summary { .logo { vertical-align: middle; max-height: 50px; - max-width: 300px; + max-width: 247px; } .social .soc-btn {