From 2f5eecfc49eb4ccb3b5568dd37f2bc2b938a9438 Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Thu, 17 Jul 2025 17:46:33 -0700
Subject: Light theme color improvements (#4396)

---
 packages/cli/src/ui/components/ThemeDialog.tsx | 58 ++++++++++++++------------
 1 file changed, 32 insertions(+), 26 deletions(-)

(limited to 'packages/cli/src/ui/components/ThemeDialog.tsx')

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}
             />
-- 
cgit v1.2.3