-
diff --git a/frontend/src/lib/styles/components.css b/frontend/src/lib/styles/components.css
new file mode 100644
index 0000000..3ec55fe
--- /dev/null
+++ b/frontend/src/lib/styles/components.css
@@ -0,0 +1,120 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * EventSnap component layer — the shared, "define-once" building blocks.
+ *
+ * Colours/type/spacing tokens live in `tailwind-theme.css`; this file turns the
+ * *recurring UI patterns* (buttons, inputs, cards, badges, chips, sheets) into
+ * named classes so every page consumes the same look. Change a button here and
+ * it changes everywhere.
+ *
+ * These live in the `components` layer, which Tailwind emits BEFORE `utilities`
+ * — so a one-off inline utility (e.g. `rounded-lg`, `w-full`) on an element
+ * still overrides the component class. Reach for a component class first; drop
+ * to inline utilities only for genuinely one-off tweaks.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+ /* ── Buttons ──────────────────────────────────────────────────────────
+ * Base + intent modifier (+ optional size). e.g. `class="btn btn-primary"`,
+ * `class="btn btn-secondary btn-sm"`, `class="btn btn-primary btn-block"`. */
+ .btn {
+ @apply inline-flex select-none items-center justify-center gap-2 rounded-xl border border-transparent px-4 py-3 text-sm font-semibold transition;
+ @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
+ @apply active:scale-[0.99] disabled:cursor-not-allowed;
+ }
+ .btn-lg {
+ @apply px-5 py-3.5 text-base;
+ }
+ .btn-sm {
+ @apply rounded-lg px-3 py-2;
+ }
+ .btn-block {
+ @apply w-full;
+ }
+
+ /* Primary = muted champagne fill + gold border + gold text (an elegant,
+ * outlined "signal" rather than an aggressive solid gold block). */
+ .btn-primary {
+ @apply border-primary-400 bg-primary-100 text-primary-800 shadow-sm hover:border-primary-500 hover:bg-primary-200;
+ @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:shadow-none;
+ @apply dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200 dark:hover:border-primary-500 dark:hover:bg-primary-900/40;
+ }
+ .btn-secondary {
+ @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50;
+ @apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
+ }
+ .btn-ghost {
+ @apply text-gray-600 hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50;
+ @apply dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100;
+ }
+ .btn-danger {
+ @apply bg-red-600 text-white shadow-sm hover:bg-red-700 disabled:opacity-50;
+ @apply dark:bg-red-600 dark:hover:bg-red-500;
+ }
+
+ /* ── Form inputs ──────────────────────────────────────────────────────
+ * Covers text/number inputs and textareas. */
+ .input {
+ @apply w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-400 transition;
+ @apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25;
+ @apply dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500;
+ }
+
+ /* ── Surfaces ─────────────────────────────────────────────────────────
+ * `card` — the standard raised surface (page → card → surface-muted is the
+ * three-level elevation ramp).
+ * `surface-muted` — a nested/inset panel inside a card. */
+ .card {
+ @apply rounded-2xl border border-gray-200/70 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900;
+ }
+ .surface-muted {
+ @apply rounded-xl bg-gray-50 dark:bg-gray-800/60;
+ }
+
+ /* ── Badges (status / role pills) ─────────────────────────────────────
+ * `class="badge badge-gold"` etc. A leading dot is optional in markup. */
+ .badge {
+ @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold;
+ }
+ .badge-primary {
+ @apply bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200;
+ }
+ .badge-gold {
+ @apply bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200;
+ }
+ .badge-gray {
+ @apply bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300;
+ }
+ .badge-success {
+ @apply bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300;
+ }
+ .badge-danger {
+ @apply bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300;
+ }
+
+ /* ── Chips (filter / toggle) ──────────────────────────────────────────
+ * `class="chip chip-active"` / `class="chip chip-inactive"`. */
+ .chip {
+ @apply rounded-full border border-transparent px-4 py-2 text-sm font-medium transition;
+ }
+ .chip-inactive {
+ @apply bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700;
+ }
+ /* Active = gold outline + soft champagne fill (matches .btn-primary). */
+ .chip-active {
+ @apply border-primary-400 bg-primary-100 text-primary-800 dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200;
+ }
+
+ /* ── Bottom-sheet surface ─────────────────────────────────────────────
+ * The rounded top panel shared by upload / context / confirm sheets. */
+ .sheet {
+ @apply rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl;
+ }
+
+ /* ── Page scaffold + section heading ──────────────────────────────────*/
+ .page {
+ @apply min-h-screen bg-gray-50 dark:bg-gray-950;
+ }
+ .section-title {
+ @apply font-display text-lg font-semibold text-gray-900 dark:text-gray-100;
+ }
+}
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 8570d84..eceb89e 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -163,9 +163,7 @@
-
+
-
+
{:else}
+
+
-
-
-
+
- {#if oncontextmenu}
-
-
- {/if}
-
+
+
+ {#if oncontextmenu}
+
+
+ {/if}
- {initials(upload.uploader_name)}
-
-
-
+ - {upload.uploader_name} -
-{relTime}
+ > + {initials(upload.uploader_name)} +
+
+ {upload.uploader_name} +
+{relTime}
+
-
+
+