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

56
frontend/src/features/workspaces/views/DashboardView.vue
View File

@@ -274,51 +274,51 @@
>
<div class="calendar-toolbar">
<div class="calendar-nav">
<button
<v-btn variant="text" :ripple="false"
class="icon-button"
type="button"
@click="shiftPeriod(-1)"
>
<v-icon :icon="mdiChevronLeft" />
</button>
</v-btn>
<div class="calendar-period">{{ periodLabel }}</div>
<button
<v-btn variant="text" :ripple="false"
class="icon-button"
type="button"
@click="shiftPeriod(1)"
>
<v-icon :icon="mdiChevronRight" />
</button>
</v-btn>
</div>
<div class="calendar-controls">
<button
<v-btn variant="text" :ripple="false"
class="text-button"
type="button"
@click="jumpToToday"
>
{{ t('today') }}
</button>
</v-btn>
<div class="view-toggle">
<button
<v-btn variant="text" :ripple="false"
class="toggle-button"
:class="{ 'toggle-button-active': viewMode === 'month' }"
type="button"
@click="setView('month')"
>
{{ t('dashboard.month') }}
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="toggle-button"
:class="{ 'toggle-button-active': viewMode === 'week' }"
type="button"
@click="setView('week')"
>
{{ t('dashboard.week') }}
</button>
</v-btn>
</div>
</div>
</div>
@@ -396,19 +396,19 @@
.page-message {
@apply rounded-[1.25rem] border p-4 text-sm font-medium;
background: rgba(255, 255, 255, 0.88);
border-color: rgba(23, 32, 51, 0.08);
color: #526178;
border-color: var(--app-border-subtle);
color: var(--app-text-muted);
}
.page-message.error {
color: #b91c1c;
color: var(--app-danger-muted);
}
.calendar-card {
@apply rounded-[1.75rem] border p-4 md:p-5;
background: rgba(255, 255, 255, 0.94);
border-color: rgba(23, 32, 51, 0.08);
box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
background: var(--app-surface-glass);
border-color: var(--app-border-subtle);
box-shadow: 0 18px 40px var(--app-control-hover);
}
.calendar-toolbar {
@@ -426,7 +426,7 @@
.calendar-period {
@apply min-w-0 px-2 text-base font-bold md:text-lg;
color: #172033;
color: var(--app-color-on-surface);
}
.icon-button,
@@ -434,8 +434,8 @@
.toggle-button {
@apply inline-flex items-center justify-center rounded-full border px-3 py-2 text-sm font-semibold transition;
background: #f8fafc;
border-color: rgba(23, 32, 51, 0.1);
color: #172033;
border-color: var(--app-control-active);
color: var(--app-color-on-surface);
}
.icon-button {
@@ -451,7 +451,7 @@
.view-toggle {
@apply inline-flex rounded-full border p-1;
background: #f8fafc;
border-color: rgba(23, 32, 51, 0.1);
border-color: var(--app-control-active);
}
.toggle-button {
@@ -459,7 +459,7 @@
}
.toggle-button-active {
background: #172033;
background: var(--app-color-on-surface);
color: #ffffff;
}
@@ -474,13 +474,13 @@
.weekday-label {
@apply px-2 text-xs font-bold uppercase tracking-[0.16em];
color: #526178;
color: var(--app-text-muted);
}
.calendar-day {
@apply min-h-[8.5rem] rounded-[1.25rem] border p-3;
background: linear-gradient(180deg, rgba(255, 253, 248, 0.8) 0%, rgba(255, 255, 255, 0.96) 100%);
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
}
.calendar-day-week {
@@ -498,7 +498,7 @@
.day-number {
@apply mb-3 text-sm font-bold;
color: #172033;
color: var(--app-color-on-surface);
}
.day-entries {
@@ -515,23 +515,23 @@
.calendar-entry strong {
@apply text-sm font-bold;
color: #172033;
color: var(--app-color-on-surface);
}
.calendar-entry span {
@apply text-xs leading-5;
color: #526178;
color: var(--app-text-muted);
}
.entry-time {
@apply text-[0.7rem] font-bold uppercase tracking-[0.12em];
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.entry-more,
.day-empty {
@apply px-1 text-xs font-semibold;
color: #526178;
color: var(--app-text-muted);
}
.calendar-entry.production {