From dcdf8a503a00372410714c509cfd06844802c9e0 Mon Sep 17 00:00:00 2001 From: Bradley Axen Date: Sun, 26 Jan 2025 14:36:20 -0800 Subject: [PATCH] feat: welcome page style (#792) Co-authored-by: Nahiyan Khan --- .../components/GooseSplashLogoGradient.tsx | 50 ------- .../src/components/WelcomeGooseLogo.tsx | 15 ++ .../settings/providers/BaseProviderGrid.tsx | 139 +++++++++++------- .../welcome_screen/ProviderGrid.tsx | 23 +-- .../welcome_screen/WelcomeScreen.tsx | 31 ++-- 5 files changed, 123 insertions(+), 135 deletions(-) delete mode 100644 ui/desktop/src/components/GooseSplashLogoGradient.tsx create mode 100644 ui/desktop/src/components/WelcomeGooseLogo.tsx diff --git a/ui/desktop/src/components/GooseSplashLogoGradient.tsx b/ui/desktop/src/components/GooseSplashLogoGradient.tsx deleted file mode 100644 index 9cdd0fc2..00000000 --- a/ui/desktop/src/components/GooseSplashLogoGradient.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; - -export default function GooseSplashLogo({ className = '' }) { - return ( -
- - - - - - - - - - - - - -
- ); -} diff --git a/ui/desktop/src/components/WelcomeGooseLogo.tsx b/ui/desktop/src/components/WelcomeGooseLogo.tsx new file mode 100644 index 00000000..9fb17eb8 --- /dev/null +++ b/ui/desktop/src/components/WelcomeGooseLogo.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Goose, Rain } from './icons/Goose'; + +export default function WelcomeGooseLogo({ className = '' }) { + return ( +
+
+ +
+
+ +
+
+ ); +} diff --git a/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx b/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx index 19799c1d..41b12d2a 100644 --- a/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx +++ b/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Check, Plus, Settings, X } from 'lucide-react'; +import { Check, Plus, Settings, X, Rocket } from 'lucide-react'; import { Button } from '../../ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/Tooltip'; import { Portal } from '@radix-ui/react-portal'; @@ -26,6 +26,7 @@ interface BaseProviderCardProps { onDelete?: () => void; showDelete?: boolean; hasRequiredKeys?: boolean; + onTakeoff?: () => void; } function getArticle(word: string): string { @@ -58,6 +59,7 @@ function BaseProviderCard({ onDelete, showDelete = false, hasRequiredKeys = false, + onTakeoff, }: BaseProviderCardProps) { const numRequiredKeys = required_keys[name]?.length || 0; const tooltipText = numRequiredKeys === 1 ? `Add ${name} API Key` : `Add ${name} API Keys`; @@ -110,8 +112,82 @@ function BaseProviderCard({

-
- {!isConfigured && onAddKeys && hasRequiredKeys && ( +
+
+ {!isConfigured && onAddKeys && hasRequiredKeys && ( + + + + + + + +

{tooltipText}

+ + + + + )} + {isConfigured && showSettings && hasRequiredKeys && ( + + + + + + + +

Configure {name} settings

+ + + + + )} + {showDelete && hasRequiredKeys && isConfigured && ( + + + + + + + +

Remove {name} API Key

+ + + + + )} +
+ {isConfigured && onTakeoff && ( @@ -120,64 +196,16 @@ function BaseProviderCard({ size="sm" onClick={(e) => { e.stopPropagation(); - onAddKeys(); + onTakeoff(); }} className="rounded-full h-7 w-7 p-0 bg-bgApp hover:bg-bgApp shadow-none text-textSubtle border border-borderSubtle hover:border-borderStandard hover:text-textStandard transition-colors" > - + -

{tooltipText}

- - - - - )} - {isConfigured && showSettings && hasRequiredKeys && ( - - - - - - - -

Configure {name} settings

- - - - - )} - {showDelete && hasRequiredKeys && ( - - - - - - - -

Remove {name} API Key

+

Launch goose with {name}

 @@ -199,6 +227,7 @@ interface BaseProviderGridProps { onAddKeys?: (provider: Provider) => void; onConfigure?: (provider: Provider) => void; onDelete?: (provider: Provider) => void; + onTakeoff?: (provider: Provider) => void; } export function BaseProviderGrid({ @@ -211,6 +240,7 @@ export function BaseProviderGrid({ onAddKeys, onConfigure, onDelete, + onTakeoff, }: BaseProviderGridProps) { return (
@@ -228,6 +258,7 @@ export function BaseProviderGrid({ onAddKeys={() => onAddKeys?.(provider)} onConfigure={() => onConfigure?.(provider)} onDelete={() => onDelete?.(provider)} + onTakeoff={() => onTakeoff?.(provider)} showSettings={showSettings} showDelete={showDelete} hasRequiredKeys={hasRequiredKeys} diff --git a/ui/desktop/src/components/welcome_screen/ProviderGrid.tsx b/ui/desktop/src/components/welcome_screen/ProviderGrid.tsx index dde700cf..b2476a9b 100644 --- a/ui/desktop/src/components/welcome_screen/ProviderGrid.tsx +++ b/ui/desktop/src/components/welcome_screen/ProviderGrid.tsx @@ -156,32 +156,15 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) { return (
-
- {selectedId && ( -
- -
- )} -
- { + handleConfigure(provider); + }} /> {showSetupModal && selectedId && ( diff --git a/ui/desktop/src/components/welcome_screen/WelcomeScreen.tsx b/ui/desktop/src/components/welcome_screen/WelcomeScreen.tsx index b48e4a3c..85005f4a 100644 --- a/ui/desktop/src/components/welcome_screen/WelcomeScreen.tsx +++ b/ui/desktop/src/components/welcome_screen/WelcomeScreen.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { ProviderGrid } from './ProviderGrid'; import { ScrollArea } from '../ui/scroll-area'; -import GooseSplashLogo from '../GooseSplashLogoGradient'; import { Button } from '../ui/button'; +import WelcomeGooseLogo from '../WelcomeGooseLogo'; // Extending React CSSProperties to include custom webkit property declare module 'react' { @@ -19,7 +19,10 @@ export function WelcomeScreen({ onSubmit }: WelcomeScreenProps) { return (
{/* Draggable title bar region */} -
+
{/* Content area - explicitly set as non-draggable */}
-
+
{/* Header Section */} -
- -

- Welcome to goose -

-

- Your intelligent AI assistant for seamless productivity and creativity. -

+
+
+
+ +
+
+

+ Welcome to goose +

+

+ Your intelligent AI assistant for seamless productivity and creativity. +

+
+
{/* ProviderGrid */}