impr: slightly rework the login page

frontend/src/html/pages/login.html

@@ -6,7 +6,10 @@
     <p>Login/Signup is disabled or the server is down/under maintenance.</p>
   </div>
   <div class="register side">
-    <div class="title">register</div>
+    <div class="title">
+      <i class="fas fa-user-plus"></i>
+      register
+    </div>
     <form action="" autocomplete="nope">
       <input
         type="text"
@@ -42,14 +45,33 @@
       />
       <button type="submit" disabled>
         <i class="fas fa-user-plus"></i>
-        Sign Up
+        sign up
       </button>
     </form>
   </div>
   <div class="login side">
-    <div class="title">login</div>
-    <button class="text" id="forgotPasswordButton">Forgot password?</button>
+    <div class="title">
+      <i class="fas fa-sign-in-alt"></i>
+      login
+    </div>
     <form action="">
+      <div class="providers">
+        <button class="signInWithGoogle">
+          <i class="fab fa-google"></i>
+          <!-- google sign In -->
+          <!-- google -->
+        </button>
+        <button class="signInWithGitHub">
+          <i class="fab fa-github"></i>
+          <!-- github sign In -->
+          <!-- github -->
+        </button>
+      </div>
+      <div class="orWithLine">
+        <div class="line"></div>
+        <div class="text">or</div>
+        <div class="line"></div>
+      </div>
       <input
         name="current-email"
         type="email"
@@ -65,22 +87,14 @@
       <div>
         <label id="rememberMe" class="checkbox">
           <input type="checkbox" checked />
-          <div>Remember me</div>
+          <div>remember me</div>
         </label>
       </div>
       <button type="submit" class="signIn">
         <i class="fas fa-sign-in-alt"></i>
-        Sign In
-      </button>
-      <div style="font-size: 0.75rem; text-align: center">or</div>
-      <button class="signInWithGoogle">
-        <i class="fab fa-google"></i>
-        Google Sign In
-      </button>
-      <button class="signInWithGitHub">
-        <i class="fab fa-github"></i>
-        GitHub Sign In
+        sign in
       </button>
     </form>
+    <button class="text" id="forgotPasswordButton">forgot password?</button>
   </div>
 </div>

frontend/src/styles/login.scss

@@ -15,27 +15,48 @@
     input[type="email"],
     input[type="password"],
     input[type="text"] {
-      width: 15rem;
+      width: 17rem;
+    }
+
+    .title {
+      display: inline-flex;
+      align-items: baseline;
+      color: var(--sub-color);
+      i {
+        margin-right: 0.5em;
+      }
     }
 
     &.login {
-      grid-template-areas:
-        "title forgotButton"
-        "form form";
-
-      .title {
-        grid-area: title;
-      }
-
       #forgotPasswordButton {
-        grid-area: forgotButton;
+        // height: 0;
         font-size: 0.75rem;
-        line-height: 0.75rem;
-        margin-bottom: -0.5em;
+        // margin-left: -0.5em;
+        justify-content: right;
       }
 
-      form {
-        grid-area: form;
+      .providers {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+
+      .orWithLine {
+        // height: 2.25rem;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+        gap: 1rem;
+        .line {
+          background: var(--sub-alt-color);
+          width: 100%;
+          height: 0.25em;
+          border-radius: var(--roundness);
+        }
+      }
+      .checkbox {
+        height: 1.5rem;
+        align-items: center;
       }
     }
   }

frontend/src/styles/media-queries-purple.scss

@@ -33,6 +33,19 @@
       }
     }
   }
+  .pageLogin {
+    flex-direction: column;
+    gap: 4rem;
+    .side {
+      width: 100%;
+      input[type="email"],
+      input[type="password"],
+      input[type="text"] {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
   .pageTest {
     #liveStatsTextTop,
     #liveStatsTextBottom {