Updated styling, little cleaning up

src/assets/scss/_variables.scss

@@ -1,8 +1,6 @@
 // Colors
 $white: #fff;
 $black: #000;
-$purple: #4741e6;
-$lilac: #7b76ff;
 $light-blue: #00c2ff;
 $red: #d50000;
 $dark-red: #b30000;
@@ -12,4 +10,5 @@ $dark-gray: #313638;
 $light-gray: #d3d3d3;
 $blue-gray: #778899;
 $cyan: #368f8b;
+$dark-cyan: #376362;
 $green: #09ad19;

src/assets/scss/main.scss

@@ -1,11 +1,6 @@
 @import '@/assets/scss/_variables';
 
 // Fonts
-@font-face {
-  font-family: GentiumPlus;
-  src: url('@/assets/fonts/Gentium_plus.ttf');
-}
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 body {
@@ -20,8 +15,8 @@ body {
   user-select: none; /* Standard syntax */
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: GentiumPlus, serif;
+h1, h2, h3, h4, h5, h6, button, a {
+  font-family: "Poppins";
   color: $white;
 }
 
@@ -30,8 +25,6 @@ p, span, li, label {
   color: $white;
 }
 button, a {
-  font-family: "Poppins";
-  color: $white;
   font-weight: 500;
   text-shadow: 0 4px 6px rgba($black, 0.25);
 }

src/components/screens/Characters.vue

@@ -35,7 +35,7 @@
 
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
     <template #modal-header>
-      <h2 class="modal-title">Create your character</h2>
+      <h3 class="modal-title">Create your character</h3>
     </template>
 
     <template #modal-body>
@@ -45,10 +45,14 @@
           <input v-model="name" name="name" id="name" />
         </div>
         <div class="submit">
-          <button class="btn-cyan" type="submit">Create</button>
+          <button class="btn-cyan" type="submit">CREATE</button>
         </div>
       </form>
-      <button class="btn-cyan" @click="isModalOpen = false">Cancel</button>
+      <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+    </template>
+
+    <template #modal-footer>
+      <button class="btn-cyan">Test</button>
     </template>
   </Modal>
 </template>
@@ -258,13 +262,13 @@ function create() {
       gap: 30px;
 
       button {
-        padding: 8px 10px 8px 20px;
+        padding: 8px 10px 8px 30px;
         min-width: 100px;
         position: relative;
         border-radius: 5px;
-        font-size: 1.125rem;
+        font-size: 1.25rem;
         display: flex;
-        gap: 10px;
+        gap: 15px;
         align-items: center;
 
         span {

src/components/sprites/Character.vue

@@ -30,7 +30,7 @@
         color: '#FFF',
         fontSize: '1rem',
         strokeThickness: 4,
-        stroke: 'red'
+        stroke: '#000'
       }"
     />
     <Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk"  />

src/components/utilities/Modal.vue

@@ -8,6 +8,9 @@
       <div class="modal-body">
         <slot name="modal-body" />
       </div>
+      <div class="modal-footer">
+        <slot name="modal-footer" />
+      </div>
     </div>
   </Teleport>
 </template>
@@ -90,30 +93,34 @@ onUnmounted(() => {
   position: fixed;
   top: 0;
   left: 0;
-  max-width: 500px;
-  min-width: 350px;
-  min-height: 300px;
-  border-radius: 20px;
-  background-color: rgba($white, 0.8);
+  max-width: 1000px;
+  min-width: 500px;
+  min-height: 280px;
+  background-color: rgba($dark-gray, 0.8);
+  border: 2px solid $dark-cyan;
   z-index: 999;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
 
   .modal-header {
     cursor: move;
-    background-color: rgba($purple, 0.6);
     padding: 0 20px;
-    border-radius: 20px 20px 0 0;
-    height: 60px;
+    min-height: 50px;
     display: flex;
     justify-content: space-between;
+    gap: 30px;
     align-items: center;
+    border-bottom: 1px solid $dark-cyan;
 
     .modal-title {
       margin: 0;
+      font-weight: 400;
     }
 
     button {
-      width: 40px;
-      height: 40px;
+      width: 20px;
+      height: 20px;
       margin: 0;
       padding: 0;
       position: relative;
@@ -123,16 +130,9 @@ onUnmounted(() => {
         height: 100%;
       }
 
-      &:hover::after {
-        content: '';
-        position: absolute;
-        width: 38px;
-        height: 38px;
-        left: 1px;
-        top: 1px;
-        border-radius: 50%;
-        background-color: $lilac;
-        z-index: -1;
+      &:hover {
+        transform: rotate(180deg);
+        transition: ease-in-out 0.3s;
       }
     }
   }
@@ -141,6 +141,7 @@ onUnmounted(() => {
     max-height: 80vh;
     overflow: auto;
     padding: 15px;
+    flex-grow: 1;
 
     .submit {
       display: inline-block;
@@ -150,13 +151,10 @@ onUnmounted(() => {
     }
 
     button {
-      padding: 10px 16px;
+      padding: 6px 15px;
       min-width: 100px;
       border-radius: 5px;
-    }
-
-    p {
-      color: $black;
+      border-width: 1px;
     }
 
     .modal-form {
@@ -169,18 +167,36 @@ onUnmounted(() => {
 
         label {
           margin-bottom: 10px;
-          color: $black;
+          font-family: "Poppins";
         }
 
         input {
           max-width: 250px;
-          border: 1px solid $purple;
+          font-family: "Poppins";
+          border: 1px solid $cyan;
           border-radius: 5px;
-          background-color: rgba($white, 0.5);
-          padding: 10px;
+          background-color: rgba($white, 0.8);
+          padding: 8px 10px;
         }
       }
     }
   }
+
+  .modal-footer {
+    padding: 0 20px;
+    min-height: 50px;
+    display: flex;
+    justify-content: end;
+    gap: 30px;
+    align-items: center;
+    border-top: 1px solid $dark-cyan;
+
+    button {
+      padding: 6px 15px;
+      min-width: 100px;
+      border-radius: 5px;
+      border-width: 1px;
+    }
+  }
 }
 </style>