-
-
Notifications
You must be signed in to change notification settings - Fork 11k
🐛 Updated update email member email styles #23279
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
closes TryGhost#21298 This change updates the "update email" member email so that it's styles match the "sign up" and other member emails.
WalkthroughThe update modifies the email template function used for confirming member email updates. The function signature is extended to accept new optional parameters for accent color, site domain, and site URL. The email's visual design is revised: the background color is changed to white, the container width is reduced, and line height is increased. The confirmation button and links now use a customizable accent color. Responsive CSS is added for small screens, and anchor tags receive a standard color. The footer is restructured within the main table for improved semantics, with updated sender and site information. Assessment against linked issues
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/core/core/server/services/members/emails/update-email.js (1)
119-119
: Consider updating the greeting for consistencyAs mentioned in the PR objectives, you might want to change "Hey there," to "Hey there!" to be consistent with most other member emails. This is the only content modification suggested in the PR description besides the footer change which has already been implemented.
- <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 20px; color: #15212A; font-weight: bold; line-height: 24px; margin: 0; margin-bottom: 15px;">${t('Hey there,')}</p> + <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 20px; color: #15212A; font-weight: bold; line-height: 24px; margin: 0; margin-bottom: 15px;">${t('Hey there!')}</p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ghost/core/core/server/services/members/emails/update-email.js
(4 hunks)
🔇 Additional comments (11)
ghost/core/core/server/services/members/emails/update-email.js (11)
1-1
: Great enhancement to the function signature!Adding optional parameters for
accentColor
,siteDomain
, andsiteUrl
with a sensible default foraccentColor
improves the template's flexibility and customization options, aligning with the goal of making this email consistent with other member emails.
52-55
: Good responsive design improvementAdding responsive styles for small paragraphs and links ensures better readability on mobile devices, which is essential for a good email experience across devices.
97-99
: Consistent link stylingSetting a global anchor tag color helps maintain visual consistency throughout the email, which is a good design practice.
102-102
: Improved visual consistencyChanging the background color to white and increasing the line height from 1.4 to 1.5em improves readability and matches the style of other member emails, as mentioned in the PR objectives.
106-106
: Better container sizingReducing the container width from 600px to 540px provides a more focused reading experience and likely improves appearance on various devices.
109-110
: Excellent addition of preheader textAdding a hidden preheader with localized text improves the email preview experience in most email clients, giving users context before they open the email.
115-115
: Cleaner wrapper stylingRemoving the explicit padding on the wrapper cell (previously 40px 50px) helps achieve a more consistent layout matching other email templates.
128-128
: Excellent use of dynamic stylingUsing the
accentColor
parameter for the button's background, border, and text colors enables better brand alignment and customization, making this email more adaptable to different site themes.
136-136
: Improved text styling and readabilityThe adjustments to the expiration notice margin and URL text color (now a darker, more readable shade) improve the overall readability and visual hierarchy of the email.
Also applies to: 139-139
142-156
: Well-structured footer sectionThe restructured footer with proper semantic HTML, small print text styling, and the addition of site information with clickable links matches the footer style of other member emails as mentioned in the PR objectives. The new "This message was sent from {{site}} to {{email}}" format is now consistent with other member emails.
1-173
:❓ Verification inconclusive
Consider adding tests as mentioned in PR objectives
Since you mentioned in the PR objectives that there are no automated tests for this member email, consider adding basic tests to ensure the email template renders correctly with various parameters and localizations.
You could run a check to see if other member emails have tests that could be used as a reference:
🏁 Script executed:
#!/bin/bash # Look for tests related to other member email templates rg -t js "test.*email" --glob "**/*.test.js" ghost/core/core/server/services/members/emails/Length of output: 94
Add tests for member email templates
I ran the following search and didn’t find any existing tests for member email templates:
rg -t js 'test.*email' --glob '**/*.test.js' ghost/core/core/server/services/members/emails/Please verify whether there are any tests elsewhere in the repo; if not, add a basic test suite for
ghost/core/core/server/services/members/emails/update-email.js
that covers:
- Rendering with default and custom
accentColor
- Correct injection of
url
,siteUrl
,siteDomain
and- Proper output of translated strings via
t()
This change updates the "update email" member email so that it's styles match the "sign up", and other, member emails.
This closes #21298.
For comparison, here's what the sign up member email currently looks like:
Note: I couldn't see any automated tests for this member email. If I've missed these and there's a test you'd like me to add or update, please do let me know.
Note: I've changed the footer message, from "Sent to {{email}}", to "This message was sent from {{site}} to {{email}}". The later is what the other member emails have in their footers. This is the only content change I've made. The other changes are purely stylistic.
Potentially the heading should change from "Hey there," to "Hey there!". Most other member emails use "Hey there!", expect the subscribe email, which also uses "Hey there,". Let me know if you'd like me to also make this change.