Updated styling, little cleaning up

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>