Polish sign-in and sign-up pages

[ErnWong]

User Story
As a user
I want a polished split bill user interface
So I don't mistake Sp/it with a scam app or a malware-loaded phishing site.
(as well as so that I feel more comfortable using Sp/it and get the impression that Sp/it is not buggy).

Motivation: The login page is where the user expects a fair bit of trust in the system. If this part of the system looks unreliable, how could they feel comfortable to rely on the rest of the system?

Priority
[]: High
[x]: Medium
[]: Low

Describe the solution you want to implement
Adjust the page's styles inspired by the hi-fi prototypes:

Compare it with what we have currently:

In particular:

• Use rounded buttons, with simple Title Case labels for buttons.
• Use a similar button to navigate to the signup page.
• Introduce small corner radius to text-fields.
• Decrease the text-field heights
• Move text-field labels into the place-holder position
• Ensure that the outer container grows with its contents
• Give ample spacing between components
• Make sure spacing between components and outer margins/paddings are consistent and have appropriate proportions.
• Flush-left the Sign-in header with the text-field
• Style the error messages appropriately too so it feels consistent with the page's design language. Maybe, for example, it uses rounded bottom corners. To make them not jarringly appear and push the text-fields downwards, maybe a small 0.3 sec vertical transition would help, but some experimentation would be needed.
• Allow Enter shortcut to login. See Press enter on Login Screen to log in #135

Describe alternatives you've considered
TODO

Issue Dependencies
TODO

Additional context
TODO