Cleaned up styling, changed assets logic

src/assets/scss/main.scss

@@ -59,9 +59,11 @@ input {
 }
 
 .input-cyan {
+  padding: 8px 10px;
   font-family: $titles;
   border: 1px solid $cyan;
   background-color: rgba($white, 0.8);
+  border-radius: 5px;
   &:focus, &:focus-visible {
     outline: $cyan auto 2px;
   }

src/components/utilities/Modal.vue

@@ -288,9 +288,7 @@ function handleResize() {
 
           input {
             max-width: 250px;
-            font-family: $titles;
             border-radius: 5px;
-            padding: 8px 10px;
           }
 
           &.two-col {

src/components/utilities/assetManager/AssetManager.vue

@@ -18,26 +18,17 @@
     </div>
     <div class="divider categories"></div>
 
-    <!-- Assets -->
-    <div class="assets" :class="{ active: selectedCategory === 'tiles' }" ref="elementToScroll" @scroll="onScroll">
-      <TileList />
+    <!-- Assets list -->
+    <div class="assets" ref="elementToScroll" @scroll="onScroll">
+      <TileList :name="selectedCategory" />
     </div>
-    <div class="assets" :class="{ active: selectedCategory === 'objects' }">
-      <a class="asset selected">
-        <span class="asset-name">Wall #1</span>
-      </a>
-    </div>
-    <div class="assets">
-      
-    </div>
-    <div class="assets">
 
-    </div>
     <button class="back-to-top" v-show="hasScrolled" @click="toTop">
       <img src="/assets/icons/zoneEditor/chevron.svg" />
     </button>
     <div class="divider assets-list"></div>
 
+    <!-- Asset details -->
     <div class="asset-info">
 
       <div class="image-container">
@@ -96,13 +87,13 @@ function toTop() {
 
 .container {
   &.gm-panel {
-    height: calc(100% - 20px);
+    height: 100%;
     margin: 0!important;
   }
 }
 .assets-container {
   display: flex;
-  height: calc(100% + 20px);
+  height: 100%;
   width: 100%;
   position: relative;
 
@@ -154,10 +145,7 @@ function toTop() {
     overflow:auto;
     height: 100%;
     width: 35%;
-    display: none;
-    &.active {
-      display: flex;
-    }
+    display: flex;
   }
   .asset-info {
     display: flex;
@@ -232,36 +220,7 @@ function toTop() {
       &.selected {
         background-color: rgba($cyan, 0.8);
       }
-      &.add-new {
-        display: flex;
-        align-items: center;
-        gap: 10px 20px;
-        flex-wrap: wrap;
-        .asset-name {
-          flex-shrink: 0;
-        }
-      }
-      .search-field {
-        border-radius: 5px;
-        padding: 8px 10px;
-        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;
-        }
-      }
+      
     }
   }
   

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

@@ -9,7 +9,9 @@
       Choose file
     </label>
   </div>
-  <a class="asset" v-for="(tile, index) in tiles" :key="index">
+
+  <!-- TODO: use the passed :name in props to switch out assets-->
+  <a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
     <div class="asset-details">
       <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
       <span class="asset-name">{{ tile }}</span>
@@ -20,7 +22,9 @@
 <script setup lang="ts">
 import {useSocketStore} from '@/stores/socket'
 import config from '@/config'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, defineProps } from 'vue'
+
+const props = defineProps<{ name: string }>()
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
@@ -48,5 +52,36 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/main';
 
+.asset {
+  &.add-new {
+    display: flex;
+    align-items: center;
+    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>