Minor layout redesign + prereg button

[psvenk]

@tangluna suggested yesterday that we move some things around on Hydrant, so I whipped up this proof of concept and also folded #97 into it.

Before:

After:

I moved the term selector to be near the schedule selector (which is more tightly coupled functionality-wise) rather than the logo and "change theme" button, and moved the "maintained by SIPB" to accompany the Hydrant logo; the schedule buttons are also moved behind a menu now.

Known issues:

• Fuzzball blends in with dark mode background (add outline to SVG?)
• The schedule buttons behind the menu are not actually functional (I'll fix this soon)
  • The "rename" button doesn't consistently autofill with the current schedule name

[cjquines]

some thoughts on the design:

• i kinda dislike having "by SIPB" so prominently on the logo, but that's personal taste.
• the import / join group chat / pre-register begins to become longer... these "export" like buttons could maybe also go to a dropdown, who knows. maybe move the "share" button there too
• i've always felt iffy about the placement of the schedule dropdown. i think it should go next to the "1 of 8" buttons but idk.

[jmoler2]

While the "Maintained by SIPB" looks a little out of place by the logo, it looks better to me than having it below the "import" section where it was previously. Right now, it looks a bit dystopian beneath the logo, but it does a good job of indicating development by SIPB without actually being in the way.

I do think the import section (similar to what CJ said) looks very cluttered now, and the format should be changed to look cleaner or have the text be shorter.

[psvenk]

some thoughts on the design:

• i kinda dislike having "by SIPB" so prominently on the logo, but that's personal taste.

I do kind of agree — it feels a little corporate. Do you have any better ideas?

• the import / join group chat / pre-register begins to become longer... these "export" like buttons could maybe also go to a dropdown, who knows. maybe move the "share" button there too

Yeah… I agree. I tried shortening the text for these buttons but couldn't think of any satisfying ways of shortening them. I think a dropdown might be too discreet, though; people might not realize that these options exist.

• i've always felt iffy about the placement of the schedule dropdown. i think it should go next to the "1 of 8" buttons but idk.

Hmm, interesting. I can try that.

[tangluna]

• I agree that the "By SIPB" (my idea) does look a little annoyingly corporate, but I still feel like it's a better solution than where the "Maintained by SIPB" button originally was. I feel like the SIPB callout should be somewhere in the top left corner in terms of real estate -- anywhere else and people probably wouldn't notice it. (It could be changed to some form of "Suggestions? Contact SIPB" hyperlink or something in that top line maybe? I'm not sure what would be best, but I do think it should end up somewhere in that corner)
• +1 to pvsenk about people probably wouldn't look for those three functions in the dropdown like they would for "expected" actions like copy/delete/etc. -- shorter forms could be "Add to Calendar", "Matrix Group Chats", and "WebSIS Pre-registration" maybe?
• '1 of 8' is something that is relavent to a specific schedule, whereas the schedule dropdown feels like it is higher on the heirarchial order so I don't know if they should be grouped together.

[cjquines]

as an alternative to the button, you could have icon-only buttons with tooltips???

[dtemkin1]

Gonna give me two cents really quick...

• I think having an indicator in the logo area that Hydrant is by SIPB would be good, mainly since I think having it buried in the About dialog isn't the clearest and because I think anyone curious would probably click it and poke around (aka I know I would do this). I agree that it feels kind of "corporate" but I don't really know if there's a better way of doing it :/
• I changed the text on the button to make them a bit shorter (around the size of their width pre-PR), but also added a tooltip to the pre-reg button to clarify that it puts the classes from your schedule on there.
• I'm ambivalent of where the "Schedule __" goes, but people might get annoyed if we move it too much. That might be me being used to the current layout though.

[dtemkin1]

What would y'alls thoughts be on moving the theme button? It's off-centered right now, below is what I was thinking (moving the button to the other side and turning it into an icon)?

[psvenk]

I feel like the theme button shouldn't be next to the schedule selector; it controls the appearance of all of Hydrant rather than being local to a particular schedule or term.

[dtemkin1]

I think this is ready for review? I added some things and made some changes based on feedback from people in the SIPB office :)

[psvenk]

Looks good to me (though I can't approve my own PR). I'm happy to merge if you approve, @dtemkin1 (unless anyone has other thoughts).