From 62ac70a74761440bc25a3c21798eb2846fc8d21a Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 12 Jul 2020 22:30:28 +0200
Subject: [PATCH] :lipstick: (app) add svg

---
 src/components/IntervalInput.vue | 37 ++++++++++++++++++++++++++++++--
 src/styles/app.scss              |  9 ++++++++
 src/views/Home.vue               | 11 +++-------
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 4b342b8..538aa6a 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -1,8 +1,41 @@
 <template>
   <div class="interval-input">
-    <button v-show="editable" @click="minus">-</button>
+    <button v-show="editable" @click="minus">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-minus"
+        width="44"
+        height="44"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="#2c3a47"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    </button>
     <h2>{{ label }}</h2>
-    <button v-show="editable" @click="plus">+</button>
+    <button v-show="editable" @click="plus">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-plus"
+        width="44"
+        height="44"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="#2c3a47"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" />
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    </button>
   </div>
 </template>
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index ec61861..3585502 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -36,3 +36,12 @@ button:active {
 .pretty {
   font-size: 16pt;
 }
+
+button {
+  margin: 0 1rem;
+  padding: 0;
+
+  svg {
+    margin: 0.5rem;
+  }
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a7b59e2..4926227 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -15,7 +15,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -32,7 +32,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -50,7 +50,7 @@
           height="44"
           viewBox="0 0 24 24"
           stroke-width="1.5"
-          stroke="#2c3e50"
+          stroke="#2c3a47"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -123,11 +123,6 @@ export default defineComponent({
   flex-wrap: wrap;
 }
 
-button {
-  margin: 0 1rem;
-  padding: 0;
-}
-
 .global-time {
   font-size: calc(3em + 10vw);
 }