RunicGateway/website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix(admin): style the Teams admin screen with the site's own classes #162

Merged
whitlocktech merged 1 commits from fix/teams-admin-theming into main 2026-08-19 19:35:09 +00:00
Conversation 1 Commits 1 Files Changed 4 +345 -218
wtclaude commented 2026-08-19 19:03:50 +00:00
Member
Copy Link

What & why

Admin → Teams did not follow the site's branding or theming: unstyled tables, buttons in three
different accidental styles, and content sitting flush against unpadded panels.

The cause is that the three views behind that screen (TeamsAdmin.jsx and the TeamIntegrations
/ TeamVoice panels it embeds) were written against a stylesheet that was never added.

Four classes they use are defined nowhere in the project — not in client/styles/theme.css,
not in index.html, not in module-uo. These views are the only files in the whole client that
reference them:

Class Used at Rendered as
.table TeamsAdmin ×3, TeamIntegrations ×1, TeamVoice ×1 raw UA table — no borders, no padding, serif
.kv TeamsAdmin:56 raw <dl>
.list TeamsAdmin:132 bulleted list with browser indent
.notice TeamsAdmin:342 plain body text

The buttons were broken, not merely off-brand. .btn carries the padding, border-width, radius
and font; .btn-primary / .btn-ghost carry only colour. Nine buttons used className="btn-ghost"
with no btn (bare UA controls with a stray background), and eleven used a bare className="btn"
(no variant, so they fell back to the UA's light button face at full 12×26px pill size inside table
cells).

.panel supplies no padding (theme.css:140 is border + radius + gradient only). Every other
view pairs it with explicit padding; these five panels had none.

Headings were unstyled. There is no base h1/h2 rule in the theme, so raw <h2> rendered in
Georgia at UA sizes instead of Cinzel. /admin/teams was also missing from AdminLayout's TITLES
map, which is why the topbar read "ADMIN".

A private palette, three near-misses off the house one: #e08b77 vs #d98b84 (60 uses
site-wide), #8fbf7a vs #7fd0a4 (26), #e0b877 vs #e0b070 (7).

What changed

Presentation only — no behaviour, data, routes, schema or config. docs/ describes what this
screen shows, which is unchanged, so no docs edit is required.

  • Tables → adm-table / adm-th / adm-td inside panel-flat, as the other fourteen admin views
    do. Wrapped in overflow-x: auto: a status badge and the action buttons are both nowrap by
    design, so a narrow viewport can always overflow a row, and .panel-flat clips rather than
    scrolls.
  • Buttons → the full btn btn-primary btn-sq / btn btn-ghost btn-sq triplet, with real gaps
    between adjacent ones.
  • Panels → explicit padding: 22, matching ModulesAdmin.
  • Headings → h2.display; the in-page <h1>Teams</h1> removed in favour of the topbar title, with
    /admin/teams added to TITLES.
  • Status pills → the existing badge-pub / badge-moderator / badge-ban / badge-draft
    modifiers. .badge alone declares no border, so the old inline borderColor was inert.
  • The .kv block → a two-column grid using field-label; the .list queue → an adm-table; the
    .notice → the existing .note callout.
  • Tokens for literals: var(--line-soft) for rgba(255,255,255,0.12), var(--radius-input) for
    borderRadius: 4.

How it was tested

Walked live in the browser against the dev DB as an admin (two Teams, one hidden pending review, a
sync error, and forum-ledger rows), covering every surface on the screen: sync panel, review queue,
All Teams, the forum ledger, the bridge draft form and its acknowledgement dialog. Cancelled out of
both forms; confirmed no rows were written.

One regression was caught and fixed during the walk: white-space: nowrap on the name/timestamp
cells pushed the row past .panel-flat, which has overflow: hidden, clipping the "Forum log"
button. Reverted, and the scroll wrapper added instead.

  • npm test --prefix client → 288/288
  • npm test --prefix server → 1162/1162
  • npm run build --prefix client → clean

Checklist

  • I have read CONTRIBUTING.md.
  • The change builds and existing tests/checks pass locally.
  • I have added or updated tests/docs where it makes sense.
  • My commits are reasonably scoped with clear messages.

AI-assisted contributions (required)

  • No AI tools were used to produce this contribution.
  • AI tools were used. Tool(s): Claude Code (Opus 5). I have reviewed and understand
    every change, and take responsibility for it. AI-authored commits are
    marked with a Co-Authored-By / Assisted-By trailer.

License

  • I agree that my contribution is licensed under this project's license
    (GNU GPL v3.0 or later), and I have the right to contribute it.
## What & why Admin → Teams did not follow the site's branding or theming: unstyled tables, buttons in three different accidental styles, and content sitting flush against unpadded panels. The cause is that the three views behind that screen (`TeamsAdmin.jsx` and the `TeamIntegrations` / `TeamVoice` panels it embeds) were written against a stylesheet that was never added. **Four classes they use are defined nowhere in the project** — not in `client/styles/theme.css`, not in `index.html`, not in `module-uo`. These views are the only files in the whole client that reference them: | Class | Used at | Rendered as | | --- | --- | --- | | `.table` | `TeamsAdmin` ×3, `TeamIntegrations` ×1, `TeamVoice` ×1 | raw UA table — no borders, no padding, serif | | `.kv` | `TeamsAdmin:56` | raw `<dl>` | | `.list` | `TeamsAdmin:132` | bulleted list with browser indent | | `.notice` | `TeamsAdmin:342` | plain body text | **The buttons were broken, not merely off-brand.** `.btn` carries the padding, border-width, radius and font; `.btn-primary` / `.btn-ghost` carry only colour. Nine buttons used `className="btn-ghost"` with no `btn` (bare UA controls with a stray background), and eleven used a bare `className="btn"` (no variant, so they fell back to the UA's light button face at full 12×26px pill size inside table cells). **`.panel` supplies no padding** (`theme.css:140` is border + radius + gradient only). Every other view pairs it with explicit padding; these five panels had none. **Headings were unstyled.** There is no base `h1`/`h2` rule in the theme, so raw `<h2>` rendered in Georgia at UA sizes instead of Cinzel. `/admin/teams` was also missing from `AdminLayout`'s `TITLES` map, which is why the topbar read "ADMIN". **A private palette**, three near-misses off the house one: `#e08b77` vs `#d98b84` (60 uses site-wide), `#8fbf7a` vs `#7fd0a4` (26), `#e0b877` vs `#e0b070` (7). ## What changed Presentation only — no behaviour, data, routes, schema or config. `docs/` describes what this screen *shows*, which is unchanged, so no docs edit is required. - Tables → `adm-table` / `adm-th` / `adm-td` inside `panel-flat`, as the other fourteen admin views do. Wrapped in `overflow-x: auto`: a status badge and the action buttons are both `nowrap` by design, so a narrow viewport can always overflow a row, and `.panel-flat` clips rather than scrolls. - Buttons → the full `btn btn-primary btn-sq` / `btn btn-ghost btn-sq` triplet, with real gaps between adjacent ones. - Panels → explicit `padding: 22`, matching `ModulesAdmin`. - Headings → `h2.display`; the in-page `<h1>Teams</h1>` removed in favour of the topbar title, with `/admin/teams` added to `TITLES`. - Status pills → the existing `badge-pub` / `badge-moderator` / `badge-ban` / `badge-draft` modifiers. `.badge` alone declares no border, so the old inline `borderColor` was inert. - The `.kv` block → a two-column grid using `field-label`; the `.list` queue → an `adm-table`; the `.notice` → the existing `.note` callout. - Tokens for literals: `var(--line-soft)` for `rgba(255,255,255,0.12)`, `var(--radius-input)` for `borderRadius: 4`. ## How it was tested Walked live in the browser against the dev DB as an admin (two Teams, one hidden pending review, a sync error, and forum-ledger rows), covering every surface on the screen: sync panel, review queue, All Teams, the forum ledger, the bridge draft form and its acknowledgement dialog. Cancelled out of both forms; confirmed no rows were written. One regression was caught and fixed during the walk: `white-space: nowrap` on the name/timestamp cells pushed the row past `.panel-flat`, which has `overflow: hidden`, clipping the "Forum log" button. Reverted, and the scroll wrapper added instead. - `npm test --prefix client` → 288/288 - `npm test --prefix server` → 1162/1162 - `npm run build --prefix client` → clean ## Checklist - [x] I have read [CONTRIBUTING.md](CONTRIBUTING.md). - [x] The change builds and existing tests/checks pass locally. - [x] I have added or updated tests/docs where it makes sense. - [x] My commits are reasonably scoped with clear messages. ## AI-assisted contributions (required) - [ ] No AI tools were used to produce this contribution. - [x] AI tools were used. Tool(s): `Claude Code (Opus 5)`. I have reviewed and understand every change, and take responsibility for it. AI-authored commits are marked with a `Co-Authored-By` / `Assisted-By` trailer. ## License - [x] I agree that my contribution is licensed under this project's license (**GNU GPL v3.0 or later**), and I have the right to contribute it.
wtclaude added 1 commit 2026-08-19 19:03:54 +00:00
fix(admin): style the Teams admin screen with the site's own classes
All checks were successful
PR Checks / client-build (pull_request) Successful in 31s
Details
PR Checks / bot-tests (pull_request) Successful in 31s
Details
PR Checks / server-tests (pull_request) Successful in 2m34s
Details
68f038f456 
The Teams admin screen was written against four CSS classes that do not
exist anywhere in the project — `.table`, `.kv`, `.list` and `.notice` —
and against `.btn-ghost` / `.btn` used without the `.btn` box they depend
on. The result rendered as unstyled UA tables and bare browser buttons
sitting flush against unpadded panels, and looked nothing like the rest
of the admin panel.

Nothing here changes behaviour, data or routes; it is presentation only.

- Tables become `adm-table` / `adm-th` / `adm-td` inside `panel-flat`,
  the markup the other fourteen admin views use, and scroll rather than
  clip when a row is wider than the shell (a status badge and the action
  buttons are both nowrap by design, so a narrow viewport can always
  overflow one).
- Buttons take the full `btn btn-primary btn-sq` / `btn btn-ghost btn-sq`
  triplet. `.btn` carries the padding, border and radius; the variants
  carry only colour, so a bare `.btn-ghost` had none of the box and a
  bare `.btn` fell back to the UA's light button face.
- `.panel` supplies no padding, so every panel now sets it explicitly at
  22px, as ModulesAdmin and EmptyState already do.
- Headings become `h2.display`, and the in-page `<h1>Teams</h1>` goes
  away in favour of AdminLayout's topbar title — which needed
  `/admin/teams` adding to TITLES, the reason the bar read "ADMIN".
- Status pills use the existing `badge-pub` / `badge-moderator` /
  `badge-ban` / `badge-draft` modifiers. `.badge` alone declares no
  border, so the old inline `borderColor` was inert.
- The bridge and voice panels drop their private palette
  (`#e08b77` / `#8fbf7a` / `#e0b877`) for the site's
  `#d98b84` / `#7fd0a4` / `#e0b070`, and a literal `rgba(255,255,255,.12)`
  rule and a `borderRadius: 4` for `var(--line-soft)` and
  `var(--radius-input)`.

Walked live against the dev DB as an admin: sync panel, review queue, all
Teams, the forum ledger, the bridge draft form and its acknowledgement
dialog. Client 288/288, server 1162/1162, client build clean.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WnDSWzpUjw8t8C2hghysNz
whitlocktech scheduled this pull request to auto merge when all checks succeed 2026-08-19 19:05:47 +00:00
whitlocktech scheduled this pull request to auto merge when all checks succeed 2026-08-19 19:34:51 +00:00
whitlocktech approved these changes 2026-08-19 19:34:57 +00:00
whitlocktech merged commit 0f96a372cf into main 2026-08-19 19:35:09 +00:00
whitlocktech deleted branch fix/teams-admin-theming 2026-08-19 19:35:10 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
whitlocktech
Labels
Clear labels
bug
Something is not working
duplicate
This issue or pull request already exists
enhancement
New feature
help wanted
Need some help
invalid
Something is wrong
question
More information is needed
severity:critical
Security audit: critical severity
severity:high
Security audit: high severity
severity:low
Security audit: low severity
severity:medium
Security audit: medium severity
wontfix
This won't be fixed
bug
Something is not working
duplicate
This issue or pull request already exists
enhancement
New feature
help wanted
Need some help
invalid
Something is wrong
question
More information is needed
wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
ksfixitman whitlocktech wtclaude
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: RunicGateway/website#162
No description provided.
Delete Branch "fix/teams-admin-theming"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?