styling updates for tutorial tabs and store sub-tabs

Author: megatera

src/components/ComponentDisplay.vue

@@ -465,7 +465,7 @@ export default {
 }
 .active {
   background-color: $accent;
-  border: 1px dashed rgb(227, 203, 71);
+  border: 1px dashed $accent;
 }
 .btn {
   font-size: 25px;

src/components/dashboard_items/Dashboard.vue

@@ -7,7 +7,7 @@ Description:
 
 <template>
 <span v-if="showTutorial === false">
-  <q-card id="dashboard-cards" class="bord" >
+  <q-card id="dashboard-cards" >
     <q-tabs
       v-model="tab"
       class="bg-subaccent text-white"
@@ -24,7 +24,7 @@ Description:
       <q-tab name="routes" label="Routes" id="label-text"
         ></q-tab>
     </q-tabs>
-    <q-tab-panels v-model="tab" animated class="html-bg text-white">
+    <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="detail">
         <ComponentDetails />
       </q-tab-panel>
@@ -120,9 +120,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-i {
-  font-size: 11px;
-}
 
 .home-sidebar {
   margin: 1rem;
@@ -150,14 +147,14 @@ i {
 }
 
 .q-tab-panel {
-  /* // matchs the code editor bg */
+  /* // matches the code editor bg */
   background: $subprimary;
 }
 
 // changes the length of the tab panels
 .q-tab-panels {
   padding: 0px !important;
-  // border-top: 3px solid black;
+  background: $subprimary;
 }
 
 .q-tabs {
@@ -175,17 +172,9 @@ i {
   border-radius: 0px;
   background: $subprimary;
 }
-.html-bg {
-  /* // give html background color of grey */
-  background-color: #202122;
-}
 
 .inner-div {
   height: 100%;
 }
 
-// .bord {
-//   border-left: 3px solid black;
-//   border-right: 3px solid black;
-// }
 </style>

src/components/dashboard_items/GetStarted.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card id="dashboard-cards" class="board" >
+  <q-card id="dashboard-cards" class="sidebar-border" >
     <q-tabs
       v-model="tutorialPage"
       class="bg-subaccent text-white"
@@ -13,25 +13,22 @@
         name="landing"
         label="Welcome to Overvue"
         id="label-text"
-        style="border-right: 3px solid black"
         >
       </q-tab>
       <q-tab 
         name="basics" 
         label="Basic Functions" 
         id="label-text"
-        style="border-right: 3px solid black"
         >
       </q-tab>
       <q-tab 
         name="advanced" 
         label="Advanced Functions" 
         id="label-text"
-        style="border-right: 3px solid black"
         >
       </q-tab>
     </q-tabs>
-    <q-tab-panels v-model="tutorialPage" animated class="html-bg text-white">
+    <q-tab-panels v-model="tutorialPage" animated>
       <q-tab-panel name="landing">
         <Landing @nextTab="tutorialPage = 'basics'"/>
       </q-tab-panel>
@@ -66,17 +63,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-i {
-  font-size: 11px;
-}
-
-.home-sidebar {
-  margin: 1rem;
-  justify-content: center;
-  border-radius: 5px;
-  padding: 0px;
-  background: $subsecondary;
-}
 
 .q-btn {
   font-size: 8px;
@@ -110,35 +96,18 @@ i {
 
 .q-tab-panels {
   padding: 0px !important;
-  border-top: 3px solid black;
+  background: $subprimary;
 }
 
 .q-tabs {
-  background: #11120f;
-}
-
-.toolbar-background {
-  background: black;
-}
-
-#dashboard-cards {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-radius: 0px;
-  background: #737578;
-}
-.html-bg {
-  /* // give html background color of grey */
-  background-color: #202122;
+  background: $subprimary;
 }
 
 .inner-div {
   height: 100%;
 }
 
-.board {
+.sidebar-border {
   border-left: 3px solid black;
-  border-right: 3px solid black;
 }
 </style>

src/components/dashboard_items/RouteDisplay.vue

@@ -8,7 +8,7 @@ Includes functionality to:
   <div class="route-display">
     <q-input
       @keyup.enter="handleEnterKeyPress"
-      color="menutext"
+      color="white"
       dark
       outlined
       bottom-slots

src/components/home_sidebar_items/ComponentTab/AddProps.vue

@@ -2,7 +2,7 @@
   <div>
     <q-input
       @keyup.enter="createNewProp(textProps)"
-      color="menutext"
+      color="white"
       dark
       outlined
       bottom-slots

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -46,6 +46,7 @@ export default {
   height: 100%;
   // matches the code editor bg
   background: $subprimary;
+  padding: 0px;
   // changes the length of the tab panels
 }
 .q-tab-panels {

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -18,7 +18,7 @@ Description:
           v-on:keyup.delete.stop
           v-model="componentNameInputValue"
           label="Set component name *"
-          color="menutext"
+          color="white"
           dark
           dense
           outlined
@@ -179,7 +179,7 @@ export default {
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    margin: 20px;
+    margin: 4px;
   }
   .create-component-form {
     display: flex;

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -8,7 +8,7 @@ Description:
 <template>
   <div class="edit-component-div">
     <div>
-      <button class="menu-link" @click="resetActiveComponent"><i class="fa fa-arrow-left" aria-hidden="true"></i> Create Component Menu</button>
+      <button class="menu-link" @click="resetActiveComponent"><i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp; &nbsp; Create Component Menu</button>
       <q-card class="expansion-item" dark flat>
         <div
           class="text-body2"
@@ -20,6 +20,7 @@ Description:
         v-on:keyup.delete.stop
         v-model="newName"
         :placeholder="this.activeComponent"
+        color="white"
         dark
         dense
         outlined

src/components/home_sidebar_items/StoreTab/StoreTab.vue

@@ -22,7 +22,7 @@ Functionality:
         <q-tab-panel name="state">
           <q-input
             @keyup.enter="createNewState(textState)"
-            color="menutext"
+            color="white"
             dark
             outlined
             v-model="textState"
@@ -217,6 +217,10 @@ i {
   padding: 0 !important;
 }
 
+.q-tabs {
+  background: #11120F;
+}
+
 #store-cards {
   height: 80%;
   border-radius: 0;

src/css/app.scss

@@ -4,6 +4,10 @@
 // font-family: 'Montserrat', sans-serif;
 // font-family: 'Mukta', sans-serif;
 // font-family: 'Nunito Sans', sans-serif;
+body {
+    font-family: 'Mukta', sans-serif;
+    color: $menutext;
+}
 
 main {
     background: #5b6e6e;