server icon indicating copy to clipboard operation
server copied to clipboard

[PM-29568] Fix footer styling

Open ike-kottlowski opened this issue 3 months ago â€ĸ 3 comments

đŸŽŸī¸ Tracking

PM-29568

📔 Objective

Fixing color, icon size, and spacing for the footer.

Rebuilt Auth owned templates.

📸 Screenshots

Welcome Email

image

⏰ Reminders before review

  • Contributor guidelines followed
  • All formatters and local linters executed and passed
  • Written new unit and / or integration tests where applicable
  • Protected functional changes with optionality (feature flags)
  • Used internationalization (i18n) for all UI strings
  • CI builds passed
  • Communicated to DevOps any deployment requirements
  • Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

đŸĻŽ Reviewer guidelines

  • 👍 (:+1:) or similar for great changes
  • 📝 (:memo:) or â„šī¸ (:information_source:) for notes or general info
  • ❓ (:question:) for questions
  • 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
  • 🎨 (:art:) for suggestions / improvements
  • ❌ (:x:) or âš ī¸ (:warning:) for more significant problems or concerns needing attention
  • 🌱 (:seedling:) or â™ģī¸ (:recycle:) for future improvements or indications of technical debt
  • ⛏ (:pick:) for minor or nitpick changes

ike-kottlowski avatar Dec 10 '25 15:12 ike-kottlowski

Claude finished @ike-kottlowski's task —— View job


Code Review for Footer Styling Changes

Tasks

  • [x] Review screenshot to understand visual changes
  • [x] Read modified template files
  • [x] Run comprehensive code review using bitwarden-code-reviewer agent
  • [x] Post review findings

Review Summary

Overall Assessment: ✅ APPROVED

I've completed a comprehensive review of the footer styling changes across all 6 modified email template files. The changes successfully update the footer to match UIF Tailwind standards.

What Changed

Source Files (MJML Components):

  • src/Core/MailTemplates/Mjml/components/footer.mjml: Updated icon size from 30px → 24px, adjusted padding
  • src/Core/MailTemplates/Mjml/components/mj-bw-learn-more-footer.js: Updated background color from #f6f6f6 → #F3F6F9

Compiled Templates (Auto-generated from MJML):

  • src/Core/MailTemplates/Handlebars/Auth/SendAccessEmailOtpEmailv2.html.hbs
  • src/Core/MailTemplates/Handlebars/MJML/Auth/Onboarding/welcome-family-user.html.hbs
  • src/Core/MailTemplates/Handlebars/MJML/Auth/Onboarding/welcome-individual-user.html.hbs
  • src/Core/MailTemplates/Handlebars/MJML/Auth/Onboarding/welcome-org-user.html.hbs

All compiled templates properly reflect the MJML component changes.

Findings

✅ Template Syntax: All MJML and Handlebars syntax is correct and valid

✅ Consistency: Styling changes are consistently applied across all templates

✅ Security: No security concerns identified - modified sections contain only static content with no dynamic variables or user input

✅ Visual Quality: Changes align with the objective to match UIF Tailwind standards (confirmed by screenshot)

✅ Code Quality: HTML structure remains valid with properly balanced tags

✅ Build Process: Templates were correctly rebuilt from MJML sources (verified by consistent changes)

Specific Changes Validated

  1. Footer background color: #f6f6f6 → #F3F6F9 (UIF Tailwind standard gray)
  2. Social media icon size: 30px → 24px (better visual proportion)
  3. Spacing adjustments: Updated padding values for improved visual hierarchy

The screenshot confirms these changes render correctly in the final email output.

Recommendation

This PR is ready to merge. The changes are straightforward, consistently applied, and achieve the stated objective without introducing any issues.


claude[bot] avatar Dec 10 '25 15:12 claude[bot]

Logo Checkmarx One – Scan Summary & Details – 6521ddc9-6b2a-407a-a054-71a7b0529448

Great job! No new security vulnerabilities introduced in this pull request

github-actions[bot] avatar Dec 10 '25 16:12 github-actions[bot]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 53.83%. Comparing base (b1390c9) to head (cdc511a). :warning: Report is 19 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6722      +/-   ##
==========================================
+ Coverage   53.65%   53.83%   +0.18%     
==========================================
  Files        1926     1917       -9     
  Lines       85720    85101     -619     
  Branches     7687     7613      -74     
==========================================
- Hits        45989    45816     -173     
+ Misses      37958    37525     -433     
+ Partials     1773     1760      -13     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Dec 10 '25 16:12 codecov[bot]

Waiting on SRE ticket to upload the social-icons-* for correct styling for footer social icons.

ike-kottlowski avatar Dec 11 '25 13:12 ike-kottlowski