Updated CTA card bg and link styles #22207
Conversation
Ref https://linear.app/ghost/issue/PLG-355/improve-cta-card-settings-panel - Added pink and purple as background colors to the CTA card. - Changed CTA card link styles to currentColor instead of accent color – both for the label and the body text.
WalkthroughThe pull request adds new CSS styling options by introducing two background classes, Possibly Related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ghost/email-service/lib/email-templates/partials/styles.hbs (1)
944-946: Consider using RGBA colors for consistency.The background colors are defined in hex format (#FCEEF8, #F2EDFC) while the frontend CSS uses RGBA. Consider using RGBA for consistency or document the reason for using different formats.
.kg-cta-bg-pink { - background: #FCEEF8; + background: rgba(225, 71, 174, 0.11); } .kg-cta-bg-purple { - background: #F2EDFC; + background: rgba(135, 85, 236, 0.12); }Also applies to: 948-950
ghost/core/core/frontend/src/cards/css/cta.css (1)
1-154: Consider adding hover states for sponsor label links.The CTA button has a hover state, but sponsor label links don't. Consider adding hover styles for consistency.
.kg-cta-sponsor-label a { color: rgba(0, 0, 0); + transition: opacity 0.2s ease-in-out; } +.kg-cta-sponsor-label a:hover { + opacity: 0.85; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
ghost/core/core/frontend/src/cards/css/cta.css(3 hunks)ghost/email-service/lib/email-templates/partials/styles.hbs(3 hunks)
🔇 Additional comments (5)
ghost/email-service/lib/email-templates/partials/styles.hbs (2)
966-968: LGTM! Clear and consistent link styling.The sponsor label link color is appropriately set to solid black, matching the design intent.
1001-1003: LGTM! Proper use of currentColor.Using
currentColorfor CTA text links ensures they inherit the text color, improving visibility and maintaining consistency with the text.ghost/core/core/frontend/src/cards/css/cta.css (3)
37-43: LGTM! Well-structured background color definitions.The new background colors follow the existing pattern and use consistent alpha values (0.11-0.12) matching other background variations.
60-62: LGTM! Clear sponsor label link styling.The solid black color for sponsor label links ensures good visibility and readability.
120-122: LGTM! Proper use of currentColor for links.Using
currentColorfor CTA text links is a good practice as it:
- Maintains consistency with the text color
- Adapts to different color schemes automatically
- Improves maintainability
Ref https://linear.app/ghost/issue/PLG-355/improve-cta-card-settings-panel