restyling edit component menu; added html queue

Author: megatera

src/components/dashboard_items/HTMLQueue.vue

@@ -151,7 +151,7 @@ li {
 
 .fa-trash:hover {
   cursor: pointer;
-  color: red;
+  color: $darktext;
 }
 
 .fa-trash {
@@ -169,7 +169,7 @@ li {
 
 .fa-angle-double-down:hover {
   cursor: pointer;
-  color: #41B883;
+  color: $darktext;
 }
 
 .fa-chevron-up {

src/components/dashboard_items/Tree.vue

@@ -189,17 +189,18 @@ export default {
   background-color: $secondary;
   text-align: center;
   line-height: 28px;
+  border-radius: 4px;
 }
 
 .tree-node-active {
   background-color: $accent;
-  color: #155158;
-  border: 2px solid rgb(196, 154, 19);
+  color: $darktext;
+  border: 2px solid white;
 }
 
 .tree-node-activeRoute {
   background-color: #155158;
-  border: 2px solid rgb(196, 154, 19);
+  border: 2px solid white;
 }
 
 

src/components/home_sidebar_items/ComponentTab/AddProps.vue

@@ -2,24 +2,26 @@
   <div>
     <q-input
       @keyup.enter.native="createNewProp(textProps)"
-      standout="bg-secondary text-white"
+      color="white"
+      dark
+      outlined
       bottom-slots
       v-model="textProps"
-      label="Create Prop"
+      label="Create new prop"
       dense
       class="input-add"
       v-on:keyup.delete.stop
     >
       <template v-slot:append>
-        <q-btn round dense flat icon="add" @click="createNewProp(textProps)" />
+        <q-btn dense flat icon="add" @click="createNewProp(textProps)" />
       </template>
     </q-input>
 
     <div id="props-select">
       <VueMultiselect
         v-model="selectProps"
         class="multiselect"
-        placeholder="Select Props for Component"
+        placeholder="Select from existing props"
         :multiple="true"
         :close-on-select="false"
         :max-height="180"
@@ -94,3 +96,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+  .q-field {
+    margin: 30px 0 10px;
+  }
+</style>

src/components/home_sidebar_items/ComponentTab/ComponentActions.vue

@@ -7,7 +7,7 @@
 -->
 
 <template>
-  <div>
+  <div class="selection-container">
     <div id="action-select">
       <VueMultiselect
         v-model="selectAction"
@@ -98,7 +98,7 @@ export default {
     ]),
     // Prevent Delete on changes to searchable multiselect
     stopDelete(e) {
-      if (e.code === "Backspce") e.stopPropogation();
+      if (e.code === "Backspace") e.stopPropogation();
       // console.log(e);
     },
     // adds an action to the currently selected component
@@ -112,3 +112,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.selection-container {
+    padding: 30px 0;
+  }
+</style>

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -7,7 +7,7 @@
 -->
 
 <template>
-  <div>
+  <div class="selection-container">
     <div id="state-select">
       <VueMultiselect
         v-model="selectState"
@@ -111,3 +111,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+  .selection-container {
+    padding: 30px 0;
+  }
+</style>

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -6,7 +6,7 @@ Description:
 <!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
 
 <template>
-  <div class="create-component-div inner-div drawer-menu">
+  <div class="create-component-div drawer-menu">
     <q-expansion-item group="accordion" label="Import Component">
       <ImportComponent v-if="activeComponent === ''" @imported="createComponent" />
     </q-expansion-item>
@@ -18,7 +18,7 @@ Description:
           v-on:keyup.delete.stop
           v-model="componentNameInputValue"
           label="Set component name *"
-          color="accent"
+          color="white"
           dark
           dense
           outlined
@@ -202,13 +202,15 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    resize: vertical;
   }
 
   #create-component-btn {
     width: 100%;
   }
   .q-expansion-item {
     margin-bottom: 10px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
   }
 
 // .is-primary {

src/components/home_sidebar_items/ComponentTab/CreateComponentHTMLQueue.vue

@@ -157,7 +157,7 @@ li {
 
 .fa-trash:hover {
   cursor: pointer;
-  color: #155158;
+  color: $darktext;
 }
 
 .fa-trash {