Skip to content

Commit 840a665

Browse files
Tajudeencursoragent
Tajudeen
and
cursoragent
committed
feat(ui): migrate Settings pane to design-system btn/dropdown classes
Wire VoidButtonBgDarken and AddButton through .btn tokens, update settings nav tabs and Ollama controls, and add settings adoption contract tests. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent d844317 commit 840a665

3 files changed

Lines changed: 49 additions & 27 deletions

File tree

‎src/vs/workbench/contrib/cortexide/browser/react/src/settings/Settings.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -238,8 +238,9 @@ export const AnimatedCheckmarkButton = ({ text, className }: { text?: string, cl
238238
const AddButton = ({ disabled, text = 'Add', ...props }: { disabled?: boolean, text?: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
239239

240240
return <button
241+
type="button"
241242
disabled={disabled}
242-
className={`bg-[var(--cortex-brand)] px-3 py-1 text-white rounded-sm ${!disabled ? 'hover:bg-[var(--cortex-brand-dim)] cursor-pointer' : 'opacity-50 cursor-not-allowed bg-opacity-70'}`}
243+
className={`btn btn-sm btn-primary`}
243244
{...props}
244245
>{text}</button>
245246

@@ -430,15 +431,12 @@ const SimpleModelSettingsDialog = ({
430431

431432

432433
<div className="flex justify-end gap-2 mt-4">
433-
<VoidButtonBgDarken onClick={onClose} className="px-3 py-1">
434+
<VoidButtonBgDarken onClick={onClose}>
434435
Cancel
435436
</VoidButtonBgDarken>
436-
<VoidButtonBgDarken
437-
onClick={onSave}
438-
className="px-3 py-1 bg-[var(--cortex-brand)] hover:bg-[var(--cortex-brand-dim)] text-white"
439-
>
437+
<button type="button" onClick={onSave} className="btn btn-primary btn-sm">
440438
Save
441-
</VoidButtonBgDarken>
439+
</button>
442440
</div>
443441
</div>
444442
</div>
@@ -555,11 +553,13 @@ export const ModelDump = ({ filteredProviders }: { filteredProviders?: ProviderN
555553
{disabled ? null : (
556554
<div className="w-5 flex items-center justify-center">
557555
<button
556+
type="button"
558557
onClick={() => { setOpenSettingsModel({ modelName, providerName, type }) }}
559558
data-tooltip-id='cortex-tooltip'
560559
data-tooltip-place='right'
561560
data-tooltip-content='Advanced Settings'
562-
className={`${hasOverrides ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}
561+
aria-label='Advanced settings'
562+
className={`btn btn-icon btn-ghost ${hasOverrides ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}
563563
>
564564
<Plus size={12} className="text-void-fg-3 opacity-50" />
565565
</button>
@@ -585,11 +585,13 @@ export const ModelDump = ({ filteredProviders }: { filteredProviders?: ProviderN
585585
{/* X button */}
586586
<div className={`w-5 flex items-center justify-center`}>
587587
{type === 'default' || type === 'autodetected' ? null : <button
588+
type="button"
588589
onClick={() => { settingsStateService.deleteModel(providerName, modelName); }}
589590
data-tooltip-id='cortex-tooltip'
590591
data-tooltip-place='right'
591592
data-tooltip-content='Delete'
592-
className={`${hasOverrides ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}
593+
aria-label='Delete model'
594+
className={`btn btn-icon btn-ghost ${hasOverrides ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}
593595
>
594596
<X size={12} className="text-void-fg-3 opacity-50" />
595597
</button>}
@@ -601,7 +603,7 @@ export const ModelDump = ({ filteredProviders }: { filteredProviders?: ProviderN
601603
{/* Add Model Section */}
602604
{showCheckmark ? (
603605
<div className="mt-4">
604-
<AnimatedCheckmarkButton text='Added' className="bg-[var(--cortex-brand)] text-white px-3 py-1 rounded-sm" />
606+
<AnimatedCheckmarkButton text='Added' className="btn btn-sm btn-primary" />
605607
</div>
606608
) : isAddModelOpen ? (
607609
<div className="mt-4">
@@ -650,7 +652,8 @@ export const ModelDump = ({ filteredProviders }: { filteredProviders?: ProviderN
650652
setModelName('');
651653
setUserChosenProviderName(null);
652654
}}
653-
className='text-void-fg-4'
655+
aria-label='Cancel add model'
656+
className='btn btn-icon btn-ghost text-void-fg-4'
654657
>
655658
<X className='size-4' />
656659
</button>
@@ -1115,7 +1118,7 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
11151118
<div className='flex items-center gap-3'>
11161119
<ChatMarkdownRender string={`Ollama Setup (rev 2025-10-30-1)`} chatMessageLocation={undefined} />
11171120
<select
1118-
className='text-xs bg-void-bg-1 text-void-fg-1 border border-void-border-1 rounded px-1 py-0.5'
1121+
className='dropdown text-xs px-1 py-0.5'
11191122
value={method}
11201123
onChange={(e) => setMethod(e.target.value as any)}
11211124
title='Install method'
@@ -1127,13 +1130,15 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
11271130
<option value='choco'>Chocolatey (Windows)</option>
11281131
</select>
11291132
<button
1130-
className='px-2 py-1 bg-void-bg-2 text-void-fg-1 border border-void-border-1 rounded hover:brightness-110 disabled:opacity-60'
1133+
type="button"
1134+
className='btn btn-secondary btn-sm'
11311135
onClick={onInstall}
11321136
disabled={status === 'running'}
11331137
>{status === 'running' ? 'Installing…' : 'Install Ollama'}</button>
11341138
{status === 'error' && (
11351139
<button
1136-
className='px-2 py-1 bg-void-bg-1 text-void-fg-3 border border-void-border-2 rounded hover:brightness-110'
1140+
type="button"
1141+
className='btn btn-secondary btn-sm'
11371142
onClick={() => { setStatus('idle'); setStatusText(''); setTerminalOutput(''); setIsHealthy(null); }}
11381143
>Retry</button>
11391144
)}
@@ -1208,11 +1213,13 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
12081213
<div className=' pl-6 mt-2'>
12091214
<div className='flex items-center gap-2 mb-1'>
12101215
<button
1211-
className='px-2 py-0.5 bg-void-bg-1 text-void-fg-3 border border-void-border-2 rounded hover:brightness-110'
1216+
type="button"
1217+
className='btn btn-secondary btn-sm'
12121218
onClick={async () => { try { await navigator.clipboard.writeText(terminalOutput) } catch {} }}
12131219
>Copy log</button>
12141220
<button
1215-
className='px-2 py-0.5 bg-void-bg-1 text-void-fg-3 border border-void-border-2 rounded hover:brightness-110'
1221+
type="button"
1222+
className='btn btn-secondary btn-sm'
12161223
onClick={() => setTerminalOutput('')}
12171224
>Clear</button>
12181225
</div>
@@ -1224,7 +1231,7 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
12241231
<div className=' pl-6 mt-2 flex items-center gap-2 whitespace-nowrap'>
12251232
<span className='text-void-fg-3 text-xs'>Pull model:</span>
12261233
<select
1227-
className='text-xs bg-void-bg-1 text-void-fg-1 border border-void-border-1 rounded px-1 py-0.5 shrink-0'
1234+
className='dropdown text-xs px-1 py-0.5 shrink-0'
12281235
value={modelTag}
12291236
onChange={(e) => setModelTag(e.target.value)}
12301237
>
@@ -1249,7 +1256,8 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
12491256
</optgroup>
12501257
</select>
12511258
<button
1252-
className='px-2 py-1 bg-void-bg-2 text-void-fg-1 border border-void-border-1 rounded hover:brightness-110 shrink-0 disabled:opacity-50 disabled:cursor-not-allowed'
1259+
type="button"
1260+
className='btn btn-secondary btn-sm shrink-0'
12531261
disabled={!modelTag || status === 'running'}
12541262
onClick={async () => {
12551263
if (!modelTag) {
@@ -1366,7 +1374,8 @@ export const OllamaSetupInstructions = ({ sayWeAutoDetect }: { sayWeAutoDetect?:
13661374
}}
13671375
>Pull</button>
13681376
<button
1369-
className='px-2 py-1 bg-red-600/80 text-white border border-red-500/80 rounded hover:brightness-110 shrink-0 disabled:opacity-50 disabled:cursor-not-allowed'
1377+
type="button"
1378+
className='btn btn-sm btn-stop shrink-0'
13701379
disabled={!modelTag || status === 'running'}
13711380
onClick={async () => {
13721381
if (!modelTag) {
@@ -1755,6 +1764,7 @@ export const Settings = () => {
17551764
{navItems.map(({ tab, label }) => (
17561765
<button
17571766
key={tab}
1767+
type="button"
17581768
onClick={() => {
17591769
if (tab === 'all') {
17601770
setSelectedSection('all');
@@ -1763,12 +1773,9 @@ export const Settings = () => {
17631773
setSelectedSection(tab);
17641774
}
17651775
}}
1766-
className={`
1767-
py-2 px-4 rounded-md text-left transition-all duration-200
1768-
${selectedSection === tab
1769-
? 'bg-[var(--cortex-brand)] text-white font-medium shadow-sm'
1770-
: 'bg-void-bg-2 hover:bg-void-bg-2/80 text-void-fg-1'}
1771-
`}
1776+
className={`btn btn-sm w-full justify-start text-left py-2 px-4 ${
1777+
selectedSection === tab ? 'btn-primary' : 'btn-secondary'
1778+
}`}
17721779
>
17731780
{label}
17741781
</button>

‎src/vs/workbench/contrib/cortexide/browser/react/src/util/inputs.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1831,8 +1831,10 @@ export const BlockCode = ({ initValue, language, maxHeight, showScrollbars }: Bl
18311831

18321832

18331833
export const VoidButtonBgDarken = ({ children, disabled, onClick, className }: { children: React.ReactNode; disabled?: boolean; onClick: () => void; className?: string }) => {
1834-
return <button disabled={disabled}
1835-
className={`px-3 py-1 bg-black/10 dark:bg-white/10 rounded-sm overflow-hidden whitespace-nowrap flex items-center justify-center ${className || ''}`}
1834+
return <button
1835+
type="button"
1836+
disabled={disabled}
1837+
className={`btn btn-secondary btn-sm ${className || ''}`}
18361838
onClick={onClick}
18371839
>{children}</button>
18381840
}

‎src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,16 @@ suite('designSystem (Phase 1 — onboarding adoption)', () => {
7373
assert.ok(src.includes('btn btn-secondary'), 'expected btn-secondary in local setup wizard');
7474
});
7575
});
76+
77+
const settingsPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/settings/Settings.tsx');
78+
79+
suite('designSystem (Phase 1 — settings adoption)', () => {
80+
81+
test('Settings pane uses design-system button classes', () => {
82+
const src = readFileSync(settingsPath, 'utf8');
83+
assert.ok(src.includes('btn btn-primary'), 'expected btn-primary in settings');
84+
assert.ok(src.includes('btn btn-secondary'), 'expected btn-secondary in settings');
85+
assert.ok(src.includes('btn-stop'), 'expected btn-stop for destructive Ollama delete');
86+
assert.ok(src.includes("'dropdown "), 'expected dropdown class on Ollama selects');
87+
});
88+
});

0 commit comments

Comments
 (0)