add: new emotions with colors

Added new emotions with respective colors, removed old useless ones

src/App.vue

@@ -34,29 +34,35 @@ import Navigation from './components/Sections/Navigation.vue'
   --clr-error: #851919;
   --clr-error-contrast: #ffffff;
 
-  --clr-happy-dark: #009933;
-  --clr-happy-light: #d1ffe8;
+  --clr-happy-dark: #007822;
+  --clr-happy-light: #eefff4;
 
-  --clr-sad-dark: #252ed5;
-  --clr-sad-light: #e5ecfc;
+  --clr-relaxed-dark: #0093c1;
+  --clr-relaxed-light: #E5F9FF;
 
-  --clr-disappointed-dark: #ab6b0e;
-  --clr-disappointed-light: #fffbd8;
+  --clr-content-dark: #499009;
+  --clr-content-light: #F1FAEA;
 
-  --clr-angry-dark: #851919;
-  --clr-angry-light: #ffe5e5;
+  --clr-sad-dark: #001f88;
+  --clr-sad-light: #ECEFF7;
 
-  --clr-empty-dark: #595959;
-  --clr-empty-light: #f1f1f1;
+  --clr-angry-dark: #840b15;
+  --clr-angry-light: #FDE7E9;
 
-  --clr-dead-dark: #ffffff;
-  --clr-dead-light: #000000;
+  --clr-disappointed-dark: #8c0095;
+  --clr-disappointed-light: #fce2ff;
 
-  --clr-sick-dark: #87ad00;
-  --clr-sick-light: #edffd8;
+  --clr-empty-dark: #262626;
+  --clr-empty-light: #F2F2F2;
 
-  --clr-pissed-dark: #7853ff;
-  --clr-pissed-light: #f1efff;
+  --clr-scared-dark: #c35700;
+  --clr-scared-light: #FFEAE5;
+
+  --clr-nervous-dark: #b6820f;
+  --clr-nervous-light: #FFF7E5;
+
+  --clr-panic-dark: #3F0D10;
+  --clr-panic-light: #f0e9ea;
 
   --clr-current-dark: var(--clr-happy-dark);
   --clr-current-light: var(--clr-happy-light);
@@ -69,6 +75,7 @@ import Navigation from './components/Sections/Navigation.vue'
   --font-size-l: calc(var(--font-size-default) * var(--scaling-factor));
   --font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
   --font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));
+  --font-size-xxxl: calc(var(--font-size-xxl) * var(--scaling-factor));
 
   /* Paddings depend on Font-Size */
   --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));

src/components/Sections/Mood/Choice.vue

@@ -16,12 +16,12 @@
           <button
               v-for="[, mood] in availableMoods"
               :class="{
-                active: currentMood?.color === mood.color,
+                active: currentMood?.id === mood.id,
               }"
               :key="mood.label"
               :style="{
-                '--color': `var(--clr-${mood.color}-dark)`,
-                '--background-active': `var(--clr-${mood.color}-light)`,
+                '--color': `var(--clr-${mood.id}-dark)`,
+                '--background-active': `var(--clr-${mood.id}-light)`,
               }"
               @click="changeMood(mood)"
           >

src/components/Sections/Navigation.vue

@@ -1,14 +1,28 @@
 <template>
   <section class="Navigation" :class="{ open }">
     <nav ref="nav">
-      <ul class="points">
-        <li v-for="page in pages">
-          <RouterLink :to="page.route" @click="close()" active-class="active">
-            <FontAwesomeIcon class="icon" :icon="page.icon" />
-            <span>{{ page.label }}</span>
-          </RouterLink>
-        </li>
-      </ul>
+      <header>
+        <img src="/img/nav.jpg" alt="" aria-hidden="true" />
+        <strong>Soul Echo</strong>
+      </header>
+      <div class="points">
+        <ul>
+          <li v-for="page in pages">
+            <RouterLink :to="page.route" @click="close()" active-class="active">
+              <FontAwesomeIcon class="icon" :icon="page.icon" />
+              <span>{{ page.label }}</span>
+            </RouterLink>
+          </li>
+        </ul>
+        <ul>
+          <li v-for="page in meta">
+            <RouterLink :to="page.route" @click="close()" active-class="active">
+              <FontAwesomeIcon class="icon" :icon="page.icon" />
+              <span>{{ page.label }}</span>
+            </RouterLink>
+          </li>
+        </ul>
+      </div>
     </nav>
   </section>
 </template>
@@ -21,13 +35,23 @@ import { faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons/faClockRot
 import { faCalendarDays } from '@fortawesome/pro-duotone-svg-icons/faCalendarDays'
 import { onClickOutside } from '@vueuse/core'
 import { useMoodStore } from '../../stores/mood.ts'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { faSquareInfo } from '@fortawesome/pro-duotone-svg-icons/faSquareInfo'
+import { faGearCode } from '@fortawesome/pro-duotone-svg-icons/faGearCode'
+import { faGears } from '@fortawesome/pro-duotone-svg-icons/faGears'
 
 const moodStore = useMoodStore()
 const nav = useNavigation()
 const close = () => nav.hideNavigation()
 const open = computed(() => nav.isNavigationVisible.value)
 
-const pages = reactive([
+type Page = {
+  label: string
+  icon: IconDefinition
+  route: string
+}
+
+const pages = reactive<Page[]>([
   {
     label: 'Stimmung',
     icon: moodStore.mood.icon,
@@ -45,6 +69,25 @@ const pages = reactive([
   },
 ])
 
+const meta : Page[] = [
+  {
+    label: 'Einstellungen',
+    icon: faGears,
+    route: '/settings'
+  },
+  {
+    label: 'Updates',
+    icon: faGearCode,
+    route: '/updates'
+  },
+  {
+    label: 'Impressum',
+    icon: faSquareInfo,
+    route: '/imp'
+  },
+
+]
+
 const navRef = useTemplateRef<HTMLElement>('nav')
 onMounted(() => { onClickOutside(navRef, close) })
 
@@ -76,52 +119,73 @@ moodStore.$subscribe((_, state) => {
     }
   }
 
-  nav {
+  & header {
+    position: relative;
+
+    & strong {
+      position: absolute;
+      left: var(--padding-default);
+      bottom: var(--padding-default);
+      font-size: var(--font-size-xxxl);
+      font-family: "Roboto Condensed", sans-serif;
+      color: var(--clr-white);
+      text-shadow: 0 2px 0 #3c3c3c, 1px 13px 15px #cbc8c8;
+    }
+
+    & img {
+      width: 100%;
+    }
+  }
+
+  & nav {
     display: flex;
     flex-direction: column;
     align-items: start;
     background: var(--clr-white);
     box-shadow: var(--box-shadow-z2);
-    padding: var(--padding-default);
     height: 100dvh;
     width: 70%;
     translate: -100% 0;
     transition: 150ms ease-in-out;
   }
 
-  & .close {
-    justify-self: flex-end;
-    font-size: var(--font-size-xl);
-  }
-
   & .points {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    font-size: var(--font-size-default);
-    font-family: "Roboto Condensed", sans-serif;
-    gap: var(--padding-default);
+    justify-content: space-between;
 
-    & li {
-      list-style: none;
+    & ul {
       width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      font-size: var(--font-size-default);
+      font-family: "Roboto Condensed", sans-serif;
+      gap: var(--padding-default);
+      padding: var(--padding-default);
 
-      & a {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        gap: var(--padding-default);
-        color: var(--clr-current-dark);
-        border-radius: var(--radius-default);
-        padding: var(--padding-xs) var(--padding-s);
-        transition: var(--transition-default);
-        background: transparent;
-        cursor: pointer;
+      & li {
+        list-style: none;
+        width: 100%;
 
-        &.active {
-          background: var(--clr-current-light);
+        & a {
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: var(--padding-default);
           color: var(--clr-current-dark);
+          border-radius: var(--radius-default);
+          padding: var(--padding-xs) var(--padding-s);
+          transition: var(--transition-default);
+          background: transparent;
+          cursor: pointer;
+
+          &.active {
+            background: var(--clr-current-light);
+            color: var(--clr-current-dark);
+          }
         }
       }
     }

src/components/Views/Current.vue

@@ -29,8 +29,8 @@ const currentNode = ref<string>('')
 const changeMood = (newMood : Mood, note ?: string) => {
   currentMood.value = newMood
   currentNode.value = note ?? ''
-  document.documentElement.style.setProperty('--clr-current-dark', `var(--clr-${newMood.color}-dark)`)
-  document.documentElement.style.setProperty('--clr-current-light', `var(--clr-${newMood.color}-light)`)
+  document.documentElement.style.setProperty('--clr-current-dark', `var(--clr-${newMood.id}-dark)`)
+  document.documentElement.style.setProperty('--clr-current-light', `var(--clr-${newMood.id}-light)`)
 
   moodStore.changeMood(newMood)
   moodStore.changeNote(note)

src/shared/moods.ts

@@ -1,76 +1,102 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faFaceSmile } from '@fortawesome/pro-duotone-svg-icons/faFaceSmile'
 import { faFaceFrown } from '@fortawesome/pro-duotone-svg-icons/faFaceFrown'
 import { faFacePouting } from '@fortawesome/pro-duotone-svg-icons/faFacePouting'
 import { faFaceDisappointed } from '@fortawesome/pro-duotone-svg-icons/faFaceDisappointed'
 import { faFaceMeh } from '@fortawesome/pro-duotone-svg-icons/faFaceMeh'
-import { faFaceThermometer } from '@fortawesome/pro-duotone-svg-icons/faFaceThermometer'
-import { faFaceDowncastSweat } from '@fortawesome/pro-duotone-svg-icons/faFaceDowncastSweat'
 import { faFaceAnxiousSweat } from '@fortawesome/pro-duotone-svg-icons/faFaceAnxiousSweat'
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { faFaceSmileRelaxed } from '@fortawesome/pro-duotone-svg-icons/faFaceSmileRelaxed'
+import { faFaceRelieved } from '@fortawesome/pro-duotone-svg-icons/faFaceRelieved'
+import { faFaceScream } from '@fortawesome/pro-duotone-svg-icons/faFaceScream'
+import { faFaceConfounded } from '@fortawesome/pro-duotone-svg-icons/faFaceConfounded'
+
+export type PossibleMood =
+  'happy'
+  | 'relaxed'
+  | 'content'
+  | 'sad'
+  | 'angry'
+  | 'disappointed'
+  | 'empty'
+  | 'scared'
+  | 'nervous'
+  | 'panic'
 
 export type Mood = {
   label: string,
-  color: string,
+  id: PossibleMood,
   icon: IconDefinition,
 }
 
-export type PossibleMood = 'happy' | 'sad' | 'angry' | 'disappointed' | 'empty' | 'sick' | 'scared' | 'pissed'
-
-const happy = {
+const happy : Mood = {
   label: 'Glücklich',
-  color: 'happy',
+  id: 'happy',
   icon: faFaceSmile,
 }
 
-const sad = {
+const relaxed : Mood = {
+  label: 'Entspannt',
+  id: 'relaxed',
+  icon: faFaceRelieved,
+}
+
+const content : Mood = {
+  label: 'Zufrieden',
+  id: 'content',
+  icon: faFaceSmileRelaxed,
+}
+
+const sad : Mood = {
   label: 'Traurig',
-  color: 'sad',
+  id: 'sad',
   icon: faFaceFrown,
 }
 
-const angry = {
+const angry : Mood = {
   label: 'Wütend',
-  color: 'angry',
+  id: 'angry',
   icon: faFacePouting,
 }
 
-const disappointed = {
+const disappointed : Mood = {
   label: 'Enttäuscht',
-  color: 'disappointed',
+  id: 'disappointed',
   icon: faFaceDisappointed,
 }
 
-const empty = {
+const empty : Mood = {
   label: 'Leer',
-  color: 'empty',
+  id: 'empty',
   icon: faFaceMeh,
 }
 
-const sick = {
-  label: 'Krank',
-  color: 'sick',
-  icon: faFaceThermometer,
-}
-
-const scared = {
+const scared : Mood = {
   label: 'Ängstlich',
-  color: 'scared',
+  id: 'scared',
   icon: faFaceAnxiousSweat,
 }
 
-const pissed = {
-  label: 'Genervt',
-  color: 'pissed',
-  icon: faFaceDowncastSweat,
+const nervous : Mood = {
+  label: 'Nervös',
+  id: 'nervous',
+  icon: faFaceConfounded,
+}
+
+const panic : Mood = {
+  label: 'Panisch',
+  id: 'panic',
+  icon: faFaceScream,
 }
 
 export const moods : Record<PossibleMood, Mood> = {
   happy,
+  relaxed,
+  content,
   sad,
   angry,
   disappointed,
   empty,
-  sick,
   scared,
-  pissed,
+  nervous,
+  panic,
 }