From 58a29c1cc29c8c490c87aec6c868536ca16ccc4a Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Fri, 29 Aug 2025 11:53:18 +0100 Subject: [PATCH] Onboarding tweaks (#589) * onboarding improvements * fmt * css --- frontend/src/components/OnboardingDialog.tsx | 274 +++++++++--------- .../src/components/PrivacyOptInDialog.tsx | 85 +++--- frontend/src/components/ui/button.tsx | 7 +- frontend/src/components/ui/dialog.tsx | 2 +- frontend/src/components/ui/dropdown-menu.tsx | 12 +- frontend/src/components/ui/input.tsx | 2 +- frontend/src/components/ui/select.tsx | 6 +- .../components/ui/shadcn-io/kanban/index.tsx | 2 +- frontend/src/pages/project-tasks.tsx | 2 +- 9 files changed, 185 insertions(+), 207 deletions(-) diff --git a/frontend/src/components/OnboardingDialog.tsx b/frontend/src/components/OnboardingDialog.tsx index 7ce5e3ee..9ccc4a5f 100644 --- a/frontend/src/components/OnboardingDialog.tsx +++ b/frontend/src/components/OnboardingDialog.tsx @@ -23,8 +23,7 @@ import { } from '@/components/ui/dropdown-menu'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { Sparkles, Code, ChevronDown } from 'lucide-react'; +import { Sparkles, Code, ChevronDown, HandMetal } from 'lucide-react'; import { EditorType, ProfileVariantLabel } from 'shared/types'; import { useUserSystem } from '@/components/config-provider'; @@ -65,10 +64,10 @@ export function OnboardingDialog({ open, onComplete }: OnboardingDialogProps) { return ( {}}> - +
- + Welcome to Vibe Kanban
@@ -76,159 +75,148 @@ export function OnboardingDialog({ open, onComplete }: OnboardingDialogProps) { later in Settings. +
+

+ + Choose Your Coding Agent +

+
+ +
+ -
- - - - - Choose Your Coding Agent - - - -
- -
- + {/* Show variant selector if selected profile has variants */} + {(() => { + const selectedProfile = profiles?.find( + (p) => p.label === profile.profile + ); + const hasVariants = + selectedProfile?.variants && + selectedProfile.variants.length > 0; - {/* Show variant selector if selected profile has variants */} - {(() => { - const selectedProfile = profiles?.find( - (p) => p.label === profile.profile - ); - const hasVariants = - selectedProfile?.variants && - selectedProfile.variants.length > 0; - - if (hasVariants) { - return ( - - - - - - - setProfile({ ...profile, variant: null }) - } - className={!profile.variant ? 'bg-accent' : ''} - > - Default - - {selectedProfile.variants.map((variant) => ( - - setProfile({ - ...profile, - variant: variant.label, - }) - } - className={ - profile.variant === variant.label - ? 'bg-accent' - : '' - } - > - {variant.label} - - ))} - - - ); - } else if (selectedProfile) { - // Show disabled button when profile exists but has no variants - return ( + if (hasVariants) { + return ( + + - ); - } - return null; - })()} -
-
- - + + + + setProfile({ ...profile, variant: null }) + } + className={!profile.variant ? 'bg-accent' : ''} + > + Default + + {selectedProfile.variants.map((variant) => ( + + setProfile({ + ...profile, + variant: variant.label, + }) + } + className={ + profile.variant === variant.label + ? 'bg-accent' + : '' + } + > + {variant.label} + + ))} + + + ); + } else if (selectedProfile) { + // Show disabled button when profile exists but has no variants + return ( + + ); + } + return null; + })()} +
+
+
- - - - - Choose Your Code Editor - - - +
+

+ + Choose Your Code Editor +

+ +
+ + +

+ This editor will be used to open task attempts and project files. +

+ + {editorType === EditorType.CUSTOM && (
- - + + setCustomCommand(e.target.value)} + />

- This editor will be used to open task attempts and project - files. + Enter the command to run your custom editor. Use spaces for + arguments (e.g., "code --wait").

- - {editorType === EditorType.CUSTOM && ( -
- - setCustomCommand(e.target.value)} - /> -

- Enter the command to run your custom editor. Use spaces for - arguments (e.g., "code --wait"). -

-
- )} - - + )} +
diff --git a/frontend/src/components/PrivacyOptInDialog.tsx b/frontend/src/components/PrivacyOptInDialog.tsx index a5868f14..af9faaf2 100644 --- a/frontend/src/components/PrivacyOptInDialog.tsx +++ b/frontend/src/components/PrivacyOptInDialog.tsx @@ -8,7 +8,6 @@ import { } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Shield, CheckCircle, XCircle, Settings } from 'lucide-react'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { useConfig } from '@/components/config-provider'; interface PrivacyOptInDialogProps { @@ -39,7 +38,7 @@ export function PrivacyOptInDialog({
- + Feedback Opt-In
@@ -48,62 +47,54 @@ export function PrivacyOptInDialog({ -
- - - - What data do we collect? - - - - {isGitHubAuthenticated && ( -
- -
-

- GitHub profile information -

-

- Username and email address to send you only very important - updates about the project. We promise not to abuse this -

-
-
- )} +
+

What data do we collect?

+
+ {isGitHubAuthenticated && (

- High-level usage metrics + GitHub profile information

- Number of tasks created, projects managed, feature usage + Username and email address to send you only very important + updates about the project. We promise not to abuse this

-
- -
-

- Performance and error data -

-

- Application crashes, response times, technical issues -

-
+ )} +
+ +
+

High-level usage metrics

+

+ Number of tasks created, projects managed, feature usage +

-
- -
-

We do NOT collect

-

- Task contents, code snippets, project names, or other - personal data -

-
+
+
+ +
+

+ Performance and error data +

+

+ Application crashes, response times, technical issues +

- - +
+
+ +
+

We do NOT collect

+

+ Task contents, code snippets, project names, or other personal + data +

+
+
+
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index 55133757..41cc2c84 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -10,13 +10,12 @@ const buttonVariants = cva( variants: { variant: { default: - 'bg-primary text-primary-foreground hover:bg-primary/90 border border-foreground', + 'text-primary-foreground hover:bg-primary/90 border border-foreground', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: - 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border', + 'border border-input hover:bg-accent hover:text-accent-foreground', + secondary: 'text-secondary-foreground hover:bg-secondary/80 border', ghost: 'hover:text-primary-foreground/50', link: 'hover:underline', }, diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx index 9443783b..be82d104 100644 --- a/frontend/src/components/ui/dialog.tsx +++ b/frontend/src/components/ui/dialog.tsx @@ -30,7 +30,7 @@ const Dialog = React.forwardRef<
( span]:line-clamp-1', + 'flex h-10 w-full items-center justify-between border border-input px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className )} {...props} @@ -75,7 +75,7 @@ const SelectContent = React.forwardRef< {tasks.length === 0 ? ( -
+