fix: apply dark mode to tool confirmation message (#1482)

block · Mar 3, 2025 · c957bef · c957bef
1 parent cbd1ba6
commit c957bef
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/ui/desktop/src/components/BottomMenu.tsx b/ui/desktop/src/components/BottomMenu.tsx
@@ -15,7 +15,7 @@ export default function BottomMenu({
   setView: (view: View) => void;
 }) {
   const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
-  const [gooseMode, setGooseMode] = useState('approve');
+  const [gooseMode, setGooseMode] = useState('auto');
   const { currentModel } = useModel();
   const { recentModels } = useRecentModels(); // Get recent models
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -50,7 +50,9 @@ export default function BottomMenu({
 
         if (response.ok) {
           const { value } = await response.json();
-          setGooseMode(value);
+          if (value) {
+            setGooseMode(value);
+          }
         }
       } catch (error) {
         console.error('Error fetching current mode:', error);

diff --git a/ui/desktop/src/components/ToolCallConfirmation.tsx b/ui/desktop/src/components/ToolCallConfirmation.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { ConfirmToolRequest } from '../utils/toolConfirm';
 import { snakeToTitleCase } from '../utils';
-import Box from './ui/Box';
 
 export default function ToolConfirmation({ toolConfirmationId, toolName }) {
   const [clicked, setClicked] = useState(false);
@@ -15,7 +14,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
 
   return (
     <>
-      <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none">
+      <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none text-textStandard">
         Goose would like to call the above tool. Allow?
       </div>
       {clicked ? (
@@ -45,7 +44,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
               </svg>
             )}
-            <span className="ml-2 text-gray-500 dark:text-gray-400">
+            <span className="ml-2 text-textStandard">
               {snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is {status}
             </span>
           </div>

diff --git a/ui/desktop/src/components/settings/SettingsView.tsx b/ui/desktop/src/components/settings/SettingsView.tsx
@@ -62,7 +62,7 @@ export default function SettingsView({
   setView: (view: View) => void;
   viewOptions: SettingsViewOptions;
 }) {
-  const [mode, setMode] = useState('approve');
+  const [mode, setMode] = useState('auto');
 
   const handleModeChange = async (newMode: string) => {
     const storeResponse = await fetch(getApiUrl('/configs/store'), {
@@ -99,7 +99,9 @@ export default function SettingsView({
 
         if (response.ok) {
           const { value } = await response.json();
-          setMode(value);
+          if (value) {
+            setMode(value);
+          }
         }
       } catch (error) {
         console.error('Error fetching current mode:', error);

diff --git a/ui/desktop/src/components/settings/basic/ModeSelection.tsx b/ui/desktop/src/components/settings/basic/ModeSelection.tsx
@@ -22,22 +22,28 @@ const ModeSelection = ({ value, onChange }) => {
 
   return (
     <div>
-      <h4 className="font-medium mb-4">Mode Selection</h4>
+      <h4 className="font-medium mb-4 text-textStandard">Mode Selection</h4>
 
       <RadioGroup.Root className="flex flex-col space-y-2" value={value} onValueChange={onChange}>
         {modes.map((mode) => (
           <RadioGroup.Item
             key={mode.value}
             value={mode.value}
-            className="flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-all cursor-pointer"
+            className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-all cursor-pointer"
           >
             <div className="flex flex-col text-left">
-              <h3 className="text-sm font-semibold text-textStandard">{mode.label}</h3>
-              <p className="text-xs text-textSubtle mt-[2px]">{mode.description}</p>
+              <h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
+                {mode.label}
+              </h3>
+              <p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
+                {mode.description}
+              </p>
             </div>
             <div className="flex-shrink-0">
-              <div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500">
-                {value === mode.value && <div className="w-2 h-2 bg-black rounded-full" />}
+              <div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500 dark:border-gray-400">
+                {value === mode.value && (
+                  <div className="w-2 h-2 bg-black dark:bg-white rounded-full" />
+                )}
               </div>
             </div>
           </RadioGroup.Item>