From d51fbc80303ca3ede258310f14ccb97585abb2f6 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 17 Feb 2025 19:23:30 +0100
Subject: [PATCH] Map list small UI improvement

---
 src/assets/scss/main.scss                       |  2 +-
 .../gameMaster/mapEditor/partials/MapList.vue   | 17 ++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index e1d9e77..893e39e 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -124,7 +124,7 @@ button {
 
     &.active,
     &:hover {
-      @apply bg-red-400;
+      @apply bg-red-500;
     }
   }
 
diff --git a/src/components/gameMaster/mapEditor/partials/MapList.vue b/src/components/gameMaster/mapEditor/partials/MapList.vue
index 661d673..eb124d7 100644
--- a/src/components/gameMaster/mapEditor/partials/MapList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapList.vue
@@ -1,17 +1,17 @@
 <template>
   <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" bg-style="none">
     <template #modalHeader>
-      <h3 class="text-lg text-white">Maps</h3>
+      <div class="flex items-center">
+        <button class="btn-cyan w-7 h-7 font-normal flex items-center justify-center" @click="createMapModal?.open">+</button>
+        <h3 class="text-lg text-white ml-2">
+          Maps
+        </h3>
+      </div>
     </template>
     <template #modalBody>
-      <div class="my-4 mx-auto h-full">
-        <div class="text-center mb-4 px-2 flex gap-2.5">
-          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
-          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
-        </div>
-        <div class="overflow-y-auto h-[calc(100%-20px)]">
+      <div class="mx-auto h-full">
+        <div class="overflow-y-auto h-[calc(100%)]">
           <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
-            <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
             <div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
               <span>{{ map.name }}</span>
               <span class="ml-auto gap-1 flex">
@@ -24,7 +24,6 @@
       </div>
     </template>
   </Modal>
-
   <CreateMap ref="createMapModal" @create="fetchMaps" />
 </template>