From b2535c37e8b32add7561d2ab627c76c5eb9f64e4 Mon Sep 17 00:00:00 2001 From: Agboolafeyikemi Date: Fri, 24 Jul 2026 15:10:52 +0100 Subject: [PATCH] Background colour on social links in emails not working Inline the background colour on each social link in the shared mailer partial instead of relying on email.css. Email clients only reliably render inline styles, and production emails have been inlining a stale cached copy of /assets/email.css that predates the current social links, which left every button except Facebook with invisible white text on no background. With the colours inlined in the template, the buttons render correctly regardless of which version of the stylesheet premailer resolves. Closes #2634. --- app/views/shared_mailers/_social.html.haml | 12 +++++++----- spec/mailers/workshop_invitation_mailer_spec.rb | 11 +++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/app/views/shared_mailers/_social.html.haml b/app/views/shared_mailers/_social.html.haml index 0810dc874..86b9974be 100644 --- a/app/views/shared_mailers/_social.html.haml +++ b/app/views/shared_mailers/_social.html.haml @@ -8,12 +8,14 @@ %td %h5 Connect with us: + -# background-color is inlined on each link because email clients only + -# reliably render inline styles; see issue #2634 %p - %a{ href: "https://slack.codebar.io/", class: 'soc-btn sl'} Join us on Slack - %a{ href: "https://www.linkedin.com/company/codebarcommunity", class: "soc-btn li" } Follow us on LinkedIn - %a{ href: "https://www.facebook.com/codebarHQ", class: 'soc-btn fb'} Follow us on Facebook - %a{ href: "https://bsky.app/profile/codebar.bsky.social", class: "soc-btn bs" } Follow us on Bluesky - %a{ href: "https://www.youtube.com/channel/UCEYz232agE47GHUq8wneBCA", class: "soc-btn yt" } Follow us on YouTube + %a{ href: "https://slack.codebar.io/", class: 'soc-btn sl', style: 'background-color: #2EB67D;' } Join us on Slack + %a{ href: "https://www.linkedin.com/company/codebarcommunity", class: "soc-btn li", style: 'background-color: #0077B5;' } Follow us on LinkedIn + %a{ href: "https://www.facebook.com/codebarHQ", class: 'soc-btn fb', style: 'background-color: #3B5998;' } Follow us on Facebook + %a{ href: "https://bsky.app/profile/codebar.bsky.social", class: "soc-btn bs", style: 'background-color: #1daced;' } Follow us on Bluesky + %a{ href: "https://www.youtube.com/channel/UCEYz232agE47GHUq8wneBCA", class: "soc-btn yt", style: 'background-color: #FF0000;' } Follow us on YouTube diff --git a/spec/mailers/workshop_invitation_mailer_spec.rb b/spec/mailers/workshop_invitation_mailer_spec.rb index ba0241b8a..0584a2f81 100644 --- a/spec/mailers/workshop_invitation_mailer_spec.rb +++ b/spec/mailers/workshop_invitation_mailer_spec.rb @@ -110,6 +110,17 @@ expect(email.body.encoded).to match(workshop.chapter.email) end + it '#invite_student renders social links with inline background colours' do + # asserts on the template output before premailer runs, so the colours + # don't depend on email.css being resolved (see issue #2634) + mail = described_class.invite_student(workshop, member, invitation) + + html = mail.body.decoded + ['#2EB67D', '#0077B5', '#3B5998', '#1daced', '#FF0000'].each do |colour| + expect(html).to include("background-color: #{colour}") + end + end + it '#attending renders workshop description as HTML, not escaped' do description = 'Important notice: Please bring a laptop.' workshop = Fabricate(:workshop, description: description)