From 217a678196dc0d0f0e627c8a16d70c3bba388b85 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Wed, 15 Jul 2020 01:16:47 +0200
Subject: [PATCH] :dizzy: (button) finish button fade animation

---
 src/components/IntervalInput.vue | 25 ++++++++++++++++---------
 src/views/Home.vue               | 10 +++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 3f9f802..0c68cfb 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="interval-input">
     <transition name="fade" mode="out-in">
-      <button v-show="editable" @click="minus">
+      <button v-if="editable" class="spacer" @click="minus">
         <img key="minus" src="@/assets/minus.svg" alt="minus" />
       </button>
+      <div v-else class="spacer"></div>
     </transition>
+    <h3>{{ label }}</h3>
     <transition name="fade" mode="out-in">
-      <h3>{{ label }}</h3>
-    </transition>
-    <transition name="fade" mode="out-in">
-      <button v-show="editable" @click="plus">
+      <button v-if="editable" class="spacer" @click="plus">
         <img key="plus" src="@/assets/plus.svg" alt="plus" />
       </button>
+      <div v-else class="spacer"></div>
     </transition>
   </div>
 </template>
@@ -30,10 +30,10 @@ export default defineComponent({
 
     const label = computed(() => {
       if (interval.value === minInterval) {
-        return '30s session'
+        return '30 second session'
       }
 
-      return `${interval.value}min session`
+      return `${interval.value} minute session`
     })
 
     return {
@@ -53,16 +53,23 @@ $button-size: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-wrap: wrap;
+
+  h3 {
+    flex: 1;
+    line-height: 2rem;
+  }
 
   button {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 1rem;
     font-size: 2rem;
+  }
+
+  .spacer {
     width: $button-size;
     height: $button-size;
+    margin: 0 1rem;
   }
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c8d0262..48e89ab 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -24,21 +24,21 @@
             v-if="timeState === 'stopped'"
             src="@/assets/play.svg"
             alt="play"
-            width="44px"
-            height="44px"
+            width="50px"
+            height="50px"
           />
           <img
             key="pause"
             v-if="timeState === 'started'"
             src="@/assets/pause.svg"
             alt="pause"
-            width="44px"
-            height="44px"
+            width="50px"
+            height="50px"
           />
         </transition>
       </button>
       <button @click="clear">
-        <img src="@/assets/stop.svg" alt="stop" />
+        <img src="@/assets/stop.svg" alt="stop" width="50px" height="50px" />
       </button>
     </div>
     <ZoneMusic