From bb2df9ea793bf654d1c6f7d0ff26c6ac029ca95e Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 11 Jul 2020 00:42:57 +0200
Subject: [PATCH] :lipstick: (music) pretty checkbox

---
 src/styles/app.scss |  4 ++++
 src/views/Home.vue  | 20 ++++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 9091e50..1f8ea2b 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -34,3 +34,7 @@ button:focus {
 button:active {
   transform: scale(0.99);
 }
+
+.pretty {
+  font-size: 16pt;
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f760afa..741c026 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -22,14 +22,18 @@
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
-    <div>
-      <input
-        type="checkbox"
-        name="use-music"
-        id="use-music"
-        v-model="hasMusic"
-      />
-      <label for="use-music">Musique de fond</label>
+    <div class="music">
+      <div class="pretty p-switch p-fill">
+        <input
+          type="checkbox"
+          name="use-music"
+          id="use-music"
+          v-model="hasMusic"
+        />
+        <div class="state p-success">
+          <label for="use-music">Musique</label>
+        </div>
+      </div>
       <ChilledMusic
         v-if="hasMusic"
         :play="timeState === 'started'"