From f4cebbcece76db66e9dd1db3951f0b03953307fa Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Thu, 24 Nov 2022 01:59:50 +0000
Subject: [PATCH] Fix up login and register from styling

---
 src/components/login/LoginForm.svelte       | 17 ++++++++++++++
 src/components/register/RegisterForm.svelte | 26 +++++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/login/LoginForm.svelte b/src/components/login/LoginForm.svelte
index 9a6b9d7..f099eac 100644
--- a/src/components/login/LoginForm.svelte
+++ b/src/components/login/LoginForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {createEventDispatcher} from "svelte";
+  import {link, navigate} from "svelte-navigator";
 
   let inputEmail: string = "";
   let inputPassword: string = "";
@@ -27,6 +28,9 @@
   <div class="login-action">
     <section>
       <button type="submit">Login</button>
+      <div class="flex-gap" />
+      <!-- <button on:click={() => navigate("/forgot-password")} class="grey-btn">Forgot My Password</button> -->
+      <button on:click={() => navigate("/register")} class="grey-btn">Register</button>
     </section>
   </div>
 </form>
@@ -83,6 +87,19 @@
       background: var(--bg-panel-action);
       padding: 24px;
       border-radius: 0 0 var(--large-curve) var(--large-curve);
+
+      > section {
+        display: flex;
+
+        > .grey-btn {
+          margin-left: 8px;
+          background-color: #616161;
+        }
+
+        > .flex-gap {
+          flex-grow: 1;
+        }
+      }
     }
   }
 </style>
diff --git a/src/components/register/RegisterForm.svelte b/src/components/register/RegisterForm.svelte
index 8ae5a78..065c061 100644
--- a/src/components/register/RegisterForm.svelte
+++ b/src/components/register/RegisterForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {createEventDispatcher} from "svelte";
+  import {navigate} from "svelte-navigator";
   import {getEnv} from "~/utils/env";
 
   export let err: {message: string; log_id: string};
@@ -42,7 +43,7 @@
 
     <h2>Account</h2>
 
-    <section>
+    <section class="first-section">
       <label for="email">Email</label>
       <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
 
@@ -124,6 +125,8 @@
     {/if}
     <section>
       <button type="submit">Register</button>
+      <div class="flex-gap" />
+      <button on:click={() => navigate("/login")} class="grey-btn">Login</button>
     </section>
   </div>
 </form>
@@ -174,11 +177,15 @@
       }
 
       > section {
-        padding-bottom: 16px;
+        padding-bottom: 24px;
         display: grid;
         grid-template-columns: repeat(2, auto);
         gap: 16px;
 
+        &.first-section {
+          padding-bottom: 8px;
+        }
+
         > label {
           align-self: center;
         }
@@ -217,10 +224,25 @@
       background: var(--bg-panel-action);
       padding: 24px;
       border-radius: 0 0 var(--large-curve) var(--large-curve);
+
+      > section {
+        display: flex;
+
+        > .grey-btn {
+          margin-left: 0 8px;
+          background-color: #616161;
+        }
+
+        > .flex-gap {
+          flex-grow: 1;
+        }
+      }
     }
   }
 
   #password-constraints > ul {
+    margin: 0;
+
     > li.follows-constraint {
       color: darken(#bdd358, 5);
     }