will merge with dev for photos

Author: katherinek123

src/App.vue

@@ -1,12 +1,8 @@
 <template>
   <!-- Get passed down to MyLayout.vue 
   & listen for custom events emitted from MyLayout.vue -->
-  <router-view
-    v-on:undo="undoTrigger"
-    v-on:redo="redoTrigger"
-    v-bind:done-action="doneAction"
-    v-bind:undone-action="undoneAction"
-  />
+  <router-view v-on:undo="undoTrigger" v-on:redo="redoTrigger" v-bind:done-action="doneAction"
+    v-bind:undone-action="undoneAction" />
 </template>
 
 <script>
@@ -44,7 +40,7 @@ let redoMixin = {
         if (this.undoneAction[this.undoneAction.length - 1]) {
           if (
             action.type ===
-              this.undoneAction[this.undoneAction.length - 1].type &&
+            this.undoneAction[this.undoneAction.length - 1].type &&
             deepEqual(
               action.payload,
               this.undoneAction[this.undoneAction.length - 1].payload

src/components/right-sidebar/GetStarted.vue

@@ -21,6 +21,7 @@
       <q-tab-panel name="basics">
         <BasicFunctions @nextTab="tutorialPage = 'advanced'" />
       </q-tab-panel>
+
       <q-tab-panel name="version">
         <NewVersionInfo @nextTab="tutorialPage = 'version'" />
       </q-tab-panel>

src/components/right-sidebar/tutorial/Landing.vue

@@ -3,7 +3,7 @@
   <section id="welcomeTab">
     <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 7.0" @click="versionTab" />
+    <q-btn class="tut-btn" color="secondary" label="What's New in 7.0" @click="newTab" />
     <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>

src/components/right-sidebar/tutorial/NewVersionInfo.vue

@@ -1,12 +1,75 @@
 <template>
   <section id="new features">
-    <q-card id="list">
+    <h6 class="feature list">What's New?</h6>
 
-      <h6 class="feature list">What's New?</h6>
+    <p class="info-sub-heading">More Semantic HMTL</p>
+    <p class="infoContent"></p>
 
-      <p>More Semantic HMTL</p>
-      <p>Component Customization</p>
+    <p class="info-sub-heading">Component Customization</p>
+    <p class="infoContent"></p>
+
+    <p class="info-sub-heading">Drag and Drop for HTML Tags </p>
+    <p class="infoContent"></p>
+
+    <p class="info-sub-heading">Add class, id, and v-model Attributes </p>
+    <p class="infoContent"></p>
+
+    <p class="info-sub-heading">Added Scoped Tags</p>
+    <p class="infoContent"></p>
+
+    <p class="info-sub-heading">Ability to Nest Components</p>
+    <p class="infoContent"></p>
 
-    </q-card>
   </section>
-</template>
+</template>
+
+<style scoped lang="scss">
+#basicFunctions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+}
+
+.tutorialHeading {
+  margin: .75rem;
+  font-size: 2rem;
+  padding-top: 15px;
+}
+
+.info-sub-heading {
+  align-self: flex-start;
+  font-size: 1.4rem;
+  margin: .75rem;
+  margin-bottom: 0px;
+}
+
+.infoContent {
+  margin: .75rem;
+  align-self: flex-start;
+  font-size: 1rem;
+}
+
+.tut-btn {
+  margin: 0.75rem;
+  width: 50%;
+  min-height: 42px;
+  height: auto;
+}
+
+.tut-image {
+  margin: 4px;
+}
+
+.tut-screenshot {
+  margin: 4px;
+  border: 1px solid $primary;
+  max-width: 300px;
+}
+
+#advanced-btn {
+  margin-top: 30px !important;
+  margin-bottom: 50px !important;
+}
+</style>