From 157ac509a8d9d3f4efe82eb74299570033b2a517 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Thu, 19 Dec 2024 12:30:08 +0200
Subject: [PATCH 1/5] Add new QA section

---
 src/components/QAComponent.vue                |  1 +
 src/components/__tests__/QAComponent.spec.ts  |  2 +-
 .../__snapshots__/QAComponent.spec.ts.snap    | 22 ++++++++++++++++---
 .../__snapshots__/SettingsView.spec.ts.snap   |  9 +++++++-
 src/i18n/en.json                              |  6 ++++-
 src/i18n/fi.json                              |  8 +++++--
 6 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/QAComponent.vue b/src/components/QAComponent.vue
index 0245744..431c036 100644
--- a/src/components/QAComponent.vue
+++ b/src/components/QAComponent.vue
@@ -10,6 +10,7 @@ const questions = [
   'categories',
   'isItFree',
   'isMyDataSafe',
+  'howToInstall',
   'contact',
 ];
 
diff --git a/src/components/__tests__/QAComponent.spec.ts b/src/components/__tests__/QAComponent.spec.ts
index 92ed4a2..0028cd0 100644
--- a/src/components/__tests__/QAComponent.spec.ts
+++ b/src/components/__tests__/QAComponent.spec.ts
@@ -7,7 +7,7 @@ describe('QAComponent', () => {
   it('renders', () => {
     const wrapper = mount(QAComponent);
     expect(wrapper.html()).toMatchSnapshot();
-    expect(wrapper.findAll('[aria-expanded="false"]').length).toBe(7);
+    expect(wrapper.findAll('[aria-expanded="false"]').length).toBe(8);
   });
 
   it('renders answers', async () => {
diff --git a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
index d052b9c..1f895cf 100644
--- a/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QAComponent.spec.ts.snap
@@ -44,7 +44,14 @@ exports[`QAComponent > renders 1`] = `
     </button>
     <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-howToInstall">
+      <!--v-if-->How to install? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <!---->
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-14" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
       <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
       </svg>
@@ -112,13 +119,22 @@ exports[`QAComponent > renders answers 1`] = `
       <div id="headlessui-disclosure-panel-v-11" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-isMyDataSafe">
         <div>The data is stored in your browser's local storage and is not shared with any third parties. You can at any time you wish reset the app using the button below.</div>
       </div>
-    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-contact" type="button" aria-controls="headlessui-disclosure-panel-v-13">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-12" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-howToInstall" type="button" aria-controls="headlessui-disclosure-panel-v-13">
+      <!--v-if-->How to install? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <div id="headlessui-disclosure-panel-v-13" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-howToInstall">
+        <div>You can install the app from a browser such as Google Chrome that supports Progressive Web Apps (PWAs). Select "add to start screen" from your browser's menu or click the install icon on the location bar. On mobile Safari, click "Share" and then "Add to home screen". Installing on device allows offline use, but keeps the app within your browser's sandbox.</div>
+      </div>
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-14" aria-expanded="true" data-headlessui-state="open" data-test-id="qa-button-contact" type="button" aria-controls="headlessui-disclosure-panel-v-15">
       <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0 rotate-180 transform" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
       </svg>
     </button>
     <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
-      <div id="headlessui-disclosure-panel-v-13" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-contact">
+      <div id="headlessui-disclosure-panel-v-15" data-headlessui-state="open" class="p-2" data-test-id="qa-panel-contact">
         <div>You can find the project page in <a href="https://github.com/ajuvonen/veggies/" class="text-link" target="_blank" noreferrer="" noopener="">GitHub</a>. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!</div>
       </div>
     </transition-stub>
diff --git a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
index a3c174b..2be1588 100644
--- a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
@@ -55,7 +55,14 @@ exports[`SettingsView > renders 1`] = `
     </button>
     <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
       <!---->
-    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-18" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-18" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-howToInstall">
+      <!--v-if-->How to install? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
+      </svg>
+    </button>
+    <transition-stub enteractiveclass="transition duration-100 ease-out" enterfromclass="transform h-0 opacity-0" entertoclass="transform h-full opacity-100" leaveactiveclass="transition duration-75 ease-out" leavefromclass="transform h-full opacity-100" leavetoclass="transform h-0 opacity-0" appear="false" persisted="false" css="true">
+      <!---->
+    </transition-stub><button data-v-24e38f3d="" class="button button--primary w-full justify-between" id="headlessui-disclosure-button-v-20" aria-expanded="false" data-headlessui-state="" data-test-id="qa-button-contact">
       <!--v-if-->How to get in touch? <svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
       </svg>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2ed3bdf..4f2e9e7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -590,7 +590,7 @@
     ],
     "potato": [
       "Potatoes originated in South America and were first cultivated by the Inca civilization.",
-      "King Frederick of Prussia named potatos \"the royal vegetable\" to give them more prestige."
+      "King Frederick of Prussia supposedly named potatoes \"the royal vegetable\" to give them more prestige."
     ],
     "pumpkin seed": [
       "A 30-gram portion of pumpkin seeds provides about 7 grams of protein and is rich in magnesium."
@@ -780,6 +780,10 @@
       "title": "How to get in touch?",
       "text": "You can find the project page in {0}. The page has separate boards for reporting issues and engaging in other discussion. Thank you for your interest towards the project!"
     },
+    "howToInstall": {
+      "title": "How to install?",
+      "text": "You can install the app from a browser such as Google Chrome that supports Progressive Web Apps (PWAs). Select \"add to start screen\" from your browser's menu or click the install icon on the location bar. On mobile Safari, click \"Share\" and then \"Add to home screen\". Installing on device allows offline use, but keeps the app within your browser's sandbox."
+    },
     "isItFree": {
       "title": "Is the app monetized?",
       "text": "The app is free to use, and it has no advertisements. There will be a possibility to donate, but don't feel obliged."
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 3a77114..1d94e23 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -435,7 +435,7 @@
       "Jakkihedelmä on kotoisin Etelä-Aasiasta ja sen makua verrataan usein ananaksen, banaanin ja mangon yhdistelmään."
     ],
     "jalapeno": [
-      "Jalepenon nimi tulee meksikolaisesta Xalapan kaupungista Veracruzissa.",
+      "Jalapenon nimi tulee meksikolaisesta Xalapan kaupungista Veracruzissa.",
       "Jalapeno voi yltää 8000 pisteeseen Scovillen tulisuusasteikolla, joten se on tulisen monipuolinen chili.",
       "Savustettu ja kuivattu jalapeno tunnetaan paremmin chipotlena."
     ],
@@ -598,7 +598,7 @@
     ],
     "potato": [
       "Perunat ovat kotoisin Etelä-Amerikasta, jossa inkat viljelivät niitä ensimmäisenä.",
-      "Preussin kuningas Frederick kutsui perunaa \"kuninkaalliseksi vihannekseksi\" lisätäkseen niiden arvostusta."
+      "Preussin kuningas Frederick kutsui tarinan mukaan perunaa \"kuninkaalliseksi vihannekseksi\" lisätäkseen niiden arvostusta."
     ],
     "pumpkin seed": [
       "30 gramman annos kurpitsansiemeniä tarjoaa noin 7 g proteiinia ja runsaasti magnesiumia."
@@ -788,6 +788,10 @@
       "title": "Mihin voin ottaa yhteyttä?",
       "text": "Projektin sivu on täällä: {0}. Sivulta löytyy erilliset osiot bugien raportointiin sekä yleiseen keskusteluun. Kiitos mielenkiinnosta projektia kohtaan!"
     },
+    "howToInstall": {
+      "title": "Miten sovellus asennetaan?",
+      "text": "Voit asentaa sovelluksen Google Chromen kaltaisella selaimella, joka tukee Progressive Web Apps -teknologiaa (PWA). Valitse \"Lisää aloitusnäyttöön\" selaimesi valikosta tai klikkaa asennuskuvaketta selaimen osoiterivillä. Safarin mobiiliversiossa, valitse \"Jaa\" ja sen jälkeen \"Lisää aloitusnäyttöön\". Laitteelle asentaminen mahdollistaa käytön ilman verkkoyhteyttä, mutta suorittaa sovelluksen edelleen selaimessa."
+    },
     "isItFree": {
       "title": "Maksaako sovelluksen käyttö?",
       "text": "Sovellus on ilmainen eikä sisällä mainoksia. Mukaan on tulossa mahdollisuus tehdä lahjoitus, mutta se ei ole pakollista."

From 16bb3fedf9fd9b7b2d9507e6178bad4f44d8085e Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Thu, 19 Dec 2024 12:30:16 +0200
Subject: [PATCH 2/5] Update dependencies and readme

---
 README.md         |  4 +--
 package-lock.json | 66 +++++++++++++++++++++++------------------------
 package.json      | 14 +++++-----
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 35f7db5..0bfaa7f 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ PWA functionalities require a PWA-compatible browser.
 # Install browsers for the first run
 npx playwright install
 
-# When testing on CI, must build the project first
+# When testing e2e, build the project first
 npm run build
 
 # Runs the end-to-end tests
@@ -28,7 +28,7 @@ npm run test:e2e
 # Runs the tests only on Chromium
 npm run test:e2e -- --project=chromium
 # Runs the tests of a specific file
-npm run test:e2e -- tests/example.spec.ts
+npm run test:e2e -- e2e/example.spec.ts
 # Runs the tests in debug mode
 npm run test:e2e -- --debug
 ```
diff --git a/package-lock.json b/package-lock.json
index deb2f7c..1cc2b0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,8 @@
         "chartjs-plugin-datalabels": "^2.2.0",
         "luxon": "^3.5.0",
         "pinia": "^2.3.0",
-        "remeda": "^2.17.4",
-        "simple-icons": "^13.20.0",
+        "remeda": "^2.18.0",
+        "simple-icons": "^13.21.0",
         "vue": "3.5.13",
         "vue-chartjs": "^5.3.2",
         "vue-i18n": "^10.0.5",
@@ -32,13 +32,13 @@
         "@pinia/testing": "^0.1.7",
         "@playwright/test": "^1.49.1",
         "@tsconfig/node20": "^20.1.4",
-        "@types/canvas-confetti": "^1.6.4",
+        "@types/canvas-confetti": "^1.9.0",
         "@types/jsdom": "^21.1.7",
         "@types/luxon": "^3.4.2",
         "@types/node": "^22.10.2",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitest/coverage-istanbul": "^2.1.8",
-        "@vitest/eslint-plugin": "^1.1.16",
+        "@vitest/eslint-plugin": "^1.1.18",
         "@vue/eslint-config-prettier": "^10.1.0",
         "@vue/eslint-config-typescript": "^14.1.4",
         "@vue/test-utils": "^2.4.6",
@@ -49,13 +49,13 @@
         "eslint-plugin-vue": "^9.32.0",
         "eslint-plugin-vuejs-accessibility": "^2.4.1",
         "jsdom": "^25.0.1",
-        "npm-run-all2": "^7.0.1",
+        "npm-run-all2": "^7.0.2",
         "postcss": "^8.4.49",
         "prettier": "^3.4.2",
         "sass-embedded": "^1.83.0",
-        "tailwindcss": "^3.4.16",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5.6.3",
-        "vite": "^6.0.3",
+        "vite": "^6.0.4",
         "vite-plugin-pwa": "^0.21.1",
         "vitest": "^2.1.8",
         "vue-tsc": "^2.1.10"
@@ -3013,9 +3013,9 @@
       "license": "MIT"
     },
     "node_modules/@types/canvas-confetti": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.6.4.tgz",
-      "integrity": "sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz",
+      "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==",
       "dev": true,
       "license": "MIT"
     },
@@ -3340,9 +3340,9 @@
       }
     },
     "node_modules/@vitest/eslint-plugin": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.16.tgz",
-      "integrity": "sha512-xecwJYuAp11AFsd2aoSnTWO3Wckgu7rjBz1VOhvsDtZzI4s7z/WerAR4gxnEFy37scdsE8wSlP95/2ry6sLhSg==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.18.tgz",
+      "integrity": "sha512-pcnR0hn4KRaWqdEXdZPXLs2wAxzMBD8dKkpVkOuhT+bOOGW1/4BdiUrU3I0LW2loskfVS/XldwcO/lCEoFDyZw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -7094,14 +7094,14 @@
       }
     },
     "node_modules/npm-run-all2": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-7.0.1.tgz",
-      "integrity": "sha512-Adbv+bJQ8UTAM03rRODqrO5cx0YU5KCG2CvHtSURiadvdTjjgGJXdbc1oQ9CXBh9dnGfHSoSB1Web/0Dzp6kOQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-7.0.2.tgz",
+      "integrity": "sha512-7tXR+r9hzRNOPNTvXegM+QzCuMjzUIIq66VDunL6j60O4RrExx32XUhlrS7UK4VcdGw5/Wxzb3kfNcFix9JKDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.2.1",
-        "cross-spawn": "^7.0.3",
+        "cross-spawn": "^7.0.6",
         "memorystream": "^0.3.1",
         "minimatch": "^9.0.0",
         "pidtree": "^0.6.0",
@@ -7942,12 +7942,12 @@
       }
     },
     "node_modules/remeda": {
-      "version": "2.17.4",
-      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.17.4.tgz",
-      "integrity": "sha512-pviU2Ag7Qx9mOCAKO4voxDx/scfLzdhp3v85qDO4xxntQsU76uE9sgrAAdK1ATn4zzaOJqCXYMMNRP+O9F4Wiw==",
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.18.0.tgz",
+      "integrity": "sha512-wvHvaApA7crz46HWhGTotPawkzd45w1iXzPK7r4ECQgbmcSqHLrVio2LOr7ZEp1pu5QDH1U391ZKu+qra7OoLw==",
       "license": "MIT",
       "dependencies": {
-        "type-fest": "^4.27.0"
+        "type-fest": "^4.30.0"
       }
     },
     "node_modules/require-from-string": {
@@ -8685,9 +8685,9 @@
       }
     },
     "node_modules/simple-icons": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.20.0.tgz",
-      "integrity": "sha512-8IQSSOaXhgG9fH0dJsUmlMlo0Jt0Xd1MwxsK75TlRZO0FR7P5UQ8TEaIPOwlRMHd/FzZJ0R3vFHW0kOH7PbdMw==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.21.0.tgz",
+      "integrity": "sha512-LI5pVJPBv6oc79OMsffwb6kEqnmB8P1Cjg1crNUlhsxPETQ5UzbCKQdxU+7MW6+DD1qfPkla/vSKlLD4IfyXpQ==",
       "license": "CC0-1.0",
       "engines": {
         "node": ">=0.12.18"
@@ -9126,9 +9126,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
-      "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9455,9 +9455,9 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "4.27.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.27.0.tgz",
-      "integrity": "sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==",
+      "version": "4.30.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.2.tgz",
+      "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=16"
@@ -9741,9 +9741,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
-      "integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.4.tgz",
+      "integrity": "sha512-zwlH6ar+6o6b4Wp+ydhtIKLrGM/LoqZzcdVmkGAFun0KHTzIzjh+h0kungEx7KJg/PYnC80I4TII9WkjciSR6Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index e09e8a5..0660119 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,8 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "luxon": "^3.5.0",
     "pinia": "^2.3.0",
-    "remeda": "^2.17.4",
-    "simple-icons": "^13.20.0",
+    "remeda": "^2.18.0",
+    "simple-icons": "^13.21.0",
     "vue": "3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.5",
@@ -42,13 +42,13 @@
     "@pinia/testing": "^0.1.7",
     "@playwright/test": "^1.49.1",
     "@tsconfig/node20": "^20.1.4",
-    "@types/canvas-confetti": "^1.6.4",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jsdom": "^21.1.7",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-istanbul": "^2.1.8",
-    "@vitest/eslint-plugin": "^1.1.16",
+    "@vitest/eslint-plugin": "^1.1.18",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.4",
     "@vue/test-utils": "^2.4.6",
@@ -59,13 +59,13 @@
     "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "jsdom": "^25.0.1",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "sass-embedded": "^1.83.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
-    "vite": "^6.0.3",
+    "vite": "^6.0.4",
     "vite-plugin-pwa": "^0.21.1",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.1.10"

From 00fabc616d45f3d586affa89f65f24d6b18f8f3b Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Fri, 20 Dec 2024 15:25:32 +0200
Subject: [PATCH 3/5] Add tooltips to badges and unify appearance with chartjs

---
 package-lock.json                             |  32 ++++++
 package.json                                  |   1 +
 src/assets/main.scss                          |  23 ++++
 src/components/AchievementBadge.vue           |  12 ++-
 .../AchievementBadge.spec.ts.snap             |   4 +-
 .../AchievementList.spec.ts.snap              | 102 +++++++++---------
 src/i18n/en.json                              |   4 +-
 src/i18n/fi.json                              |   4 +-
 src/main.ts                                   |   7 ++
 src/utils/constants.ts                        |   1 +
 src/utils/helpers.ts                          |   4 +-
 vitest.setup.ts                               |   4 +
 12 files changed, 135 insertions(+), 63 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cc2b0a..6bae69a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "vue-chartjs": "^5.3.2",
         "vue-i18n": "^10.0.5",
         "vue-router": "^4.5.0",
+        "vue-tippy": "^6.5.0",
         "xstate": "^5.19.0"
       },
       "devDependencies": {
@@ -2641,6 +2642,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
@@ -9355,6 +9366,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/tldts": {
       "version": "6.1.53",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.53.tgz",
@@ -11124,6 +11144,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-tippy": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-6.5.0.tgz",
+      "integrity": "sha512-U44UDETTLuZWZGosagslEwgimWQdt1JVSxfWStVPnVdeqo2jo9X5zW3SB04k7JaTFosdgrDhFsUDrd6n42Nh7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/package.json b/package.json
index 0660119..fd1c9e0 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.5",
     "vue-router": "^4.5.0",
+    "vue-tippy": "^6.5.0",
     "xstate": "^5.19.0"
   },
   "devDependencies": {
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 42e786e..943d6a3 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -74,3 +74,26 @@ body {
 .outline-override > :focus {
   @apply outline-sky-500;
 }
+
+.tippy-box {
+  @apply mx-2;
+  @apply bg-sky-950;
+}
+
+.tippy-content {
+  @apply p-2 text-sm;
+  @apply text-slate-50;
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: #082f49;
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: #082f49;
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: #082f49;
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: #082f49;
+}
diff --git a/src/components/AchievementBadge.vue b/src/components/AchievementBadge.vue
index 43fa509..9daff7e 100644
--- a/src/components/AchievementBadge.vue
+++ b/src/components/AchievementBadge.vue
@@ -143,9 +143,13 @@ const achievementProps: AchievementProps = {
 <template>
   <div
     :aria-disabled="!active"
-    :title="
-      $t(`achievements.${achievement}.ariaLabel`, achievementProps[achievement][level]!.textProps)
-    "
+    v-tippy="{
+      aria: null,
+      content: $t(
+        `achievements.${achievement}.ariaLabel`,
+        achievementProps[achievement][level]!.textProps,
+      ),
+    }"
     :aria-label="
       $t(`achievements.${achievement}.ariaLabel`, achievementProps[achievement][level]!.textProps)
     "
@@ -193,7 +197,7 @@ const achievementProps: AchievementProps = {
 
 .badge__text {
   @apply absolute bottom-[3cqmin] min-w-full text-nowrap rounded-md text-center text-xs uppercase;
-  @apply bg-slate-700 text-slate-50;
+  @apply bg-sky-950 text-slate-50;
 }
 
 .badge__background--Bronze {
diff --git a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
index cdf74dc..d42d46e 100644
--- a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AchievementBadge > renders active 1`] = `
-"<div data-v-06381b3c="" aria-disabled="false" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="false" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🦅</div>
   </div>
@@ -10,7 +10,7 @@ exports[`AchievementBadge > renders active 1`] = `
 `;
 
 exports[`AchievementBadge > renders inactive 1`] = `
-"<div data-v-06381b3c="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="true" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🔥</div>
   </div>
diff --git a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
index 480d08a..8ae8b89 100644
--- a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">This week's toil</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🎉</div>
         </div>
@@ -17,19 +17,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Completionist</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐧</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🦅</div>
         </div>
@@ -40,19 +40,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Challenge Accepted</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚁</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">✈️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚀</div>
         </div>
@@ -63,19 +63,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Committed</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🪴</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🎄</div>
         </div>
@@ -86,19 +86,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Hot Streak</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🔥</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌋</div>
         </div>
@@ -109,60 +109,60 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Playing Favorites</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 uses of a veggie in all categories" aria-label="5 uses of a veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 uses of one veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😺</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x5 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 uses of a veggie in all categories" aria-label="20 uses of a veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 uses of one veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😽</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x20 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="50 uses of a veggie in all categories" aria-label="50 uses of a veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="50 uses of one veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😻</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x50 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">50 uses</div>
       </div>
     </div>
   </div>
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Experimenter</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🍎</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥦</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥬</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥕</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🫛</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌾</div>
         </div>
@@ -178,13 +178,13 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">This week's toil</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🎉</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies this week" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Platinum" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">💎</div>
         </div>
@@ -195,19 +195,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Completionist</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐧</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🦅</div>
         </div>
@@ -218,19 +218,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Challenge Accepted</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚁</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">✈️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚀</div>
         </div>
@@ -241,19 +241,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Committed</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🪴</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🎄</div>
         </div>
@@ -264,19 +264,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Hot Streak</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🔥</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌋</div>
         </div>
@@ -287,60 +287,60 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Playing Favorites</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 uses of a veggie in all categories" aria-label="5 uses of a veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 uses of one veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😺</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x5 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 uses of a veggie in all categories" aria-label="20 uses of a veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 uses of one veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😽</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x20 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="50 uses of a veggie in all categories" aria-label="50 uses of a veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="50 uses of one veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😻</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x50 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">50 uses</div>
       </div>
     </div>
   </div>
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Experimenter</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🍎</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥦</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥬</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🥕</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🫛</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌾</div>
         </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4f2e9e7..8b7a51a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -62,8 +62,8 @@
     },
     "favorite": {
       "title": "Playing Favorites",
-      "ariaLabel": "{0} uses of a veggie in all categories",
-      "badgeText": "6x{0} samples",
+      "ariaLabel": "{0} uses of one veggie in all categories",
+      "badgeText": "{0} uses",
       "1": "You have sampled your favorite veggies at least 5 times in each category, earning you the bronze achievement!",
       "2": "You have sampled your favorite veggies at least 20 times in each category, earning you the silver achievement!",
       "3": "You have sampled your favorite veggies at least 100 times in each category, earning you the gold achievement!"
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 1d94e23..bde8b3c 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -62,8 +62,8 @@
     },
     "favorite": {
       "title": "Omat suosikit",
-      "ariaLabel": "Yksi kasvis {0} kertaa joka ryhmässä",
-      "badgeText": "6x{0} kokeilua",
+      "ariaLabel": "{0} kertaa kokeiltu kasvis joka ryhmässä",
+      "badgeText": "{0} kokeilua",
       "1": "Olet kokeillut suosikkikasviksiasi vähintään viisi kertaa joka ryhmässä, ansaiten pronssisen palkinnon!",
       "2": "Olet kokeillut suosikkikasviksiasi vähintään 20 kertaa joka ryhmässä, ansaiten hopeisen palkinnon!",
       "3": "Olet kokeillut suosikkikasviksiasi vähintään 50 kertaa joka ryhmässä, ansaiten kultaisen palkinnon!"
diff --git a/src/main.ts b/src/main.ts
index b18ed97..c9c1385 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,13 @@
 import {createApp} from 'vue';
 import {createPinia} from 'pinia';
+import {plugin as VueTippy} from 'vue-tippy';
 import App from '@/App.vue';
 import router from '@/router';
 import i18n from '@/i18n';
 
 import '@fontsource/bungee-shade/latin-400.css';
 import '@fontsource/nunito/latin-400.css';
+import 'tippy.js/dist/tippy.css';
 import '@/assets/main.scss';
 
 import IconComponent from '@/components/IconComponent.vue';
@@ -17,6 +19,11 @@ app
   .use(createPinia())
   .use(router)
   .use(i18n)
+  .use(VueTippy, {
+    defaultProps: {
+      hideOnClick: true,
+    },
+  })
   .component('IconComponent', IconComponent)
   .component('ButtonComponent', ButtonComponent)
   .component('ContentElement', ContentElement)
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 99627ef..e53f4d8 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -14,6 +14,7 @@ export const COLORS = {
   chartColors: ['#f0f9ff', '#bae6fd', '#38bdf8', '#0284c7', '#075985', '#082f49'],
   chartColorsAlternate: ['#fdc5f5', '#f7aef8', '#b388eb', '#8093f1', '#79b8f4', '#72ddf7'],
   offWhite: '#f8fafc',
+  darkBlue: '#083344',
 };
 
 export const CATEGORY_EMOJI = {
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index ac00181..7aade79 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -88,7 +88,7 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
             }),
       },
       tooltip: {
-        boxPadding: 5,
+        padding: 8,
         titleFont: {
           size: 14,
           weight: 'normal',
@@ -96,7 +96,7 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
         bodyFont: {
           size: 14,
         },
-        backgroundColor: 'rgba(15, 43, 42, 0.95)',
+        backgroundColor: COLORS.darkBlue,
         bodyColor: COLORS.offWhite,
         titleColor: COLORS.offWhite,
       },
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 33f49fe..96929f2 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -15,6 +15,10 @@ config.global.components = {
   ContentElement,
 };
 
+config.global.directives = {
+  tippy() {},
+};
+
 const dataTestIdPlugin = (wrapper: ReturnType<typeof mount>) => ({
   findByTestId: (testId: string) => wrapper.find(`[data-test-id='${testId}']`),
   findByText: (selector: string, text: string) =>

From 9b1ddc090ba15c20aeb299e9a1fc7c92b87b8301 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 23 Dec 2024 14:27:16 +0200
Subject: [PATCH 4/5] Fix front page spacing

---
 src/components/FrontPageAnimation.vue         | 3 +--
 src/components/charts/CategoryStatusChart.vue | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/FrontPageAnimation.vue b/src/components/FrontPageAnimation.vue
index f48e5ff..76ced4f 100644
--- a/src/components/FrontPageAnimation.vue
+++ b/src/components/FrontPageAnimation.vue
@@ -27,9 +27,8 @@ emojis = ['🎅', '☃️', '🤶', '🎄'];
 </template>
 <style scoped lang="scss">
 .front-page-animation__container {
-  @apply h-full;
+  @apply h-1/2;
   @apply flex items-center justify-end;
-  max-height: min(100vw - 2rem, 400px);
   mask-image: linear-gradient(to right, transparent 5%, black 30%, black 70%, transparent 95%);
 }
 
diff --git a/src/components/charts/CategoryStatusChart.vue b/src/components/charts/CategoryStatusChart.vue
index a094b1f..5ba59ee 100644
--- a/src/components/charts/CategoryStatusChart.vue
+++ b/src/components/charts/CategoryStatusChart.vue
@@ -129,7 +129,7 @@ defineExpose({chartData});
 
 .category-status-chart__background {
   @apply relative max-h-[50%] min-h-0;
-  @apply flex-grow flex justify-center;
+  @apply flex justify-center;
 }
 
 .category-status-chart__center-label {

From 76f1d72bdf009593d2fdc53ce2d12713c292d419 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 23 Dec 2024 14:27:28 +0200
Subject: [PATCH 5/5] Update dependencies

---
 package-lock.json | 58 +++++++++++++++++++++++------------------------
 package.json      | 10 ++++----
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6bae69a..a70a472 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,15 @@
         "@fontsource/nunito": "^5.1.0",
         "@headlessui/vue": "^1.7.23",
         "@mdi/js": "^7.4.47",
-        "@vueuse/core": "^12.0.0",
+        "@vueuse/core": "^12.2.0",
         "@xstate/vue": "^4.0.0",
         "canvas-confetti": "^1.9.3",
         "chart.js": "^4.4.7",
         "chartjs-plugin-datalabels": "^2.2.0",
         "luxon": "^3.5.0",
         "pinia": "^2.3.0",
-        "remeda": "^2.18.0",
-        "simple-icons": "^13.21.0",
+        "remeda": "^2.19.0",
+        "simple-icons": "^14.0.0",
         "vue": "3.5.13",
         "vue-chartjs": "^5.3.2",
         "vue-i18n": "^10.0.5",
@@ -39,7 +39,7 @@
         "@types/node": "^22.10.2",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitest/coverage-istanbul": "^2.1.8",
-        "@vitest/eslint-plugin": "^1.1.18",
+        "@vitest/eslint-plugin": "^1.1.20",
         "@vue/eslint-config-prettier": "^10.1.0",
         "@vue/eslint-config-typescript": "^14.1.4",
         "@vue/test-utils": "^2.4.6",
@@ -56,7 +56,7 @@
         "sass-embedded": "^1.83.0",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.6.3",
-        "vite": "^6.0.4",
+        "vite": "^6.0.5",
         "vite-plugin-pwa": "^0.21.1",
         "vitest": "^2.1.8",
         "vue-tsc": "^2.1.10"
@@ -3351,9 +3351,9 @@
       }
     },
     "node_modules/@vitest/eslint-plugin": {
-      "version": "1.1.18",
-      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.18.tgz",
-      "integrity": "sha512-pcnR0hn4KRaWqdEXdZPXLs2wAxzMBD8dKkpVkOuhT+bOOGW1/4BdiUrU3I0LW2loskfVS/XldwcO/lCEoFDyZw==",
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.1.20.tgz",
+      "integrity": "sha512-2eLsgUm+GVOpDfNyH2do//MiNO/WZkXrPi+EjDmXEdUt6Jwnziq4H221L8vJE0aJys+l1FRfSkm4QbaIyDCfBg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -3712,14 +3712,14 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.0.0.tgz",
-      "integrity": "sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.2.0.tgz",
+      "integrity": "sha512-jksyNu+5EGwggNkRWd6xX+8qBkYbmrwdFQMgCABsz+wq8bKF6w3soPFLB8vocFp3wFIzn0OYkSPM9JP+AFKwsg==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "12.0.0",
-        "@vueuse/shared": "12.0.0",
+        "@vueuse/metadata": "12.2.0",
+        "@vueuse/shared": "12.2.0",
         "vue": "^3.5.13"
       },
       "funding": {
@@ -3727,18 +3727,18 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.0.0.tgz",
-      "integrity": "sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.2.0.tgz",
+      "integrity": "sha512-x6zynZtTh1l52m0y8d/EgzpshnMjg8cNZ2KWoncJ62Z5qPSGoc4FUunmMVrrRM/I/5542rTEY89CGftngZvrkQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.0.0.tgz",
-      "integrity": "sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.2.0.tgz",
+      "integrity": "sha512-SRr4AZwv/giS+EmyA1ZIzn3/iALjjnWAGaBNmoDTMEob9JwQaevAocuaMDnPAvU7Z35Y5g3CFRusCWgp1gVJ3Q==",
       "license": "MIT",
       "dependencies": {
         "vue": "^3.5.13"
@@ -7953,9 +7953,9 @@
       }
     },
     "node_modules/remeda": {
-      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.18.0.tgz",
-      "integrity": "sha512-wvHvaApA7crz46HWhGTotPawkzd45w1iXzPK7r4ECQgbmcSqHLrVio2LOr7ZEp1pu5QDH1U391ZKu+qra7OoLw==",
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.19.0.tgz",
+      "integrity": "sha512-B/2+zHNPXu0BAopJU8ZrqMjA0u56M/l6BUxDq8AcU+3LWlOYVuf98I6qpYrB5BeeEICunpmXPcQl2ReGXkiQyw==",
       "license": "MIT",
       "dependencies": {
         "type-fest": "^4.30.0"
@@ -8696,9 +8696,9 @@
       }
     },
     "node_modules/simple-icons": {
-      "version": "13.21.0",
-      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.21.0.tgz",
-      "integrity": "sha512-LI5pVJPBv6oc79OMsffwb6kEqnmB8P1Cjg1crNUlhsxPETQ5UzbCKQdxU+7MW6+DD1qfPkla/vSKlLD4IfyXpQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-14.0.0.tgz",
+      "integrity": "sha512-29qvtBEvo+xuGxMooUWHEgp7ZvaRrkgPwLdg/B909T1/uoYiUrekOqBRZywAvV2JRlxLUjB6e1gWgtWup7R18Q==",
       "license": "CC0-1.0",
       "engines": {
         "node": ">=0.12.18"
@@ -9761,13 +9761,13 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.4.tgz",
-      "integrity": "sha512-zwlH6ar+6o6b4Wp+ydhtIKLrGM/LoqZzcdVmkGAFun0KHTzIzjh+h0kungEx7KJg/PYnC80I4TII9WkjciSR6Q==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.5.tgz",
+      "integrity": "sha512-akD5IAH/ID5imgue2DYhzsEwCi0/4VKY31uhMLEYJwPP4TiUp8pL5PIK+Wo7H8qT8JY9i+pVfPydcFPYD1EL7g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.24.0",
+        "esbuild": "0.24.0",
         "postcss": "^8.4.49",
         "rollup": "^4.23.0"
       },
diff --git a/package.json b/package.json
index fd1c9e0..a16a56a 100644
--- a/package.json
+++ b/package.json
@@ -22,15 +22,15 @@
     "@fontsource/nunito": "^5.1.0",
     "@headlessui/vue": "^1.7.23",
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.2.0",
     "@xstate/vue": "^4.0.0",
     "canvas-confetti": "^1.9.3",
     "chart.js": "^4.4.7",
     "chartjs-plugin-datalabels": "^2.2.0",
     "luxon": "^3.5.0",
     "pinia": "^2.3.0",
-    "remeda": "^2.18.0",
-    "simple-icons": "^13.21.0",
+    "remeda": "^2.19.0",
+    "simple-icons": "^14.0.0",
     "vue": "3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.5",
@@ -49,7 +49,7 @@
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-istanbul": "^2.1.8",
-    "@vitest/eslint-plugin": "^1.1.18",
+    "@vitest/eslint-plugin": "^1.1.20",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.4",
     "@vue/test-utils": "^2.4.6",
@@ -66,7 +66,7 @@
     "sass-embedded": "^1.83.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
-    "vite": "^6.0.4",
+    "vite": "^6.0.5",
     "vite-plugin-pwa": "^0.21.1",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.1.10"