Cleaned up styling, changed assets logic

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>