styling updates for tutorial tabs

Author: megatera

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,23 @@ 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%;
 }
 </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,23 @@ 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%;
 }
 </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,30 @@ 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%;
 }
 
+#closeTutorialButton {
+  background-color: $subprimary;
+  color: $menutext;
+  border: 1px solid $menutext;
+}
+
 </style>