From 5c8b856042fc395bed03497cb6df4c95aa8d9f3c Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 12 Jul 2020 00:30:16 +0200
Subject: [PATCH] :sparkles: (music) add label for without music

---
 src/components/ZoneMusic.vue | 21 ++++++++++++++++++++-
 src/styles/app.scss          |  4 +---
 src/styles/variables.scss    |  3 +++
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/variables.scss

diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
index 5a1cc42..e99d8e9 100644
--- a/src/components/ZoneMusic.vue
+++ b/src/components/ZoneMusic.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="zone-music">
     <div class="pretty p-switch p-fill">
+      <div>
+        <label for="use-music" :class="{ disabled: withMusic }"
+          >concentré</label
+        >
+      </div>
       <input
         type="checkbox"
         name="use-music"
@@ -9,7 +14,7 @@
         @change="setWithMusic(!withMusic)"
       />
       <div class="state p-success">
-        <label for="use-music">son</label>
+        <label for="use-music" :class="{ disabled: !withMusic }">détente</label>
       </div>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
@@ -46,3 +51,17 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+
+.pretty {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.disabled {
+  color: darken($color, 60);
+}
+</style>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 1f8ea2b..c798ba2 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,9 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
 @import '~pretty-checkbox/src/pretty-checkbox';
 
-$color: #f8efba;
-$bgcolor: #2c3a47;
-$font-family: 'Fira Mono', monospace;
+@import './variables';
 
 body {
   text-align: center;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..2ec066a
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,3 @@
+$color: #f8efba;
+$bgcolor: #2c3a47;
+$font-family: 'Fira Mono', monospace;