aesthetic changes, fixed edit sidebar size, font color

Author: ziggrace

src/components/ComponentDisplay.vue

@@ -31,7 +31,7 @@ Description:
       :onResizeStart="recordInitialSize"
     >
       <div class="component-title">
-        <p>{{ componentData.componentName }}</p>
+        <p style='color: black'>{{ componentData.componentName }}</p>
       </div>
       <!-- <div class="component-html-info"> -->
         <!-- <p>Elements in Component:</p> -->

src/components/dashboard_items/Dashboard.vue

@@ -87,14 +87,14 @@ export default {
   },
   watch: {
     // toggles dashboard to "Component Details" tab when a components is selected
-    activeComponent: function () {
-      if (this.activeComponent !== '') {
-        this.tab = 'detail'
-      } else {
-        // otherwise toggle dashboard to 'Project Tree' tab if no component is selected
-        this.tab = 'tree'
-      }
-    },
+    // activeComponent: function () {
+    //   if (this.activeComponent !== '') {
+    //     this.tab = 'detail'
+    //   } else {
+    //     // otherwise toggle dashboard to 'Project Tree' tab if no component is selected
+    //     this.tab = 'tree'
+    //   }
+    // },
     // otherwise toggle dashboard to 'Project Tree' tab if no component is selected or the
     // user is in the process of creating a component
     componentNameInputValue: function () {

src/components/home_sidebar_items/EditDeleteComponents.vue

@@ -45,8 +45,9 @@ Description:
     <p class="editName" v-if="this.activeComponentObj">
       Currently selected component: {{ this.activeComponentObj.componentName }}
     </p>
-    <p class="editName" v-else>Select a component</p>
+    <!-- <p class="editName" v-else>Select a component</p> -->
     <q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
+    <br/>
     <div v-if="this.activeComponentData">
     <br/>
     <!-- @input="selectParent"
@@ -160,7 +161,7 @@ Description:
       </q-list>
       </a>
     </div>
-    <p v-else> Select Component to Enable Edit </p>
+    <p v-else> <br/> Select Component to Enable Edit </p>
   </div>
 </template>
 

src/components/home_sidebar_items/HomeSideDropDown.vue

@@ -8,7 +8,7 @@ Description:
     <q-list padding bordered class="rounded-borders drawer-menu">
       <q-expansion-item dense dense-toggle expand-separator label="Edit/Delete Components">
           <q-card>
-            <div class="input-container" style='height: 500px'>
+            <div class="input-container" style='height: 100%'>
               <EditDeleteComponents />
             </div>
           </q-card>