fixed bug not allowing decrementing layers in component display right-click modal; fixed styling on delete button hover in routes tab

Author: megatera

src/components/dashboard_items/RouteDisplay.vue

@@ -19,7 +19,7 @@ Includes functionality to:
       class="input-add"
       @click="resetActiveComponent"
       reactive-rules
-      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
+      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component/route with this name already exists' ]"
     >
     <template v-slot:append>
       <q-btn

src/components/dashboard_items/Routes.vue

@@ -13,11 +13,17 @@ Description:
       @click="selectRoute(route)"
     >
       <q-list bordered separator class="list-item">
-        <q-item clickable v-ripple :class="route === activeRoute ? 'panel-block is-active list-item' : 'panel-block list-item'">
-          <q-item-section>{{route}}</q-item-section>
-          <span v-if="route !== 'HomeView'">
-            <q-btn round flat icon="highlight_off" v-on:click.stop="deleteSelectedRoute(route)" />
-          </span>
+        <q-item clickable dense v-ripple :class="route === activeRoute ? 'panel-block is-active list-item' : 'panel-block list-item'">
+          <q-item-section>
+            <div class="block-container">
+              <div class="block-info">
+              {{route}}
+              </div>
+              <span v-if="route !== 'HomeView'">
+              <q-btn round flat icon="highlight_off" v-on:click.stop="deleteSelectedRoute(route)" />
+              </span>
+            </div>
+          </q-item-section>
         </q-item>
       </q-list>
     </a>
@@ -47,9 +53,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+ 
   .panel-block {
     background: $secondary !important;
-    color: $menutext !important;;
+    color: $menutext !important;
+    min-height: 45px;
   }
   .is-active {
     background: $secondary !important;

src/components/file_system_interface/ExportProject.vue

@@ -522,11 +522,8 @@ export default {
 };
 </script>
 
-<style>
-.nav-btn {
-  min-height: 30px !important;
-  text-transform: capitalize;
-}
+<style scoped>
+
 .center{
   display:inline-block;
   text-align: center;

src/components/home_sidebar_items/ComponentTab/UploadImage.vue

@@ -7,7 +7,7 @@ Description:
 <template>
   <div id="uploadImgMenuItem">
     <q-list>
-      <q-expansion-item expand-separator :label="this.activeRoute">
+      <q-expansion-item expand-separator :label="this.mockupUploadLabel">
         <div class="upload">
           <q-btn
             class="upload-btn"
@@ -55,6 +55,7 @@ export default {
     return {
       files: [],
       source: "",
+      mockupUploadLabel: `Upload mockup image for ${this.$store.state.activeRoute}`,
     };
   },
   computed: {
@@ -114,6 +115,7 @@ export default {
   watch: {
     // once you change your active route, the mockup image should change as well
     activeRoute: function () {
+      this.mockupUploadLabel = `Upload mockup image for ${this.activeRoute}`
       if (this.imagePath[this.activeRoute]) {
         // if there is a uploaded image
         this.source = "file:///" + this.imagePath[this.activeRoute];
@@ -126,6 +128,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 #uploadImgMenuItem {
   display: flex;
   flex-direction: column;
@@ -141,12 +144,15 @@ export default {
 .upload-btn {
   text-transform: capitalize;
   font-size: 12px;
+  width: 150px;
+  height: auto;
+  min-height: 42px;
 }
 
 .upload {
-  margin: 0.5rem;
+  margin: 1rem;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-around;
 }
 
 .file-path {

src/css/app.scss

@@ -25,9 +25,14 @@ main {
 }
 .q-btn {
     align-items: center;
-    height: 20px;
+}
+
+.nav-btn {
+    min-height: 30px !important;
     width: 65px;
+    text-transform: capitalize;
 }
+
 .q-item {
     background: $subsecondary;  
 }
@@ -38,6 +43,13 @@ main {
     color: $menutext;
 }
 
+.block-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .q-field--outlined .q-field__control {
     padding: 0 0 0 12px;
   }