fix:Added correct styling for the select options

This commit is contained in:
Prathmesh Vhatkar
2025-01-26 18:00:10 +05:30
parent 813c607440
commit 63787d1f7b

View File

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