Skip to content

Commit 9d32ca3

Browse files
Stefan ErnstStefan Ernst
Stefan Ernst
authored and
Stefan Ernst
committed
Changed more hardcoded colors
1 parent 0c2a457 commit 9d32ca3

3 files changed

Lines changed: 55 additions & 43 deletions

File tree

‎frontend/src/lib/features/testing/TestCases.svelte‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -752,8 +752,8 @@
752752
canDrop: ({ source }) => source.data.type === 'test-case',
753753
onDragEnter: () => {
754754
isDropTarget = true;
755-
element.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
756-
element.style.borderColor = '#3B82F6';
755+
element.style.backgroundColor = 'var(--ds-interactive-subtle)';
756+
element.style.borderColor = 'var(--ds-interactive)';
757757
},
758758
onDragLeave: () => {
759759
isDropTarget = false;
@@ -847,7 +847,8 @@
847847
{#if folder.children && folder.children.length > 0}
848848
<button
849849
type="button"
850-
class="mr-1 inline-flex h-5 w-5 items-center justify-center text-gray-500 hover:text-gray-700 cursor-pointer bg-transparent border-0 p-0"
850+
class="mr-1 inline-flex h-5 w-5 items-center justify-center cursor-pointer bg-transparent border-0 p-0"
851+
style="color: var(--ds-icon-subtle);"
851852
aria-label={isFolderCollapsed(folder.id) ? 'Expand folder' : 'Collapse folder'}
852853
onclick={(e) => { e.stopPropagation(); toggleFolderCollapse(folder.id); }}
853854
>
@@ -865,7 +866,7 @@
865866
{#snippet children()}
866867
<span class="block truncate">
867868
{#if depth > 0}
868-
<span class="text-gray-400 mr-1">↳</span>
869+
<span class="mr-1" style="color: var(--ds-text-subtlest);">↳</span>
869870
{/if}
870871
{folder.name}
871872
</span>
@@ -875,24 +876,30 @@
875876
{#if selectedFolder === folder.id}
876877
<div
877878
onclick={(e) => { e.stopPropagation(); showEditFolderForm(folder); }}
878-
class="p-1 text-gray-400 hover:text-blue-600 cursor-pointer rounded"
879+
class="p-1 cursor-pointer rounded"
880+
style="color: var(--ds-icon-subtle);"
879881
role="button"
880882
tabindex="0"
881883
onkeydown={(e) => e.key === 'Enter' && showEditFolderForm(folder)}
884+
onmouseenter={(e) => e.currentTarget.style.color = 'var(--ds-interactive)'}
885+
onmouseleave={(e) => e.currentTarget.style.color = 'var(--ds-icon-subtle)'}
882886
>
883887
<Edit size="12" />
884888
</div>
885889
<div
886890
onclick={(e) => { e.stopPropagation(); deleteFolder(folder.id); }}
887-
class="p-1 text-gray-400 hover:text-red-600 cursor-pointer rounded"
891+
class="p-1 cursor-pointer rounded"
892+
style="color: var(--ds-icon-subtle);"
888893
role="button"
889894
tabindex="0"
890895
onkeydown={(e) => e.key === 'Enter' && deleteFolder(folder.id)}
896+
onmouseenter={(e) => e.currentTarget.style.color = 'var(--ds-danger)'}
897+
onmouseleave={(e) => e.currentTarget.style.color = 'var(--ds-icon-subtle)'}
891898
>
892899
<Trash2 size="12" />
893900
</div>
894901
{/if}
895-
<span class="text-xs text-gray-500 min-w-[20px] text-right">
902+
<span class="text-xs min-w-[20px] text-right" style="color: var(--ds-text-subtle);">
896903
{getFolderDisplayCount(folder, depth)}
897904
</span>
898905
</div>
@@ -1398,7 +1405,7 @@
13981405
{/if}
13991406
</div>
14001407
{#if isAssigned}
1401-
<div class="text-xs px-2 py-1 rounded text-green-700 bg-green-100">
1408+
<div class="text-xs px-2 py-1 rounded" style="background: var(--ds-status-success-bg); color: var(--ds-status-success-text);">
14021409
Assigned
14031410
</div>
14041411
{:else}

‎frontend/src/lib/features/testing/TestSteps.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@
231231
</div>
232232
{:else if error}
233233
<div class="text-center py-12">
234-
<div class="text-red-600 text-lg font-medium mb-2">Error</div>
234+
<div class="text-lg font-medium mb-2" style="color: var(--ds-text-danger);">Error</div>
235235
<div class="text-sm" style="color: var(--ds-text-subtle);">{error}</div>
236236
</div>
237237
{:else if testCase}

‎frontend/src/lib/features/testing/TestTemplateDetail.svelte‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,9 @@
137137
138138
function getRunStatus(run) {
139139
if (run.ended_at) {
140-
return { text: 'Completed', color: 'bg-green-100 text-green-800' };
140+
return { text: 'Completed', style: 'background: var(--ds-status-success-bg); color: var(--ds-status-success-text);' };
141141
}
142-
return { text: 'In Progress', color: 'bg-blue-100 text-blue-800' };
142+
return { text: 'In Progress', style: 'background: var(--ds-status-info-bg); color: var(--ds-status-info-text);' };
143143
}
144144
145145
// Keyboard shortcuts
@@ -166,7 +166,10 @@
166166
<div class="flex items-center gap-3">
167167
<button
168168
onclick={goBack}
169-
class="p-2 hover:bg-gray-100 rounded cursor-pointer"
169+
class="p-2 rounded cursor-pointer"
170+
style="&:hover { background: var(--ds-surface-hovered); }"
171+
onmouseenter={(e) => e.target.style.background = 'var(--ds-surface-hovered)'}
172+
onmouseleave={(e) => e.target.style.background = ''}
170173
>
171174
<ArrowLeft class="w-5 h-5" />
172175
</button>
@@ -196,35 +199,33 @@
196199

197200
<div class="flex items-center gap-3">
198201
{#if editMode}
199-
<button
202+
<Button
203+
variant="primary"
200204
onclick={saveEdit}
201-
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition cursor-pointer"
202205
>
203206
Save
204-
</button>
205-
<button
207+
</Button>
208+
<Button
209+
variant="default"
206210
onclick={toggleEditMode}
207-
class="px-4 py-2 border rounded hover:bg-gray-50 transition cursor-pointer"
208-
style="border-color: var(--ds-border); color: var(--ds-text);"
209211
>
210212
Cancel
211-
</button>
213+
</Button>
212214
{:else}
213-
<button
215+
<Button
216+
variant="default"
214217
onclick={toggleEditMode}
215-
class="flex items-center gap-2 px-4 py-2 border rounded hover:bg-gray-50 transition cursor-pointer"
216-
style="border-color: var(--ds-border); color: var(--ds-text);"
218+
icon={Edit2}
217219
>
218-
<Edit2 class="w-4 h-4" />
219220
Edit
220-
</button>
221-
<button
221+
</Button>
222+
<Button
223+
variant="danger"
222224
onclick={deleteTemplate}
223-
class="flex items-center gap-2 px-4 py-2 border border-red-300 text-red-600 rounded hover:bg-red-50 transition cursor-pointer"
225+
icon={Trash2}
224226
>
225-
<Trash2 class="w-4 h-4" />
226227
Delete
227-
</button>
228+
</Button>
228229
<Button
229230
variant="primary"
230231
onclick={executeTemplate}
@@ -249,7 +250,7 @@
249250
<div>
250251
<div class="text-sm font-medium mb-1" style="color: var(--ds-text-subtle);">Test Plan</div>
251252
{#if testSet}
252-
<a href={`/workspaces/${workspaceId}/tests/sets/${testSet.id}`} class="text-blue-600 hover:text-blue-800 hover:underline">
253+
<a href={`/workspaces/${workspaceId}/tests/sets/${testSet.id}`} class="hover:underline" style="color: var(--ds-text-link);">
253254
{testSet.name}
254255
</a>
255256
{:else}
@@ -294,7 +295,7 @@
294295
<div class="space-y-3">
295296
{#each executions as execution}
296297
{@const status = getRunStatus(execution)}
297-
<div class="border rounded p-4 hover:bg-gray-50 transition" style="border-color: var(--ds-border);">
298+
<div class="border rounded p-4 transition" style="border-color: var(--ds-border);" onmouseenter={(e) => e.currentTarget.style.background = 'var(--ds-surface-hovered)'} onmouseleave={(e) => e.currentTarget.style.background = ''}>
298299
<div class="flex items-center justify-between">
299300
<div class="flex-1">
300301
<div class="font-medium mb-1" style="color: var(--ds-text);">
@@ -308,21 +309,23 @@
308309
</div>
309310
</div>
310311
<div class="flex items-center gap-3">
311-
<span class="px-2 py-1 text-xs font-semibold rounded-full {status.color}">
312+
<span class="px-2 py-1 text-xs font-semibold rounded-full" style={status.style}>
312313
{status.text}
313314
</span>
314315
<div class="flex gap-2">
315316
{#if !execution.ended_at}
316317
<button
317318
onclick={() => continueExecution(execution)}
318-
class="text-green-600 hover:text-green-900 cursor-pointer text-sm font-medium"
319+
class="cursor-pointer text-sm font-medium"
320+
style="color: var(--ds-text-success);"
319321
>
320322
Continue
321323
</button>
322324
{/if}
323325
<button
324326
onclick={() => viewRunDetails(execution)}
325-
class="text-blue-600 hover:text-blue-900 cursor-pointer text-sm"
327+
class="cursor-pointer text-sm"
328+
style="color: var(--ds-text-link);"
326329
>
327330
{execution.ended_at ? 'Results' : 'Progress'}
328331
</button>
@@ -365,13 +368,13 @@
365368
</div>
366369
<div class="flex justify-between">
367370
<span class="text-sm" style="color: var(--ds-text-subtle);">Completed</span>
368-
<span class="text-sm font-medium text-green-600">
371+
<span class="text-sm font-medium" style="color: var(--ds-text-success);">
369372
{executions.filter(e => e.ended_at).length}
370373
</span>
371374
</div>
372375
<div class="flex justify-between">
373376
<span class="text-sm" style="color: var(--ds-text-subtle);">In Progress</span>
374-
<span class="text-sm font-medium text-blue-600">
377+
<span class="text-sm font-medium" style="color: var(--ds-text-info);">
375378
{executions.filter(e => !e.ended_at).length}
376379
</span>
377380
</div>
@@ -386,7 +389,7 @@
386389
<div class="space-y-3">
387390
<div>
388391
<div class="text-sm font-medium" style="color: var(--ds-text-subtle);">Name</div>
389-
<a href={`/workspaces/${workspaceId}/tests/sets/${testSet.id}`} class="text-sm text-blue-600 hover:text-blue-800 hover:underline">
392+
<a href={`/workspaces/${workspaceId}/tests/sets/${testSet.id}`} class="text-sm hover:underline" style="color: var(--ds-text-link);">
390393
{testSet.name}
391394
</a>
392395
</div>
@@ -405,13 +408,15 @@
405408
</div>
406409
{:else}
407410
<div class="text-center py-12">
408-
<div class="text-gray-500">Template not found</div>
409-
<button
410-
onclick={goBack}
411-
class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition cursor-pointer"
412-
>
413-
Back to Templates
414-
</button>
411+
<div style="color: var(--ds-text-subtle);">Template not found</div>
412+
<div class="mt-4">
413+
<Button
414+
variant="primary"
415+
onclick={goBack}
416+
>
417+
Back to Templates
418+
</Button>
419+
</div>
415420
</div>
416421
{/if}
417422
</div>

0 commit comments

Comments
 (0)