Feature: UI/UX Polishing for Classroom

[NewtonLC]

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

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)

(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.

[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