gt-scheduler / website

Scheduling application designed to mitigate some of the pain-points present throughout Georgia Tech's registration process.
https://gt-scheduler.org
GNU Affero General Public License v3.0
92 stars 22 forks source link

[BoG S24] Share Schedule UI Changes #293

Closed yatharth-b closed 7 months ago

yatharth-b commented 7 months ago

Problem Description

We want to implement some small UI changes for the new feature-

  1. Edit styling of the expand button for the comparison panel (refer to figma). Code for the button - https://github.com/gt-scheduler/website/blob/7ed9aac64a7d273a2e0db7373185ca56a41ecec8/src/components/ComparisonPanel/index.tsx#L76 ONLY WHEN THE TAB IS COLLAPSED — the UI should be different. When the tab is opened, the UI SHOULD NOT change. (The goal is to get people to open the tab, not close it.) Refer to this image on the Figma: image

The long lines are 50% transparent, and the actual arrow icon (<) is 100% (no transparency).

([Link to prototype] (https://www.figma.com/proto/OLFwNtlrcFqewzEuGtEzmR/GT-Scheduler-%2F-Spr24?page-id=10007%3A43&type=design&node-id=10838-1602&viewport=-378%2C-5583%2C0.4&t=LgboTui2vhbzWn26-1&scaling=min-zoom&starting-point-node-id=10838%3A1579&mode=design))

  1. Trigger LoginModal (in components folder) when user clicks 'share schedule' button or toggle compare button without logging in. Look at HeaderActionBar for details on how to use the LoginModal component. Match the styling of the LoginModal to the styling of the figma and change text as well (previous LoginModal usage shouldn't change so maybe create props to determine text/styling).