fix(ui): calm the plan cards, drop em dashes from billing copy - #40
Merged
Conversation
The plan cards carried a large coloured glow,
shadow-[0_0_50px_-18px_rgba(20,184,166,0.55)], which read as decoration
rather than hierarchy. It was also the wrong colour: a teal glow under an
indigo gradient border, so the two never resolved into one accent.
The gradient border and the "Most popular" badge already distinguish the
Pro card, so the glow is replaced with plain neutral elevation
(shadow-md shadow-black/20), matching how the rest of the app handles
raised surfaces. The border gradients are toned down slightly to sit with
it.
Also removes em dashes from billing copy, which had crept into buttons
and the renewal notice. Rewritten as ordinary sentences:
"Subscribe — ₦3,500/mo" -> "Subscribe for ₦3,500/mo"
"Upgrade to Pro — $7/mo" -> "Upgrade to Pro for $7/mo"
"Cancellation scheduled — ..." -> "Cancellation scheduled. Access
continues until ..."
The non-renewal notice was one long sentence hinged on a dash; it is now
three plain ones. Em dashes elsewhere in the app (terms, privacy, tour
copy) are untouched.
Contributor
Deploying hookdrop with
|
| Latest commit: |
17b4fe7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e94aa4a9.hookdrop.pages.dev |
| Branch Preview URL: | https://fix-plan-card-polish.hookdrop.pages.dev |
Contributor
Deploying hookdrop-frontend with
|
| Latest commit: |
17b4fe7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4b130536.hookdrop-frontend.pages.dev |
| Branch Preview URL: | https://fix-plan-card-polish.hookdrop-frontend.pages.dev |
Sweeps the remaining em dashes after the billing copy was cleaned up in
the previous change. 222 replacements across 68 files, covering comments,
log lines, test failure messages, CLI docs and the last few user-facing
strings.
Mostly rewritten as two sentences, since in almost every case the dash
was introducing an independent clause. Where it introduced a dependent
one ("so", "which", "over") a comma is used instead, and where it
introduced a quotation a colon reads better.
The mechanical pass needed three corrections afterwards, all found by
reading the diff rather than trusting it:
- it capitalised identifiers at what it took to be a sentence start,
so comments named charge.success, order_created and
subscription_updated with the wrong casing
- a quoted line from Paystack's docs ended up opening a sentence in
lowercase
- dependent clauses became sentence fragments
One em dash is deliberately kept: SettingsTokensPage uses '—' as the
placeholder for an absent timestamp, which is typography rather than
prose.
Go build, vet and tests pass; the CLI module and the UI build pass.
EOEboh
added a commit
that referenced
this pull request
Aug 3, 2026
* fix(ui): calm the plan cards and drop em dashes from billing copy
The plan cards carried a large coloured glow,
shadow-[0_0_50px_-18px_rgba(20,184,166,0.55)], which read as decoration
rather than hierarchy. It was also the wrong colour: a teal glow under an
indigo gradient border, so the two never resolved into one accent.
The gradient border and the "Most popular" badge already distinguish the
Pro card, so the glow is replaced with plain neutral elevation
(shadow-md shadow-black/20), matching how the rest of the app handles
raised surfaces. The border gradients are toned down slightly to sit with
it.
Also removes em dashes from billing copy, which had crept into buttons
and the renewal notice. Rewritten as ordinary sentences:
"Subscribe — ₦3,500/mo" -> "Subscribe for ₦3,500/mo"
"Upgrade to Pro — $7/mo" -> "Upgrade to Pro for $7/mo"
"Cancellation scheduled — ..." -> "Cancellation scheduled. Access
continues until ..."
The non-renewal notice was one long sentence hinged on a dash; it is now
three plain ones. Em dashes elsewhere in the app (terms, privacy, tour
copy) are untouched.
* style: remove em dashes from comments, copy and log output
Sweeps the remaining em dashes after the billing copy was cleaned up in
the previous change. 222 replacements across 68 files, covering comments,
log lines, test failure messages, CLI docs and the last few user-facing
strings.
Mostly rewritten as two sentences, since in almost every case the dash
was introducing an independent clause. Where it introduced a dependent
one ("so", "which", "over") a comma is used instead, and where it
introduced a quotation a colon reads better.
The mechanical pass needed three corrections afterwards, all found by
reading the diff rather than trusting it:
- it capitalised identifiers at what it took to be a sentence start,
so comments named charge.success, order_created and
subscription_updated with the wrong casing
- a quoted line from Paystack's docs ended up opening a sentence in
lowercase
- dependent clauses became sentence fragments
One em dash is deliberately kept: SettingsTokensPage uses '—' as the
placeholder for an absent timestamp, which is typography rather than
prose.
Go build, vet and tests pass; the CLI module and the UI build pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two presentation fixes on the billing pages.
Plan card shadows
The cards had a large coloured glow:
It read as decoration rather than hierarchy, and it was the wrong colour — a teal glow under an indigo gradient border, so the two never resolved into a single accent.
The gradient border and the "Most popular" badge already carry the distinction, so the glow is replaced with plain neutral elevation,
shadow-md shadow-black/20, which is how the rest of the app treats raised surfaces (TourTooltip,AccountMenu). Border gradients toned down slightly to sit with it.Em dashes in billing copy
Subscribe — ₦3,500/moSubscribe for ₦3,500/moRenew — ₦3,500/moRenew for ₦3,500/moUpgrade to Pro — $7/moUpgrade to Pro for $7/mohookdrop Pro — Annualhookdrop Pro AnnualCancellation scheduled — access until XCancellation scheduled. Access continues until XThe non-renewal notice was one long sentence hinged on a dash. Now three plain ones:
Scope: billing copy only. Em dashes remain in the terms, privacy and product-tour text, and in code comments — say the word if you want those swept too. I also left the glow on
LandingPage's mock feed panel, since that is not a plan card.