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

button styling changes; extracted to separate component

Browse source
This commit is contained in:
Evan 2025-01-22 12:25:56 +08:00
parent 36486e12ee
commit 0c7b12a2c0
2 changed files with 40 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
webview-ui/src/components/common/SettingsButton.tsx Normal file
View file

@ -0,0 +1,36 @@
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
import styled from "styled-components"
const StyledButton = styled(VSCodeButton)`
--settings-button-bg: var(--vscode-button-secondaryBackground);
--settings-button-hover: var(--vscode-button-secondaryHoverBackground);
--settings-button-active: var(--vscode-button-secondaryBackground);
background-color: var(--settings-button-bg) !important;
border-color: var(--settings-button-bg) !important;
width: 100% !important;
&:hover {
background-color: var(--settings-button-hover) !important;
border-color: var(--settings-button-hover) !important;
}
&:active {
background-color: var(--settings-button-active) !important;
border-color: var(--settings-button-active) !important;
}
i.codicon {
margin-right: 6px;
flex-shrink: 0;
font-size: 16px !important;
}
`
interface SettingsButtonProps extends React.ComponentProps<typeof VSCodeButton> {}
const SettingsButton: React.FC<SettingsButtonProps> = (props) => {
return <StyledButton appearance="secondary" {...props} />
}
export default SettingsButton

9
webview-ui/src/components/settings/SettingsView.tsx
View file

@ -4,6 +4,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
import { validateApiConfiguration, validateModelId } from "../../utils/validate"
import { vscode } from "../../utils/vscode"
import ApiOptions from "./ApiOptions"
import SettingsButton from "../common/SettingsButton"
const IS_DEV = false // FIXME: use flags when packaging
@ -137,16 +138,14 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
display: "flex",
justifyContent: "center",
}}>
<VSCodeButton
appearance="secondary"
<SettingsButton
onClick={() => vscode.postMessage({ type: "openExtensionSettings" })}
style={{
margin: "0 0 16px 0",
minWidth: "fit-content",
whiteSpace: "nowrap",
}}>
<i className="codicon codicon-settings-gear" />
Advanced Settings
</VSCodeButton>
</SettingsButton>
</div>
<div
style={{