Refactor CategoryManagerModal buttons for improved styling and accessibility
This commit is contained in:
@@ -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 } })
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
@@ -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": {
|
||||||
|
|||||||
Reference in New Issue
Block a user