Skip to content

Commit 2fac8c3

Browse files
sachasayansachasayan
committed
Transition PromptsView
1 parent b876dba commit 2fac8c3

File tree

2 files changed

+43
-59
lines changed

2 files changed

+43
-59
lines changed

‎webview-ui/src/components/prompts/PromptsView.tsx‎

Lines changed: 43 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -434,14 +434,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
434434
return (
435435
<Tab>
436436
<TabHeader className="flex justify-between items-center">
437-
<h3 className="text-vscode-foreground m-0">{t("prompts:title")}</h3>
437+
<h3 className="text-foreground m-0">{t("prompts:title")}</h3>
438438
<Button onClick={onDone}>{t("prompts:done")}</Button>
439439
</TabHeader>
440440

441441
<TabContent>
442442
<div>
443443
<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
444-
<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
444+
<h3 className="text-foreground m-0">{t("prompts:modes.title")}</h3>
445445
<div className="flex gap-2">
446446
<Button
447447
variant="ghost"
@@ -471,9 +471,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
471471
<div
472472
onClick={(e) => e.stopPropagation()}
473473
onMouseDown={(e) => e.stopPropagation()}
474-
className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
474+
className="absolute top-full right-0 w-[200px] mt-1 bg-background border border-border rounded shadow-md z-[1000]">
475475
<div
476-
className="p-2 cursor-pointer text-vscode-foreground text-sm"
476+
className="p-2 cursor-pointer text-foreground text-sm"
477477
onMouseDown={(e) => {
478478
e.preventDefault() // Prevent blur
479479
vscode.postMessage({
@@ -485,7 +485,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
485485
{t("prompts:modes.editGlobalModes")}
486486
</div>
487487
<div
488-
className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
488+
className="p-2 cursor-pointer text-foreground text-sm border-t border-border"
489489
onMouseDown={(e) => {
490490
e.preventDefault() // Prevent blur
491491
vscode.postMessage({
@@ -507,9 +507,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
507507
</div>
508508
</div>
509509

510-
<div className="text-sm text-vscode-descriptionForeground mb-3">
511-
{t("prompts:modes.createModeHelpText")}
512-
</div>
510+
<div className="text-sm text-muted-foreground mb-3">{t("prompts:modes.createModeHelpText")}</div>
513511

514512
<div className="flex items-center gap-1 mb-3">
515513
<Popover open={open} onOpenChange={onOpenChange}>
@@ -641,7 +639,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
641639
</Button>
642640
)}
643641
</div>
644-
<div className="text-sm text-vscode-descriptionForeground mb-2">
642+
<div className="text-sm text-muted-foreground mb-2">
645643
{t("prompts:roleDefinition.description")}
646644
</div>
647645
<Textarea
@@ -702,7 +700,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
702700
))}
703701
</SelectContent>
704702
</Select>
705-
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
703+
<div className="text-xs mt-1.5 text-muted-foreground">
706704
{t("prompts:apiConfiguration.select")}
707705
</div>
708706
</div>
@@ -728,7 +726,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
728726
)}
729727
</div>
730728
{!findModeBySlug(visualMode, customModes) && (
731-
<div className="text-sm text-vscode-descriptionForeground mb-2">
729+
<div className="text-sm text-muted-foreground mb-2">
732730
{t("prompts:tools.builtInModesText")}
733731
</div>
734732
)}
@@ -750,7 +748,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
750748
disabled={!isCustomMode}>
751749
{t(`prompts:tools.toolNames.${group}`)}
752750
{group === "edit" && (
753-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
751+
<div className="text-xs text-muted-foreground mt-0.5">
754752
{t("prompts:tools.allowedFiles")}{" "}
755753
{(() => {
756754
const currentMode = getCurrentMode()
@@ -773,7 +771,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
773771
})}
774772
</div>
775773
) : (
776-
<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
774+
<div className="text-sm text-foreground mb-2 leading-relaxed">
777775
{(() => {
778776
const currentMode = getCurrentMode()
779777
const enabledGroups = currentMode?.groups || []
@@ -821,7 +819,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
821819
</Button>
822820
)}
823821
</div>
824-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
822+
<div className="text-[13px] text-muted-foreground mb-2">
825823
{t("prompts:customInstructions.description", {
826824
modeName: getCurrentMode()?.name || "Code",
827825
})}
@@ -861,7 +859,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
861859
className="w-full resize-y"
862860
data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
863861
/>
864-
<div className="text-xs text-vscode-descriptionForeground mt-1.5">
862+
<div className="text-xs text-muted-foreground mt-1.5">
865863
<Trans
866864
i18nKey="prompts:customInstructions.loadFromFile"
867865
values={{
@@ -894,7 +892,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
894892
</div>
895893
</div>
896894

897-
<div className="pb-4 border-b border-vscode-input-border">
895+
<div className="pb-4 border-b border-border">
898896
<div className="flex gap-2">
899897
<Button
900898
variant="default"
@@ -932,15 +930,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
932930
<div className="mt-4">
933931
<button
934932
onClick={() => setIsSystemPromptDisclosureOpen(!isSystemPromptDisclosureOpen)}
935-
className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
933+
className="flex items-center text-xs text-foreground hover:text-vscode-textLink-foreground focus:outline-none"
936934
aria-expanded={isSystemPromptDisclosureOpen}>
937935
<span
938936
className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
939937
<span>{t("prompts:advancedSystemPrompt.title")}</span>
940938
</button>
941939

942940
{isSystemPromptDisclosureOpen && (
943-
<div className="text-xs text-vscode-descriptionForeground mt-2 ml-5">
941+
<div className="text-xs text-muted-foreground mt-2 ml-5">
944942
<Trans
945943
i18nKey="prompts:advancedSystemPrompt.description"
946944
values={{
@@ -972,10 +970,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
972970
</div>
973971
</div>
974972

975-
<div className="pb-5 border-b border-vscode-input-border">
976-
<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
973+
<div className="pb-5 border-b border-border">
974+
<h3 className="text-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
977975

978-
<div className="text-sm text-vscode-descriptionForeground mb-2">
976+
<div className="text-sm text-muted-foreground mb-2">
979977
{t("prompts:globalCustomInstructions.description", {
980978
language: i18next.language,
981979
})}
@@ -996,7 +994,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
996994
className="w-full resize-y"
997995
data-testid="global-custom-instructions-textarea"
998996
/>
999-
<div className="text-xs text-vscode-descriptionForeground mt-1.5">
997+
<div className="text-xs text-muted-foreground mt-1.5">
1000998
<Trans
1001999
i18nKey="prompts:globalCustomInstructions.loadFromFile"
10021000
components={{
@@ -1020,8 +1018,8 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10201018
</div>
10211019
</div>
10221020

1023-
<div className="mt-5 pb-15 border-b border-vscode-input-border">
1024-
<h3 className="text-vscode-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
1021+
<div className="mt-5 pb-[3.75rem] border-b border-border">
1022+
<h3 className="text-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
10251023
<div className="flex gap-4 items-center flex-wrap py-1">
10261024
<Select
10271025
value={activeSupportOption}
@@ -1040,7 +1038,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10401038
</div>
10411039

10421040
{/* Support prompt description */}
1043-
<div className="text-[13px] text-vscode-descriptionForeground my-2 mb-4">
1041+
<div className="text-[13px] text-muted-foreground my-2 mb-4">
10441042
{t(`prompts:supportPrompts.types.${activeSupportOption}.description`)}
10451043
</div>
10461044

@@ -1074,13 +1072,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10741072
{activeSupportOption === "ENHANCE" && (
10751073
<>
10761074
<div>
1077-
<div className="text-vscode-foreground text-[13px] mb-5 mt-1.5"></div>
1075+
<div className="text-foreground text-[13px] mb-5 mt-1.5"></div>
10781076
<div className="mb-3">
10791077
<div className="mb-2">
10801078
<div className="font-bold mb-1">
10811079
{t("prompts:supportPrompts.enhance.apiConfiguration")}
10821080
</div>
1083-
<div className="text-[13px] text-vscode-descriptionForeground">
1081+
<div className="text-[13px] text-muted-foreground">
10841082
{t("prompts:supportPrompts.enhance.apiConfigDescription")}
10851083
</div>
10861084
</div>
@@ -1143,7 +1141,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11431141

11441142
{isCreateModeDialogOpen && (
11451143
<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
1146-
<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
1144+
<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
11471145
<div className="flex-1 p-5 overflow-y-auto min-h-0">
11481146
<Button
11491147
variant="ghost"
@@ -1163,9 +1161,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11631161
}}
11641162
className="w-full"
11651163
/>
1166-
{nameError && (
1167-
<div className="text-xs text-vscode-errorForeground mt-1">{nameError}</div>
1168-
)}
1164+
{nameError && <div className="text-xs text-destructive mt-1">{nameError}</div>}
11691165
</div>
11701166
<div className="mb-4">
11711167
<div className="font-bold mb-1">{t("prompts:createModeDialog.slug.label")}</div>
@@ -1177,16 +1173,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11771173
}}
11781174
className="w-full"
11791175
/>
1180-
<div className="text-xs text-vscode-descriptionForeground mt-1">
1176+
<div className="text-xs text-muted-foreground mt-1">
11811177
{t("prompts:createModeDialog.slug.description")}
11821178
</div>
1183-
{slugError && (
1184-
<div className="text-xs text-vscode-errorForeground mt-1">{slugError}</div>
1185-
)}
1179+
{slugError && <div className="text-xs text-destructive mt-1">{slugError}</div>}
11861180
</div>
11871181
<div className="mb-4">
11881182
<div className="font-bold mb-1">{t("prompts:createModeDialog.saveLocation.label")}</div>
1189-
<div className="text-sm text-vscode-descriptionForeground mb-2">
1183+
<div className="text-sm text-muted-foreground mb-2">
11901184
{t("prompts:createModeDialog.saveLocation.description")}
11911185
</div>
11921186
<VSCodeRadioGroup
@@ -1198,29 +1192,24 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11981192
}}>
11991193
<VSCodeRadio value="global">
12001194
{t("prompts:createModeDialog.saveLocation.global.label")}
1201-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
1195+
<div className="text-xs text-muted-foreground mt-0.5">
12021196
{t("prompts:createModeDialog.saveLocation.global.description")}
12031197
</div>
12041198
</VSCodeRadio>
12051199
<VSCodeRadio value="project">
12061200
{t("prompts:createModeDialog.saveLocation.project.label")}
1207-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
1201+
<div className="text-xs text-muted-foreground mt-0.5">
12081202
{t("prompts:createModeDialog.saveLocation.project.description")}
12091203
</div>
12101204
</VSCodeRadio>
12111205
</VSCodeRadioGroup>
12121206
</div>
12131207

1214-
<div style={{ marginBottom: "16px" }}>
1215-
<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
1208+
<div className="mb-4">
1209+
<div className="font-bold mb-1">
12161210
{t("prompts:createModeDialog.roleDefinition.label")}
12171211
</div>
1218-
<div
1219-
style={{
1220-
fontSize: "13px",
1221-
color: "var(--vscode-descriptionForeground)",
1222-
marginBottom: "8px",
1223-
}}>
1212+
<div className="text-[13px] text-muted-foreground mb-2">
12241213
{t("prompts:createModeDialog.roleDefinition.description")}
12251214
</div>
12261215
<Textarea
@@ -1232,14 +1221,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12321221
className="w-full resize-y"
12331222
/>
12341223
{roleDefinitionError && (
1235-
<div className="text-xs text-vscode-errorForeground mt-1">
1236-
{roleDefinitionError}
1237-
</div>
1224+
<div className="text-xs text-destructive mt-1">{roleDefinitionError}</div>
12381225
)}
12391226
</div>
12401227
<div className="mb-4">
12411228
<div className="font-bold mb-1">{t("prompts:createModeDialog.tools.label")}</div>
1242-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
1229+
<div className="text-[13px] text-muted-foreground mb-2">
12431230
{t("prompts:createModeDialog.tools.description")}
12441231
</div>
12451232
<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
@@ -1263,15 +1250,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12631250
</VSCodeCheckbox>
12641251
))}
12651252
</div>
1266-
{groupsError && (
1267-
<div className="text-xs text-vscode-errorForeground mt-1">{groupsError}</div>
1268-
)}
1253+
{groupsError && <div className="text-xs text-destructive mt-1">{groupsError}</div>}
12691254
</div>
12701255
<div className="mb-4">
12711256
<div className="font-bold mb-1">
12721257
{t("prompts:createModeDialog.customInstructions.label")}
12731258
</div>
1274-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
1259+
<div className="text-[13px] text-muted-foreground mb-2">
12751260
{t("prompts:createModeDialog.customInstructions.description")}
12761261
</div>
12771262
<Textarea
@@ -1284,7 +1269,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12841269
/>
12851270
</div>
12861271
</div>
1287-
<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
1272+
<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-background">
12881273
<Button variant="secondary" onClick={() => setIsCreateModeDialogOpen(false)}>
12891274
{t("prompts:createModeDialog.buttons.cancel")}
12901275
</Button>
@@ -1298,7 +1283,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12981283

12991284
{isDialogOpen && (
13001285
<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
1301-
<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
1286+
<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
13021287
<div className="flex-1 p-5 overflow-y-auto min-h-0">
13031288
<Button
13041289
variant="ghost"
@@ -1313,11 +1298,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
13131298
modeName: getCurrentMode()?.name || "Code",
13141299
})}
13151300
</h2>
1316-
<pre className="p-2 whitespace-pre-wrap break-words font-mono text-vscode-editor-font-size text-vscode-editor-foreground bg-vscode-editor-background border border-vscode-editor-lineHighlightBorder rounded overflow-y-auto">
1301+
<pre className="p-2 whitespace-pre-wrap break-words font-mono text-base text-foreground bg-background border border-vscode-editor-lineHighlightBorder rounded overflow-y-auto">
13171302
{selectedPromptContent}
13181303
</pre>
13191304
</div>
1320-
<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
1305+
<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-background">
13211306
<Button variant="secondary" onClick={() => setIsDialogOpen(false)}>
13221307
{t("prompts:createModeDialog.close")}
13231308
</Button>

‎webview-ui/src/components/settings/styles.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)