Modal now uses tailwind

src/components/utilities/Modal.vue

@@ -1,18 +1,23 @@
 <template>
   <Teleport to="body">
-    <div class="modal-container" v-if="isModalOpenRef" :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
+    <div v-if="isModalOpenRef"
-      <div class="modal-header" @mousedown="startDrag">
+         class="fixed bg-opacity-80 bg-gray-800 border-2 border-cyan-800 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
+         :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-b border-cyan-800">
         <slot name="modalHeader" />
-        <div class="buttons">
+        <div class="flex gap-2.5">
-          <!--          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
+          <button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-          <button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
+            <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+          </button>
         </div>
       </div>
-      <div class="modal-body">
+      <div class="overflow-auto flex-grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="resize" @mousedown="startResize" />
+        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize"
+             class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
+             @mousedown="startResize" />
       </div>
-      <div v-if="$slots.modalFooter" class="modal-footer">
+      <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-t border-cyan-800">
         <slot name="modalFooter" />
       </div>
     </div>
@@ -186,143 +191,3 @@ function handleResize() {
   }
 }
 </script>
-
-<style lang="scss">
-@import '@/assets/scss/main';
-
-.modal-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba($dark-gray, 0.8);
-  border: 2px solid $dark-cyan;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  backdrop-filter: blur(5px);
-  box-shadow: 0 0 10px rgba($black, 0.5);
-
-  .modal-header {
-    cursor: move;
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    gap: 30px;
-    align-items: center;
-    border-bottom: 1px solid $dark-cyan;
-
-    .modal-title {
-      margin: 0;
-      font-weight: 400;
-      flex-shrink: 0;
-    }
-
-    .buttons {
-      display: flex;
-      gap: 10px;
-
-      button {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        padding: 0;
-        position: relative;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-
-        &:hover {
-          transform: rotate(180deg);
-          transition: ease-in-out transform 0.3s;
-        }
-      }
-    }
-  }
-
-  .modal-body {
-    overflow: auto;
-    flex-grow: 1;
-
-    .container {
-      margin: 15px;
-    }
-
-    .resize {
-      filter: invert(60%);
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 20px;
-      height: 20px;
-      cursor: nwse-resize;
-    }
-
-    .submit {
-      display: inline-block;
-      button {
-        margin-right: 20px;
-      }
-    }
-
-    button {
-      padding: 6px 15px;
-      min-width: 100px;
-    }
-
-    .modal-form {
-      display: inline;
-
-      .form-fields {
-        .form-field {
-          display: flex;
-          flex-direction: column;
-          margin-bottom: 20px;
-
-          label {
-            margin-bottom: 5px;
-            font-family: $titles;
-          }
-
-          input {
-            max-width: 250px;
-            border-radius: 5px;
-          }
-
-          &.two-col {
-            flex-direction: row;
-            gap: 20px;
-            .field {
-              display: flex;
-              flex-direction: column;
-              margin-bottom: 0;
-              input {
-                max-width: 105px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .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>