Compare Panel

[sophiazlin]

Summary

Resolves #175

Adds compare panel and related overlays and modals.
There is a bug with the drawer button. If you move your mouse really fast left and right over it, it causes the tooltip to appear at (0, 0).

Checklist

Acceptance Criteria

UI Requirements

• A new panel is added on the right side of the screen that houses CombinationContainer and the new component ComparisonContainer.
• The new panel is collapsible and should behave like a drawer.
• The ComparisonContainer has a header with an enable button
• Friends' and schedules' names are editable.
• When a friend has a nickname, hovering over the nickname should display a popup with their email info.
• Friends and schedules can be deleted and a confirmation modal should pop up to confirm the deletion.
• Panel works for both light and dark modes.

How to Test

Run the code and go through all functions (click checkboxes, edit schedules, delete schedules, add schedule versions (through the form in the version dropdown), etc.)

[github-actions]

PR Preview Action v1.4.4
🚀 Deployed preview to https://gt-scheduler.github.io/website/pr-preview/pr-185/
on branch gh-pages at 2023-10-19 18:09 UTC

[nhatnghiho]

Looks good overall! We got some small design changes over the past week which includes

• Collapsing the list of comparable schedules when "Compare Schedules" is off.
  
• Displaying a text popup telling user that they have to disable compare mode to edit their own schedules
  
• Allowing users to choose the display colors of their friends' schedules

Hopefully these won't take too much time for you. Lmk if you need more time though!

[yatharth-b]

UI looks super clean! Only thing I noticed was that the enable switch styling didn't match the figma in dark mode.

Figma:

Website:

fixed