Merge pull request #694 from citation-file-format/147-logo-top-left

Author: abelsiqueira

cypress/e2e/navigation.cy.ts

@@ -12,6 +12,12 @@ const advancedStepNames = [
 const allStepNames = [...basicStepNames, ...advancedStepNames]
 
 describe('App navigation', () => {
+    it('should be able to go back through the logo button', () => {
+        cy.visit('/start')
+        cy.dataCy('btn-logo')
+            .click()
+        cy.url().then((e) => expect(e.endsWith('#/')).to.be.true)
+    })
     describe('during basic mode', () => {
         it(`should have ${basicStepNames.length + 1} steps on stepper`, () => {
             cy.visit('/start')

src/components/Header.vue

@@ -1,8 +1,21 @@
 <template>
-    <span class="spacer" />
-    <q-btn-group flat>
+    <q-toolbar>
+        <q-btn
+            aria-label="Back to landing page"
+            class="q-py-sm"
+            data-cy="btn-logo"
+            flat
+            id="btn-logo"
+            v-on:click="goHome"
+        >
+            <img
+                alt=""
+                height="40"
+                src="~assets/cff-logo.svg"
+            >
+        </q-btn>
+        <q-space />
         <q-btn
-            color=""
             flat
             href="https://github.com/citation-file-format/cff-initializer-javascript/issues"
             icon-right="ion-logo-github"
@@ -23,25 +36,32 @@
         />
         <q-btn
             class="lt-lg gt-xs"
+            flat
             icon="menu"
             v-on:click="$emit('togglePreview')"
         >
             Preview
         </q-btn>
-    </q-btn-group>
+    </q-toolbar>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
     name: 'Header',
-    emits: ['togglePreview']
+    emits: ['togglePreview'],
+    setup () {
+        const router = useRouter()
+        return {
+            goHome: async () => {
+                await router.push({ path: '/' })
+            }
+        }
+    }
 })
 </script>
 
 <style scoped>
-.spacer {
-    flex-grow: 1;
-}
 </style>

src/css/app.css

@@ -17,8 +17,8 @@ body {
 }
 
 #header-inner {
-    background-color: purple;
-    color: white;
+    background-color: #fdfdfd;
+    color: black;
     display: flex;
     flex-direction: row;
     height: 50px;