Refine the auth design; clean up the layout and styles there (#1240)

* Refine the auth design; clean up the layout and styles there

* It doesn't really sing, does it

* Tweak auth form spacing and wording

* Final tweaks to improved auth design

* Merge

* fix lockfile

---------

Co-authored-by: Prospector <prospectordev@gmail.com>

pages/auth/reset-password.vue

@@ -1,31 +1,69 @@
 <template>
-  <div class="auth-page-container">
+  <div>
     <h1>Reset your password</h1>
-    <template v-if="step === 'choose_method'">
-      <p>
-        Enter your email below and we'll send a recovery link to allow you to recover your account.
-        <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
-      </p>
-      <label for="email" hidden>Email or username</label>
-      <input id="email" v-model="email" type="text" placeholder="Email or username" />
-      <button class="btn btn-primary continue-btn" @click="recovery">Send recovery email</button>
-    </template>
-    <template v-else-if="step === 'passed_challenge'">
-      <p>Enter your new password below to gain access to your account.</p>
-      <label for="password" hidden>Password</label>
-      <input id="password" v-model="newPassword" type="password" placeholder="Password" />
-      <label for="confirm-password" hi2dden>Password</label>
-      <input
-        id="confirm-password"
-        v-model="confirmNewPassword"
-        type="password"
-        placeholder="Confirm password"
-      />
-      <button class="btn btn-primary continue-btn" @click="changePassword">Reset password</button>
-    </template>
+    <section class="auth-form">
+      <template v-if="step === 'choose_method'">
+        <p>
+          Enter your email below and we'll send a recovery link to allow you to recover your
+          account.
+          <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
+        </p>
+
+        <div class="iconified-input">
+          <label for="email" hidden>Email or username</label>
+          <MailIcon />
+          <input
+            id="email"
+            v-model="email"
+            type="text"
+            class="auth-form__input"
+            placeholder="Email"
+          />
+        </div>
+
+        <button class="btn btn-primary centered-btn" @click="recovery">
+          <SendIcon /> Send recovery email
+        </button>
+      </template>
+      <template v-else-if="step === 'passed_challenge'">
+        <p>Enter your new password below to gain access to your account.</p>
+
+        <div class="iconified-input">
+          <label for="password" hidden>Password</label>
+          <KeyIcon />
+          <input
+            id="password"
+            v-model="newPassword"
+            type="password"
+            class="auth-form__input"
+            placeholder="Password"
+          />
+        </div>
+
+        <div class="iconified-input">
+          <label for="confirm-password" hidden>Password</label>
+          <KeyIcon />
+          <input
+            id="confirm-password"
+            v-model="confirmNewPassword"
+            type="password"
+            class="auth-form__input"
+            placeholder="Confirm password"
+          />
+        </div>
+
+        <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
+          Reset password
+        </button>
+      </template>
+    </section>
   </div>
 </template>
 <script setup>
+import { SendIcon } from 'omorphia'
+import MailIcon from 'assets/icons/auth/mail.svg'
+import KeyIcon from 'assets/icons/auth/key.svg'
+
 useHead({
   title: 'Reset Password - Modrinth',
 })
@@ -35,7 +73,6 @@ if (auth.value.user) {
   await navigateTo('/dashboard')
 }
 
-const data = useNuxtApp()
 const route = useRoute()
 
 const step = ref('choose_method')
@@ -60,14 +97,14 @@ async function recovery() {
       },
     })
 
-    data.$notify({
+    addNotification({
       group: 'main',
       title: 'Email sent',
       text: 'An email with instructions has been sent to you if the email was previously saved on your account.',
       type: 'success',
     })
   } catch (err) {
-    data.$notify({
+    addNotification({
       group: 'main',
       title: 'An error occurred',
       text: err.data ? err.data.description : err,
@@ -92,7 +129,7 @@ async function changePassword() {
       },
     })
 
-    data.$notify({
+    addNotification({
       group: 'main',
       title: 'Password successfully reset',
       text: 'You can now log-in into your account with your new password.',
@@ -100,7 +137,7 @@ async function changePassword() {
     })
     await navigateTo('/auth/sign-in')
   } catch (err) {
-    data.$notify({
+    addNotification({
       group: 'main',
       title: 'An error occurred',
       text: err.data ? err.data.description : err,