From d5a32de32ece8dcb992953284aac038b32e1ca59 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 6 Jul 2024 21:12:07 +0200
Subject: [PATCH] Convert login screen to tailwind

---
 src/screens/Login.vue | 151 +++++-------------------------------------
 1 file changed, 18 insertions(+), 133 deletions(-)

diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index e89f290..4ff4378 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="login-screen">
-    <div class="content-wrapper">
-      <h1 class="main-title">NEW QUEST</h1>
+  <div class="login-screen bg-gray-300">
+    <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
+    <div class="content-wrapper z-20 w-full h-dvh flex items-center justify-between flex-col relative">
+      <div class="filler"></div>
+      <h1 class="main-title mt-[115px] text-center text-6xl">NEW QUEST</h1>
       <form @submit.prevent="loginFunc">
-        <div class="content-elements">
-          <div class="login-form">
-            <div class="form-field">
-              <label for="username">Username</label>
-              <input id="username" v-model="username" type="text" name="username" required autofocus />
+        <div class="content-elements my-[80px] mx-0 w-full flex flex-col gap-[24px]">
+          <div class="login-form w-full grid gap-[15px]">
+            <div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+              <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
+              <input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
             </div>
-            <div class="form-field">
-              <label for="password">Password</label>
-              <input id="password" v-model="password" type="password" name="password" required />
+            <div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+              <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
+              <input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
             </div>
           </div>
-          <div class="row-buttons">
-            <button class="button btn-cyan" type="submit"><span>PLAY</span></button>
-            <button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
-            <button class="button btn-cyan"><span>CREDITS</span></button>
+          <div class="row-buttons flex justify-center sm:gap-[15px] gap-[8px]">
+            <button class="button btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
+            <button class="button btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
+            <button class="button btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
           </div>
         </div>
       </form>
@@ -99,121 +101,4 @@ async function registerFunc() {
   socket.setToken(response.token)
   socket.initConnection()
 }
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/scss/main';
-
-.login-screen {
-  &::before {
-    content: '';
-    position: absolute;
-    background-image: url('/assets/shapes/select-screen-bg-shape.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% cover;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    pointer-events: none;
-  }
-  background-color: $dark-gray;
-
-  .content-wrapper {
-    z-index: 2;
-    width: 100%;
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
-    position: relative;
-    &::before {
-      content: '';
-    }
-
-    .content-elements {
-      margin: 80px 0;
-      width: inherit;
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-
-      .login-form {
-        width: inherit;
-        display: grid;
-        gap: 15px;
-
-        .form-field {
-          display: flex;
-          flex-direction: column;
-          background-color: rgba($white, 0.5);
-          border-radius: 3px;
-          border: $light-gray 1px solid;
-          min-width: 500px;
-          margin: 0 auto;
-
-          label {
-            color: $black;
-            background-color: rgba($white, 0.5);
-            padding: 4px;
-            font-size: 0.875rem;
-            border-radius: 3px 3px 0 0;
-          }
-
-          input {
-            padding: 4px;
-            font-size: 0.875rem;
-
-            &:focus-visible {
-              outline: none;
-            }
-          }
-        }
-      }
-
-      .row-buttons {
-        display: flex;
-        justify-content: center;
-        gap: 15px;
-
-        .button {
-          padding: 8px 0;
-          min-width: 100px;
-
-          span {
-            margin: auto;
-          }
-        }
-      }
-    }
-  }
-
-  .main-title {
-    margin-top: 115px;
-    text-align: center;
-    font-size: 4rem;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  // Mobile screens (< 450px)
-  @media screen and (max-width: 550px) {
-    .content-wrapper {
-      .content-elements {
-        .login-form {
-          .form-field {
-            width: 100%;
-            min-width: unset;
-          }
-        }
-        .row-buttons {
-          gap: 8px;
-        }
-      }
-    }
-  }
-}
-</style>
+</script>
\ No newline at end of file