fix: rebuild sponsor dashboard with shared styles (#54) #55

Merged

forgejo_admin merged 1 commit from 54-rebuild-sponsor-dashboard into main

2026-04-07 17:06:35 +00:00

forgejo_admin commented

2026-04-07 00:56:52 +00:00

Contributor

Summary

Rebuilds all three sponsor dashboard pages (pipeline board, detail view, list view) to use shared/style.css instead of a custom sponsor-dashboard/styles.css. Adds sponsor-specific utilities to the shared design system: orange color vars, pipeline column layout, status badges, detail page components, and sponsor table styles.

Changes

sponsor-dashboard/styles.css — Deleted entirely. No custom stylesheet.
shared/style.css — Added --color-orange vars, sponsor status badges (.badge-contacted, .badge-negotiating, etc.), pipeline board layout (.pipeline, .pipeline-col, .pipeline-card), detail page components (.detail-back, .detail-header, .detail-section), and sponsor table styles (.sponsor-table, .sponsor-table-wrap).
sponsor-dashboard/index.html — Rebuilt pipeline board using shared nav, .page-header, .stats-row, .container, .bottom-nav, and new .pipeline-* classes. All 47 sponsors preserved across 6 columns.
sponsor-dashboard/sponsor-card.html — Rebuilt detail view using shared nav, .form-* classes, .badge-* status badges, and new .detail-* layout classes.
sponsor-dashboard/sponsor-list.html — Rebuilt table view using shared nav, .search, .form-select, .bottom-nav, and new .sponsor-table classes. Sort/filter JS preserved.

Test Plan

Open each page in a browser and verify dark theme (#0a0a0a background, light text)
Verify nav matches admin.html pattern (logo, "Westside", user "Marcus", role "admin")
Verify bottom nav present on all 3 pages with Sponsors tab active
Verify pipeline board scrolls horizontally on mobile with colored column headers
Verify sponsor-card.html shows form fields with shared .form-input/.form-select styling
Verify sponsor-list.html table sorts, filters, and searches correctly
Verify grep -r "styles.css" sponsor-dashboard/ returns no results

Review Checklist

All 3 sponsor pages link to ../shared/style.css — no custom stylesheet
sponsor-dashboard/styles.css deleted
Nav, page-header, container, bottom-nav structure matches admin.html
Status colors use existing vars (green=committed, yellow=responded, danger=declined, blue=contacted)
Added --color-orange to shared/style.css for negotiating status
All mock data preserved (47 sponsors across 6 pipeline stages)
Sort/filter/search JS preserved in list view

None.

Closes #54

## Summary Rebuilds all three sponsor dashboard pages (pipeline board, detail view, list view) to use `shared/style.css` instead of a custom `sponsor-dashboard/styles.css`. Adds sponsor-specific utilities to the shared design system: orange color vars, pipeline column layout, status badges, detail page components, and sponsor table styles. ## Changes - **`sponsor-dashboard/styles.css`** — Deleted entirely. No custom stylesheet. - **`shared/style.css`** — Added `--color-orange` vars, sponsor status badges (`.badge-contacted`, `.badge-negotiating`, etc.), pipeline board layout (`.pipeline`, `.pipeline-col`, `.pipeline-card`), detail page components (`.detail-back`, `.detail-header`, `.detail-section`), and sponsor table styles (`.sponsor-table`, `.sponsor-table-wrap`). - **`sponsor-dashboard/index.html`** — Rebuilt pipeline board using shared nav, `.page-header`, `.stats-row`, `.container`, `.bottom-nav`, and new `.pipeline-*` classes. All 47 sponsors preserved across 6 columns. - **`sponsor-dashboard/sponsor-card.html`** — Rebuilt detail view using shared nav, `.form-*` classes, `.badge-*` status badges, and new `.detail-*` layout classes. - **`sponsor-dashboard/sponsor-list.html`** — Rebuilt table view using shared nav, `.search`, `.form-select`, `.bottom-nav`, and new `.sponsor-table` classes. Sort/filter JS preserved. ## Test Plan - Open each page in a browser and verify dark theme (#0a0a0a background, light text) - Verify nav matches admin.html pattern (logo, "Westside", user "Marcus", role "admin") - Verify bottom nav present on all 3 pages with Sponsors tab active - Verify pipeline board scrolls horizontally on mobile with colored column headers - Verify sponsor-card.html shows form fields with shared `.form-input`/`.form-select` styling - Verify sponsor-list.html table sorts, filters, and searches correctly - Verify `grep -r "styles.css" sponsor-dashboard/` returns no results ## Review Checklist - [x] All 3 sponsor pages link to `../shared/style.css` — no custom stylesheet - [x] `sponsor-dashboard/styles.css` deleted - [x] Nav, page-header, container, bottom-nav structure matches admin.html - [x] Status colors use existing vars (green=committed, yellow=responded, danger=declined, blue=contacted) - [x] Added `--color-orange` to shared/style.css for negotiating status - [x] All mock data preserved (47 sponsors across 6 pipeline stages) - [x] Sort/filter/search JS preserved in list view ## Related Notes None. ## Related Closes #54

forgejo_admin added 1 commit

2026-04-07 00:56:52 +00:00

fix: rebuild sponsor dashboard with shared styles (#54 ) 1fcad7bd6d

Delete sponsor-dashboard/styles.css and rebuild all three sponsor pages
(pipeline board, detail view, list view) using shared/style.css. Adds
orange color vars and sponsor-specific utilities (pipeline columns,
status badges, detail layout, sponsor table) to the design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-04-07 16:47:35 +00:00

Author

Contributor

PR #55 Review

DOMAIN REVIEW

Tech stack: HTML/CSS/JS playground prototype (static pages, shared design system).

CSS consolidation -- GOOD: sponsor-dashboard/styles.css is deleted (confirmed +++ /dev/null). All three HTML pages (index.html, sponsor-card.html, sponsor-list.html) link to ../shared/style.css only. No other stylesheets referenced. The old file had its own :root tokens (--brand-red: #C41E3A) which diverged from the shared system (--color-red: #d42026) -- this consolidation is correct.

Dark theme -- GOOD: All pages use body class="page", which inherits the #0a0a0a background from shared/style.css. New CSS additions use var(--color-dark), var(--color-black), var(--color-gray-800) throughout. No light theme colors, no #fff backgrounds, no #333 text. Pipeline cards use var(--color-black) background with var(--color-gray-800) borders. Status badges use the dark-bg variants (--color-blue-bg, --color-orange-bg, etc.).

Nav pattern -- GOOD with one NIT: Top nav matches admin.html exactly (brand link, nav-user with Marcus/admin). Bottom nav structure matches (6 items, same icons, same order for the first 4). See nit below about the 5th item divergence.

Shared classes -- GOOD: Pages use existing design system classes: .page-header, .subtitle, .stats-row, .stat-card, .btn, .btn-primary, .btn-secondary, .btn-sm, .form-group, .form-label, .form-input, .form-select, .form-textarea, .form-row, .actions-row, .container, .badge, .bottom-nav, .search, .empty, .hidden.

New CSS additions -- GOOD: ~250 lines added to shared/style.css for pipeline-specific components (.pipeline, .pipeline-col, .pipeline-card, .pipeline-empty, .detail-*, .sponsor-table, .badge-* status variants). New orange color token (--color-orange: #f59e0b) with bg/border variants follows the existing pattern for green/yellow/blue/danger. All new rules use CSS custom properties from the design system -- no hardcoded colors.

Accessibility -- GOOD: Pipeline board has role="region" and aria-label. Filter selects have aria-label. Sort arrows provide visual feedback. Pipeline cards are <a> elements (keyboard navigable).

JavaScript (sponsor-list.html): Sorting, filtering, and search work with the mock data array. var declarations used (consistent with playground convention). renderTable() handles empty state. Sort direction toggles correctly. No security concerns in a static prototype.

BLOCKERS

None. This is a static HTML/CSS playground prototype -- no backend, no user input processing, no auth paths, no secrets.

NITS

Bottom nav divergence: The existing admin pages (admin.html, admin-players.html, admin-teams.html) all have "Billing" ($) as the 5th nav item. The sponsor dashboard pages replace this with "Sponsors" (★). In the real SvelteKit app, the bottom nav will be a shared layout component, so this divergence is cosmetic in the prototype. However, for design fidelity, consider either (a) adding Sponsors to all admin bottom navs, or (b) keeping Billing and adding Sponsors elsewhere. This signals a design decision needed before Svelte migration.
Inline styles: Three instances of style="margin-bottom: 1rem;" and style="margin-bottom: 1.5rem;" and style="margin-bottom: 0;" on the view toggle rows and filter groups. Minor -- these could use a utility class or be folded into the component CSS, but acceptable for a prototype.
Inline styles in JS-rendered HTML: The renderTable() function uses style="color:var(--color-gray-600)" for empty tier/email cells. Minor for a prototype, but a class="text-muted" or similar would be cleaner for Svelte migration.
sponsor-list.html missing @svelte-notes comment block: The other two HTML files have the annotation header, but sponsor-list.html does not. These annotations guide the playground-to-Svelte migration pipeline.

SOP COMPLIANCE

Branch named after issue: 54-rebuild-sponsor-dashboard follows {issue-number}-{kebab-case-purpose}
PR body has Summary, Changes, Test Plan, Related sections
Related references issue #54
No secrets committed -- no API keys, tokens, or credentials in the diff
No scope creep -- all changes directly support the sponsor dashboard rebuild
sponsor-list.html missing @svelte-notes annotation (see nit #4)

PROCESS OBSERVATIONS

Clean consolidation PR. The old standalone stylesheet was a divergence risk -- different color tokens, different component names. This PR eliminates that by moving everything into the shared design system. The bottom nav divergence (nit #1) is the only design decision that needs resolution before Svelte migration, but it does not block this prototype merge.

VERDICT: APPROVED

## PR #55 Review ### DOMAIN REVIEW **Tech stack**: HTML/CSS/JS playground prototype (static pages, shared design system). **CSS consolidation -- GOOD**: `sponsor-dashboard/styles.css` is deleted (confirmed `+++ /dev/null`). All three HTML pages (`index.html`, `sponsor-card.html`, `sponsor-list.html`) link to `../shared/style.css` only. No other stylesheets referenced. The old file had its own `:root` tokens (`--brand-red: #C41E3A`) which diverged from the shared system (`--color-red: #d42026`) -- this consolidation is correct. **Dark theme -- GOOD**: All pages use `body class="page"`, which inherits the `#0a0a0a` background from `shared/style.css`. New CSS additions use `var(--color-dark)`, `var(--color-black)`, `var(--color-gray-800)` throughout. No light theme colors, no `#fff` backgrounds, no `#333` text. Pipeline cards use `var(--color-black)` background with `var(--color-gray-800)` borders. Status badges use the dark-bg variants (`--color-blue-bg`, `--color-orange-bg`, etc.). **Nav pattern -- GOOD with one NIT**: Top nav matches admin.html exactly (brand link, nav-user with Marcus/admin). Bottom nav structure matches (6 items, same icons, same order for the first 4). See nit below about the 5th item divergence. **Shared classes -- GOOD**: Pages use existing design system classes: `.page-header`, `.subtitle`, `.stats-row`, `.stat-card`, `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-sm`, `.form-group`, `.form-label`, `.form-input`, `.form-select`, `.form-textarea`, `.form-row`, `.actions-row`, `.container`, `.badge`, `.bottom-nav`, `.search`, `.empty`, `.hidden`. **New CSS additions -- GOOD**: ~250 lines added to `shared/style.css` for pipeline-specific components (`.pipeline`, `.pipeline-col`, `.pipeline-card`, `.pipeline-empty`, `.detail-*`, `.sponsor-table`, `.badge-*` status variants). New orange color token (`--color-orange: #f59e0b`) with bg/border variants follows the existing pattern for green/yellow/blue/danger. All new rules use CSS custom properties from the design system -- no hardcoded colors. **Accessibility -- GOOD**: Pipeline board has `role="region"` and `aria-label`. Filter selects have `aria-label`. Sort arrows provide visual feedback. Pipeline cards are `<a>` elements (keyboard navigable). **JavaScript (sponsor-list.html)**: Sorting, filtering, and search work with the mock data array. `var` declarations used (consistent with playground convention). `renderTable()` handles empty state. Sort direction toggles correctly. No security concerns in a static prototype. ### BLOCKERS None. This is a static HTML/CSS playground prototype -- no backend, no user input processing, no auth paths, no secrets. ### NITS 1. **Bottom nav divergence**: The existing admin pages (admin.html, admin-players.html, admin-teams.html) all have "Billing" (`$`) as the 5th nav item. The sponsor dashboard pages replace this with "Sponsors" (`★`). In the real SvelteKit app, the bottom nav will be a shared layout component, so this divergence is cosmetic in the prototype. However, for design fidelity, consider either (a) adding Sponsors to all admin bottom navs, or (b) keeping Billing and adding Sponsors elsewhere. This signals a design decision needed before Svelte migration. 2. **Inline styles**: Three instances of `style="margin-bottom: 1rem;"` and `style="margin-bottom: 1.5rem;"` and `style="margin-bottom: 0;"` on the view toggle rows and filter groups. Minor -- these could use a utility class or be folded into the component CSS, but acceptable for a prototype. 3. **Inline styles in JS-rendered HTML**: The `renderTable()` function uses `style="color:var(--color-gray-600)"` for empty tier/email cells. Minor for a prototype, but a `class="text-muted"` or similar would be cleaner for Svelte migration. 4. **`sponsor-list.html` missing `@svelte-notes` comment block**: The other two HTML files have the annotation header, but `sponsor-list.html` does not. These annotations guide the playground-to-Svelte migration pipeline. ### SOP COMPLIANCE - [x] Branch named after issue: `54-rebuild-sponsor-dashboard` follows `{issue-number}-{kebab-case-purpose}` - [x] PR body has Summary, Changes, Test Plan, Related sections - [x] Related references issue #54 - [x] No secrets committed -- no API keys, tokens, or credentials in the diff - [x] No scope creep -- all changes directly support the sponsor dashboard rebuild - [ ] `sponsor-list.html` missing `@svelte-notes` annotation (see nit #4) ### PROCESS OBSERVATIONS Clean consolidation PR. The old standalone stylesheet was a divergence risk -- different color tokens, different component names. This PR eliminates that by moving everything into the shared design system. The bottom nav divergence (nit #1) is the only design decision that needs resolution before Svelte migration, but it does not block this prototype merge. ### VERDICT: APPROVED