Remove modal- classes and re implemented styling

src/assets/scss/main.scss

@@ -81,15 +81,6 @@ input {
   }
 }
 
-.modal-form {
-  .form-fields {
-    --gap: 10px;
-    display: flex;
-    gap: var(--gap);
-    flex-wrap: wrap;
-  }
-}
-
 .input-cyan {
   padding: 8px 10px;
   font-family: $titles;

src/components/utilities/GmPanel.vue

@@ -1,16 +1,16 @@
 <template>
   <Modal :isModalOpen="gmPanelStore.isOpen" @modal:close="() => gmPanelStore.toggle()" :modal-width="1000" :modal-height="650">
     <template #modalHeader>
-      <h3 class="modal-title">GM Panel</h3>
+      <h3 class="m-0 font-medium shrink-0">GM Panel</h3>
-      <div class="gm-selector">
+      <div class="flex gap-1.5 flex-wrap">
-        <button class="btn-cyan">General</button>
+        <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">General</button>
-        <button class="btn-cyan">Users</button>
+        <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Users</button>
-        <button class="btn-cyan">Chats</button>
+        <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Chats</button>
-        <button class="btn-cyan active">Asset manager</button>
+        <button class="btn-cyan active py-1.5 px-[15px] min-w-[100px]">Asset manager</button>
       </div>
     </template>
     <template #modalBody>
-      <div class="container gm-panel h-full margin-0">
+      <div class="h-full margin-0">
         <AssetManager v-if="toggle == 'asset-manager'" />
       </div>
     </template>
@@ -27,18 +27,3 @@ const gmPanelStore = useGmPanelStore()
 
 let toggle = ref('asset-manager')
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.gm-selector {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-
-  button {
-    padding: 6px 15px;
-    min-width: 100px;
-  }
-}
-</style>

src/components/utilities/GmTools.vue

@@ -1,12 +1,12 @@
 <template>
   <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="160">
     <template #modalHeader>
-      <h3 class="modal-title">GM tools</h3>
+      <h3 class="m-0 font-medium shrink-0">GM tools</h3>
     </template>
     <template #modalBody>
       <div class="content">
-        <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
+        <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
-        <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
+        <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
     </template>
   </Modal>

src/components/utilities/Notifications.vue

@@ -2,7 +2,7 @@
   <div class="notifications">
     <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
       <template #modalHeader v-if="notification.title">
-        <h3 class="modal-title">{{ notification.title }}</h3>
+        <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
       </template>
       <template #modalBody v-if="notification.message">
         <p class="modal-notif">{{ notification.message }}</p>

src/components/utilities/assetManager/partials/ObjectDetails.vue

@@ -5,23 +5,21 @@
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
     <div class="modal-form asset-manager m-2.5 p-2.5 block">
-      <form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent>
-        <div class="form-field w-full flex flex-col mb-[20px]">
+        <div class="w-full flex flex-col mb-5">
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
         </div>
-        <div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
+        <div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
           <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
           <input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
         </div>
-        <div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
+        <div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
           <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
           <input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
         </div>
-        <div class="submit">
+        <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Save</button>
-          <button class="btn-cyan px-[15px] py-1.5" type="button" @click="removeObject">Save</button>
+        <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Remove</button>
-          <button class="btn-bordeaux ml-2.5 px-[15px] py-1.5" type="button" @click="removeObject">Remove</button>
-        </div>
       </form>
     </div>
   </div>

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -5,13 +5,13 @@
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
     <div class="modal-form asset-manager m-2.5 p-2.5 block">
-      <form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
+      <form class="flex g-2.5 flex-wrap" @submit.prevent>
-        <div class="form-field tags flex flex-col mb-[20px]">
+        <div class="flex flex-col mb-5">
           <label class="mb-1.5 font-titles" for="tags">Tags</label>
           <ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
         </div>
-        <div class="submit w-full">
+        <div class="w-full">
-          <button class="btn-bordeaux px-[15px] py-1.5" type="button" @click="removeTile">Remove</button>
+          <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeTile">Remove</button>
         </div>
       </form>
     </div>

src/components/utilities/zoneEditor/Tiles.vue

@@ -2,10 +2,10 @@
   <Teleport to="body">
     <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true"  :modal-width="645" :modal-height="260">
       <template #modalHeader>
-        <h3 class="modal-title">Tiles</h3>
+        <h3 class="m-0 font-medium shrink-0">Tiles</h3>
       </template>
       <template #modalBody>
-        <div class="container tiles">
+        <div class="m-[15px] tiles">
           <div class="tiles">
             <img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
             <img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -1,26 +1,26 @@
 <template>
   <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="370" :is-resizable="false">
     <template #modalHeader>
-      <h3 class="modal-title">Zone settings</h3>
+      <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
     </template>
 
     <template #modalBody>
       <div class="settings m-[15px]">
-        <form method="post" @submit.prevent="" class="modal-form inline">
+        <form method="post" @submit.prevent="" class="inline">
-          <div class="form-fields gap-2.5 flex flex-wrap">
+          <div class="gap-2.5 flex flex-wrap">
-            <div class="form-field w-full flex flex-col mb-5">
+            <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Name</label>
               <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
             </div>
-            <div class="form-field w-[48%] flex flex-col mb-5">
+            <div class="w-[48%] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Width</label>
               <input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="form-field w-[48%] flex flex-col mb-5">
+            <div class="w-[48%] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Height</label>
               <input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
             </div>
-            <div class="form-field w-full flex flex-col mb-5">
+            <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
               <input class="input-cyan max-w-[250px]" name="name" id="name" />
             </div>

src/screens/Characters.vue

@@ -40,23 +40,19 @@
 
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
     <template #modalHeader>
-      <h3 class="modal-title">Create your character</h3>
+      <h3 class="m-0 font-medium shrink-0">Create your character</h3>
     </template>
 
     <template #modalBody>
-      <div class="container character-form">
+      <div class="m-[15px] character-form">
-        <form method="post" @submit.prevent="create" class="modal-form">
+        <form method="post" @submit.prevent="create" class="inline">
-          <div class="form-fields">
+          <div class="flex flex-col mb-5">
-            <div class="form-field">
+            <label class="mb-1.5 font-titles" for="name">Name</label>
-              <label for="name">Name</label>
+            <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
-              <input class="input-cyan" v-model="name" name="name" id="name" />
-            </div>
-          </div>
-          <div class="submit">
-            <button class="btn-cyan" type="submit">CREATE</button>
           </div>
+          <button class="btn-cyan py-1.5 px-[15px] mr-[20px] min-w-[100px] inline-block" type="submit">CREATE</button>
         </form>
-        <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+        <button class="btn-cyan py-1.5 px-[15px] min-w-[100px] inline-block" @click="isModalOpen = false">CANCEL</button>
       </div>
     </template>
   </Modal>
@@ -322,9 +318,5 @@ onBeforeUnmount(() => {
       }
     }
   }
-
-  .modal-title {
-    margin: 0;
-  }
 }
 </style>