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

62
frontend/src/components/ImageCropperDialog.vue
View File

@@ -148,13 +148,13 @@
<div class="cropper-eyebrow">Image editor</div>
<h2>{{ title }}</h2>
</div>
<button
<v-btn variant="text" :ripple="false"
class="plain-button"
:disabled="isSaving"
@click="closeDialog"
>
Close
</button>
</v-btn>
</div>
<div class="cropper-actions">
@@ -178,42 +178,42 @@
variant="outlined"
hide-details
/>
<button
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="isSaving"
@click="loadImageFromUrl"
>
{{ loadLabel }}
</button>
</v-btn>
</div>
<button
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="!isReady || isSaving"
@click="zoom(1.15)"
>
Zoom in
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="!isReady || isSaving"
@click="zoom(0.85)"
>
Zoom out
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="!isReady || isSaving"
@click="rotate(-90)"
>
Rotate left
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="!isReady || isSaving"
@click="rotate(90)"
>
Rotate right
</button>
</v-btn>
</div>
<div
@@ -242,14 +242,14 @@
</div>
<div class="footer-actions">
<button
<v-btn variant="text" :ripple="false"
class="action-button secondary"
:disabled="isSaving"
@click="closeDialog"
>
Cancel
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="action-button"
:disabled="!isReady || isSaving"
@click="saveCrop"
@@ -261,7 +261,7 @@
:width="2"
/>
<span>{{ isSaving ? 'Saving...' : confirmLabel }}</span>
</button>
</v-btn>
</div>
</div>
</v-dialog>
@@ -271,8 +271,8 @@
@reference "@/assets/main.css";
.cropper-card {
@apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
background: rgba(255, 255, 255, 0.98);
border-color: rgba(23, 32, 51, 0.08);
background: var(--app-surface-raised);
border-color: var(--app-border-subtle);
}
.cropper-header {
@@ -281,12 +281,12 @@
.cropper-eyebrow {
@apply text-xs font-bold uppercase tracking-[0.24em];
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.cropper-header h2 {
@apply mt-2 text-2xl font-black;
color: #172033;
color: var(--app-color-on-surface);
}
.cropper-actions,
@@ -300,9 +300,9 @@
.url-input {
@apply min-w-0 flex-1 rounded-full border px-4 py-3 text-sm;
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);
}
.footer-actions {
@@ -315,22 +315,22 @@
}
.action-button {
background: #172033;
color: #fffaf2;
background: var(--app-color-on-surface);
color: var(--app-color-on-primary);
}
.action-button.secondary,
.plain-button {
background: rgba(255, 255, 255, 0.84);
color: #172033;
border: 1px solid rgba(23, 32, 51, 0.12);
color: var(--app-color-on-surface);
border: 1px solid var(--app-border-subtle);
}
.cropper-stage {
@apply overflow-hidden rounded-[1.5rem] border;
height: 28rem;
border-color: rgba(23, 32, 51, 0.08);
background: #fffaf2;
border-color: var(--app-border-subtle);
background: var(--app-color-on-primary);
}
.empty-state,
@@ -339,14 +339,14 @@
}
.empty-state {
border-color: rgba(23, 32, 51, 0.08);
color: #526178;
border-color: var(--app-border-subtle);
color: var(--app-text-muted);
background: rgba(255, 250, 242, 0.9);
}
.error-message {
border-color: rgba(185, 28, 28, 0.12);
color: #b91c1c;
color: var(--app-danger-muted);
background: rgba(254, 226, 226, 0.75);
}