Improve login UI (vercel#53)

* style: improve the login page UI

This commit adjusts the padding in the Input element and reduces it across the board.
We also no longer italicize the "Or" on the signin page between email login and social login.

This fixes vercel#48

* fix: don't enable sign in button if email input still empty

* fix: disable signup button until an email and password are present

Author: needcaffeine

components/ui/Input/Input.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
+  @apply bg-primary py-2 px-3 w-full appearance-none transition duration-150 ease-in-out border border-accents-3 text-accents-6;
 }
 
 .root:focus {

pages/signin.js

@@ -111,7 +111,7 @@ const SignIn = () => {
                 variant="slim"
                 type="submit"
                 loading={loading}
-                disabled={!password.length}
+                disabled={!password.length || !email.length}
               >
                 Sign in
               </Button>
@@ -150,7 +150,7 @@ const SignIn = () => {
             className="border-t border-accents-2 flex-grow mr-3"
             aria-hidden="true"
           ></div>
-          <div className="text-accents-4 italic">Or</div>
+          <div className="text-accents-4">Or</div>
           <div
             className="border-t border-accents-2 flex-grow ml-3"
             aria-hidden="true"

pages/signup.js

@@ -78,7 +78,7 @@ const SignUp = () => {
             variant="slim"
             type="submit"
             loading={loading}
-            disabled={loading}
+            disabled={loading || !email.length || !password.length}
           >
             Sign up
           </Button>