From 7e11a86604b3f452a6835a6e675d327bf70377fe Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 10 Jun 2024 00:36:52 +0200
Subject: [PATCH] Moved login css back to screen component, added new
 background, temporarily commented-out the full-screen btn in modal component

---
 src/assets/scss/login.scss         | 105 ---------------------
 src/components/screens/Login.vue   | 143 ++++++++++++++++++++++++++---
 src/components/utilities/Modal.vue |   2 +-
 3 files changed, 130 insertions(+), 120 deletions(-)
 delete mode 100644 src/assets/scss/login.scss

diff --git a/src/assets/scss/login.scss b/src/assets/scss/login.scss
deleted file mode 100644
index 71bb81d..0000000
--- a/src/assets/scss/login.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '@/assets/scss/main';
-
-#bg-img {
-  height: 100vh;
-  width: 100%;
-  position: absolute;
-  z-index: -1;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  object-fit: cover;
-}
-
-.content-wrapper {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-
-  .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;
-        min-width: 400px;
-        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: 8px;
-
-      .button {
-        padding: 10px 0;
-        min-width: 100px;
-
-        span {
-          margin: auto;
-        }
-      }
-    }
-  }
-}
-
-.main-title {
-  margin-top: 115px;
-  text-align: center;
-  font-size: 3rem;
-  text-shadow: 
-    -1px -1px 0 $gray,
-    1px -1px 0 $gray,
-    -1px 1px 0 $gray,
-    1px 1px 0 $gray;
-}
-
-a {
-  text-decoration: none;
-}
-
-// Mobile screens (< 450px)
-@media screen and (max-width: 450px) {
-  .content-wrapper {
-    .content-elements {
-      .login-form {
-        .form-field {
-          width: 100%;
-          min-width: unset;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index 54aed7c..3f5cf59 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="content-wrapper">
-    <h1 class="main-title">NEW QUEST</h1>
-    <form @submit.prevent="loginFunc">
-      <div class="content-elements">
-        <div class="login-form">
+  <div class="login-screen">
+    <div class="content-wrapper">
+      <h1 class="main-title">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 />
@@ -12,17 +13,17 @@
               <label for="password">Password</label>
               <input 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>
         </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>
-      </div>
-    </form>
+      </form>
+    </div>
   </div>
   <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
-  <img draggable="false" src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
 </template>
 
 <script setup lang="ts">
@@ -74,5 +75,119 @@ async function registerFunc() {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/scss/login';
+@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;
+          min-width: 400px;
+          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: 8px;
+
+        .button {
+          padding: 10px 0;
+          min-width: 100px;
+
+          span {
+            margin: auto;
+          }
+        }
+      }
+    }
+  }
+
+  .main-title {
+    margin-top: 115px;
+    text-align: center;
+    font-size: 3rem;
+    text-shadow:
+      -1px -1px 0 $gray,
+      1px -1px 0 $gray,
+      -1px 1px 0 $gray,
+      1px 1px 0 $gray;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  // Mobile screens (< 450px)
+  @media screen and (max-width: 450px) {
+    .content-wrapper {
+      .content-elements {
+        .login-form {
+          .form-field {
+            width: 100%;
+            min-width: unset;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index b1eefb7..5e539f9 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -4,7 +4,7 @@
       <div class="modal-header" @mousedown="startDrag">
         <slot name="modalHeader" />
         <div class="buttons">
-          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>
+<!--          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
           <button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
         </div>
       </div>