✨ (julien) add the footer

src/App.vue

@@ -3,6 +3,7 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
+  <div class="app">
     <header>
       <nav>
         <router-link class="title is-3" to="/">
@@ -12,9 +13,15 @@ import { RouterLink, RouterView } from 'vue-router'
     </header>
 
     <RouterView />
+  </div>
 </template>
 
 <style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
 nav {
   margin: 1rem 0;
   display: flex;

src/assets/icons/love.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#eb2f06" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>

src/views/HomeView.vue

@@ -8,7 +8,7 @@ const taskStore = useTaskStore()
 const hasTask = computed(() => taskStore.tasks.length > 0)
 
 const resetTasks = () => {
-  if (window.confirm('are you sure to reset all your tasks?')) {
+  if (window.confirm('Are you sure you want to clear all your tasks?')) {
     taskStore.reset()
   }
 }
@@ -16,15 +16,28 @@ const resetTasks = () => {
 
 <template>
   <main>
-    <div class="new-task-container">
+    <div class="columns is-centered">
+      <div class="new-task-container column buttons">
         <router-link :to="{ name: 'new-task' }" class="button is-primary"
           >Create a new task</router-link
         >
+        <button v-if="hasTask" class="button is-danger" @click="resetTasks">
+          clear the list
+        </button>
       </div>
-    <task-list />
+      <task-list class="column" />
-    <div v-if="hasTask">
-      <button class="button is-danger" @click="resetTasks">reset list</button>
     </div>
+    <footer>
+      <p>
+        Made with <img src="@/assets/icons/love.svg" alt="love" /> by
+        <a
+          href="http://github.com/jcalixte"
+          target="_blank"
+          rel="noopener noreferrer"
+          >Julien</a
+        >
+      </p>
+    </footer>
   </main>
 </template>
 
@@ -33,12 +46,16 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 60vh;
+  height: 100%;
 }
+
 .new-task-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+}
+
+footer img {
+  vertical-align: middle;
 }
 </style>