UI for Multiple Classrooms

[igawaclawska]

works together with the branch: 198-students-invisible-when-joining-second-classroom (zeeguu/api#206) in the API repo

UI for multiple classrooms

Desktop view (animated):

Adding Classroom	Removing Classroom	Error Message

Mobile View (not animated):

Implementation

- New components are introduced:

• FullWidthListItem.js
• FullWidthListContainer.js

- Changes to the error message:

• Now, the error message is cleared after a successful next attempt

- Modal is introduced:

• To prevent users leaving a classroom by accident

Other

• the Classrooms.js page and its associated modal LeaveClassroomModal has been grouped together and placed n the Classrooms folder
• the FullWidthErrorMsg component has been moved to the components folder

Future improvements

• refactor of grey colors
• merge the modal and preference page buttons into one
• as agreed with @mircealungu, some simple components, such as this one

import * as s from "./TagContainer.sc";

export default function TagContainer({ children }) {
  return <s.TagContainer>{children}</s.TagContainer>;
}

can exist as separate, individual, importable styled-components instead, without their associated react function - I will gradually take care of this change

[netlify]

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	03fc33e
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/66e2bfc6f321bb000843edba
😎 Deploy Preview	https://deploy-preview-526--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tfnribeiro]

Looks good to me - tested in my local environment and behaved as expected. I will just make a commit to remove a console.log from the API call. This was used for testing.

[tfnribeiro]

While I think blue is a nice contrast colour - my first intuition was that I could click it as a link. This might just be me and Blue = Link association, but just a not.

[igawaclawska]

Good observation! I'll change it

[igawaclawska]

For now, I've decided to go with dark orange (gold) as the brighter one is challenging to read (not enough contrast).
I think in the future we could consider adding more shades in between these colors (similarly as with blue) for improved variety and contrast in some instances (e.g. buttons).

Orange (discarded)	Dark orange (selected)

[tfnribeiro]

I agree with the bolder option!

[tfnribeiro]

This console.log might have been me, but we should remove it.

[mircealungu]

great work!