From f40297485f299c11024eab4a9541d60a4c142a91 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 6 Jul 2024 18:47:07 +0200
Subject: [PATCH] More Tailwind conversion

---
 src/components/forms/ChipsInput.vue           | 40 ++------------
 src/components/utilities/GmTools.vue          | 11 +---
 src/components/utilities/Notifications.vue    |  8 +--
 .../assetManager/partials/ObjectDetails.vue   | 15 +----
 .../assetManager/partials/ObjectList.vue      | 55 ++++---------------
 .../assetManager/partials/TileDetails.vue     | 11 +---
 .../assetManager/partials/TileList.vue        | 52 +++---------------
 src/components/utilities/zoneEditor/Tiles.vue | 28 ++--------
 tailwind.config.js                            |  3 +-
 9 files changed, 35 insertions(+), 188 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 2ac6b78..5ef2a05 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="chip-container">
-    <div v-for="(chip, i) in modelValue" :key="i" class="chip">
+  <div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
+    <div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
       <span>{{ chip }}</span>
-      <i class="delete-icon" @click="deleteChip(i)">X</i>
+      <i class="delete-icon cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
     </div>
     <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
   </div>
@@ -31,36 +31,4 @@ const backspaceDelete = (event) => {
     modelValue.value = modelValue.value.slice(0, -1)
   }
 }
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/scss/main.scss';
-
-.chip-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  border-bottom: 1px solid #e0e0e0;
-
-  .chip {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    background-color: $cyan;
-    border-radius: 5px;
-    padding: 5px 10px;
-    margin: 4px;
-
-    .delete-icon {
-      cursor: pointer;
-      color: $white;
-      font-weight: 300;
-      font-family: $default;
-      font-style: normal;
-      &:hover {
-        color: $light-gray;
-      }
-    }
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index 32c084a..6c0ce9e 100644
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@@ -4,7 +4,7 @@
       <h3 class="m-0 font-medium shrink-0">GM tools</h3>
     </template>
     <template #modalBody>
-      <div class="content">
+      <div class="content flex flex-col gap-2.5 m-[15px] h-[80px]">
         <button class="btn-cyan py-1.5 px-[15px] 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="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
@@ -20,12 +20,3 @@ const zoneEditorStore = useZoneEditorStore()
 const gmPanelStore = useGmPanelStore()
 </script>
 
-<style lang="scss">
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  margin: 15px;
-  height: calc(100% - 30px);
-}
-</style>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index e42f684..c7f4e5d 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -5,7 +5,7 @@
         <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>
+        <p class="modal-notif m-[15px]">{{ notification.message }}</p>
       </template>
     </Modal>
   </div>
@@ -54,9 +54,3 @@ onBeforeUnmount(() => {
   }
 })
 </script>
-
-<style lang="scss">
-.modal-notif {
-  margin: 15px;
-}
-</style>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 2065211..980d226 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="object-manager">
+  <div class="object-manager h-full overflow-auto">
     <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
       <img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@@ -66,15 +66,4 @@ onMounted(() => {
 onBeforeUnmount(() => {
   assetManagerStore.setSelectedObject('')
 })
-</script>
-
-<style lang="scss">
-
-.asset-info {
-  .object-manager {
-    height: 100%;
-    overflow: auto;
-  }
-}
-
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index f243a3b..0185b4b 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,17 +1,18 @@
 <template>
-  <div class="asset add-new relative p-2.5">
-    <label for="upload-asset" class="file-upload">
-      <input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+  <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+    <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+      <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>
-    <input class="input-cyan search-field" placeholder="Search..." />
+    <input class="input-cyan search-field w-full" placeholder="Search..." />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
+  <a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
     <div class="asset-details flex items-center gap-2.5">
-      <!--      @TODO make all img have same width so text aligns nicely -->
-      <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
-      <span class="asset-name">{{ object.name }}</span>
+      <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
+        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+      </div>
+      <span class="asset-name flex-shrink-0">{{ object.name }}</span>
     </div>
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
@@ -53,40 +54,4 @@ onMounted(() => {
     assetManagerStore.setObjectList(response)
   })
 })
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.asset {
-  cursor: pointer;
-
-  &.add-new {
-    display: flex;
-    gap: 10px 20px;
-    flex-wrap: wrap;
-    .asset-name {
-      flex-shrink: 0;
-    }
-  }
-  .search-field {
-    width: calc(100% - 20px);
-  }
-  .file-upload {
-    background-color: rgba($cyan, 0.5);
-    border: 1px solid $white;
-    border-radius: 5px;
-    text-shadow: 0 3px 6px rgba($black, 0.2);
-    padding: 6px 15px;
-    display: inline-flex;
-
-    &:hover {
-      background-color: $cyan;
-      cursor: pointer;
-    }
-    input[type='file'] {
-      display: none;
-    }
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 4d4f106..f69727c 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tile-manager">
+  <div class="tile-manager h-full overflow-auto">
     <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
       <img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@@ -87,12 +87,3 @@ onBeforeUnmount(() => {
   assetManagerStore.setSelectedTile('')
 })
 </script>
-
-<style lang="scss">
-.asset-info {
-  .tile-manager {
-    height: 100%;
-    overflow: auto;
-  }
-}
-</style>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 5de8548..c29aaf6 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="asset add-new relative p-2.5">
-    <label for="upload-asset" class="file-upload">
-      <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+  <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+    <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+      <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>
-    <input class="input-cyan search-field" placeholder="Search..." />
+    <input class="input-cyan search-field w-full" placeholder="Search..." />
     <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+  <a class="asset relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
     <div class="asset-details flex items-center gap-2.5">
-      <!--      @TODO make all img have same width so text aligns nicely -->
+      <!--      TODO make all img have same width so text aligns nicely -->
       <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
-      <span class="asset-name">{{ tile }}</span>
+      <span class="asset-name flex-shrink-0">{{ tile }}</span>
     </div>
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
@@ -52,40 +52,4 @@ onMounted(() => {
     assetManagerStore.setTileList(response)
   })
 })
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.asset {
-  cursor: pointer;
-
-  &.add-new {
-    display: flex;
-    gap: 10px 20px;
-    flex-wrap: wrap;
-    .asset-name {
-      flex-shrink: 0;
-    }
-  }
-  .search-field {
-    width: calc(100% - 20px);
-  }
-  .file-upload {
-    background-color: rgba($cyan, 0.5);
-    border: 1px solid $white;
-    border-radius: 5px;
-    text-shadow: 0 3px 6px rgba($black, 0.2);
-    padding: 6px 15px;
-    display: inline-flex;
-
-    &:hover {
-      background-color: $cyan;
-      cursor: pointer;
-    }
-    input[type='file'] {
-      display: none;
-    }
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 82c1bc0..8a8038f 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -5,10 +5,10 @@
         <h3 class="m-0 font-medium shrink-0">Tiles</h3>
       </template>
       <template #modalBody>
-        <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 }" />
+        <div class="m-[15px]">
+          <div class="flex flex-wrap gap-2.5">
+            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
+            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" 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 }" />
           </div>
         </div>
       </template>
@@ -37,23 +37,7 @@ onMounted(async () => {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/main.scss';
-
-.tiles {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.tiles img {
-  width: 64px;
-  height: 32px;
-  cursor: pointer;
-  border: 2px solid transparent;
-  transition: border 0.3s ease;
-}
-
-.tiles img.selected {
-  border: 2px solid $red;
+img.selected {
+  @apply border-2 border-solid border-red;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 220ad0f..2053f71 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,8 @@ export default {
     },
     extend: {
       dropShadow: {
-        'default': '0 3px 6px rgb(0, 0, 0)'
+        'default': '0 3px 6px rgb(0, 0, 0)',
+        '20': '0 3px 6px rgba(0, 0, 0, 0.2)'
       },
       colors: {
         red: {