Add button to join class group chats on Matrix

[gabrc52]

Credit: @NumberC (fadif) and @gabrc52 (rgabriel)

Screenshot:

This is still a draft PR (pending the questions below, and making live the web app it would redirect to), but I am creating it now to start the conversation.

Blockers:

• [x] I can't recall if I've seen SIPB projects linking to each other. Is there any fundamental opposition to the idea in the first place? I still need to ask on tomorrow's meeting if people are generally fine with it.

Questions:

• [x] Is the SelectedActivities component a good place for the button or is there a better place, design-wise? Regardless of the visual placement, would it be better to use a new component instead?
• [x] Does Chakra UI offer a way to make a link (<a target="_blank" ...>) that looks exactly like a button? This would be better so that users can preview the link upon hovering, and right click the link to copy its location, or to avoid popup blockers (which do not seem to be triggered for me, but I am unsure if it's true for every single browser configuration)

[cjquines]

Does Chakra UI offer a way to make a link (<a target="_blank" ...>) that looks exactly like a button?

wrap a button with a link tag?

[gabrc52]

wrap a button with a link tag?

I wrapped it in a <a> tag and turned the link as a single expression as suggested.

[cjquines]

oh, if only there was a student group in mit that thinks about ui/ux

[gabrc52]

Thank you!

Two options are to put the button below the activity chips or above:

I think I'd be inclined to put it above, so that the search and class list are next to each other, but I am not really sure.

The "join group chats" button is associated with the specific class selection and schedule, so it should be somewhat near the list of classes and the schedule. But so are the Google Calendar and ics options.

I agree with the latter comment. I just found out Hydrant has a preferences button. I could experiment with moving the other buttons.

[gabrc52]

Thoughts about these UI changes?

Dark:

Light:

Changes (they are in another branch: https://github.com/gabrc52/hydrant/tree/matrix-and-more-ui-changes):

• Footer is no longer transparent
• The Matrix icon is below schedule switcher and above the list of classes and activities
• The calendar button is now next to the Matrix button and now has a calendar icon
• The Matrix and calendar buttons are now teal and blue, respectively
• Sign in with Google icon is gone since the functionality has not yet been reimplemented, but ideally I think there should only be one "Add to calendar" icon which would prompt for which calendar to use (ICS? Google Calendar? Apple calendar, even?)
• The Settings button is for now a "Change theme" button, since the only setting currently available is the theme
• The settings button now has a moon or sun icon, depending on the theme
• As an added benefit of the footer being relieved of buttons, there is no vertical scrollbar anymore (at least in my laptop)

[psvenk]

Ooh, this is nice! I wholeheartedly approve of your redesign and agree with your comments.

[gabrc52]

I've merged the UI changes and added a tooltip