Merge pull request #577 from psv2522/fix-issue-562

fix:Added correct styling for the select options

Author: mrubens

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 />
@@ -784,16 +790,22 @@ 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>
 								))}
-								<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 />