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
@@ -15,7 +15,7 @@ testSetup("setup ai provider", async ({ po }) => {
|
||||
|
||||
await po.page.getByRole("button", { name: "Go Back" }).click();
|
||||
await po.page
|
||||
.getByRole("button", { name: "Setup OpenRouter API Key Free" })
|
||||
.getByRole("button", { name: "Setup OpenRouter API Key" })
|
||||
.click();
|
||||
await expect(
|
||||
po.page.getByRole("heading", { name: "Configure OpenRouter" }),
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
XCircle,
|
||||
Loader2,
|
||||
Settings,
|
||||
GlobeIcon,
|
||||
} from "lucide-react";
|
||||
import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
|
||||
|
||||
@@ -246,47 +245,40 @@ export function SetupBanner() {
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusIcon(isAnyProviderSetup())}
|
||||
<span className="font-medium text-sm">
|
||||
2. Setup AI Model Access
|
||||
2. Setup AI Access
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
|
||||
<p className="text-sm mb-3">
|
||||
Connect your preferred AI provider to start generating code.
|
||||
<p className="text-[15px] mb-3">
|
||||
Not sure what to do? Watch the Get Started video above ☝️
|
||||
</p>
|
||||
<SetupProviderCard
|
||||
variant="google"
|
||||
onClick={handleGoogleSetupClick}
|
||||
tabIndex={isNodeSetupComplete ? 0 : -1}
|
||||
leadingIcon={
|
||||
<Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
}
|
||||
title="Setup Google Gemini API Key"
|
||||
subtitle={
|
||||
<>
|
||||
<GiftIcon className="w-3 h-3" />
|
||||
Use Google Gemini for free
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<SetupProviderCard
|
||||
className="flex-1"
|
||||
variant="google"
|
||||
onClick={handleGoogleSetupClick}
|
||||
tabIndex={isNodeSetupComplete ? 0 : -1}
|
||||
leadingIcon={
|
||||
<Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
}
|
||||
title="Setup Google Gemini API Key"
|
||||
chip={<>Free</>}
|
||||
/>
|
||||
|
||||
<SetupProviderCard
|
||||
className="mt-2"
|
||||
variant="openrouter"
|
||||
onClick={handleOpenRouterSetupClick}
|
||||
tabIndex={isNodeSetupComplete ? 0 : -1}
|
||||
leadingIcon={
|
||||
<Sparkles className="w-4 h-4 text-teal-600 dark:text-teal-400" />
|
||||
}
|
||||
title="Setup OpenRouter API Key"
|
||||
subtitle={
|
||||
<>
|
||||
<GiftIcon className="w-3 h-3" />
|
||||
Free models available
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<SetupProviderCard
|
||||
className="flex-1"
|
||||
variant="openrouter"
|
||||
onClick={handleOpenRouterSetupClick}
|
||||
tabIndex={isNodeSetupComplete ? 0 : -1}
|
||||
leadingIcon={
|
||||
<Sparkles className="w-4 h-4 text-teal-600 dark:text-teal-400" />
|
||||
}
|
||||
title="Setup OpenRouter API Key"
|
||||
chip={<>Free</>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SetupProviderCard
|
||||
className="mt-2"
|
||||
@@ -297,12 +289,8 @@ export function SetupBanner() {
|
||||
<img src={logo} alt="Dyad Logo" className="w-6 h-6 mr-0.5" />
|
||||
}
|
||||
title="Setup Dyad Pro"
|
||||
subtitle={
|
||||
<>
|
||||
<GlobeIcon className="w-3 h-3" />
|
||||
Access all AI models with one plan
|
||||
</>
|
||||
}
|
||||
subtitle="Access all AI models with one plan"
|
||||
chip={<>Recommended</>}
|
||||
/>
|
||||
|
||||
<div
|
||||
@@ -317,11 +305,11 @@ export function SetupBanner() {
|
||||
<Settings className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-sm text-gray-800 dark:text-gray-300">
|
||||
<h4 className="font-medium text-[15px] text-gray-800 dark:text-gray-300">
|
||||
Setup other AI providers
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
OpenAI, Anthropic, OpenRouter and more
|
||||
OpenAI, Anthropic and more
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -428,7 +416,7 @@ export const OpenRouterSetupBanner = ({
|
||||
<Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
}
|
||||
title="Setup OpenRouter API Key"
|
||||
subtitle={
|
||||
chip={
|
||||
<>
|
||||
<GiftIcon className="w-3 h-3" />
|
||||
Free models available
|
||||
|
||||
@@ -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,
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user