Skip to content

fix: welcome onboarding screens now respect theme colors (fixes #1005) #1030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acoliver merged 1 commit into from
Jan 7, 2026
Merged

fix: welcome onboarding screens now respect theme colors (fixes #1005) #1030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/cli/src/ui/components/WelcomeOnboarding/AuthMethodStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@ export const AuthMethodStep: React.FC<AuthMethodStepProps> = ({
Step 3 of 5: Choose Authentication Method
</Text>
<Text> </Text>
<Text>How would you like to authenticate with {providerDisplay}?</Text>
<Text color={Colors.Foreground}>
How would you like to authenticate with {providerDisplay}?
</Text>
</Box>

{error && (
Expand Down
16 changes: 11 additions & 5 deletions packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,16 +115,20 @@ export const AuthenticationStep: React.FC<AuthenticationStepProps> = ({
</Box>

<Box marginBottom={1}>
<Text>
<Text color={Colors.Foreground}>
<Text color={Colors.AccentYellow}>
<Spinner type="dots" />
</Text>{' '}
Opening browser for OAuth authentication...
</Text>
</Box>

<Text>Please complete the authentication in your browser.</Text>
<Text>This window will update when done.</Text>
<Text color={Colors.Foreground}>
Please complete the authentication in your browser.
</Text>
<Text color={Colors.Foreground}>
This window will update when done.
</Text>

<Box marginTop={1}>
<Text color={Colors.Gray}>Press Esc to cancel and go back</Text>
Expand All @@ -145,7 +149,7 @@ export const AuthenticationStep: React.FC<AuthenticationStepProps> = ({

{isAuthenticating ? (
<Box marginBottom={1}>
<Text>
<Text color={Colors.Foreground}>
<Text color={Colors.AccentYellow}>
<Spinner type="dots" />
</Text>{' '}
Expand All @@ -155,7 +159,9 @@ export const AuthenticationStep: React.FC<AuthenticationStepProps> = ({
) : (
<>
<Box marginBottom={1}>
<Text>Enter your {providerDisplay} API key:</Text>
<Text color={Colors.Foreground}>
Enter your {providerDisplay} API key:
</Text>
</Box>

<Box>
Expand Down
16 changes: 9 additions & 7 deletions packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,17 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
</Box>

<Box flexDirection="column" marginBottom={1}>
<Text>Provider: {providerDisplay}</Text>
{model && <Text>Model: {model}</Text>}
<Text>Authentication: {authDisplay}</Text>
<Text color={Colors.Foreground}>Provider: {providerDisplay}</Text>
{model && <Text color={Colors.Foreground}>Model: {model}</Text>}
<Text color={Colors.Foreground}>Authentication: {authDisplay}</Text>
</Box>

{showProfilePrompt ? (
<Box flexDirection="column">
<Box marginBottom={1}>
<Text bold>Save this setup as a profile</Text>
<Text bold color={Colors.Foreground}>
Save this setup as a profile
</Text>
</Box>

<Text color={Colors.Gray}>
Expand All @@ -127,10 +129,10 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
)}

{saving ? (
<Text>Saving profile...</Text>
<Text color={Colors.Foreground}>Saving profile...</Text>
) : (
<Box>
<Text>Profile name: </Text>
<Text color={Colors.Foreground}>Profile name: </Text>
<Text>{profileName}</Text>
<Text color={Colors.AccentCyan}>▌</Text>
</Box>
Expand All @@ -146,7 +148,7 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
) : (
<Box flexDirection="column">
<Box marginBottom={1}>
<Text>Try asking me something like:</Text>
<Text color={Colors.Foreground}>Try asking me something like:</Text>
<Text color={Colors.AccentCyan}>
{'"Explain how async/await works in JavaScript"'}
</Text>
Expand Down
4 changes: 3 additions & 1 deletion packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const ModelSelectStep: React.FC<ModelSelectStepProps> = ({
Step 2 of 5: Choose Your Model
</Text>
<Text> </Text>
<Text>Select a model for {providerDisplay}:</Text>
<Text color={Colors.Foreground}>
Select a model for {providerDisplay}:
</Text>
</Box>

{modelsLoadStatus === 'loading' && (
Expand Down
4 changes: 3 additions & 1 deletion packages/cli/src/ui/components/WelcomeOnboarding/ProviderSelectStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ export const ProviderSelectStep: React.FC<ProviderSelectStepProps> = ({
Step 1 of 5: Choose Your AI Provider
</Text>
<Text> </Text>
<Text>{"Select which AI provider you'd like to use:"}</Text>
<Text color={Colors.Foreground}>
{"Select which AI provider you'd like to use:"}
</Text>
</Box>

<RadioButtonSelect
Expand Down
12 changes: 7 additions & 5 deletions packages/cli/src/ui/components/WelcomeOnboarding/SkipExitStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,23 @@ export const SkipExitStep: React.FC<SkipExitStepProps> = ({
return (
<Box flexDirection="column">
<Box flexDirection="column" marginBottom={1}>
<Text bold>Setup skipped</Text>
<Text bold color={Colors.Foreground}>
Setup skipped
</Text>
</Box>

<Box flexDirection="column" marginBottom={1}>
<Text>To configure llxprt manually:</Text>
<Text color={Colors.Foreground}>To configure llxprt manually:</Text>
<Text> </Text>
<Text>
<Text color={Colors.Foreground}>
• Use <Text color={Colors.AccentCyan}>/auth &lt;provider&gt;</Text> to
set up authentication
</Text>
<Text>
<Text color={Colors.Foreground}>
• Use <Text color={Colors.AccentCyan}>/provider</Text> to select your
AI provider
</Text>
<Text>
<Text color={Colors.Foreground}>
• Type <Text color={Colors.AccentCyan}>/help</Text> for more commands
</Text>
</Box>
Expand Down
12 changes: 8 additions & 4 deletions packages/cli/src/ui/components/WelcomeOnboarding/WelcomeStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,19 @@ export const WelcomeStep: React.FC<WelcomeStepProps> = ({
Welcome to llxprt!
</Text>
<Text> </Text>
<Text>{"Let's get you set up in just a few steps."}</Text>
<Text>
<Text color={Colors.Foreground}>
{"Let's get you set up in just a few steps."}
</Text>
<Text color={Colors.Foreground}>
{"You'll choose an AI provider and configure authentication"}
</Text>
<Text>so llxprt can work its magic.</Text>
<Text color={Colors.Foreground}>so llxprt can work its magic.</Text>
</Box>

<Box flexDirection="column" marginBottom={1}>
<Text bold>What would you like to do?</Text>
<Text bold color={Colors.Foreground}>
What would you like to do?
</Text>
</Box>

<RadioButtonSelect
Expand Down
Loading