Compare Panel UI changes

[iphonecats]

Summary

Resolves #285

Moved invite button from Header to Compare Panel, added displaying email alongside name for users shared with

Checklist

• [x] Move the invite button from the Header component to the Compare Panel component and style according to figma.
• [x] Instead of displaying just the editable name of the friends in the comparison panel, display both name and emails like in the image above and the figma.
• [x] Modify the font size and match styling of the compare panel to the figma prototype .

How to Test

Access Share Schedule feature

[github-actions[bot]]

PR Preview Action v1.4.7 :---: :rocket: Deployed preview to https://gt-scheduler.github.io/website/pr-preview/pr-286/ on branch gh-pages at 2024-02-27 04:27 UTC

[jwu543]

Great job with the UI changes, just a couple of small notes:

1. After some discussion, we have concluded that it is best for the Share Schedule button to appear above the Compare Schedule button. The Share Schedule button should also appear indefinitely, regardless if the Compare Schedule feature is toggled. Spacing between the icon and text of the Share Schedule button should be increased.
2. It seems like the font sizes of the Shared with me section and the schedule selection button sizes have not been increased. Please keep in mind of the spacing between elements in the Shared with me section as well.
3. When displaying names along with the email in the Shared with me section, the name is currently still the email. Is there a way to pull only the name of the user and display it above the email?

Let me know if you have any design questions regarding this ticket!