Skip to content

Commit 9e3be02

Browse files
sachasayansachasayan
committed
Tailwind migration — prompts view.
1 parent 4fc47eb commit 9e3be02

File tree

1 file changed

+43
-58
lines changed

1 file changed

+43
-58
lines changed

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

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

440440
<TabContent>
441441
<div>
442442
<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
443-
<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
443+
<h3 className="text-foreground m-0">{t("prompts:modes.title")}</h3>
444444
<div className="flex gap-2">
445445
<Button
446446
variant="ghost"
@@ -470,9 +470,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
470470
<div
471471
onClick={(e) => e.stopPropagation()}
472472
onMouseDown={(e) => e.stopPropagation()}
473-
className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
473+
className="absolute top-full right-0 w-[200px] mt-1 bg-background border border-border rounded shadow-md z-[1000]">
474474
<div
475-
className="p-2 cursor-pointer text-vscode-foreground text-sm"
475+
className="p-2 cursor-pointer text-foreground text-sm"
476476
onMouseDown={(e) => {
477477
e.preventDefault() // Prevent blur
478478
vscode.postMessage({
@@ -484,7 +484,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
484484
{t("prompts:modes.editGlobalModes")}
485485
</div>
486486
<div
487-
className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
487+
className="p-2 cursor-pointer text-foreground text-sm border-t border-border"
488488
onMouseDown={(e) => {
489489
e.preventDefault() // Prevent blur
490490
vscode.postMessage({
@@ -506,9 +506,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
506506
</div>
507507
</div>
508508

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

513511
<div className="flex items-center gap-1 mb-3">
514512
<Popover open={open} onOpenChange={onOpenChange}>
@@ -662,7 +660,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
662660
</Button>
663661
)}
664662
</div>
665-
<div className="text-sm text-vscode-descriptionForeground mb-2">
663+
<div className="text-sm text-muted-foreground mb-2">
666664
{t("prompts:roleDefinition.description")}
667665
</div>
668666
<VSCodeTextArea
@@ -723,7 +721,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
723721
))}
724722
</SelectContent>
725723
</Select>
726-
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
724+
<div className="text-xs mt-1.5 text-muted-foreground">
727725
{t("prompts:apiConfiguration.select")}
728726
</div>
729727
</div>
@@ -749,7 +747,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
749747
)}
750748
</div>
751749
{!findModeBySlug(visualMode, customModes) && (
752-
<div className="text-sm text-vscode-descriptionForeground mb-2">
750+
<div className="text-sm text-muted-foreground mb-2">
753751
{t("prompts:tools.builtInModesText")}
754752
</div>
755753
)}
@@ -771,7 +769,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
771769
disabled={!isCustomMode}>
772770
{t(`prompts:tools.toolNames.${group}`)}
773771
{group === "edit" && (
774-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
772+
<div className="text-xs text-muted-foreground mt-0.5">
775773
{t("prompts:tools.allowedFiles")}{" "}
776774
{(() => {
777775
const currentMode = getCurrentMode()
@@ -794,7 +792,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
794792
})}
795793
</div>
796794
) : (
797-
<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
795+
<div className="text-sm text-foreground mb-2 leading-relaxed">
798796
{(() => {
799797
const currentMode = getCurrentMode()
800798
const enabledGroups = currentMode?.groups || []
@@ -842,7 +840,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
842840
</Button>
843841
)}
844842
</div>
845-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
843+
<div className="text-[13px] text-muted-foreground mb-2">
846844
{t("prompts:customInstructions.description", {
847845
modeName: getCurrentMode()?.name || "Code",
848846
})}
@@ -882,7 +880,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
882880
className="w-full resize-y"
883881
data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
884882
/>
885-
<div className="text-xs text-vscode-descriptionForeground mt-1.5">
883+
<div className="text-xs text-muted-foreground mt-1.5">
886884
<Trans
887885
i18nKey="prompts:customInstructions.loadFromFile"
888886
values={{
@@ -915,7 +913,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
915913
</div>
916914
</div>
917915

918-
<div className="pb-4 border-b border-vscode-input-border">
916+
<div className="pb-4 border-b border-border">
919917
<div className="flex gap-2">
920918
<Button
921919
variant="default"
@@ -953,15 +951,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
953951
<div className="mt-4">
954952
<button
955953
onClick={() => setIsSystemPromptDisclosureOpen(!isSystemPromptDisclosureOpen)}
956-
className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
954+
className="flex items-center text-xs text-foreground hover:text-vscode-textLink-foreground focus:outline-none"
957955
aria-expanded={isSystemPromptDisclosureOpen}>
958956
<span
959957
className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
960958
<span>{t("prompts:advancedSystemPrompt.title")}</span>
961959
</button>
962960

963961
{isSystemPromptDisclosureOpen && (
964-
<div className="text-xs text-vscode-descriptionForeground mt-2 ml-5">
962+
<div className="text-xs text-muted-foreground mt-2 ml-5">
965963
<Trans
966964
i18nKey="prompts:advancedSystemPrompt.description"
967965
values={{
@@ -993,10 +991,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
993991
</div>
994992
</div>
995993

996-
<div className="pb-5 border-b border-vscode-input-border">
997-
<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
994+
<div className="pb-5 border-b border-border">
995+
<h3 className="text-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
998996

999-
<div className="text-sm text-vscode-descriptionForeground mb-2">
997+
<div className="text-sm text-muted-foreground mb-2">
1000998
{t("prompts:globalCustomInstructions.description", {
1001999
language: i18next.language,
10021000
})}
@@ -1017,7 +1015,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10171015
className="w-full resize-y"
10181016
data-testid="global-custom-instructions-textarea"
10191017
/>
1020-
<div className="text-xs text-vscode-descriptionForeground mt-1.5">
1018+
<div className="text-xs text-muted-foreground mt-1.5">
10211019
<Trans
10221020
i18nKey="prompts:globalCustomInstructions.loadFromFile"
10231021
components={{
@@ -1041,8 +1039,8 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10411039
</div>
10421040
</div>
10431041

1044-
<div className="mt-5 pb-15 border-b border-vscode-input-border">
1045-
<h3 className="text-vscode-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
1042+
<div className="mt-5 pb-[3.75rem] border-b border-border">
1043+
<h3 className="text-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
10461044
<div className="flex gap-4 items-center flex-wrap py-1">
10471045
<Select
10481046
value={activeSupportOption}
@@ -1061,7 +1059,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10611059
</div>
10621060

10631061
{/* Support prompt description */}
1064-
<div className="text-[13px] text-vscode-descriptionForeground my-2 mb-4">
1062+
<div className="text-[13px] text-muted-foreground my-2 mb-4">
10651063
{t(`prompts:supportPrompts.types.${activeSupportOption}.description`)}
10661064
</div>
10671065

@@ -1095,13 +1093,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10951093
{activeSupportOption === "ENHANCE" && (
10961094
<>
10971095
<div>
1098-
<div className="text-vscode-foreground text-[13px] mb-5 mt-1.5"></div>
1096+
<div className="text-foreground text-[13px] mb-5 mt-1.5"></div>
10991097
<div className="mb-3">
11001098
<div className="mb-2">
11011099
<div className="font-bold mb-1">
11021100
{t("prompts:supportPrompts.enhance.apiConfiguration")}
11031101
</div>
1104-
<div className="text-[13px] text-vscode-descriptionForeground">
1102+
<div className="text-[13px] text-muted-foreground">
11051103
{t("prompts:supportPrompts.enhance.apiConfigDescription")}
11061104
</div>
11071105
</div>
@@ -1164,7 +1162,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11641162

11651163
{isCreateModeDialogOpen && (
11661164
<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
1167-
<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
1165+
<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
11681166
<div className="flex-1 p-5 overflow-y-auto min-h-0">
11691167
<Button
11701168
variant="ghost"
@@ -1184,9 +1182,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11841182
}}
11851183
className="w-full"
11861184
/>
1187-
{nameError && (
1188-
<div className="text-xs text-vscode-errorForeground mt-1">{nameError}</div>
1189-
)}
1185+
{nameError && <div className="text-xs text-destructive mt-1">{nameError}</div>}
11901186
</div>
11911187
<div className="mb-4">
11921188
<div className="font-bold mb-1">{t("prompts:createModeDialog.slug.label")}</div>
@@ -1198,16 +1194,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
11981194
}}
11991195
className="w-full"
12001196
/>
1201-
<div className="text-xs text-vscode-descriptionForeground mt-1">
1197+
<div className="text-xs text-muted-foreground mt-1">
12021198
{t("prompts:createModeDialog.slug.description")}
12031199
</div>
1204-
{slugError && (
1205-
<div className="text-xs text-vscode-errorForeground mt-1">{slugError}</div>
1206-
)}
1200+
{slugError && <div className="text-xs text-destructive mt-1">{slugError}</div>}
12071201
</div>
12081202
<div className="mb-4">
12091203
<div className="font-bold mb-1">{t("prompts:createModeDialog.saveLocation.label")}</div>
1210-
<div className="text-sm text-vscode-descriptionForeground mb-2">
1204+
<div className="text-sm text-muted-foreground mb-2">
12111205
{t("prompts:createModeDialog.saveLocation.description")}
12121206
</div>
12131207
<VSCodeRadioGroup
@@ -1219,29 +1213,24 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12191213
}}>
12201214
<VSCodeRadio value="global">
12211215
{t("prompts:createModeDialog.saveLocation.global.label")}
1222-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
1216+
<div className="text-xs text-muted-foreground mt-0.5">
12231217
{t("prompts:createModeDialog.saveLocation.global.description")}
12241218
</div>
12251219
</VSCodeRadio>
12261220
<VSCodeRadio value="project">
12271221
{t("prompts:createModeDialog.saveLocation.project.label")}
1228-
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
1222+
<div className="text-xs text-muted-foreground mt-0.5">
12291223
{t("prompts:createModeDialog.saveLocation.project.description")}
12301224
</div>
12311225
</VSCodeRadio>
12321226
</VSCodeRadioGroup>
12331227
</div>
12341228

1235-
<div style={{ marginBottom: "16px" }}>
1236-
<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
1229+
<div className="mb-4">
1230+
<div className="font-bold mb-1">
12371231
{t("prompts:createModeDialog.roleDefinition.label")}
12381232
</div>
1239-
<div
1240-
style={{
1241-
fontSize: "13px",
1242-
color: "var(--vscode-descriptionForeground)",
1243-
marginBottom: "8px",
1244-
}}>
1233+
<div className="text-[13px] text-muted-foreground mb-2">
12451234
{t("prompts:createModeDialog.roleDefinition.description")}
12461235
</div>
12471236
<VSCodeTextArea
@@ -1253,14 +1242,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12531242
className="w-full resize-y"
12541243
/>
12551244
{roleDefinitionError && (
1256-
<div className="text-xs text-vscode-errorForeground mt-1">
1257-
{roleDefinitionError}
1258-
</div>
1245+
<div className="text-xs text-destructive mt-1">{roleDefinitionError}</div>
12591246
)}
12601247
</div>
12611248
<div className="mb-4">
12621249
<div className="font-bold mb-1">{t("prompts:createModeDialog.tools.label")}</div>
1263-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
1250+
<div className="text-[13px] text-muted-foreground mb-2">
12641251
{t("prompts:createModeDialog.tools.description")}
12651252
</div>
12661253
<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
@@ -1284,15 +1271,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
12841271
</VSCodeCheckbox>
12851272
))}
12861273
</div>
1287-
{groupsError && (
1288-
<div className="text-xs text-vscode-errorForeground mt-1">{groupsError}</div>
1289-
)}
1274+
{groupsError && <div className="text-xs text-destructive mt-1">{groupsError}</div>}
12901275
</div>
12911276
<div className="mb-4">
12921277
<div className="font-bold mb-1">
12931278
{t("prompts:createModeDialog.customInstructions.label")}
12941279
</div>
1295-
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
1280+
<div className="text-[13px] text-muted-foreground mb-2">
12961281
{t("prompts:createModeDialog.customInstructions.description")}
12971282
</div>
12981283
<VSCodeTextArea
@@ -1305,7 +1290,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
13051290
/>
13061291
</div>
13071292
</div>
1308-
<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
1293+
<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-background">
13091294
<Button variant="secondary" onClick={() => setIsCreateModeDialogOpen(false)}>
13101295
{t("prompts:createModeDialog.buttons.cancel")}
13111296
</Button>
@@ -1319,7 +1304,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
13191304

13201305
{isDialogOpen && (
13211306
<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
1322-
<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
1307+
<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
13231308
<div className="flex-1 p-5 overflow-y-auto min-h-0">
13241309
<Button
13251310
variant="ghost"
@@ -1334,11 +1319,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
13341319
modeName: getCurrentMode()?.name || "Code",
13351320
})}
13361321
</h2>
1337-
<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">
1322+
<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">
13381323
{selectedPromptContent}
13391324
</pre>
13401325
</div>
1341-
<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
1326+
<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-background">
13421327
<Button variant="secondary" onClick={() => setIsDialogOpen(false)}>
13431328
{t("prompts:createModeDialog.close")}
13441329
</Button>

0 commit comments

Comments
 (0)