From 6215b19b206f2f8e67d9d81a335b796c2c664d0b Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 23 Jun 2024 14:10:49 +0200
Subject: [PATCH] Small styling changes, responsiveness modals

---
 src/assets/scss/main.scss                          |  1 +
 src/components/utilities/GmPanel.vue               |  4 ++--
 src/components/utilities/Modal.vue                 |  4 ++--
 .../utilities/assetManager/AssetManager.vue        | 14 ++++++--------
 .../utilities/zoneEditor/Decorations.vue           |  2 +-
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 355253c..3158798 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -59,6 +59,7 @@ input {
 }
 
 .input-cyan {
+  font-family: $titles;
   border: 1px solid $cyan;
   background-color: rgba($white, 0.8);
   &:focus, &:focus-visible {
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index 9757290..fc09c53 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -24,8 +24,7 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
 
-let toggle = ref('asset-manager');
-
+let toggle = ref('asset-manager')
 </script>
 
 <style lang="scss" scoped>
@@ -34,6 +33,7 @@ let toggle = ref('asset-manager');
 .gm-selector {
     display: flex;
     gap: 5px;
+    flex-wrap: wrap;
 
     button {
         padding: 6px 15px;
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index d3c9ea8..c9e99ad 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -205,8 +205,7 @@ function handleResize() {
 
   .modal-header {
     cursor: move;
-    padding: 0 20px;
-    min-height: 50px;
+    padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     gap: 30px;
@@ -216,6 +215,7 @@ function handleResize() {
     .modal-title {
       margin: 0;
       font-weight: 400;
+      flex-shrink: 0;
     }
 
     .buttons {
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 50ed46e..af83d54 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -21,14 +21,7 @@
     <!-- Assets -->
     <div class="assets active" @scroll="onScroll">
       <div class="asset">
-        <!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
-        <div class="modal-form">
-          <div class="form-fields">
-            <div class="form-field">
-              <input class="input-cyan" placeholder="Search..." />
-            </div>
-          </div>
-        </div>
+        <input class="input-cyan search-field" placeholder="Search..." />
       </div>
       <div class="asset">
         <span class="asset-name">Upload new</span>
@@ -266,6 +259,11 @@ onMounted(() => {
       &.selected {
         background-color: rgba($cyan, 0.8);
       }
+      .search-field {
+        border-radius: 5px;
+        padding: 8px 10px;
+        width: calc(100% - 20px);
+      }
       .file-upload {
         background-color: rgba($cyan, 0.5);
         border: 1px solid $white;
diff --git a/src/components/utilities/zoneEditor/Decorations.vue b/src/components/utilities/zoneEditor/Decorations.vue
index 3a7fe46..cea0dc0 100644
--- a/src/components/utilities/zoneEditor/Decorations.vue
+++ b/src/components/utilities/zoneEditor/Decorations.vue
@@ -11,7 +11,6 @@
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
           </div>
-          <hr>
           <canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
           <div class="decorations">
             <img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
@@ -111,6 +110,7 @@ onMounted(async () => {
 
 .buttons {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
 }