feat: UI/UX polish — adopt @freecodecamp/ui, onboarding, class page (#609)

[NewtonLC]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitHub Codespaces.

Addresses #609.

This PR delivers the UI/UX work from #609 in one diff, so the whole redesign can be reviewed against the old design at once. It supersedes #604, #610, #612, and #607, which are merged into this branch (their history is preserved).

Headline change: Classroom now uses @freecodecamp/ui

Instead of hand-copying freeCodeCamp styles, Classroom depends on freeCodeCamp's own component library (@freecodecamp/ui@6.1.0, pinned, the same package freeCodeCamp's learn site uses) and its design tokens. Where the library has no equivalent, components follow freeCodeCamp's site code (header, progress bar, heatmap, .btn-cta, typography).

Area	Now uses
Buttons	Button; yellow .btn-cta (ported from fCC's global.css) for each page's main action
Create/Edit Class, Delete confirmation	Modal (danger variant for delete)
Forms	FormGroup, ControlLabel, FormControl, HelpBlock + a FormSelect helper
Class card	Panel + Dropdown/MenuItem Actions menu
Messages	Alert, Callout; toasts themed like Alert
Collapsible sections	HeadlessDisclosure
Tables	Table + shared TablePagination
Landing page guides	Tabs
Navbar	Rebuilt after fCC's header (Menu dropdown on phones)

#609 items

1. Teacher onboarding (item 1): the home page shows the signed-in role and role-aware getting-started guides (For teachers / For students tabs; students see only the student guide; admins get a pointer to the admin dashboard).
2. Create/Edit Class modals (item 2, from feat: Redesign Create and Edit Class Modals #612): shared ClassModal on the library Modal; the certification dropdown is inline, searchable, and fCC-themed; Edit pre-fills values and only sends changed fields. The "no certifications" restriction (fix(modal): disable button and update styles based on selection #552/fix: require certification before creating class #611) is intentionally not included; see the update on Feature: UI/UX Polishing for Classroom #609.
3. Class cards (item 3, from feat: Class Card UI/UX updates #610): 100/500 character limits with counters, 2/4-line clamping, a keyboard-accessible certification popover, and an Actions menu.
4. Class page (item 4, with feat: Improve Teacher Feedback for Fetch Failures and Empty Classrooms #607): header with class name, description, certification tags, student count, created date, and a copyable invite link; fCC-styled empty and fetch-error states.
5. fCC design alignment (item 5, from refactor: Synchronize FreeCodeCamp CSS Styling #604): library tokens and base styles app-wide, fCC typography rules, consistent page layouts and titles, restyled navbar, dashboard, student details (heatmap, per-certification progress with a scrollable block list), and admin pages.

Bugs fixed along the way

• Renaming a class never saved (the modal sent classroomName, editclass read className).
• Editing with no changes always reported "Class updated"; it now says "No changes were made." without a request.
• A class could be created without certifications but never edited to have none (editclass turned [] into "no change").
• A failed delete (400/500) was reported as success and removed the card.
• Every toast rendered twice (multiple ToastContainers); there is now one, in _app.js.
• The users table showed "1–0 of 0" and a "0" page size when empty.
• Students with no completions showed a 1969 "last completion" date.
• The heatmap's "contributions" count actually counted active days; it's now labelled "active days".
• Duplicate ids (menu-button on every card, progress on every row).
• The Role label on the edit-user form pointed at the Name field.
• feat: Improve Teacher Feedback for Fetch Failures and Empty Classrooms #607's new fetchStudentData return shape broke the student details page (mock mode); callers are updated, and fCC API failures now show the error state instead of crashing.

Things reviewers should know

• Node 24 is now required (engines.node >= 24). @freecodecamp/ui declares node >= 24 and this repo's .npmrc sets engine-strict=true. CI already runs Node 24.
• Library workarounds (upstream issues for freeCodeCamp/ui to be filed separately):
  • Modal panel has a fixed width and overflows phones → capped with max-width: 100% in globals.css.
  • FormControl ignores its own classes when given className → layout classes go on wrappers.
  • base.css makes every <table> inline-block, so Table's w-full doesn't stretch → table.w-full { display: table } plus scroll wrappers.
• Navbar API changed: pages render <Navbar /> and pass page-specific links via extraLinks; the navbar owns the role-based links. "Menu" is renamed "Home"; the logo links to / (same as fix(navbar): point home button to root route #613).
• Not touched: the v1 dashboard (pages/dashboard/[id].js, slated for deletion) beyond a one-line fix to keep it working.

Testing

• npm test: 149 tests pass (new tests cover the edit/delete flows, the editclass API, navbar roles, pagination, onboarding, the class page, disclosures, activity/progress).
• Manually tested each page at desktop and phone widths as teacher, admin, student, and signed out.

Screenshots

🤖 Generated with Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​freecodecamp/​ui@​6.1.0

View full report