fix(webapp): fix promo page heading typography (#4311)
## What The `/promo` page heading rendered with overlapping lines — the two lines of "Promo codes are for new accounts" collided. ## Why The page used `Header2` stretched to display sizes (`sm:text-2xl md:text-3xl lg:text-4xl`), but `Header2` bakes in a fixed `leading-6` (24px). A 36px font in a 24px line box makes wrapped lines overlap. It only showed at `sm`+ widths and only on headings that wrap to 2+ lines, which is why it slipped through — the short single-line headings on the same page looked fine. ## Fix Switch both headings to `Header1` — the page-title primitive the sibling login pages (`login._index`, `login.magic`) already use for exactly this size. Add `leading-tight` (relative line-height, scales with font size, and this heading uniquely wraps to two lines) and `pb-4` to match the login pages' spacing convention. ## Testing Manually verified the signed-in view (`/promo` while logged in) renders as two clean, non-overlapping lines across breakpoints. Pure CSS/layout change — no automated test.
This commit is contained in:
@@ -8,7 +8,7 @@ import { LoginPageLayout } from "~/components/LoginPageLayout";
|
||||
import { Button, LinkButton } from "~/components/primitives/Buttons";
|
||||
import { Callout } from "~/components/primitives/Callout";
|
||||
import { Fieldset } from "~/components/primitives/Fieldset";
|
||||
import { Header2 } from "~/components/primitives/Headers";
|
||||
import { Header1 } from "~/components/primitives/Headers";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
import { TextLink } from "~/components/primitives/TextLink";
|
||||
import { isGithubAuthSupported, isGoogleAuthSupported } from "~/services/auth.server";
|
||||
@@ -139,9 +139,9 @@ export default function PromoPage() {
|
||||
<div className="flex w-full flex-col">
|
||||
{data.view === "signed_in" ? (
|
||||
<>
|
||||
<Header2 className="sm:text-2xl md:text-3xl lg:text-4xl" spacing>
|
||||
<Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl md:leading-tight lg:text-4xl lg:leading-tight">
|
||||
Promo codes are for new accounts
|
||||
</Header2>
|
||||
</Header1>
|
||||
<Paragraph variant="base" spacing>
|
||||
You're already signed in. Promo credits can only be added to a brand-new account.
|
||||
</Paragraph>
|
||||
@@ -151,11 +151,11 @@ export default function PromoPage() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Header2 className="sm:text-2xl md:text-3xl lg:text-4xl" spacing>
|
||||
<Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl md:leading-tight lg:text-4xl lg:leading-tight">
|
||||
{data.view === "valid"
|
||||
? `Claim ${formatDollars(data.amountInCents)} credits`
|
||||
: "Create your account"}
|
||||
</Header2>
|
||||
</Header1>
|
||||
{data.view === "valid" ? (
|
||||
<Paragraph variant="base" spacing>
|
||||
These are only available for new accounts on the Free plan.
|
||||
|
||||
Reference in New Issue
Block a user