WIP: Refresh visuals of auth page

[majjejjam]

Hi! I thought the auth page needed some love. I'm not a programmer, but I know enough to maybe get something started. Before continuing any further I wanted input from you.

This is what I've done so far:

• Removed placeholders in favor of proper labels
• Center the form
• When screen is large enough:
  • Style the form to look like modals
  • Add a gradient in background based on the logo

Here is a comparison of what the auth page looks like currently and with this PR:

Before	After

(And on a narrow screen:)

I'm unsure what I think about the gradient. With it dropped, it could look something like this (disregard the h1 only saying "Log in"):

We could also drop the modal styling so it always look like the narrow screen screenshot.

More improvements I've been thinking about:

• Split the "Login to SilverBullet" string
  • Maybe only saying "Login" in the form and having the logo at the top of the page (similar to Proton, see image below)
    
• Right now, I redefine many variables from theme.scss. This file could maybe be imported to minimize duplication.
• A dark variant would be nice. (Do we want potential future theming to be displayed here as well? Then the gradient is a no-go.)
• The logo is too small and not really aligned with the text
• There's no favicon in the browser tab

What do you think?

[zefhemel]

Oh my, this looks really great. I'll give it a try soon!

If you want to look at the styling of other parts of SB too I definitely not stop you 😀

[zefhemel]

I like the gradient, it looks cool. A dark mode (with a darker or perhaps no gradient) would be cool, but even without I'll happy to take it. It's not that I spend a lot of time on the login page but every time I see it it's a bit of an eye sore. This makes a lot better!

[majjejjam]

Thanks!

I'll continue iterating on this, maybe lightening the gradient for the light version, and adding a dark version. I also thought about adding the SilverBullet logo to the top of the page (only keeping "Login" in the box) and making it a link to silverbullet.md, and remove the "What is SilverBullet?" link. Alternatively, just show the logo in the dialogue and don't mention logging in, but this might make the page less clear for some users.

I think SilverBullet looks really good in other places! But I'll gladly have a look and see if I'm able to make any improvements.

Also, I'm entering exam period, so work on this might be going a bit slow, just so you're aware.