diff options
| -rw-r--r-- | packages/cli/src/ui/components/ThemeDialog.tsx | 58 | ||||
| -rw-r--r-- | packages/cli/src/ui/themes/ansi-light.ts | 2 | ||||
| -rw-r--r-- | packages/cli/src/ui/themes/googlecode.ts | 2 | ||||
| -rw-r--r-- | packages/cli/src/ui/themes/xcode.ts | 2 |
4 files changed, 35 insertions, 29 deletions
diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx index 7d386dca..be8c52a1 100644 --- a/packages/cli/src/ui/components/ThemeDialog.tsx +++ b/packages/cli/src/ui/components/ThemeDialog.tsx @@ -36,16 +36,15 @@ export function ThemeDialog({ SettingScope.User, ); + const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); + // Generate theme items - const themeItems = themeManager.getAvailableThemes().map((theme) => { - const typeString = theme.type.charAt(0).toUpperCase() + theme.type.slice(1); - return { - label: theme.name, - value: theme.name, - themeNameDisplay: theme.name, - themeTypeDisplay: typeString, - }; - }); + const themeItems = themeManager.getAvailableThemes().map((theme) => ({ + label: theme.name, + value: theme.name, + themeNameDisplay: theme.name, + themeTypeDisplay: capitalize(theme.type), + })); const [selectInputKey, setSelectInputKey] = useState(Date.now()); // Determine which radio button should be initially selected in the theme list @@ -173,10 +172,17 @@ export function ThemeDialog({ availableTerminalHeight - PREVIEW_PANE_FIXED_VERTICAL_SPACE - (includePadding ? 2 : 0) * 2; - // Give slightly more space to the code block as it is 3 lines longer. - const diffHeight = Math.floor(availableTerminalHeightCodeBlock / 2) - 1; - const codeBlockHeight = Math.ceil(availableTerminalHeightCodeBlock / 2) + 1; + // Subtract margin between code blocks from available height. + const availableHeightForPanes = Math.max( + 0, + availableTerminalHeightCodeBlock - 1, + ); + + // The code block is slightly longer than the diff, so give it more space. + const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6); + const diffHeight = Math.floor(availableHeightForPanes * 0.4); + const themeType = capitalize(themeManager.getActiveTheme().type); return ( <Box borderStyle="round" @@ -227,7 +233,7 @@ export function ThemeDialog({ {/* Right Column: Preview */} <Box flexDirection="column" width="55%" paddingLeft={2}> - <Text bold>Preview</Text> + <Text bold>{themeType} Theme Preview</Text> <Box borderStyle="single" borderColor={Colors.Gray} @@ -238,25 +244,25 @@ export function ThemeDialog({ flexDirection="column" > {colorizeCode( - `# function --def fibonacci(n): -- a, b = 0, 1 -- for _ in range(n): -- a, b = b, a + b -- return a`, + `# python function +def fibonacci(n): + a, b = 0, 1 + for _ in range(n): + a, b = b, a + b + return a`, 'python', codeBlockHeight, colorizeCodeWidth, )} <Box marginTop={1} /> <DiffRenderer - diffContent={`--- a/old_file.txt --+++ b/new_file.txt --@@ -1,4 +1,5 @@ -- This is a context line. ---This line was deleted. --+This line was added. --`} + diffContent={`--- a/util.py ++++ b/util.py +@@ -1,3 +1,3 @@ + def greet(name): +- print("Hello, " + name) ++ print(f"Hello, {name}!") +`} availableTerminalHeight={diffHeight} terminalWidth={colorizeCodeWidth} /> diff --git a/packages/cli/src/ui/themes/ansi-light.ts b/packages/cli/src/ui/themes/ansi-light.ts index 31af6aca..4a798539 100644 --- a/packages/cli/src/ui/themes/ansi-light.ts +++ b/packages/cli/src/ui/themes/ansi-light.ts @@ -9,7 +9,7 @@ import { type ColorsTheme, Theme } from './theme.js'; const ansiLightColors: ColorsTheme = { type: 'light', Background: 'white', - Foreground: 'black', + Foreground: '#444', LightBlue: 'blue', AccentBlue: 'blue', AccentPurple: 'purple', diff --git a/packages/cli/src/ui/themes/googlecode.ts b/packages/cli/src/ui/themes/googlecode.ts index 5e4f02fb..77551284 100644 --- a/packages/cli/src/ui/themes/googlecode.ts +++ b/packages/cli/src/ui/themes/googlecode.ts @@ -9,7 +9,7 @@ import { lightTheme, Theme, type ColorsTheme } from './theme.js'; const googleCodeColors: ColorsTheme = { type: 'light', Background: 'white', - Foreground: 'black', + Foreground: '#444', LightBlue: '#066', AccentBlue: '#008', AccentPurple: '#606', diff --git a/packages/cli/src/ui/themes/xcode.ts b/packages/cli/src/ui/themes/xcode.ts index 15012288..dfdd4b8e 100644 --- a/packages/cli/src/ui/themes/xcode.ts +++ b/packages/cli/src/ui/themes/xcode.ts @@ -9,7 +9,7 @@ import { type ColorsTheme, Theme } from './theme.js'; const xcodeColors: ColorsTheme = { type: 'light', Background: '#fff', - Foreground: 'black', + Foreground: '#444', LightBlue: '#0E0EFF', AccentBlue: '#1c00cf', AccentPurple: '#aa0d91', |