feat: centralize frontend Vuetify styling
All checks were successful
deploy-socialize / image (push) Successful in 50s
deploy-socialize / deploy (push) Successful in 19s

This commit is contained in:
2026-05-08 13:45:42 -04:00
parent e81c9f42c9
commit 1ca6ab7117
54 changed files with 1461 additions and 1304 deletions

View File

@@ -148,7 +148,7 @@
<span>{{ labels.description }}</span>
</div>
<button
<v-btn variant="text" :ripple="false"
type="button"
class="secondary-button"
:disabled="disabled"
@@ -156,7 +156,7 @@
>
<v-icon :icon="mdiPlus" />
<span>{{ labels.addStep }}</span>
</button>
</v-btn>
</div>
<div
@@ -182,30 +182,30 @@
</div>
<div class="approval-step-actions">
<button
<v-btn variant="text" :ripple="false"
type="button"
:aria-label="labels.moveUp"
:disabled="disabled || index === 0"
@click="moveStep(index, -1)"
>
<v-icon :icon="mdiArrowUp" />
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
type="button"
:aria-label="labels.moveDown"
:disabled="disabled || index === modelValue.length - 1"
@click="moveStep(index, 1)"
>
<v-icon :icon="mdiArrowDown" />
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
type="button"
:aria-label="labels.removeStep"
:disabled="disabled"
@click="removeStep(index)"
>
<v-icon :icon="mdiDeleteOutline" />
</button>
</v-btn>
</div>
</div>
@@ -321,8 +321,8 @@
.approval-editor-header {
@apply flex flex-col gap-3 rounded-[1rem] border px-4 py-4 sm:flex-row sm:items-center sm:justify-between;
background: #fffaf2;
border-color: rgba(23, 32, 51, 0.08);
background: var(--app-color-on-primary);
border-color: var(--app-border-subtle);
}
.approval-editor-header div,
@@ -332,14 +332,14 @@
.approval-editor-header strong,
.approval-step-heading strong {
color: #172033;
color: var(--app-color-on-surface);
}
.approval-editor-header span,
.approval-empty,
.approval-step-heading small {
@apply text-sm leading-6;
color: #526178;
color: var(--app-text-muted);
}
.approval-step-list {
@@ -349,8 +349,8 @@
.approval-empty,
.approval-step-card {
@apply rounded-[1rem] border px-4 py-4;
background: #fffaf2;
border-color: rgba(23, 32, 51, 0.08);
background: var(--app-color-on-primary);
border-color: var(--app-border-subtle);
}
.approval-step-card {
@@ -367,8 +367,8 @@
.approval-step-actions button {
@apply inline-flex h-9 w-9 items-center justify-center rounded-full;
background: rgba(23, 32, 51, 0.08);
color: #172033;
background: var(--app-border-subtle);
color: var(--app-color-on-surface);
}
.approval-step-actions button:disabled {
@@ -382,8 +382,8 @@
.secondary-button {
@apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-semibold;
background: rgba(23, 32, 51, 0.08);
color: #172033;
background: var(--app-border-subtle);
color: var(--app-color-on-surface);
}
.secondary-button:disabled {
@@ -397,25 +397,25 @@
.field span {
@apply text-sm font-semibold;
color: #172033;
color: var(--app-color-on-surface);
}
.field input,
.field select {
@apply rounded-[1rem] border px-4 py-3 text-sm;
background: #fffdf8;
border-color: rgba(23, 32, 51, 0.1);
color: #172033;
background: var(--app-color-surface);
border-color: var(--app-control-active);
color: var(--app-color-on-surface);
outline: none;
}
.field-error {
@apply text-sm leading-6;
color: #b91c1c;
color: var(--app-danger-muted);
}
.field-help {
@apply text-sm leading-6;
color: #526178;
color: var(--app-text-muted);
}
</style>