add: several improvements

Better Mood choice, better format for text

src/App.vue

@@ -22,6 +22,9 @@ import Navigation from './components/Sections/Navigation.vue'
   --clr-white: #ffffff;
   --clr-black: #000000;
 
+  --clr-disabled: #dcdcdc;
+  --clr-disabled-contrast: #636363;
+
   --clr-neutral: #595959;
   --clr-neutral-contrast: #ffffff;
 

src/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-<button class="Button" :class="[color, display]">
+<button class="Button" :class="[color, display]" :disabled="disabled">
   <slot />
 </button>
 </template>
@@ -8,9 +8,10 @@
 type Props = {
   color ?: 'success' | 'error' | 'neutral' | 'inherit'
   display ?: 'elevated' | 'text' | 'icon'
+  disabled ?: boolean
 }
 
-const { color = 'success', display = 'elevated' } = defineProps<Props>()
+const { color = 'success', display = 'elevated', disabled = false } = defineProps<Props>()
 </script>
 
 <style scoped>
@@ -26,6 +27,7 @@ const { color = 'success', display = 'elevated' } = defineProps<Props>()
   padding: var(--padding-xs) var(--padding-default);
   border-radius: var(--radius-default);
   font-weight: 400;
+  transition: var(--transition-default);
 
   color: var(--btn-text);
   background-color: var(--btn-bg);
@@ -50,6 +52,12 @@ const { color = 'success', display = 'elevated' } = defineProps<Props>()
     --btn-clr-contrast: inherit;
   }
 
+  &:disabled {
+    pointer-events: none;
+    --btn-clr: var(--clr-disabled);
+    --btn-clr-contrast: var(--clr-disabled-contrast);
+  }
+
   &.elevated {
     --btn-bg: var(--btn-clr);
     --btn-text: var(--btn-clr-contrast);

src/components/Sections/Mood/Choice.vue

@@ -15,10 +15,13 @@
         <div class="MoodChoice">
           <button
               v-for="[, mood] in availableMoods"
+              :class="{
+                active: currentMood?.color === mood.color,
+              }"
               :key="mood.label"
               :style="{
-                '--background': `var(--clr-${mood.color}-light)`,
                 '--color': `var(--clr-${mood.color}-dark)`,
+                '--background-active': `var(--clr-${mood.color}-light)`,
               }"
               @click="changeMood(mood)"
           >
@@ -32,7 +35,7 @@
       </div>
       <footer>
         <Button @click="abort" display="text" color="error">Abbrechen</Button>
-        <Button @click="accept">Wählen</Button>
+        <Button @click="accept" :disabled="currentMood === null">Wählen</Button>
       </footer>
     </div>
   </dialog>
@@ -60,12 +63,14 @@ const changeMood = (newMood : Mood) => {
 
 const abort = () => {
   dialog.value?.close()
+  currentMood.value = null
   if (note.value) note.value.innerText = ''
 }
 
 const note = useTemplateRef<HTMLSpanElement>('note')
 
 const accept = () => {
+  if (!currentMood.value) return
   emit('changeMood', currentMood.value, note.value?.innerText)
   abort()
 }
@@ -81,19 +86,26 @@ onMounted(() => { onClickOutside(wrapper, () => dialog.value?.close()) })
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 4rem;
+  gap: var(--padding-default);
 
   & > button {
     all: unset;
-    --background: var(--clr-empty-light);
+    --background-active: var(--clr-white);
+    --background: var(--clr-white);
     --color: var(--clr-empty-dark);
 
-    font-family: 'Delius', sans-serif;
+    font-family: 'Roboto Condensed', sans-serif;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: var(--background);
     color: var(--color);
+    gap: var(--padding-xxs);
+
+    &.active {
+      --background: var(--background-active);
+    }
 
     & span {
       font-size: .8rem;

src/components/Views/Current.vue

@@ -4,8 +4,10 @@
     @click="openMoodChoice"
   >
     <FontAwesomeIcon class="icon" :icon="currentMood.icon" />
+    <div class="text">
       <h1>{{ currentMood.label }}</h1>
       <p v-if="currentNode">{{ currentNode }}</p>
+    </div>
   </section>
   <MoodChoice
     ref="moodChoice"
@@ -57,5 +59,6 @@ onMounted(() => {
 
   & .icon { font-size: 14rem; }
   & h1 { font-size: 1.5rem; }
+  & .text { text-align: center; }
 }
 </style>