Styling changes and styling for Modal

src/components/utilities/Modal.vue

@@ -2,11 +2,11 @@
   <Teleport to="body" v-if="isModalOpen">
   <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }">
     <div class="modal-header" @mousedown="startDrag">
-      <h3>Modal</h3>
-      <button @click="close">X</button>
+      <slot name="modal-header"/>
+      <button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
     </div>
     <div class="modal-body">
-      <slot />
+      <slot name="modal-body"/>
     </div>
   </div>
   </Teleport>
@@ -79,21 +79,76 @@ onUnmounted(() => {
   left: 0;
   width: 30%;
   height: 40%;
-  border-radius: 30px;
-  background-color: #cfcfcf;
+  border-radius: 20px;
+  background-color: rgba($white, 0.8);
   z-index: 999;
 
   // make draggable
   .modal-header {
     cursor: move;
-    background-color: #333;
-    color: white;
-    padding: 3px 15px;
-    border-radius: 5px 5px 0 0;
+    background-color: rgba($purple, 0.6);
+    color: $white;
+    padding: 0 20px;
+    border-radius: 20px 20px 0 0;
+    height: 3.75rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .modal-title {
+      margin: 0;
+    }
+
+    button {
+      width: 40px;
+      height: 40px;
+      margin: auto 0;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+      position: relative;
+
+      img {
+        width: inherit;
+        height: inherit;
+      }
+
+      &:hover {
+        cursor: pointer;
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 38px;
+          height: 38px;
+          left: 1px;
+          top: 1px;
+          border-radius: 100%;
+          background-color: $lilac;
+          z-index: -1;
+        }
+      }
+    }
   }
 
   .modal-body {
     padding: 15px;
+    button {
+      padding: 10px 16px;
+      background-color: rgba($purple, 0.75);
+      border: 2px solid rgba($white, 0.5);
+      border-radius: 5px;
+      color: $white;
+    }
+    .modal-form {
+      .form-fields {
+        display: flex;
+        flex-direction: column;
+        input {
+          max-width: 250px;
+        }
+      }
+    }
   }
 }
 </style>