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:
parent
dfa7b7502a
commit
fee59b9577
3 changed files with 143 additions and 67 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue