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

fix: format styling (Announcements.tsx, AutoApproveMenu.tsx). Adding vscStyles.ts (#1288)

Browse source 
* fix: format styling (Announcements.tsx).  Adding vscStyles.ts

* prettier for unrelated files

* removing some styled components

* comment tweak

* Update mcp-quickstart.md

* update post merge

* VSC prefix
This commit is contained in:
brownrw8 2025-01-24 10:15:03 -10:00 • committed by GitHub
parent 67ac1fd339
commit d3223f28d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 55 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webview-ui/src/components/chat/Announcement.tsx
View file

@ -2,6 +2,7 @@ import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
import { memo } from "react"
import { useTranslation } from "react-i18next"
import { Trans } from "react-i18next"
import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "../../utils/vscStyles"
interface AnnouncementProps {
version: string
@ -18,7 +19,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
return (
<div
style={{
backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
borderRadius: "3px",
padding: "12px 16px",
margin: "5px 15px 5px 15px",
@ -104,7 +105,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
<div
style={{
height: "1px",
background: "var(--vscode-foreground)",
background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
opacity: 0.1,
margin: "8px 0",
}}

21
webview-ui/src/components/chat/AutoApproveMenu.tsx
View file

@ -4,6 +4,7 @@ import styled from "styled-components"
import { useExtensionState } from "../../context/ExtensionStateContext"
import { AutoApprovalSettings } from "../../../../src/shared/AutoApprovalSettings"
import { vscode } from "../../utils/vscode"
import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
interface AutoApproveMenuProps {
style?: React.CSSProperties
@ -128,7 +129,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
padding: "0 15px",
userSelect: "none",
borderTop: isExpanded
? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
? `0.5px solid color-mix(in srgb, ${getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND)} 20%, transparent)`
: "none",
overflowY: "auto",
...style,
@ -186,7 +187,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
}}>
<span
style={{
color: "var(--vscode-foreground)",
color: getAsVar(VSC_FOREGROUND),
whiteSpace: "nowrap",
}}>
Auto-approve:
@ -213,7 +214,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
<div
style={{
marginBottom: "10px",
color: "var(--vscode-descriptionForeground)",
color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
fontSize: "12px",
}}>
Auto-approve allows Cline to perform the following actions without asking for permission. Please use with
@ -232,7 +233,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
<div
style={{
marginLeft: "28px",
color: "var(--vscode-descriptionForeground)",
color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
fontSize: "12px",
}}>
{action.description}
@ -242,7 +243,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
<div
style={{
height: "0.5px",
background: "var(--vscode-titleBar-inactiveForeground)",
background: getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND),
margin: "15px 0",
opacity: 0.2,
}}
@ -254,7 +255,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
gap: "8px",
marginTop: "10px",
marginBottom: "8px",
color: "var(--vscode-foreground)",
color: getAsVar(VSC_FOREGROUND),
}}>
<span style={{ flexShrink: 1, minWidth: 0 }}>Max Requests:</span>
<VSCodeTextField
@ -280,7 +281,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
</div>
<div
style={{
color: "var(--vscode-descriptionForeground)",
color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
fontSize: "12px",
marginBottom: "10px",
}}>
@ -298,7 +299,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
<div
style={{
marginLeft: "28px",
color: "var(--vscode-descriptionForeground)",
color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
fontSize: "12px",
}}>
Receive system notifications when Cline requires approval to proceed or when a task is completed.
@ -314,12 +315,12 @@ const CollapsibleSection = styled.div<{ isHovered?: boolean }>`
display: flex;
align-items: center;
gap: 4px;
color: ${(props) => (props.isHovered ? "var(--vscode-foreground)" : "var(--vscode-descriptionForeground)")};
color: ${(props) => (props.isHovered ? getAsVar(VSC_FOREGROUND) : getAsVar(VSC_DESCRIPTION_FOREGROUND))};
flex: 1;
min-width: 0;
&:hover {
color: var(--vscode-foreground);
color: ${getAsVar(VSC_FOREGROUND)};
}
`

41
webview-ui/src/utils/vscStyles.ts Normal file
View file

@ -0,0 +1,41 @@
export const VSC_INPUT_BACKGROUND = "--vscode-input-background"
export const VSC_SIDEBAR_BACKGROUND = "--vscode-sideBar-background"
export const VSC_FOREGROUND = "--vscode-foreground"
export const VSC_EDITOR_FOREGROUND = "--vscode-editor-foreground"
export const VSC_FOREGROUND_MUTED = "--vscode-foreground-muted"
export const VSC_DESCRIPTION_FOREGROUND = "--vscode-descriptionForeground"
export const VSC_INPUT_PLACEHOLDER_FOREGROUND = "--vscode-input-placeholderForeground"
export const VSC_BUTTON_BACKGROUND = "--vscode-button-background"
export const VSC_BUTTON_FOREGROUND = "--vscode-button-foreground"
export const VSC_EDITOR_BACKGROUND = "--vscode-editor-background"
export const VSC_LIST_SELECTION_BACKGROUND = "--vscode-list-activeSelectionBackground"
export const VSC_FOCUS_BORDER = "--vscode-focus-border"
export const VSC_LIST_ACTIVE_FOREGROUND = "--vscode-quickInputList-focusForeground"
export const VSC_QUICK_INPUT_BACKGROUND = "--vscode-quickInput-background"
export const VSC_INPUT_BORDER = "--vscode-input-border"
export const VSC_INPUT_BORDER_FOCUS = "--vscode-focusBorder"
export const VSC_BADGE_BACKGROUND = "--vscode-badge-background"
export const VSC_BADGE_FOREGROUND = "--vscode-badge-foreground"
export const VSC_SIDEBAR_BORDER = "--vscode-sideBar-border"
export const VSC_DIFF_REMOVED_LINE_BACKGROUND = "--vscode-diffEditor-removedLineBackground"
export const VSC_DIFF_INSERTED_LINE_BACKGROUND = "--vscode-diffEditor-insertedLineBackground"
export const VSC_INACTIVE_SELECTION_BACKGROUND = "--vscode-editor-inactiveSelectionBackground"
export const VSC_TITLEBAR_INACTIVE_FOREGROUND = "--vscode-titleBar-inactiveForeground"
export function getAsVar(varName: string): string {
return `var(${varName})`
}
export function hexToRGB(hexColor: string): { r: number; g: number; b: number } {
const hex = hexColor.replace(/^#/, "").slice(0, 6)
const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16))
return { r, g, b }
}
export function colorToHex(colorVar: string): string {
const value = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim()
if (value.startsWith("#")) return value.slice(0, 7)
const rgbValues = value.match(/\d+/g)?.slice(0, 3).map(Number) || []
return `#${rgbValues.map((x) => x.toString(16).padStart(2, "0")).join("")}`
}