Feature: UI/UX Polishing for Classroom #609

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.