From fa6eb764ae718b1a56d417095d4f53854e9bd425 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 12 Jul 2020 23:53:24 +0200
Subject: [PATCH] :building_construction: (music) bold selected mood

---
 src/components/ZoneMusic.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
index 27b229e..49f4cea 100644
--- a/src/components/ZoneMusic.vue
+++ b/src/components/ZoneMusic.vue
@@ -2,7 +2,9 @@
   <div class="zone-music">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ disabled: withMusic }">focus</span>
+        <span :class="{ selected: !withMusic, disabled: withMusic }"
+          >focus</span
+        >
         <input
           type="checkbox"
           name="use-music"
@@ -11,7 +13,9 @@
           @change="setWithMusic(!withMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ disabled: !withMusic }">chill</span>
+        <span :class="{ selected: withMusic, disabled: !withMusic }"
+          >chill</span
+        >
       </label>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
@@ -60,6 +64,9 @@ label[data-pm-holder] {
 
   span {
     flex: 1;
+    &.selected {
+      font-weight: bold;
+    }
   }
 }
 .disabled {