Merge pull request #17 from oslabs-beta/megan/tutorial

Tutorial styling

Author: Kerolos-Nesem

src/components/ComponentDisplay.vue

@@ -470,7 +470,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 {
   padding: 1rem;
@@ -149,14 +146,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 {
@@ -174,17 +171,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/dashboard_items/tutorial/AdvancedFunctions.vue

@@ -1,12 +1,15 @@
 <template>
   <!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
-    <p>Advanced Functions Here!</p>
-    <q-btn
-      id="tut-btn"
-      color="secondary"
-      label="Get Started with OverVue"
-      @click="toggleTutorial"
-    />
+    <section id="advancedFunctions">
+      <h6 class="tutorialHeading">Advanced Functions Here!</h6>
+      <p class="tutorialContent">Some fancier functionality here</p>
+      <q-btn
+        class="tut-btn"
+        color="secondary"
+        label="Get Started with OverVue"
+        @click="toggleTutorial"
+      />
+    </section>
 </template>
 
 <script>
@@ -20,9 +23,25 @@ export default {
 </script>
 
 <style scoped>
-#tut-btn {
-  height: 15px;
-  margin: 0 0.75rem;
+#advancedFunctions{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tutorialHeading {
+  margin: .75rem;
+}
+
+.tutorialContent {
+  margin: .75rem;
+}
+
+.tut-btn {
+  margin: 0.75rem;
   width: 50%;
+  min-height: 42px;
+  height: auto;
 }
 </style>

src/components/dashboard_items/tutorial/BasicFunctions.vue

@@ -1,12 +1,15 @@
 <template>
 <!--Basic functionality here, add component, copy/paste, undo/redo, add html, saving, loading, exporting-->
-  Basic Functions Here!
+  <section id="basicFunctions">
+    <h6 class="tutorialHeading">Basic Functions Here!</h6>
+    <p class="tutorialContent">Explain some basic functionality here</p>
     <q-btn
-      id="tut-btn"
+      class="tut-btn"
       color="secondary"
       label="Advanced Functionality"
       @click="nextTab"
     />
+  </section>
 </template>
 
 <script>
@@ -24,9 +27,25 @@ export default {
 </script>
 
 <style scoped>
-#tut-btn {
-  height: 15px;
-  margin: 0 0.75rem;
+#basicFunctions{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tutorialHeading {
+  margin: .75rem;
+}
+
+.tutorialContent {
+  margin: .75rem;
+}
+
+.tut-btn {
+  margin: 0.75rem;
   width: 50%;
+  min-height: 42px;
+  height: auto;
 }
 </style>

src/components/dashboard_items/tutorial/Landing.vue

@@ -1,18 +1,20 @@
 <template>
 <!--Landing page-->
-  Welcome to OverVue!
+  <section id="welcomeTab">
+  <h6 class="tutorialHeading">Welcome to OverVue!</h6>
     <q-btn
-      id="tut-btn"
+      class="tut-btn"
       color="secondary"
       label="Learn More"
       @click="nextTab"
     />
       <q-btn
-      id="tut-btn"
-      color="secondary"
+      class="tut-btn"
+      id="closeTutorialButton"
       label="Close Tutorial"
       @click="toggleTutorial"
     />
+  </section>
 </template>
 
 <script>
@@ -28,12 +30,32 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+#welcomeTab{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.tutorialHeading {
+  margin: .75rem;
+}
 
-#tut-btn {
-  height: 15px;
-  margin: 0 0.75rem;
+.tutorialContent {
+  margin: .75rem;
+}
+
+.tut-btn {
+  margin: 0.75rem;
   width: 50%;
+  min-height: 42px;
+  height: auto;
+}
+
+#closeTutorialButton {
+  background-color: $subprimary;
+  color: $menutext;
+  border: 1px solid $menutext;
 }
 
 </style>

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/ComponentActions.vue

@@ -116,5 +116,12 @@ export default {
 <style lang="scss" scoped>
 .selection-container {
     padding: 30px 0;
-  }
+}
+
+.component-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -116,4 +116,11 @@ export default {
   .selection-container {
     padding: 30px 0;
   }
+
+  .component-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>