From a9538e6cf0ed315f75d913f2cca7b08ce3ddc0e1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 21 Dec 2022 01:04:04 +0800
Subject: [PATCH] Beautify log in page a little

---
 src/pages/login.css | 26 ++++++++++++++++++++++++++
 src/pages/login.jsx |  6 ++++--
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/login.css

diff --git a/src/pages/login.css b/src/pages/login.css
new file mode 100644
index 00000000..69cc6c28
--- /dev/null
+++ b/src/pages/login.css
@@ -0,0 +1,26 @@
+#login {
+  padding: 16px;
+  background-image: radial-gradient(
+    closest-side at 50% 50%,
+    var(--bg-color),
+    transparent
+  );
+}
+
+#login .error {
+  color: var(--red-color);
+}
+
+#login label p {
+  margin: 0 0 0.25em 0;
+  padding: 0;
+  text-transform: uppercase;
+  font-size: 90%;
+  font-weight: bold;
+  color: var(--text-insignificant-color);
+}
+
+#login input {
+  display: block;
+  width: 100%;
+}
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 39975136..9dd2dc76 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -1,3 +1,5 @@
+import './login.css';
+
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import Loader from '../components/loader';
@@ -53,7 +55,7 @@ function Login() {
   };
 
   return (
-    <main class="box" style={{ textAlign: 'center' }}>
+    <main id="login" style={{ textAlign: 'center' }}>
       <form onSubmit={onSubmit}>
         <h1>Log in</h1>
         <label>
@@ -82,8 +84,8 @@ function Login() {
           <button class="large" disabled={uiState === 'loading'}>
             Log in
           </button>{' '}
-          <Loader hidden={uiState !== 'loading'} />
         </p>
+        <Loader hidden={uiState !== 'loading'} />
         <hr />
         <p>
           <a href="https://joinmastodon.org/servers" target="_blank">