landing page updated with logo and links to github-- updated HTML queue and other displays to show the active component for clarity

Author: MrBeeAreWhy

src/assets/gear.png

@@ -33,7 +33,10 @@ Description:
         </q-tab-panel>
         <q-tab-panel name="state">
           <p v-if="!this?.activeComponentObj?.state?.length">
-            No state in component.
+             {{this.activeComponent ? `No state in ${this.activeComponent}` : 'Select a component.' }}
+          </p>
+          <p v-else>
+            State in {{this.activeComponent}}:
           </p>
           <ul id="stateList">
             <li v-for="comp in compObj.state" :key="comp">
@@ -43,7 +46,10 @@ Description:
         </q-tab-panel>
         <q-tab-panel name="actions">
           <p v-if="!this?.activeComponentObj?.actions?.length">
-            No actions in component
+            {{this.activeComponent ? `No actions in ${this.activeComponent}` : 'Select a component.' }}
+          </p>
+          <p v-else>
+            Actions in {{this.activeComponent}}:
           </p>
           <ul id="actionList">
             <li v-for="comp in compObj?.actions" :key="comp">
@@ -53,7 +59,10 @@ Description:
         </q-tab-panel>
         <q-tab-panel name="props">
           <p v-if="!this?.activeComponentObj?.props?.length">
-            No props in component
+            {{this.activeComponent ? `No props in ${this.activeComponent}` : 'Select a component.' }}
+          </p>
+          <p v-else>
+            Props in {{this.activeComponent}}:
           </p>
           <ul id="propsList">
             <li v-for="comp in compObj?.props" :key="comp">

src/assets/overvue_layeredlogo.png

@@ -9,7 +9,7 @@ Description:
     <span class='list-title' v-if='this.activeLayer.id !== ""'>
       <i class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
       <!-- <button v-if='this.activeLayer.id' @click="upOneLayer">Up</button>  -->
-      &nbsp; &nbsp; Viewing Elements in '{{ depth }}'
+      &nbsp; &nbsp; Viewing Elements in {{this.activeComponent}} '{{ depth }}'
       <hr> 
     </span>
     <span class='list-title' v-else-if='!this.activeComponent'></span>

src/components/dashboard_items/ComponentDetails.vue

@@ -32,6 +32,8 @@ export default {
 
 .tutorialHeading {
   margin: .75rem;
+  font-size: 2rem;
+  padding-top: 15px;
 }
 
 .tutorialContent {

src/components/dashboard_items/HTMLQueue.vue

@@ -1,8 +1,13 @@
 <template>
 <!--Basic functionality here, add component, copy/paste, undo/redo, add html, saving, loading, exporting-->
   <section id="basicFunctions">
-    <h6 class="tutorialHeading">Basic Functions Here!</h6>
-    <p class="tutorialContent">Explain some basic functionality here</p>
+    <h6 class="tutorialHeading">Getting Started in OverVue</h6>
+    <p class="tutorialContent">Prototyping in OverVue is designed to be quick and efficient. Learning how to use OverVue will help
+      you to integrate this tool into your design process for creating Vue applications. 
+    </p>
+    <p class="tutorialContent">If you ever want to navigate back to this page, click the gear icon<img style="vertical-align:middle" alt="Gear" src="../../../assets/gear.png" id="tut-image"> in the top right and select "Getting Started"
+      to return to the landing page.
+    </p>
     <q-btn
       class="tut-btn"
       color="secondary"
@@ -26,7 +31,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 #basicFunctions{
   display: flex;
   flex-direction: column;
@@ -36,10 +41,14 @@ export default {
 
 .tutorialHeading {
   margin: .75rem;
+  font-size: 2rem;
+  padding-top: 15px;
 }
 
 .tutorialContent {
   margin: .75rem;
+  align-self: flex-start;
+  font-size: 1rem;
 }
 
 .tut-btn {
@@ -48,4 +57,8 @@ export default {
   min-height: 42px;
   height: auto;
 }
+
+.tut-image {
+  border: 1px solid white;
+}
 </style>

src/components/dashboard_items/tutorial/AdvancedFunctions.vue

@@ -1,43 +1,75 @@
 <template>
 <!--Landing page-->
   <section id="welcomeTab">
-  <h6 class="tutorialHeading">Welcome to OverVue!</h6>
+  <h6 class="tutorialHeading">Welcome to</h6>
+  <img alt="OverVue" src="../../../assets/overvue_layeredlogo.png" id="logo">
+      <q-btn
+      class="tut-btn"
+      color="secondary"
+      label="What's New in 6.0"
+      @click="openUrl('https://github.com/open-source-labs/OverVue#changelog-50')"
+    />
+          <q-btn
+      class="tut-btn"
+      color="secondary"
+      label="View the Readme"
+      @click="openUrl('https://github.com/open-source-labs/OverVue#readme')"
+    />
+    <p id="new-text">New to OverVue?</p>
     <q-btn
       class="tut-btn"
       color="secondary"
-      label="Learn More"
+      label="Explore Functionality"
       @click="nextTab"
     />
+    <p id="new-text"></p>
       <q-btn
       class="tut-btn closeAction"
-      label="Close Tutorial"
+      label="Close"
       @click="toggleTutorial"
     />
   </section>
 </template>
 
 <script>
+const { ipcRenderer, shell } = window;
 import { mapActions } from 'vuex';
 export default {
   emits: ['nextTab'],
   methods: {
     ...mapActions(["toggleTutorial"]),
     nextTab(){
       this.$emit('nextTab')
+    },
+    openUrl(url){
+      shell.openExternal(url, { activate: true });
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+#logo{
+  width: 325px;
+  height: 325px;
+}
+
+
+p{
+  margin-top: 12px;
+  margin-bottom: 0px;
+}
 #welcomeTab{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+
 .tutorialHeading {
   margin: .75rem;
+  font-size: 2rem;
+  padding-top: 15px;
 }
 
 .tutorialContent {