From 0a963e9503dbde8723a3ff2b3f4c7e120a3ffa6a Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Jul 2023 10:19:56 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(julien)=20add=20the=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue               | 23 +++++++++++++++--------
 src/assets/icons/love.svg |  4 ++++
 src/views/HomeView.vue    | 39 ++++++++++++++++++++++++++++-----------
 3 files changed, 47 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/love.svg

diff --git a/src/App.vue b/src/App.vue
index d36c3b4..bcd5ec1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,18 +3,25 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <header>
-    <nav>
-      <router-link class="title is-3" to="/">
-        <img class="logo" src="/loop.png" alt="Loopycode" />
-      </router-link>
-    </nav>
-  </header>
+  <div class="app">
+    <header>
+      <nav>
+        <router-link class="title is-3" to="/">
+          <img class="logo" src="/loop.png" alt="Loopycode" />
+        </router-link>
+      </nav>
+    </header>
 
-  <RouterView />
+    <RouterView />
+  </div>
 </template>
 
 <style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
 nav {
   margin: 1rem 0;
   display: flex;
diff --git a/src/assets/icons/love.svg b/src/assets/icons/love.svg
new file mode 100644
index 0000000..b92c81a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5724615..a599ae1 100644
--- a/src/views/HomeView.vue
+++ b/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">
-      <router-link :to="{ name: 'new-task' }" class="button is-primary"
-        >Create a new task</router-link
-      >
-    </div>
-    <task-list />
-    <div v-if="hasTask">
-      <button class="button is-danger" @click="resetTasks">reset list</button>
+    <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 class="column" />
     </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>