fix: rebuild sponsor dashboard using shared styles and admin page patterns #54

New issue

Closed

opened 2026-04-07 00:49:06 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-04-07 00:49:06 +00:00

Contributor

Type

Feature

Lineage

Replaces westside-playground#52/#53 (sponsor dashboard prototype). That prototype used its own CSS and light theme — completely disconnected from the existing playground design system. This ticket rebuilds it correctly.

Repo

forgejo_admin/westside-playground

User Story

As an admin, I want the sponsor dashboard to feel like part of the same app as the player/team admin pages — same nav, same dark theme, same card styles — so it doesn't feel like a different product.

Context

The current sponsor-dashboard/ directory has its own styles.css with a light theme, different tokens, different nav, different layout. Every other playground page uses shared/style.css and follows the same structure: nav bar with logo + user role, page header, content in .container, bottom nav.

The rebuild must use shared/style.css exclusively — no custom stylesheet. Any sponsor-specific styles should be added to shared/style.css as new utility classes following existing patterns.

Reference files the agent MUST read before writing any code:

shared/style.css — the design system. All CSS vars, components, and patterns live here.
admin.html — the admin dashboard. This is the structural template for the sponsor pages.
admin-players.html — player management table. Reference for the sponsor list/table view.
admin-teams.html — team management. Reference for card-based admin layouts.

Key design system patterns to follow:

Dark theme: --color-black: #0a0a0a background, --color-gray-100 text
Nav: .nav with .nav-brand (logo + "Westside") and .nav-user (name + role)
Page header: .page-header with h1 + .subtitle
Stats: .stats-row with .stat-card (see admin.html)
Cards: .card with dark background (--color-dark or --color-gray-800)
Status colors: --color-green, --color-yellow, --color-danger, --color-blue already exist for status indicators
Buttons: .btn, .btn-primary, .btn-outline, .btn-secondary, .btn-sm
Bottom nav: .bottom-nav with icon tabs
Container: .container for page content
Typography: uppercase headings, --font-size-* vars, weight 800 for headings

File Targets

Files the agent should modify:

sponsor-dashboard/index.html — rebuild pipeline board using shared styles
sponsor-dashboard/sponsor-card.html — rebuild detail view using shared styles
sponsor-dashboard/sponsor-list.html — rebuild table view using shared styles
shared/style.css — add any new sponsor-specific utility classes (status badges, pipeline columns) following existing patterns

Files the agent should DELETE:

sponsor-dashboard/styles.css — remove entirely. All styles come from shared.

Acceptance Criteria

All three pages must:

Use <link rel="stylesheet" href="../shared/style.css"> — NO custom stylesheet
Have identical nav to admin.html: logo, "Westside", user name "Marcus", role "admin"
Have .page-header with title and subtitle
Have .bottom-nav matching admin pages
Use dark theme throughout — NO white/light backgrounds
Use existing .card, .stat-card, .btn-* classes where applicable

Pipeline Board (index.html):

Stats row at top using .stats-row + .stat-card: Total, Contacted, Responded, Committed
Pipeline columns below — each column is a dark card with status-colored header border
Sponsor items within columns are compact cards (business name + category badge)
6 columns: Prospect, Contacted, Responded, Negotiating, Committed, Declined
Horizontal scroll on mobile for the column layout
Same mock data: 23 contacted, 1 negotiating (NanoReleaf), 2 committed (Snoopy, Coach West), 21 declined

Sponsor Detail (sponsor-card.html):

Card-based layout using .card class
Form fields use dark input styling matching existing playground forms (if any) or dark background inputs
Status dropdown, tier dropdown, notes textarea
Quick action buttons using .btn-primary, .btn-outline, .btn-sm
NanoReleaf as the example sponsor

Sponsor List (sponsor-list.html):

Table with dark rows, matching admin-players.html table patterns if they exist
Filter/search controls in a dark card above the table
Same mock data as pipeline board

New shared styles (add to shared/style.css):

.status-badge — small pill with status color background (use existing --color-green, --color-yellow, etc.)
.category-badge — small pill with category color
.pipeline-board — flex container for horizontal scrolling columns
.pipeline-column — single column with status-colored top border
Keep additions minimal — reuse existing classes wherever possible

Test Expectations

Manual: open index.html — looks like it belongs in the admin section
Manual: compare nav and layout with admin.html side by side — visually consistent
Manual: phone viewport — horizontal scroll works, bottom nav visible
Manual: no references to styles.css remain in any HTML file

Constraints

NO custom stylesheet — shared/style.css only
NO Tailwind
NO light theme — dark background throughout
Follow existing patterns exactly — read admin.html and shared/style.css before writing anything
Mobile-first — Marcus uses his phone
Additions to shared/style.css should be minimal and follow existing naming conventions

Checklist

PR opened
sponsor-dashboard/styles.css deleted
All pages use shared/style.css
No unrelated changes

arch-domain-sponsorship — domain model
westside-sponsors — tier definitions, active sponsors
westside-playground#52 — original ticket (now superseded)

### Type Feature ### Lineage Replaces westside-playground#52/#53 (sponsor dashboard prototype). That prototype used its own CSS and light theme — completely disconnected from the existing playground design system. This ticket rebuilds it correctly. ### Repo `forgejo_admin/westside-playground` ### User Story As an admin, I want the sponsor dashboard to feel like part of the same app as the player/team admin pages — same nav, same dark theme, same card styles — so it doesn't feel like a different product. ### Context The current `sponsor-dashboard/` directory has its own `styles.css` with a light theme, different tokens, different nav, different layout. Every other playground page uses `shared/style.css` and follows the same structure: nav bar with logo + user role, page header, content in `.container`, bottom nav. The rebuild must use `shared/style.css` exclusively — no custom stylesheet. Any sponsor-specific styles should be added to `shared/style.css` as new utility classes following existing patterns. **Reference files the agent MUST read before writing any code:** - `shared/style.css` — the design system. All CSS vars, components, and patterns live here. - `admin.html` — the admin dashboard. This is the structural template for the sponsor pages. - `admin-players.html` — player management table. Reference for the sponsor list/table view. - `admin-teams.html` — team management. Reference for card-based admin layouts. **Key design system patterns to follow:** - Dark theme: `--color-black: #0a0a0a` background, `--color-gray-100` text - Nav: `.nav` with `.nav-brand` (logo + "Westside") and `.nav-user` (name + role) - Page header: `.page-header` with `h1` + `.subtitle` - Stats: `.stats-row` with `.stat-card` (see admin.html) - Cards: `.card` with dark background (`--color-dark` or `--color-gray-800`) - Status colors: `--color-green`, `--color-yellow`, `--color-danger`, `--color-blue` already exist for status indicators - Buttons: `.btn`, `.btn-primary`, `.btn-outline`, `.btn-secondary`, `.btn-sm` - Bottom nav: `.bottom-nav` with icon tabs - Container: `.container` for page content - Typography: uppercase headings, `--font-size-*` vars, weight 800 for headings ### File Targets Files the agent should modify: - `sponsor-dashboard/index.html` — rebuild pipeline board using shared styles - `sponsor-dashboard/sponsor-card.html` — rebuild detail view using shared styles - `sponsor-dashboard/sponsor-list.html` — rebuild table view using shared styles - `shared/style.css` — add any new sponsor-specific utility classes (status badges, pipeline columns) following existing patterns Files the agent should DELETE: - `sponsor-dashboard/styles.css` — remove entirely. All styles come from shared. ### Acceptance Criteria **All three pages must:** - [ ] Use `<link rel="stylesheet" href="../shared/style.css">` — NO custom stylesheet - [ ] Have identical nav to admin.html: logo, "Westside", user name "Marcus", role "admin" - [ ] Have `.page-header` with title and subtitle - [ ] Have `.bottom-nav` matching admin pages - [ ] Use dark theme throughout — NO white/light backgrounds - [ ] Use existing `.card`, `.stat-card`, `.btn-*` classes where applicable **Pipeline Board (index.html):** - [ ] Stats row at top using `.stats-row` + `.stat-card`: Total, Contacted, Responded, Committed - [ ] Pipeline columns below — each column is a dark card with status-colored header border - [ ] Sponsor items within columns are compact cards (business name + category badge) - [ ] 6 columns: Prospect, Contacted, Responded, Negotiating, Committed, Declined - [ ] Horizontal scroll on mobile for the column layout - [ ] Same mock data: 23 contacted, 1 negotiating (NanoReleaf), 2 committed (Snoopy, Coach West), 21 declined **Sponsor Detail (sponsor-card.html):** - [ ] Card-based layout using `.card` class - [ ] Form fields use dark input styling matching existing playground forms (if any) or dark background inputs - [ ] Status dropdown, tier dropdown, notes textarea - [ ] Quick action buttons using `.btn-primary`, `.btn-outline`, `.btn-sm` - [ ] NanoReleaf as the example sponsor **Sponsor List (sponsor-list.html):** - [ ] Table with dark rows, matching `admin-players.html` table patterns if they exist - [ ] Filter/search controls in a dark card above the table - [ ] Same mock data as pipeline board **New shared styles (add to shared/style.css):** - [ ] `.status-badge` — small pill with status color background (use existing `--color-green`, `--color-yellow`, etc.) - [ ] `.category-badge` — small pill with category color - [ ] `.pipeline-board` — flex container for horizontal scrolling columns - [ ] `.pipeline-column` — single column with status-colored top border - [ ] Keep additions minimal — reuse existing classes wherever possible ### Test Expectations - [ ] Manual: open index.html — looks like it belongs in the admin section - [ ] Manual: compare nav and layout with admin.html side by side — visually consistent - [ ] Manual: phone viewport — horizontal scroll works, bottom nav visible - [ ] Manual: no references to `styles.css` remain in any HTML file ### Constraints - NO custom stylesheet — shared/style.css only - NO Tailwind - NO light theme — dark background throughout - Follow existing patterns exactly — read admin.html and shared/style.css before writing anything - Mobile-first — Marcus uses his phone - Additions to shared/style.css should be minimal and follow existing naming conventions ### Checklist - [ ] PR opened - [ ] sponsor-dashboard/styles.css deleted - [ ] All pages use shared/style.css - [ ] No unrelated changes ### Related - `arch-domain-sponsorship` — domain model - `westside-sponsors` — tier definitions, active sponsors - westside-playground#52 — original ticket (now superseded)