From c03c71a1b514a3426f303c7a17026f6ac083f97f Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 9 Sep 2024 00:27:45 +0200
Subject: [PATCH] Moved toolbar to bottom for better UX

---
 src/components/gameMaster/zoneEditor/partials/Toolbar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
index ce7a69d..180d86d 100644
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-center p-5">
-    <div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
+    <div class="toolbar fixed bottom-0 m-3 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
       <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
@@ -15,7 +15,7 @@
               {{ zoneEditorStore.drawMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
               <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
@@ -42,7 +42,7 @@
               {{ zoneEditorStore.eraserMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
+            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
               <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('tile')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>