Updated styling, little cleaning up

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>