additional styling updates and form validation

Co-Authored by Aram Paparian <[email protected]>

Author: megatera

src/components/ComponentDisplay.vue

@@ -39,23 +39,23 @@ Description:
       <q-menu context-menu>
         <q-list color="black" class="menu">
             <q-item clickable v-ripple v-close-popup @click="handleExportComponent">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Export Component</q-item-section
             >
             <q-item-section avatar>
                         <q-icon color="primary" name="upload" />
                       </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Update Children</q-item-section
             >
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup>
-            <q-item-section class="layer" style="color: white"
+            <q-item-section class="layer" style="color: menutext"
               >Layer</q-item-section
             >
             <q-btn
@@ -65,7 +65,7 @@ Description:
               label="-"
               @click="(e) => handleLayer(e)"
             />
-            <p id="counter" style="color: white">{{ componentData.z }}</p>
+            <p id="counter" style="color: menutext">{{ componentData.z }}</p>
             <q-btn
               class="btn"
               color="transparent"
@@ -403,7 +403,7 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
-  -webkit-text-stroke: 0.4px white;
+  -webkit-text-stroke: 0.4px $menutext;
   font-weight: 800;
   line-height: 1.2;
   z-index: -1;
@@ -455,9 +455,9 @@ export default {
   margin-bottom: 0px !important;
 }
 .component-box {
-  color: white;
-  border: 1.2px dashed rgb(231, 203, 75);
-  background-color: rgba(172, 83, 83, 0.42);
+  color: $menutext;
+  border: 1.2px dashed $darktext;
+  background-color: rgba($darktext, .42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
@@ -477,7 +477,7 @@ export default {
 .btn:hover,
 .btn:focus,
 .btn:active {
-  color: white;
+  color: $menutext;
   background-color: transparent;
 }
 #counter {

src/components/dashboard_items/Dashboard.vue

@@ -17,10 +17,7 @@ Description:
       dense
       breakpoint="1050"
     >
-      <q-tab
-        name="detail"
-        label="Component Details"
-        id="label-text"
+      <q-tab name="detail" label="Component Details" id="label-text"
         ></q-tab>
       <q-tab name="tree" label="Project Tree" id="label-text"
         ></q-tab>
@@ -146,18 +143,10 @@ i {
   padding: 5px;
 }
 
-/* this class selector does not change anything */
-.q-tab__label {
-  /* // font-size not changing */
-  font-size: 10px !important;
-  line-height: 1.718em;
-  font-weight: 500;
-}
-
 /* // changes the tab label styling */
 #label-text {
   font-size: 4px !important;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .q-tab-panel {

src/components/dashboard_items/HTMLQueue.vue

@@ -142,7 +142,7 @@ li {
   min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
-  border: 2px solid white;
+  border: 2px solid $menutext;
   background-color: $secondary;
   height: 35px;
   padding-top: 6px;

src/components/dashboard_items/RouteDisplay.vue

@@ -5,18 +5,30 @@ Includes functionality to:
 -->
 
 <template>
-  <div>
+  <div class="route-display">
     <q-input
       @keyup.enter="handleEnterKeyPress"
-      standout="bg-secondary text-white"
+      color="menutext"
+      dark
+      outlined
       bottom-slots
       v-model="newRoute"
-      label="Enter new route"
+      label="Add new route"
       dense
+      no-error-icon
       class="input-add"
       @click="resetActiveComponent"
-    ></q-input>
-
+      reactive-rules
+      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
+    >
+    <template v-slot:append>
+      <q-btn
+        flat
+        icon="add"
+        @click="handleEnterKeyPress"
+      />
+    </template>
+    </q-input>
     <Routes></Routes>
   </div>
 </template>
@@ -65,13 +77,8 @@ export default {
 
 <style scoped>
 .route-display {
-  border: 1px solid rgba(208, 208, 208, 0.694);
   overflow: auto;
-  height: 60%;
-  padding: 0;
-  margin: 1rem;
-  padding: 0.5rem;
-  border-radius: 5px;
+  padding: 1rem;
 }
 
 i:hover {

src/components/dashboard_items/Routes.vue

@@ -5,7 +5,8 @@ Description:
   -->
 
 <template>
-  <div class="home-sidebar">
+  <div>
+    <p>Click to view route</p>
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"
       v-for="route in Object.keys(routes)"
@@ -47,9 +48,5 @@ export default {
 </script>
 
 <style scoped>
-.route-view {
-  margin: 1rem;
-  display: flex;
-  flex-direction: column;
-}
+
 </style>

src/components/dashboard_items/Tree.vue

@@ -185,7 +185,7 @@ export default {
   padding: 8px;
   margin: 6px;
   min-height: 28px;
-  color: #FFFFFF;
+  color: $menutext;
   background-color: $secondary;
   text-align: center;
   line-height: 28px;
@@ -195,12 +195,12 @@ export default {
 .tree-node-active {
   background-color: $accent;
   color: $darktext;
-  border: 2px solid white;
+  border: 2px solid $menutext;
 }
 
 .tree-node-activeRoute {
-  background-color: #155158;
-  border: 2px solid white;
+  background-color: $darktext;
+  border: 2px solid $menutext;
 }
 
 

src/components/dashboard_items/tutorial/AdvancedFunctions.vue

@@ -1,7 +1,7 @@
 <template>
   <!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
-  Advanced Functions Here!
-      <q-btn
+    <p>Advanced Functions Here!</p>
+    <q-btn
       id="tut-btn"
       color="secondary"
       label="Get Started with OverVue"

src/components/home_sidebar_items/ComponentTab/AddProps.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <q-input
-      @keyup.enter.native="createNewProp(textProps)"
-      color="white"
+      @keyup.enter="createNewProp(textProps)"
+      color="menutext"
       dark
       outlined
       bottom-slots
@@ -31,7 +31,7 @@
         :searchable="false"
         @search-change="stopDelete($event)"
       >
-        <span slot="noResult">No props found.</span>
+        <template v-slot:noResult>No props found.</template>
       </VueMultiselect>
     </div>
     <br />

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -18,13 +18,14 @@ Description:
           v-on:keyup.delete.stop
           v-model="componentNameInputValue"
           label="Set component name *"
-          color="white"
+          color="menutext"
           dark
           dense
           outlined
           item-aligned
           padding="5px"
           class="input-add"
+          no-error-icon
           reactive-rules
           :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
         ></q-input>

src/components/home_sidebar_items/ComponentTab/CreateComponentHTMLQueue.vue

@@ -148,7 +148,7 @@ li {
   min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
-  border: 2px solid white;
+  border: 2px solid $menutext;
   background-color: $secondary;
   height: 35px;
   padding-top: 6px;