From 1b56be0efc908f96225f9c051ce54683c0033fb2 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 13 Feb 2025 23:32:47 -0500 Subject: [PATCH] Convert PromptsView to tailwind --- .clinerules | 5 + .../src/components/prompts/PromptsView.tsx | 239 ++++-------------- webview-ui/src/index.css | 1 + 3 files changed, 55 insertions(+), 190 deletions(-) diff --git a/.clinerules b/.clinerules index 4f726299d6..9bd9ff02ee 100644 --- a/.clinerules +++ b/.clinerules @@ -16,6 +16,11 @@ - Logs can be found in `logs\app.log` - Logfile is overwritten on each run to keep it to a manageable volume. +4. Styling Guidelines: + - Use Tailwind CSS classes instead of inline style objects for new markup + - VSCode CSS variables must be added to webview-ui/src/index.css before using them in Tailwind classes + - Example: `
` instead of style objects + # Adding a New Setting diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx index 08b986705c..5956ff6265 100644 --- a/webview-ui/src/components/prompts/PromptsView.tsx +++ b/webview-ui/src/components/prompts/PromptsView.tsx @@ -343,31 +343,16 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { } return ( -
-
-

Prompts

+
+
+

Prompts

Done
-
-
-
-
Preferred Language
+
+
+
+
Preferred Language
-

+

Select the language that Cline should use for communication.

-
Custom Instructions for All Modes
-
+
Custom Instructions for All Modes
+
These instructions apply to all modes. They provide a base set of behaviors that can be enhanced by mode-specific instructions below.
@@ -435,23 +406,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { }} rows={4} resize="vertical" - style={{ width: "100%" }} + className="w-full" data-testid="global-custom-instructions-textarea" /> -
+
Instructions can also be loaded from{" "} vscode.postMessage({ type: "openFile", @@ -468,25 +429,18 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
-
-
e.stopPropagation()} - style={{ - display: "flex", - justifyContent: "space-between", - alignItems: "center", - marginBottom: "12px", - }}> -

Mode-Specific Prompts

-
+
+
e.stopPropagation()} className="flex justify-between items-center mb-3"> +

Mode-Specific Prompts

+
-
+
{ e.preventDefault() e.stopPropagation() @@ -502,25 +456,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} - style={{ - position: "absolute", - top: "100%", - right: 0, - width: "200px", - marginTop: "4px", - backgroundColor: "var(--vscode-editor-background)", - border: "1px solid var(--vscode-input-border)", - borderRadius: "3px", - boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)", - zIndex: 1000, - }}> + className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
{ e.preventDefault() // Prevent blur vscode.postMessage({ @@ -532,13 +470,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { Edit Global Modes
{ e.preventDefault() // Prevent blur vscode.postMessage({ @@ -560,24 +492,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
-
+
Hit the + to create a new custom mode, or just ask Roo in chat to create one for you!
-
+
{modes.map((modeConfig) => { const isActive = mode === modeConfig.slug return ( @@ -586,18 +505,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { data-testid={`${modeConfig.slug}-tab`} data-active={isActive ? "true" : "false"} onClick={() => handleModeSwitch(modeConfig)} - style={{ - padding: "4px 8px", - border: "none", - background: isActive ? "var(--vscode-button-background)" : "none", - color: isActive - ? "var(--vscode-button-foreground)" - : "var(--vscode-foreground)", - cursor: "pointer", - opacity: isActive ? 1 : 0.8, - borderRadius: "3px", - fontWeight: "bold", - }}> + className={`px-2 py-1 border-none rounded cursor-pointer font-bold ${ + isActive + ? "bg-vscode-button-background text-vscode-button-foreground opacity-100" + : "bg-transparent text-vscode-foreground opacity-80" + }`}> {modeConfig.name} ) @@ -608,10 +520,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
{/* Only show name and delete for custom modes */} {mode && findModeBySlug(mode, customModes) && ( -
-
-
Name
-
+
+
+
Name
+
) => { @@ -627,7 +539,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { }) } }} - style={{ width: "100%" }} + className="w-full" /> {
)}
-
-
Role Definition
+
+
Role Definition
{!findModeBySlug(mode, customModes) && ( { )}
-
+
Define Roo's expertise and personality for this mode. This description shapes how Roo presents itself and approaches tasks.
@@ -722,34 +623,23 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { text: value, }) }} - style={{ width: "100%" }}> + className="w-full"> {(listApiConfigMeta || []).map((config) => ( {config.name} ))} -
+
Select which API configuration to use for this mode
{/* Show tools for all modes */} -
-
-
Available Tools
+
+
+
Available Tools
{findModeBySlug(mode, customModes) && ( { )}
{!findModeBySlug(mode, customModes) && ( -
+
Tools for built-in modes cannot be modified
)} {isToolsEditMode && findModeBySlug(mode, customModes) ? ( -
+
{availableGroups.map((group) => { const currentMode = getCurrentMode() const isCustomMode = findModeBySlug(mode, customModes) @@ -793,12 +673,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { disabled={!isCustomMode}> {GROUP_DISPLAY_NAMES[group]} {group === "edit" && ( -
+
Allowed files:{" "} {(() => { const currentMode = getCurrentMode() @@ -821,13 +696,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { })}
) : ( -
+
{(() => { const currentMode = getCurrentMode() const enabledGroups = currentMode?.groups || [] @@ -1225,12 +1094,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
Save Location
-
+
Choose where to save this mode. Project-specific modes take precedence over global modes.
@@ -1254,12 +1118,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => { Project-specific (.roomodes) -
+
Only available in this workspace, takes precedence over global
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index d4ccf2f233..7c83662c5f 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -83,6 +83,7 @@ --color-vscode-notifications-foreground: var(--vscode-notifications-foreground); --color-vscode-notifications-background: var(--vscode-notifications-background); --color-vscode-notifications-border: var(--vscode-notifications-border); + --color-vscode-descriptionForeground: var(--vscode-descriptionForeground); } @layer base {