💫 (button) add animation

src/App.vue

@@ -1,22 +1,6 @@
 <template>
   <div id="app">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="120"
-      height="120"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-users"
-    >
-      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-      <circle cx="9" cy="7" r="4"></circle>
-      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-    </svg>
+    <img src="@/assets/logo.svg" alt="binôme" />
     <router-view />
   </div>
 </template>

src/assets/logo.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="120"
+  height="120"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#f8efba"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+  <circle cx="9" cy="7" r="4"></circle>
+  <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+</svg>

src/assets/pause.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-arrow-bar-right"
+  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="8" y1="4" x2="8" y2="20" />
+  <line x1="16" y1="4" x2="16" y2="20" />
+</svg>

src/assets/play.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-caret-right"
+  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" />
+  <path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)" />
+</svg>

src/assets/stop.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-square"
+  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" />
+  <rect x="4" y="4" width="16" height="16" rx="2" />
+</svg>

src/styles/app.scss

@@ -49,3 +49,14 @@ button {
 a {
   color: white;
 }
+
+// transition
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}

src/views/Home.vue

@@ -17,57 +17,24 @@
     </section>
     <div class="global-time">{{ time }}</div>
     <div class="actions">
-      <button v-show="timeState === 'stopped'" @click="start">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-caret-right"
-          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" />
-          <path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)" />
-        </svg>
+      <button @click="toggle">
+        <transition name="fade" mode="out-in">
+          <img
+            key="play"
+            v-if="timeState === 'stopped'"
+            src="@/assets/play.svg"
+            alt="play"
+          />
+          <img
+            key="pause"
+            v-if="timeState === 'started'"
+            src="@/assets/pause.svg"
+            alt="pause"
+          />
+        </transition>
       </button>
-      <button v-show="timeState === 'started'" @click="pause">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-arrow-bar-right"
-          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="8" y1="4" x2="8" y2="20" />
-          <line x1="16" y1="4" x2="16" y2="20" />
-        </svg>
-      </button>
-      <button v-show="timeState === 'started'" @click="clear">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-square"
-          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" />
-          <rect x="4" y="4" width="16" height="16" rx="2" />
-        </svg>
+      <button @click="clear">
+        <img src="@/assets/stop.svg" alt="stop" />
       </button>
     </div>
     <ZoneMusic
@@ -120,8 +87,13 @@ export default defineComponent({
       isDev1Turn
     } = useTimer()
 
+    const toggle = () => {
+      timeState.value === 'stopped' ? start() : pause()
+    }
+
     return {
       interval,
+      toggle,
       start,
       pause,
       clear,
@@ -168,4 +140,11 @@ footer {
   font-style: italic;
   font-size: 1rem;
 }
+
+$button-size: 44px;
+
+button {
+  width: $button-size;
+  height: $button-size;
+}
 </style>