From 63787d1f7b5c37e461837aaaf843c54283ca4726 Mon Sep 17 00:00:00 2001
From: Prathmesh Vhatkar <psv2522@gmail.com>
Date: Sun, 26 Jan 2025 18:00:10 +0530
Subject: [PATCH 1/2] fix:Added correct styling for the select options

---
 .../src/components/chat/ChatTextArea.tsx      | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index fc4e70ea7f..834e10b2db 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -511,6 +511,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			appearance: "none" as const,
 		}
 
+		const optionStyle = {
+			backgroundColor: "var(--vscode-dropdown-background)",
+			color: "var(--vscode-dropdown-foreground)",
+		}
+
 		const caretContainerStyle = {
 			position: "absolute" as const,
 			left: 6,
@@ -731,20 +736,21 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									flex: "0 0 auto",
 								}}>
 								{getAllModes(customModes).map((mode) => (
-									<option
-										key={mode.slug}
-										value={mode.slug}
-										style={{
-											backgroundColor: "var(--vscode-dropdown-background)",
-											color: "var(--vscode-dropdown-foreground)",
-										}}>
+									<option key={mode.slug} value={mode.slug} style={{ ...optionStyle }}>
 										{mode.name}
 									</option>
 								))}
-								<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
+								<option
+									disabled
+									style={{
+										borderTop: "1px solid var(--vscode-dropdown-border)",
+										...optionStyle,
+									}}>
 									────
 								</option>
-								<option value="prompts-action">Edit...</option>
+								<option value="prompts-action" style={{ ...optionStyle }}>
+									Edit...
+								</option>
 							</select>
 							<div style={caretContainerStyle}>
 								<CaretIcon />
@@ -790,10 +796,17 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										{config.name}
 									</option>
 								))}
-								<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
+								<option
+									disabled
+									style={{
+										borderTop: "1px solid var(--vscode-dropdown-border)",
+										...optionStyle,
+									}}>
 									────
 								</option>
-								<option value="settings-action">Edit...</option>
+								<option value="settings-action" style={{ ...optionStyle }}>
+									Edit...
+								</option>
 							</select>
 							<div style={caretContainerStyle}>
 								<CaretIcon />

From 2d65b8aabe93a84f60bc987effd21532562134fc Mon Sep 17 00:00:00 2001
From: Prathmesh Vhatkar <psv2522@gmail.com>
Date: Sun, 26 Jan 2025 19:10:16 +0530
Subject: [PATCH 2/2] fix:Using optionStyle everywhere correctly

---
 webview-ui/src/components/chat/ChatTextArea.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 834e10b2db..fa00fc11d1 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -790,8 +790,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										key={config.name}
 										value={config.name}
 										style={{
-											backgroundColor: "var(--vscode-dropdown-background)",
-											color: "var(--vscode-dropdown-foreground)",
+											...optionStyle,
 										}}>
 										{config.name}
 									</option>