Polish the API-key gate

- Add a theme toggle to the gate (sun/moon ghost button next to the help
  button); it switches instantly and persists to localStorage.
- Strengthen the corner glows so the stage reads atmospheric in both themes
  (bigger, slightly stronger radial gradients behind the card).
- Center the logo, heading, subtitle and footnote inside the card.
- Dark mode: replace the solid white logo tile with a subtle raised tile
  (thin border, light snowflake); make the card only slightly lighter than
  the near-black page with a low-opacity border and soft shadow.
- Disabled Continue keeps the primary fill at ~45% opacity with a crisp
  label instead of a faded muddy one; fully solid once text is entered.
- Bigger 36px corner buttons and a visible "How do I get a key?" text link
  under the input that opens the same modal.
- Shorten and balance the reassurance line.
- Help modal: step circles aligned to the first text line, emphasised
  free-tier callout with a check icon, underlined links with an
  external-link icon, muted medium-weight UI labels, 36px close button
  aligned to the title.
- Gate test extended to 44 checks (theme toggle, text link, modal polish).
This commit is contained in:
Martin Dvořák 2026-10-07 05:34:32 +00:00
commit fee59b9577
3 changed files with 143 additions and 67 deletions

View file

@ -275,3 +275,13 @@ export function XIcon({ className }: IconProps) {
</Svg>
);
}
export function ExternalLinkIcon({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M14 4h6v6" />
<path d="m20 4-8.5 8.5" />
<path d="M18 13.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5.5" />
</Svg>
);
}