Form layout — Restyled card grid, form groups, button groups, and avatar upload area to use consistent spacing, typography, and color tokens from the shared variables and mixins SCSS modules
Responsive design — Added breakpoint-aware grid layouts and card hover states ($breakpoint-sm, $breakpoint-md)
Accessibility — Visible focus rings, .is-invalid red states on input errors, alert banners with semantic structure
What This PR Does NOT Include
The SSR/prerender flash fix and spider detection features that were previously planned for this branch have been completed and merged in earlier PRs (#11, #12). This PR contains only the admin form styling work.
Files Changed
Frontend (SCSS)
src/app/admin/admin-users-tab.component.scss — Full restyle using design-system tokens
Test Plan
Frontend builds successfully (frontend-build CI passed)
Frontend tests pass (frontend-test CI passed)
Visual verification: confirm admin user form renders correctly on desktop and mobile breakpoints
Restyle the admin user form SCSS to align with the global design system.
## What Changed
Single file: `src/app/admin/admin-users-tab.component.scss` (+129, -11)
### Changes
- **Alert banners** — Added `.form-error` and `.form-success` classes using design-system tokens (`$danger-red`, `$success-green`, `$spacing-sm`, `$spacing-md`, `$radius-md`) for consistent error/success state styling
- **Section container** — Replaced hardcoded `.add-admin-section` values (`margin-top: 2rem`, `padding: 1.5rem`, `border: 1px solid var(--color-light)`, `border-radius: 8px`) with design-system variable equivalents
- **Form layout** — Restyled card grid, form groups, button groups, and avatar upload area to use consistent spacing, typography, and color tokens from the shared `variables` and `mixins` SCSS modules
- **Responsive design** — Added breakpoint-aware grid layouts and card hover states (`$breakpoint-sm`, `$breakpoint-md`)
- **Accessibility** — Visible focus rings, `.is-invalid` red states on input errors, alert banners with semantic structure
### What This PR Does NOT Include
The SSR/prerender flash fix and spider detection features that were previously planned for this branch have been completed and merged in earlier PRs (#11, #12). This PR contains only the admin form styling work.
## Files Changed
**Frontend (SCSS)**
- `src/app/admin/admin-users-tab.component.scss` — Full restyle using design-system tokens
## Test Plan
- [x] Frontend builds successfully (`frontend-build` CI passed)
- [x] Frontend tests pass (`frontend-test` CI passed)
- [ ] Visual verification: confirm admin user form renders correctly on desktop and mobile breakpoints
- Replace hardcoded CSS custom properties with SCSS variables
- Add .form-error/.form-success alert banners
- Add .admin-form styles: .form-row grid, .form-group labels/inputs,
focus rings, is-invalid states, placeholder styling
- Style .add-admin-section heading with $font-heading, divider underline
- Use button-style mixin for .btn-save (was unstyled before)
- Add .form-actions bar layout
- Add responsive breakpoint: stack form rows on mobile (<768px)
- Consistent spacing via $spacing-* tokens throughout
- Consistent border-radius via $radius-* tokens throughout
robot
changed title from fix(ssr): resolve prerender flash and add spider detection + admin user form styling to style(admin): restyle admin user form to match global design system2026-08-09 11:45:17 -07:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
kfj001
Restyle the admin user form SCSS to align with the global design system.
What Changed
Single file:
src/app/admin/admin-users-tab.component.scss(+129, -11)Changes
.form-errorand.form-successclasses using design-system tokens ($danger-red,$success-green,$spacing-sm,$spacing-md,$radius-md) for consistent error/success state styling.add-admin-sectionvalues (margin-top: 2rem,padding: 1.5rem,border: 1px solid var(--color-light),border-radius: 8px) with design-system variable equivalentsvariablesandmixinsSCSS modules$breakpoint-sm,$breakpoint-md).is-invalidred states on input errors, alert banners with semantic structureWhat This PR Does NOT Include
The SSR/prerender flash fix and spider detection features that were previously planned for this branch have been completed and merged in earlier PRs (#11, #12). This PR contains only the admin form styling work.
Files Changed
Frontend (SCSS)
src/app/admin/admin-users-tab.component.scss— Full restyle using design-system tokensTest Plan
frontend-buildCI passed)frontend-testCI passed)fix(ssr): resolve prerender flash and add spider detection + admin user form stylingto style(admin): restyle admin user form to match global design systemView command line instructions
Checkout
From your project repository, check out a new branch and test the changes.