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

50
frontend/src/features/channels/views/ChannelsView.vue
View File

@@ -134,7 +134,7 @@
</div>
<div class="network-tabs">
<button
<v-btn variant="text" :ripple="false"
v-for="network in networkOptions"
:key="network.value"
type="button"
@@ -144,7 +144,7 @@
>
<v-icon :icon="network.icon" />
<span>{{ network.value }}</span>
</button>
</v-btn>
</div>
<div
@@ -173,21 +173,21 @@
</div>
<div class="panel-actions">
<button
<v-btn variant="text" :ripple="false"
class="secondary"
type="button"
@click="isCreateFormVisible = false"
>
{{ t('common.cancel') }}
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="primary"
type="button"
:disabled="channelsStore.isCreating"
@click="submitForm"
>
{{ channelsStore.isCreating ? t('common.saving') : t('channels.createTitle') }}
</button>
</v-btn>
</div>
</div>
@@ -241,7 +241,7 @@
</article>
</div>
<button
<v-btn variant="text" :ripple="false"
v-else
type="button"
class="empty-state"
@@ -249,7 +249,7 @@
>
<v-icon :icon="mdiPlus" />
<span>{{ t('channels.emptyAction', { network: activeNetwork }) }}</span>
</button>
</v-btn>
</section>
</template>
@@ -261,7 +261,7 @@
.header h1 {
@apply text-4xl font-black;
color: #172033;
color: var(--app-color-on-surface);
}
.header p,
@@ -273,7 +273,7 @@
.page-message,
.empty-state span {
@apply text-sm leading-6 not-italic;
color: #526178;
color: var(--app-text-muted);
}
.network-tabs {
@@ -282,16 +282,16 @@
.network-tab {
@apply inline-flex items-center gap-2 rounded-full border px-4 py-3 transition;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.95);
color: #526178;
color: var(--app-text-muted);
}
.network-tab.active,
.network-tab:hover {
border-color: rgba(255, 138, 61, 0.28);
background: rgba(255, 138, 61, 0.1);
color: #172033;
color: var(--app-color-on-surface);
}
.channel-grid {
@@ -303,7 +303,7 @@
.empty-state {
@apply flex flex-col gap-5 rounded-[1.5rem] border p-5;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
}
.empty-state {
@@ -317,13 +317,13 @@
}
.primary {
background: #172033;
color: #fffaf2;
background: var(--app-color-on-surface);
color: var(--app-color-on-primary);
}
.secondary {
background: rgba(23, 32, 51, 0.06);
color: #172033;
background: var(--app-control-hover);
color: var(--app-color-on-surface);
}
.panel-header {
@@ -334,12 +334,12 @@
.field,
.channel-header strong,
.channel-metrics strong {
color: #172033;
color: var(--app-color-on-surface);
}
.panel-header span {
@apply text-sm font-semibold;
color: #526178;
color: var(--app-text-muted);
}
.form-grid {
@@ -352,7 +352,7 @@
.field input {
@apply rounded-2xl border px-4 py-3 text-sm;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
background: rgba(255, 255, 255, 0.95);
}
@@ -371,8 +371,8 @@
.channel-metrics {
@apply grid grid-cols-3 gap-3 rounded-[1rem] border p-4;
background: #fffaf2;
border-color: rgba(23, 32, 51, 0.08);
background: var(--app-color-on-primary);
border-color: var(--app-border-subtle);
}
.channel-metrics div {
@@ -386,10 +386,10 @@
.page-message {
@apply rounded-[1.25rem] border p-4 font-medium;
background: rgba(255, 255, 255, 0.84);
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
}
.page-message.error {
color: #b91c1c;
color: var(--app-danger-muted);
}
</style>