Updated styling, little cleaning up

public/assets/icons/close-button-white.svg

@@ -1 +1 @@
-<svg width="49" xmlns="http://www.w3.org/2000/svg" height="49" id="screenshot-2eeb1bb6-24d8-8068-8004-52a064185289" viewBox="0 0 49 49" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2eeb1bb6-24d8-8068-8004-52a064185289" height="800px" width="800px" rx="0" ry="0" style="fill: rgb(255, 255, 255);"><g id="shape-2eeb1bb6-24d8-8068-8004-52a06419c052"><g class="fills" id="fills-2eeb1bb6-24d8-8068-8004-52a06419c052"><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" style="fill: none;"/></g><g id="strokes-2eeb1bb6-24d8-8068-8004-52a06419c052" class="strokes"><g class="outer-stroke-shape"><defs><mask id="outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" x="-2.6488906871192848" y="-2.6488906871192848" width="54.29778137423857" height="54.29778137423857" maskUnits="userSpaceOnUse"><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke: white; stroke-width: 6;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: black; stroke: none;"/></mask><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" id="stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0"/></defs><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" mask="url(#outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0)" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke-width: 3; stroke: none; stroke-opacity: 1;"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0" viewBox="5853.755 6642.086 23.788 23.788" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><g class="fills" id="fills-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><path d="M5867.837,6654.000L5877.045,6644.792C5877.199,6644.649,5877.322,6644.476,5877.408,6644.284C5877.493,6644.093,5877.539,6643.886,5877.543,6643.676C5877.546,6643.466,5877.508,6643.258,5877.429,6643.063C5877.350,6642.869,5877.234,6642.692,5877.085,6642.544C5876.937,6642.395,5876.760,6642.278,5876.565,6642.200C5876.371,6642.121,5876.163,6642.082,5875.953,6642.086C5875.743,6642.090,5875.536,6642.136,5875.344,6642.221C5875.153,6642.307,5874.980,6642.430,5874.837,6642.583L5865.629,6651.792L5856.420,6642.583C5856.124,6642.307,5855.732,6642.157,5855.328,6642.164C5854.923,6642.171,5854.537,6642.335,5854.250,6642.622C5853.964,6642.908,5853.800,6643.294,5853.793,6643.699C5853.786,6644.104,5853.936,6644.495,5854.212,6644.792L5863.420,6654.000L5854.212,6663.208C5853.919,6663.501,5853.755,6663.898,5853.755,6664.312C5853.755,6664.726,5853.919,6665.124,5854.212,6665.417C5854.505,6665.709,5854.902,6665.874,5855.316,6665.874C5855.730,6665.874,5856.127,6665.709,5856.420,6665.417L5865.629,6656.208L5874.837,6665.417C5875.130,6665.709,5875.527,6665.874,5875.941,6665.874C5876.355,6665.874,5876.753,6665.709,5877.045,6665.417C5877.338,6665.124,5877.502,6664.726,5877.502,6664.312C5877.502,6663.898,5877.338,6663.501,5877.045,6663.208L5867.837,6654.000ZZ" style="fill: rgb(255, 255, 255);"/></g></g></svg>

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 {
+h1, h2, h3, h4, h5, h6, button, a {
-  font-family: GentiumPlus, serif;
+  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;
+  max-width: 1000px;
-  min-width: 350px;
+  min-width: 500px;
-  min-height: 300px;
+  min-height: 280px;
-  border-radius: 20px;
+  background-color: rgba($dark-gray, 0.8);
-  background-color: rgba($white, 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;
+    min-height: 50px;
-    height: 60px;
     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;
+      width: 20px;
-      height: 40px;
+      height: 20px;
       margin: 0;
       padding: 0;
       position: relative;
@@ -123,16 +130,9 @@ onUnmounted(() => {
         height: 100%;
       }
 
-      &:hover::after {
+      &:hover {
-        content: '';
+        transform: rotate(180deg);
-        position: absolute;
+        transition: ease-in-out 0.3s;
-        width: 38px;
-        height: 38px;
-        left: 1px;
-        top: 1px;
-        border-radius: 50%;
-        background-color: $lilac;
-        z-index: -1;
       }
     }
   }
@@ -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;
-    }
+      border-width: 1px;
-
-    p {
-      color: $black;
     }
 
     .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);
+          background-color: rgba($white, 0.8);
-          padding: 10px;
+          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>