jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-08 13:45:42 -04:00
parent e81c9f42c9
commit 1ca6ab7117
54 changed files with 1461 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/features/feedback/views/DeveloperFeedbackListView.vue
View File

@@ -70,14 +70,14 @@
<p>{{ t('feedback.review.description') }}</p>
</div>
<button
<v-btn variant="text" :ripple="false"
class="icon-button"
type="button"
:title="t('feedback.review.refresh')"
@click="feedbackStore.loadReports"
>
<v-icon :icon="mdiRefresh" />
</button>
</v-btn>
</header>
<section class="metric-grid">
@@ -186,14 +186,14 @@
hide-details
/>
<button
<v-btn variant="text" :ripple="false"
class="filter-reset"
type="button"
:title="t('feedback.review.filters.clear')"
@click="feedbackStore.resetFilters"
>
<v-icon :icon="mdiFilterOffOutline" />
</button>
</v-btn>
</section>
<div
@@ -214,7 +214,7 @@
v-else
class="report-table"
>
<button
<v-btn variant="text" :ripple="false"
v-for="report in feedbackStore.filteredReports"
:key="report.id"
class="report-row"
@@ -263,7 +263,7 @@
/>
</small>
</span>
</button>
</v-btn>
<div
v-if="!feedbackStore.filteredReports.length"
@@ -287,30 +287,30 @@
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.22em];
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.review-header h1 {
@apply mt-2 text-3xl font-black md:text-4xl;
color: #172033;
color: var(--app-color-on-surface);
}
.review-header p {
@apply mt-2 max-w-3xl text-sm leading-6;
color: #526178;
color: var(--app-text-muted);
}
.icon-button,
.filter-reset {
@apply inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg border transition-colors;
border-color: rgba(23, 32, 51, 0.12);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.92);
color: #172033;
color: var(--app-color-on-surface);
}
.icon-button:hover,
.filter-reset:hover {
background: #172033;
background: var(--app-color-on-surface);
color: white;
}
@@ -320,7 +320,7 @@
.metric {
@apply rounded-lg border p-4;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.86);
}
@@ -331,12 +331,12 @@
.metric strong {
@apply mt-2 block text-3xl font-black;
color: #172033;
color: var(--app-color-on-surface);
}
.filter-panel {
@apply grid gap-3 rounded-lg border p-4 lg:grid-cols-[minmax(15rem,1.5fr)_repeat(4,minmax(9rem,1fr))_repeat(2,minmax(8rem,0.8fr))_minmax(10rem,1fr)_auto];
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.9);
}
@@ -345,7 +345,7 @@
@apply flex h-10 items-center gap-2 rounded-lg border px-3 text-sm;
border-color: rgba(23, 32, 51, 0.16);
background: white;
color: #172033;
color: var(--app-color-on-surface);
}
.filter-search input {
@@ -362,7 +362,7 @@
.report-row {
@apply grid gap-4 rounded-lg border p-4 text-left transition-colors lg:grid-cols-[minmax(0,1.55fr)_minmax(12rem,0.8fr)_minmax(12rem,0.8fr)_minmax(12rem,0.7fr)] lg:items-center;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.86);
}
@@ -383,13 +383,13 @@
.report-title strong {
@apply text-sm font-black;
color: #172033;
color: var(--app-color-on-surface);
}
.report-title em {
@apply rounded-md px-2 py-1 text-xs font-bold not-italic;
background: rgba(15, 118, 110, 0.08);
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.status-dot {
@@ -402,7 +402,7 @@
}
.status-planned {
background: #0f766e;
background: var(--app-color-on-tertiary);
}
.status-resolved {
@@ -416,7 +416,7 @@
.report-description {
@apply line-clamp-2 text-sm leading-6;
color: #526178;
color: var(--app-text-muted);
}
.report-tags {
@@ -425,7 +425,7 @@
.report-tags span {
@apply inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-semibold;
background: rgba(23, 32, 51, 0.06);
background: var(--app-control-hover);
color: #44516a;
}
@@ -433,7 +433,7 @@
.report-context,
.report-activity strong {
@apply text-sm font-semibold;
color: #172033;
color: var(--app-color-on-surface);
}
.report-secondary small,
@@ -449,13 +449,13 @@
.page-message {
@apply rounded-lg border p-4 text-sm font-semibold;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.86);
color: #526178;
color: var(--app-text-muted);
}
.page-message-error {
border-color: rgba(220, 38, 38, 0.24);
color: #b91c1c;
color: var(--app-danger-muted);
}
</style>