From fcd6f4cdf49b9c3bd2f00ce5f1e1e620858fbbc4 Mon Sep 17 00:00:00 2001 From: Jennie Robinson Faber Date: Fri, 3 Apr 2026 10:56:01 +0100 Subject: [PATCH] feat: reskin admin pages to zine design system Migrate the entire admin section from the dark guild-* Tailwind theme to the zine design system (dashed borders, CSS custom properties, Brygada 1918 + Commit Mono, cream/dark mode palette). - Replace admin top-nav layout with sidebar matching default layout - Reskin dashboard, members, events, series management pages - Reskin events/create and series/create form pages - Add dev-only test login endpoint (GET /api/dev/test-login) - Redirect duplicate admin/dashboard.vue to /admin - Update CLAUDE.md design system docs --- .gitignore | 1 + CLAUDE.md | 21 +- app/app.config.ts | 4 - app/assets/css/main.css | 2 + app/components/MemberStatusBanner.vue | 106 +- app/components/NaturalDateInput.vue | 2 +- app/components/ParchmentInset.vue | 2 +- app/components/TopStrip.vue | 21 +- app/layouts/admin.vue | 573 +++---- app/layouts/landing.vue | 198 +-- app/pages/admin/dashboard.vue | 358 +--- app/pages/admin/events/create.vue | 1078 ++++++------ app/pages/admin/events/index.vue | 965 ++++++----- app/pages/admin/index.vue | 617 ++++--- app/pages/admin/members.vue | 1279 ++++++++------- app/pages/admin/series-management.vue | 1981 +++++++++++------------ app/pages/admin/series/create.vue | 349 ++-- app/pages/member/account.vue | 44 +- app/pages/member/dashboard.vue | 9 + app/pages/member/my-updates.vue | 9 + nuxt.config.ts | 5 + server/api/admin/members/invite.post.js | 6 +- server/api/dev/test-login.get.js | 42 + 23 files changed, 3845 insertions(+), 3827 deletions(-) create mode 100644 server/api/dev/test-login.get.js diff --git a/.gitignore b/.gitignore index 6653be5..b0bd776 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ logs .fleet .idea /docs/ +*.md/ # Local env files .env diff --git a/CLAUDE.md b/CLAUDE.md index 7cadf29..ef32320 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -14,6 +14,8 @@ npm run build # Production build npm run preview # Preview production build ``` +**Dev helpers:** `GET /api/dev/test-login` — creates a test admin user and sets auth cookie (dev only, blocked in production). Navigate to this URL to access admin pages during development. + No test framework is currently configured. ## Architecture @@ -35,8 +37,8 @@ No test framework is currently configured. - `app/composables/` — State management via `useState()` (no Pinia/Vuex). Key composables: `useAuth`, `useHelcim`, `useMemberPayment`, `useMemberStatus` - `app/config/` — Circle definitions (`circles.js`) and contribution tiers (`contributions.js`) used across frontend and forms - `app/middleware/` — Route guards: `auth.js` (member pages), `admin.js` (admin pages), `coming-soon.global.js` (launch gate) -- `app/layouts/` — `default`, `admin`, `landing`, `coming-soon` -- `server/api/` — Nitro API routes organized by feature: `auth/`, `events/`, `members/`, `helcim/`, `series/`, `updates/`, `admin/`, `slack/` +- `app/layouts/` — `default` (sidebar, member/public), `admin` (sidebar, admin pages), `landing`, `coming-soon` +- `server/api/` — Nitro API routes organized by feature: `auth/`, `events/`, `members/`, `helcim/`, `series/`, `updates/`, `admin/`, `slack/`, `dev/` (dev-only helpers) - `server/models/` — Mongoose schemas: `Member`, `Event`, `Series`, `Update` - `server/utils/` — Service integrations: `mongoose.js`, `helcim.js`, `resend.js`, `slack.ts`, `tickets.js` @@ -48,14 +50,15 @@ Member statuses: `pending_payment`, `active`, `suspended`, `cancelled`. Events support ticketing with circle-specific pricing overrides and can be grouped into Series with bundled passes. -### Design System +### Design System (Zine Direction) -- **Colors:** `guild-*` (warm neutral), `candlelight-*` (amber/gold accent), `parchment-*` (cream surfaces), `ember-*` (rust accent), `earth-*` (brown/ochre) — defined in `app/assets/css/main.css` -- **Circle tokens:** `--color-circle-community`, `--color-circle-founder`, `--color-circle-practitioner` with `-light`, `-dark`, `-bg` variants -- **Typography:** Inter (body), Quietism (display/headers, self-hosted from `public/fonts/`), Ubuntu Mono (code) -- **Theme:** `primary: amber`, `neutral: stone` — configured in `app/app.config.ts` -- **Effects:** `.candlelight-glow`, `.warm-text`, `.ink-grain`, `.paper-texture`, `.woodcut-border`, `.guild-stamp`, `.halftone-texture`, `.dithered-bg`, `.dithered-warm` -- **Content:** `.prose-guild` class for wiki/long-form content with warm palette and Quietism headings +- **Palette:** CSS custom properties in `:root` / `.dark` blocks in `app/assets/css/main.css` — `--bg` (cream/#f4efe4), `--surface`, `--border`, `--candle` (gold accent), `--ember` (rust accent), `--text`, `--text-bright`, `--text-dim`, `--text-faint`, `--parch` (inverted blocks), `--c-community`, `--c-founder`, `--c-practitioner` +- **Typography:** Brygada 1918 (serif, display/headings) + Commit Mono (monospace, body/UI/everything structural) — loaded via Google Fonts in `nuxt.config.ts` +- **Theme:** `primary: amber`, `neutral: stone` — configured in `app/app.config.ts`. Tailwind `@theme` maps `--font-sans` and `--font-mono` to Commit Mono, `--font-display` to Brygada 1918 +- **Key classes:** `.btn` / `.btn-primary` / `.btn-danger` (buttons), `.field` (form groups), `.badge` (circle badges), `.section-label` (10px uppercase headers), `.dashed-box` (bordered containers), `.section-divider` +- **Visual language:** Dashed borders (1px dashed), cream backgrounds, no rounded corners, text-forward density, minimal decoration +- **Color mode:** `@nuxtjs/color-mode` with preference `system`, fallback `light`. Dark mode via `.dark` class on `` +- **Layouts:** `default` (sidebar + main, member/public pages), `admin` (sidebar + main, admin pages), `landing` (horizontal nav, unused) ### Environment diff --git a/app/app.config.ts b/app/app.config.ts index 33f8b68..fd380be 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -5,8 +5,4 @@ export default defineAppConfig({ neutral: "stone", }, }, - colorMode: { - preference: "light", - fallback: "light", - }, }); diff --git a/app/assets/css/main.css b/app/assets/css/main.css index c0235f1..06098dc 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -29,6 +29,7 @@ --text-faint: #8a7e6a; --parch: #2a2015; --parch-text: #ede4d0; + --parch-text-dim: #b8ae98; --c-community: #7a4838; --c-founder: #8a4420; --c-practitioner: #2a4650; @@ -52,6 +53,7 @@ --text-faint: #5a5040; --parch: #ede4d0; --parch-text: #2a2015; + --parch-text-dim: #5a5040; --c-community: #a06850; --c-founder: #c06030; --c-practitioner: #4a7080; diff --git a/app/components/MemberStatusBanner.vue b/app/components/MemberStatusBanner.vue index 8eb8021..493b93f 100644 --- a/app/components/MemberStatusBanner.vue +++ b/app/components/MemberStatusBanner.vue @@ -1,62 +1,64 @@ + + diff --git a/app/layouts/landing.vue b/app/layouts/landing.vue index d7bc75a..3eb802d 100644 --- a/app/layouts/landing.vue +++ b/app/layouts/landing.vue @@ -1,118 +1,43 @@ @@ -122,10 +47,101 @@ const { isAuthenticated } = useAuth() const { openLoginModal } = useLoginModal() const isMobileMenuOpen = ref(false) -const currentYear = new Date().getFullYear() const handleMobileSignIn = () => { isMobileMenuOpen.value = false openLoginModal() } + + diff --git a/app/pages/admin/dashboard.vue b/app/pages/admin/dashboard.vue index 174ae34..a59c29a 100644 --- a/app/pages/admin/dashboard.vue +++ b/app/pages/admin/dashboard.vue @@ -1,359 +1,13 @@ diff --git a/app/pages/admin/events/create.vue b/app/pages/admin/events/create.vue index 4af0d75..64258dc 100644 --- a/app/pages/admin/events/create.vue +++ b/app/pages/admin/events/create.vue @@ -1,153 +1,104 @@