refactor(web/m7-362): action-button labels use non-flipping text-action-fg

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-03 13:42:42 -04:00
parent 5c5f9f3ec1
commit f0bfac2555
10 changed files with 24 additions and 24 deletions
@@ -110,7 +110,7 @@
type="button" type="button"
onclick={createAndAdd} onclick={createAndAdd}
disabled={busy || !newName.trim()} disabled={busy || !newName.trim()}
class="rounded bg-action-secondary px-2 py-1 text-xs text-text-primary disabled:opacity-50" class="rounded bg-action-secondary px-2 py-1 text-xs text-action-fg disabled:opacity-50"
> >
Create & add Create & add
</button> </button>
@@ -74,7 +74,7 @@
<button <button
type="button" type="button"
aria-label={`Request ${title}`} aria-label={`Request ${title}`}
class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary" class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
onclick={handleRequest} onclick={handleRequest}
> >
<Plus size={16} strokeWidth={1} /> Request <Plus size={16} strokeWidth={1} /> Request
+1 -1
View File
@@ -88,7 +88,7 @@
type="button" type="button"
onclick={submit} onclick={submit}
disabled={submitting} disabled={submitting}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-2.5 py-1 text-sm text-text-primary disabled:opacity-50" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-2.5 py-1 text-sm text-action-fg disabled:opacity-50"
> >
<Flag size={14} strokeWidth={1} /> <Flag size={14} strokeWidth={1} />
{isUpdate ? 'Update flag' : 'Flag'} {isUpdate ? 'Update flag' : 'Flag'}
+3 -3
View File
@@ -236,7 +236,7 @@
type="button" type="button"
onclick={() => onApprove(r)} onclick={() => onApprove(r)}
aria-label={`Approve ${rowTitle(r)}`} aria-label={`Approve ${rowTitle(r)}`}
class="flex h-8 items-center gap-1 rounded-md bg-action-primary px-3 text-sm text-text-primary hover:opacity-90" class="flex h-8 items-center gap-1 rounded-md bg-action-primary px-3 text-sm text-action-fg hover:opacity-90"
> >
<Check size={14} strokeWidth={1.5} /> Approve <Check size={14} strokeWidth={1.5} /> Approve
</button> </button>
@@ -299,7 +299,7 @@
onclick={() => onDeleteFile(row)} onclick={() => onDeleteFile(row)}
aria-label={fileArmed ? `Confirm delete file ${row.track_title}` : `Delete file ${row.track_title}`} aria-label={fileArmed ? `Confirm delete file ${row.track_title}` : `Delete file ${row.track_title}`}
class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {fileArmed class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {fileArmed
? 'bg-action-secondary text-text-primary' ? 'bg-action-secondary text-action-fg'
: 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}" : 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}"
> >
<Trash2 size={14} strokeWidth={1.5} /> {fileArmed ? 'Confirm?' : 'Delete file'} <Trash2 size={14} strokeWidth={1.5} /> {fileArmed ? 'Confirm?' : 'Delete file'}
@@ -309,7 +309,7 @@
onclick={() => onDeleteLidarr(row)} onclick={() => onDeleteLidarr(row)}
aria-label={lidarrArmed ? `Confirm delete via Lidarr ${row.track_title}` : `Delete via Lidarr ${row.track_title}`} aria-label={lidarrArmed ? `Confirm delete via Lidarr ${row.track_title}` : `Delete via Lidarr ${row.track_title}`}
class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {lidarrArmed class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {lidarrArmed
? 'bg-action-destructive text-text-primary' ? 'bg-action-destructive text-action-fg'
: 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}" : 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}"
> >
<Cloud size={14} strokeWidth={1.5} /> {lidarrArmed ? 'Confirm?' : 'Delete via Lidarr'} <Cloud size={14} strokeWidth={1.5} /> {lidarrArmed ? 'Confirm?' : 'Delete via Lidarr'}
@@ -273,7 +273,7 @@
type="button" type="button"
onclick={onSave} onclick={onSave}
disabled={isSaving} disabled={isSaving}
class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary disabled:opacity-50" class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
> >
<Save size={14} strokeWidth={2} /> <Save size={14} strokeWidth={2} />
Save changes Save changes
@@ -290,7 +290,7 @@
<button <button
type="button" type="button"
onclick={() => (modalOpen = true)} onclick={() => (modalOpen = true)}
class="ml-auto inline-flex items-center gap-2 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary" class="ml-auto inline-flex items-center gap-2 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
Disconnect Disconnect
@@ -357,7 +357,7 @@
<button <button
type="button" type="button"
onclick={cancelDisconnect} onclick={cancelDisconnect}
class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
> >
Cancel Cancel
</button> </button>
@@ -365,7 +365,7 @@
type="button" type="button"
onclick={onConfirmDisconnect} onclick={onConfirmDisconnect}
disabled={!canDisconnect} disabled={!canDisconnect}
class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary disabled:opacity-50" class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
> >
Disconnect Disconnect
</button> </button>
+5 -5
View File
@@ -290,7 +290,7 @@
<button <button
type="button" type="button"
aria-label={`Delete file for ${r.track_title}`} aria-label={`Delete file for ${r.track_title}`}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
onclick={() => openDeleteFile(r)} onclick={() => openDeleteFile(r)}
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
@@ -301,7 +301,7 @@
<span <span
aria-label={`Delete via Lidarr disabled for ${r.track_title}`} aria-label={`Delete via Lidarr disabled for ${r.track_title}`}
title="Local-only track no Lidarr album to remove." title="Local-only track no Lidarr album to remove."
class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary opacity-50 cursor-not-allowed" class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg opacity-50 cursor-not-allowed"
data-testid="delete-lidarr-disabled" data-testid="delete-lidarr-disabled"
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
@@ -312,7 +312,7 @@
<button <button
type="button" type="button"
aria-label={`Delete via Lidarr for ${r.track_title}`} aria-label={`Delete via Lidarr for ${r.track_title}`}
class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
onclick={() => openDeleteLidarr(r)} onclick={() => openDeleteLidarr(r)}
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
@@ -361,7 +361,7 @@
<button <button
type="button" type="button"
aria-label="Confirm delete file" aria-label="Confirm delete file"
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
onclick={() => confirmDeleteFile(deleteFileRow!)} onclick={() => confirmDeleteFile(deleteFileRow!)}
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
@@ -423,7 +423,7 @@
type="button" type="button"
aria-label="Confirm delete via Lidarr" aria-label="Confirm delete via Lidarr"
disabled={deleteLidarrInput.trim() !== 'DELETE'} disabled={deleteLidarrInput.trim() !== 'DELETE'}
class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary disabled:cursor-not-allowed disabled:opacity-50" class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => confirmDeleteLidarr(deleteLidarrRow!)} onclick={() => confirmDeleteLidarr(deleteLidarrRow!)}
> >
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
+4 -4
View File
@@ -270,7 +270,7 @@
<button <button
type="button" type="button"
aria-label={`Approve ${rowAccessibleName(r)}`} aria-label={`Approve ${rowAccessibleName(r)}`}
class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
onclick={() => onApprove(r)} onclick={() => onApprove(r)}
> >
<Check size={14} strokeWidth={2} /> <Check size={14} strokeWidth={2} />
@@ -279,7 +279,7 @@
<button <button
type="button" type="button"
aria-label={`Reject ${rowAccessibleName(r)}`} aria-label={`Reject ${rowAccessibleName(r)}`}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
onclick={() => openReject(r)} onclick={() => openReject(r)}
> >
<X size={14} strokeWidth={2} /> <X size={14} strokeWidth={2} />
@@ -352,7 +352,7 @@
</button> </button>
<button <button
type="button" type="button"
class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
onclick={() => confirmOverride(overrideRow!)} onclick={() => confirmOverride(overrideRow!)}
> >
<Check size={14} strokeWidth={2} /> <Check size={14} strokeWidth={2} />
@@ -404,7 +404,7 @@
</button> </button>
<button <button
type="button" type="button"
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
onclick={() => confirmReject(rejectRow!)} onclick={() => confirmReject(rejectRow!)}
> >
<X size={14} strokeWidth={2} /> <X size={14} strokeWidth={2} />
+2 -2
View File
@@ -218,14 +218,14 @@
<div class="mt-5 flex justify-end gap-2"> <div class="mt-5 flex justify-end gap-2">
<button <button
type="button" type="button"
class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
onclick={cancelModal} onclick={cancelModal}
> >
Cancel Cancel
</button> </button>
<button <button
type="button" type="button"
class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary" class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
onclick={confirmModal} onclick={confirmModal}
> >
Add the album Add the album
+2 -2
View File
@@ -43,7 +43,7 @@
<button <button
type="button" type="button"
onclick={() => (creating = true)} onclick={() => (creating = true)}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
> >
<Plus size={14} strokeWidth={1} /> <Plus size={14} strokeWidth={1} />
New playlist New playlist
@@ -78,7 +78,7 @@
type="button" type="button"
onclick={submitCreate} onclick={submitCreate}
disabled={creatingBusy || !newName.trim()} disabled={creatingBusy || !newName.trim()}
class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary disabled:opacity-50" class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
> >
Create Create
</button> </button>
+1 -1
View File
@@ -213,7 +213,7 @@
<button <button
type="button" type="button"
onclick={submitEdit} onclick={submitEdit}
class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary" class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
> >
Save Save
</button> </button>