💄 (interval) better interval look

src/components/DevSession.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dev-session">
-    <h2>dev {{ position }}</h2>
+    <h1>dev {{ position }}</h1>
-    <h4 v-show="isTurn">{{ session }}</h4>
+    <h2 v-show="isTurn">{{ session }}</h2>
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dev-session {
-  h4 {
+  h2 {
     font-size: 24pt;
   }
 }

src/components/IntervalInput.vue

@@ -1,40 +1,24 @@
 <template>
   <div class="interval-input">
     <button v-show="editable" @click="minus">-</button>
-    <h3>{{ interval }} {{ label }}</h3>
+    <h2>{{ label }}</h2>
     <button v-show="editable" @click="plus">+</button>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'
 
-const MIN_INTERVAL = 1
-
 export default defineComponent({
   name: 'IntervalInput',
   props: {
     editable: { type: Boolean, required: true }
   },
   setup() {
-    const { interval, setInterval } = useInterval()
+    const { minus, plus, label } = useInterval()
-
-    const minus = () => {
-      if (interval.value > MIN_INTERVAL) {
-        setInterval(interval.value - 1)
-      }
-    }
-    const plus = () => {
-      setInterval(interval.value + 1)
-    }
-
-    const label = computed(() =>
-      interval.value > MIN_INTERVAL ? 'minutes' : 'minute'
-    )
 
     return {
-      interval,
       minus,
       plus,
       label
@@ -48,7 +32,6 @@ $button-size: 50px;
 
 .interval-input {
   margin: 0 auto;
-  max-width: 50vh;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/ZoneMusic.vue

@@ -2,7 +2,7 @@
   <div class="zone-music">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ disabled: withMusic }">Focus</span>
+        <span :class="{ disabled: withMusic }">focus</span>
         <input
           type="checkbox"
           name="use-music"
@@ -11,7 +11,7 @@
           @change="setWithMusic(!withMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ disabled: !withMusic }">Chill</span>
+        <span :class="{ disabled: !withMusic }">chill</span>
       </label>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
@@ -63,6 +63,6 @@ label[data-pm-holder] {
   }
 }
 .disabled {
-  color: darken($color, 60);
+  color: desaturate($color, 70%);
 }
 </style>

src/hooks/useInterval.ts

@@ -1,13 +1,40 @@
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
+import { computed } from '@vue/composition-api'
+
+const MIN_INTERVAL = 0.5
 
 export const useInterval = () => {
   const { interval } = useGetters<GetterTree<State, State>>(['interval'])
   const { setInterval } = useActions<RootActions>(['setInterval'])
 
+  const minus = () => {
+    if (interval.value > MIN_INTERVAL) {
+      setInterval(Math.max(interval.value - 1, MIN_INTERVAL))
+    }
+  }
+
+  const plus = () => {
+    setInterval(Math.floor(interval.value + 1))
+  }
+
+  const label = computed(() => {
+    if (interval.value > 1) {
+      return `${interval.value} minutes`
+    }
+
+    if (interval.value === MIN_INTERVAL) {
+      return '30 seconds'
+    }
+
+    return `${interval.value} minute`
+  })
+
   return {
     interval,
-    setInterval
+    minus,
+    plus,
+    label
   }
 }

src/styles/app.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');
 
 @import './variables';
 @import './plume';

src/styles/variables.scss

@@ -1,6 +1,6 @@
 $color: #f8efba;
 $bgcolor: #2c3a47;
-$font-family: 'Fira Mono', monospace;
+$font-family: 'DM Mono', monospace;
 
 :root {
   --pm-app-surface-color: #{#2c3a47};