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 <[email protected]>

nuxt.config.ts

@@ -304,6 +304,9 @@ export default defineNuxtConfig({
   nitro: {
     moduleSideEffects: ['@vintl/compact-number/locale-data'],
   },
+  devtools: {
+    enabled: true,
+  },
 })
 
 function getApiUrl() {

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^6.1.2",
+    "@nuxt/devtools": "^0.7.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/turnstile": "^0.5.0",
     "@types/node": "^20.1.0",

pages/auth.vue

@@ -1,159 +1,83 @@
 <template>
-  <div>
-    <NuxtPage class="auth-container universal-card" :route="route" />
-  </div>
+  <NuxtPage class="auth-container universal-card" />
 </template>
 
-<script setup>
-const route = useRoute()
-</script>
-
-<style lang="scss">
+<style>
 .auth-container {
-  width: 25rem;
-  padding: var(--gap-xl);
-  background-color: var(--color-raised-bg);
-  border-radius: var(--radius-lg);
+  width: 30rem;
   margin: 2rem auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
 
-  h1 {
-    margin: 0;
-    color: var(--color-contrast);
-  }
-
-  h2 {
-    font-size: 1.25rem;
-    font-weight: 500;
-    margin: 0;
-    color: var(--color-contrast);
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .btn {
-    font-weight: 700;
-    min-height: 2.5rem;
-    text-decoration: none;
-  }
+.auth-container h1 {
+  font-size: var(--font-size-xl);
+  margin: 0 0 -1rem 0;
+  color: var(--color-contrast);
+}
 
-  input {
-    width: 100%;
-    border: none;
-    outline: none;
-  }
+.auth-container p {
+  margin: 0;
+}
 
-  .btn.right-icon svg {
-    margin-left: var(--gap-sm);
-  }
+.auth-container .btn {
+  font-weight: 700;
+  min-height: 2.5rem;
+  text-decoration: none;
+}
 
-  .btn.left-icon svg {
-    margin-right: var(--gap-sm);
-  }
+.centered-btn {
+  margin-inline: auto;
+}
 
-  .input-group {
-    display: flex;
-    gap: var(--gap-md);
-    flex-wrap: wrap;
-  }
+.btn.continue-btn svg {
+  margin: 0 0 0 0.5rem;
+}
 
-  button.checkbox {
-    appearance: none !important;
-    border: none;
-  }
+.third-party {
+  display: grid;
+  gap: var(--gap-md);
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+}
 
-  .continue-btn {
-    margin-left: auto;
-    margin-right: auto;
-    margin-block-start: 0;
-  }
+.third-party .btn {
+  width: 100%;
+  vertical-align: middle;
+}
 
-  .continue-btn svg {
-    margin: 0 0 0 0.5rem;
-  }
+.third-party .btn svg {
+  margin-right: var(--gap-sm);
+  width: 1.25rem;
+  height: 1.25rem;
+}
 
-  // login styles
-  .third-party {
-    display: grid;
-    gap: var(--gap-md);
-    grid-template-columns: repeat(2, 1fr);
-    width: 100%;
-  }
+@media screen and (max-width: 25.5rem) {
   .third-party .btn {
-    width: 100%;
-    justify-content: center;
-    vertical-align: middle;
-  }
-  .third-party .btn svg {
-    margin-right: var(--gap-sm);
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .discord-btn {
-    color: #ffffff;
-    background-color: #5865f2;
-  }
-
-  .apple-btn {
-    color: var(--color-accent-contrast);
-    background-color: var(--color-contrast);
-  }
-
-  .google-btn {
-    color: #ffffff;
-    background-color: #4285f4;
-  }
-
-  .gitlab-btn {
-    color: #ffffff;
-    background-color: #fc6d26;
-  }
-
-  .github-btn {
-    color: #ffffff;
-    background-color: #8740f1;
-  }
-
-  .microsoft-btn {
-    color: var(--color-accent-contrast);
-    background-color: var(--color-contrast);
-  }
-
-  .text-divider {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .text-divider div {
-    height: 2px;
-    width: 100%;
-    max-width: 5rem;
-    opacity: 40%;
-    border-radius: var(--radius-max);
-    background-color: var(--color-base);
+    grid-column: 1 / 3;
   }
+}
 
-  .text-divider span {
-    margin-inline: var(--gap-sm);
-  }
+.turnstile {
+  display: none;
+}
 
-  @media screen and (max-width: 25.5rem) {
-    width: auto;
-    margin: 1rem;
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
 
-    .third-party .btn {
-      grid-column: 1 / 3;
-    }
-  }
+.auth-form .auth-form__input {
+  width: 100%;
+  flex-basis: auto;
 }
 
-.auth-page-container {
+.auth-form__additional-options {
+  align-items: center;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   gap: var(--gap-md);
 }
 </style>