scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-05 08:10:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change Plan color for better mode visibility

Browse source
This commit is contained in:
Saoud Rizwan 2025-01-21 23:02:06 -08:00
parent e97befbb36
commit c454a3bf4b
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webview-ui/src/components/chat/ChatTextArea.tsx
View file

@ -43,6 +43,8 @@ interface ChatTextAreaProps {
onHeightChange?: (height: number) => void
}
const PLAN_MODE_COLOR = "var(--vscode-inputValidation-warningBorder)"
const SwitchOption = styled.div<{ isActive: boolean }>`
padding: 2px 8px;
color: ${(props) => (props.isActive ? "white" : "var(--vscode-input-foreground)")};
@ -69,13 +71,14 @@ const SwitchContainer = styled.div<{ disabled: boolean }>`
transform: scale(0.85);
transform-origin: right center;
margin-left: -10px; // compensate for the transform so flex spacing works
user-select: none; // Prevent text selection
`
const Slider = styled.div<{ isAct: boolean }>`
const Slider = styled.div<{ isAct: boolean; isPlan?: boolean }>`
position: absolute;
height: 100%;
width: 50%;
background-color: var(--vscode-focusBorder);
background-color: ${(props) => (props.isPlan ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)")};
transition: transform 0.2s ease;
transform: translateX(${(props) => (props.isAct ? "100%" : "0%")});
`
@ -372,6 +375,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const isComposing = event.nativeEvent?.isComposing ?? false
if (event.key === "Enter" && !event.shiftKey && !isComposing) {
event.preventDefault()
setIsTextAreaFocused(false)
onSend()
}
@ -863,6 +867,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
cursor: textAreaDisabled ? "not-allowed" : undefined,
flex: 1,
zIndex: 1,
outline: isTextAreaFocused
? `1px solid ${chatSettings.mode === "plan" ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)"}`
: "none",
}}
onScroll={() => updateHighlights()}
/>
@ -914,6 +921,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
className={`input-icon-button ${textAreaDisabled ? "disabled" : ""} codicon codicon-send`}
onClick={() => {
if (!textAreaDisabled) {
setIsTextAreaFocused(false)
onSend()
}
}}
@ -990,7 +998,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
</ButtonGroup>
<SwitchContainer data-testid="mode-switch" disabled={textAreaDisabled} onClick={onModeToggle}>
<Slider isAct={chatSettings.mode === "act"} />
<Slider isAct={chatSettings.mode === "act"} isPlan={chatSettings.mode === "plan"} />
<SwitchOption isActive={chatSettings.mode === "plan"}>Plan</SwitchOption>
<SwitchOption isActive={chatSettings.mode === "act"}>Act</SwitchOption>
</SwitchContainer>