Feature: UI/UX Polishing for Classroom

[NewtonLC]

This issue will be updated continuously with UI/UX improvement tasks.

We had a meeting with Mrugesh, who gave feedback on updating the app's visuals to better align with freeCodeCamp's design language. Here's what I plan to work on regarding that:

1. Lack of Teacher onboarding instructions

Currently, the home page doesn't explain how to use the app. The landing page should guide the user on how to use the app, create a classroom, connect students to it, etc.

(PR #612) 2. Redesign "Create Class" and "Edit Class" modals.

Here are some issues with them:

• The certifications dropdown is too small, and it's not very easy to search through.
• The Edit Class modal does not fully cover the page.
• When editing a Class description, you only have the option to completely replace/rewrite it.
• There is currently a bug where classrooms with no certifications can be created. (fix(modal): disable button and update styles based on selection #552 handles this, needs to be updated and merged in)
  • Update: This decision has been reversed. Classrooms will be allowed to be created without certifications, so fix(modal): disable button and update styles based on selection #552 (and fix: require certification before creating class #611) will not be included in this work.

(PR #610) 3. Redesign Class cards in the Classes page.

Issues:

• Classroom titles and descriptions should wrap or cut off properly, since there isn't a text limit to those fields.
• Add a character limit to the title and description fields.
• From the Classes page, it's difficult to see which certifications are in which class. We should add a tooltip on the side that shows the user which certifications are part of that class.

4. Classroom page Improvements

The Classroom page doesn't display information about that classroom, such as the name, description, certification list, etc. We should look into how apps like Google Classroom, Canvas, Schoolloop, handle their teacher dashboards for reference.

5. Align overall visual design with freeCodeCamp's design language

Beyond the individual component fixes above, the app as a whole should feel visually consistent with freeCodeCamp's own site — colors, typography, spacing, and component styling should match fCC's design system rather than diverging piecemeal per page.

• PR refactor: Synchronize FreeCodeCamp CSS Styling #604 already handles CSS synchronization for several components; this task is the umbrella for extending that work app-wide.
• Audit remaining pages/components for style drift from freeCodeCamp's palette, font stack, and spacing scale.
• Reference freeCodeCamp's main site and existing design tokens where available, rather than reinventing values.

---

Note: items 2, 3, and 5 will be delivered together in a single combined PR rather than split across separate PRs (#612, #610, #604), so the full design overhaul is visible in one diff against the old design.

[NewtonLC]

Comment regarding issue 2: Suggestions for fixes

1. Right now the "Create Class" modal is in ClassInviteTable.js and the "Edit Class" modal is just in modal.js. We should definitely created a shared component that both files will import and use, just to avoid this type of code duplication.
2. Right now when you edit a class, the current title and description are just used as the placeholder in the text field, so anything you type will automatically replace it. We should make the value of the text field pre-filled when you press Edit Class, so that it is easier to make simple edits
3. Right now the gray screen of the Modal is not covering in the Edit Class, even though it uses the same CSS as the Create Class. We should try rendering the modal overlay through a React portal (ReactDOM.createPortal) straight to document.body, instead of inline wherever the triggering component happens to live in the tree.
4. Right now, the certifications dropdown gets clipped by the modal panel's scroll boundary and is only slightly visible. The fix is to have the dropdown render as a floating overlay above the panel, rather than being confined inside its scrollable area.
5. Revisit yakupafsin's PR for limiting no-certification classes. Apply that change to the Class Modal shared component instead of in both the Create and Edit class modals separately.

[NewtonLC]

Suggestions regarding issue 1:

• The landing page should state what your role is if you have a role (Student, Teacher, Admin)
• The landing page should give you student/teacher onboarding instructions if you're a teacher or don't have a role. If you're a student, it should just give you student onboarding instructions

[NewtonLC]

The combined PR for this issue is up: #616. It covers all five items:

• Item 1: role-aware onboarding guides on the home page
• Item 2: Create/Edit Class modals (from feat: Redesign Create and Edit Class Modals #612)
• Item 3: class cards (from feat: Class Card UI/UX updates #610)
• Item 4: class page header, including feat: Improve Teacher Feedback for Fetch Failures and Empty Classrooms #607's empty and error states
• Item 5: app-wide alignment with freeCodeCamp's design, done by adopting @freecodecamp/ui (freeCodeCamp's own component library) instead of hand-copying styles (supersedes refactor: Synchronize FreeCodeCamp CSS Styling #604)

#604, #607, #610, and #612 are merged into that branch and can be closed once it lands. Classes without certifications remain allowed (#552 and #611 not included).