Tweak setup banner (#1567)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Refines the setup banner UI (copy, layout, and badges), updates
SetupProviderCard to support a chip and typed subtitle, and adjusts e2e
to new OpenRouter button label.
> 
> - **UI/Setup Banner (`src/components/SetupBanner.tsx`)**:
>   - Rename step title to `2. Setup AI Access` and update helper copy.
> - Layout: show `google` and `openrouter` cards side-by-side; increase
title font sizes.
> - Add badges: `chip={Free}` on Google/OpenRouter; `chip={Recommended}`
on Dyad Pro.
> - Simplify Dyad Pro `subtitle` to a string; remove `GlobeIcon` usage.
> - "Other providers" card: tweak heading size and copy (remove
`OpenRouter`).
> - `OpenRouterSetupBanner`: use `chip` for "Free models available"
instead of `subtitle`.
> - **Component API (`src/components/SetupProviderCard.tsx`)**:
>   - Add optional `chip` prop and render top-right badge.
> - Change `subtitle` type to `string`; adjust styles (relative
container, font sizes).
> - **E2E (`e2e-tests/setup.spec.ts`)**:
> - Update button selector to `Setup OpenRouter API Key` (remove
`Free`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
991807b2edd4baa7a8ec7f4d47f867ba058ebf36. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
This commit is contained in:
Will Chen
2025-10-20 15:03:16 -07:00
committed by GitHub
parent d571d303eb
commit b60b0a09f6
3 changed files with 50 additions and 49 deletions

View File

@@ -8,6 +8,7 @@ export function SetupProviderCard({
variant,
title,
subtitle,
chip,
leadingIcon,
onClick,
tabIndex = 0,
@@ -15,7 +16,8 @@ export function SetupProviderCard({
}: {
variant: SetupProviderVariant;
title: string;
subtitle?: ReactNode;
subtitle?: string;
chip?: ReactNode;
leadingIcon: ReactNode;
onClick: () => void;
tabIndex?: number;
@@ -26,7 +28,7 @@ export function SetupProviderCard({
return (
<div
className={cn(
"p-3 border rounded-lg cursor-pointer transition-colors",
"p-3 border rounded-lg cursor-pointer transition-colors relative",
styles.container,
className,
)}
@@ -34,19 +36,30 @@ export function SetupProviderCard({
role="button"
tabIndex={tabIndex}
>
{chip && (
<div
className={cn(
"absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold",
styles.subtitleColor,
"bg-white/80 dark:bg-black/20 backdrop-blur-sm",
)}
>
{chip}
</div>
)}
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<div className={cn("p-1.5 rounded-full", styles.iconWrapper)}>
{leadingIcon}
</div>
<div>
<h4 className={cn("font-medium text-sm", styles.titleColor)}>
<h4 className={cn("font-medium text-[15px]", styles.titleColor)}>
{title}
</h4>
{subtitle ? (
<div
className={cn(
"text-xs flex items-center gap-1",
"text-sm flex items-center gap-1",
styles.subtitleColor,
)}
>