Refactor CategoryManagerModal buttons for improved styling and accessibility

This commit is contained in:
k1nq
2026-09-24 12:24:53 +05:00
parent 023612ce0a
commit a9403febee
3 changed files with 14 additions and 11 deletions
@@ -247,7 +247,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
<> <>
{!isSystem ? ( {!isSystem ? (
<Button <Button
variant="subtle" variant="ghost"
className="manager-action"
disabled={update.isPending} disabled={update.isPending}
onClick={() => setRenameTarget(definition)} onClick={() => setRenameTarget(definition)}
> >
@@ -256,7 +257,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
) : null} ) : null}
{definition.kind === 'monthly' ? ( {definition.kind === 'monthly' ? (
<Button <Button
variant="subtle" variant="ghost"
className="manager-action"
disabled={update.isPending} disabled={update.isPending}
onClick={() => setMccTarget(definition)} onClick={() => setMccTarget(definition)}
> >
@@ -265,7 +267,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
) : null} ) : null}
{!isSystem ? ( {!isSystem ? (
<Button <Button
variant="subtle" variant="ghost"
className="manager-action"
disabled={update.isPending} disabled={update.isPending}
onClick={() => setArchiveTarget(definition)} onClick={() => setArchiveTarget(definition)}
> >
@@ -275,7 +278,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
</> </>
) : ( ) : (
<Button <Button
variant="subtle" variant="ghost"
className="manager-action"
disabled={update.isPending} disabled={update.isPending}
onClick={() => onClick={() =>
update.mutate({ id: definition.id, payload: { archived: false } }) update.mutate({ id: definition.id, payload: { archived: false } })
+3 -4
View File
@@ -683,8 +683,9 @@ input[type='file']::file-selector-button { min-height: 30px; margin-right: 10px;
.manager-row-main { display: grid; gap: 3px; min-width: 0; } .manager-row-main { display: grid; gap: 3px; min-width: 0; }
.manager-row-name { overflow-wrap: anywhere; font-weight: 500; } .manager-row-name { overflow-wrap: anywhere; font-weight: 500; }
.manager-row-meta { color: #aaa9a5; font-family: var(--font-data); font-size: 10px; overflow-wrap: anywhere; } .manager-row-meta { color: #aaa9a5; font-family: var(--font-data); font-size: 10px; overflow-wrap: anywhere; }
.manager-row-actions { width: 100%; } .manager-row-actions { width: 100%; flex-wrap: nowrap; gap: clamp(8px, 2vw, 16px); }
.manager-row-actions .btn { min-height: 32px; padding: 6px 9px; font-size: 11px; line-height: 1.25; white-space: normal; } .manager-row-actions .manager-action { flex: 0 0 auto; min-height: 32px; padding: 5px 0; color: #a9c4ff; background: transparent; border: 0; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
.manager-row-actions .manager-action:hover:not(:disabled) { color: var(--white); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.steps { .steps {
display: grid; display: grid;
@@ -899,8 +900,6 @@ input[type='file']::file-selector-button { min-height: 30px; margin-right: 10px;
.decision-panel .blocker-link { color: var(--blue); } .decision-panel .blocker-link { color: var(--blue); }
.manager-form-fields { grid-template-columns: 1fr; } .manager-form-fields { grid-template-columns: 1fr; }
.budget-workspace { grid-template-columns: minmax(0, 1fr); } .budget-workspace { grid-template-columns: minmax(0, 1fr); }
.manager-row-actions { width: 100%; }
.manager-row-actions .btn { flex: 1; }
.pulse-grid { display: block; border: 0; } .pulse-grid { display: block; border: 0; }
.pulse-item { padding: 13px 0; border-width: 0 0 1px; background: transparent; } .pulse-item { padding: 13px 0; border-width: 0 0 1px; background: transparent; }
.mobile-primary-action { position: fixed; right: 12px; bottom: 72px; z-index: 45; display: block; } .mobile-primary-action { position: fixed; right: 12px; bottom: 72px; z-index: 45; display: block; }
+3 -3
View File
@@ -990,9 +990,9 @@
"semantic_hash": "" "semantic_hash": ""
}, },
"frontend/src/components/budget/CategoryManagerModal.tsx": { "frontend/src/components/budget/CategoryManagerModal.tsx": {
"mtime": 1790164788.520766, "mtime": 1790221713.0466647,
"seen": 1790165332.6990325, "seen": 1790221831.1906216,
"ast_hash": "25e3f09e8aa689ddec8b4324b23bea99", "ast_hash": "e7f760a1ed5a384124b2c87081d918ef",
"semantic_hash": "" "semantic_hash": ""
}, },
"frontend/src/lib/accountLabel.ts": { "frontend/src/lib/accountLabel.ts": {