From 29c2e6401e138605431321d833fbfafa58a98fd2 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Wed, 11 Sep 2024 13:55:58 +0300
Subject: [PATCH] Unify label styles

---
 src/assets/main.scss                                      | 4 ++++
 src/components/AchievementBadge.vue                       | 2 +-
 src/components/AchievementList.vue                        | 2 +-
 src/components/AllTimeStatus.vue                          | 2 +-
 src/components/CategoryStatus.vue                         | 2 +-
 src/components/LocaleChanger.vue                          | 4 ++--
 src/components/QAComponent.vue                            | 2 +-
 .../__tests__/__snapshots__/SettingsView.spec.ts.snap     | 8 ++++----
 src/views/SettingsView.vue                                | 2 +-
 src/views/StatsView.vue                                   | 4 ++--
 10 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 2e12d79..e5d72a0 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -11,6 +11,10 @@
     @apply text-nowrap px-4 py-2 text-sm uppercase rounded-md select-none;
   }
 
+  .label-like {
+    @apply text-xs uppercase;
+  }
+
   .dropdown-list-container {
     @apply absolute mt-2 w-full overflow-x-hidden rounded-md shadow-lg ring-2;
     @apply bg-slate-50 ring-black/5;
diff --git a/src/components/AchievementBadge.vue b/src/components/AchievementBadge.vue
index fc3e6a0..0d81284 100644
--- a/src/components/AchievementBadge.vue
+++ b/src/components/AchievementBadge.vue
@@ -167,7 +167,7 @@ const achievementProps: AchievementProps = {
 }
 
 .badge__text {
-  @apply absolute bottom-[3cqmin] min-w-full text-nowrap rounded-md text-center text-xs uppercase;
+  @apply absolute bottom-[3cqmin] min-w-full text-nowrap rounded-md text-center label-like;
   @apply bg-slate-700 text-slate-50;
 }
 
diff --git a/src/components/AchievementList.vue b/src/components/AchievementList.vue
index a845a25..ad3ffe4 100644
--- a/src/components/AchievementList.vue
+++ b/src/components/AchievementList.vue
@@ -114,6 +114,6 @@ const {achievements} = storeToRefs(useAppStateStore());
 }
 
 .achievement-list__label {
-  @apply text-xs uppercase mb-2;
+  @apply label-like mb-2;
 }
 </style>
diff --git a/src/components/AllTimeStatus.vue b/src/components/AllTimeStatus.vue
index 1626b19..f319cb0 100644
--- a/src/components/AllTimeStatus.vue
+++ b/src/components/AllTimeStatus.vue
@@ -41,7 +41,7 @@ const atMostVeggies = computed(() =>
 <style lang="scss" scoped>
 .status__container {
   @apply grid grid-cols-2 grid-rows-2 gap-4;
-  @apply uppercase text-xs text-center;
+  @apply label-like text-center;
 }
 
 .status__item {
diff --git a/src/components/CategoryStatus.vue b/src/components/CategoryStatus.vue
index fec5718..0c7571e 100644
--- a/src/components/CategoryStatus.vue
+++ b/src/components/CategoryStatus.vue
@@ -34,6 +34,6 @@ withDefaults(
 }
 .category-status__center-label {
   @apply flex flex-col items-center justify-center;
-  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs uppercase;
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 label-like;
 }
 </style>
diff --git a/src/components/LocaleChanger.vue b/src/components/LocaleChanger.vue
index 87634d4..30a2d65 100644
--- a/src/components/LocaleChanger.vue
+++ b/src/components/LocaleChanger.vue
@@ -6,9 +6,9 @@ import {useAppStateStore} from '@/stores/appStateStore';
 const {settings} = storeToRefs(useAppStateStore());
 </script>
 <template>
-  <RadioGroup v-model="settings.locale" class="text-sm uppercase">
+  <RadioGroup v-model="settings.locale">
     <div class="flex-container flex-col">
-      <RadioGroupLabel class="text-xs">{{ $t('settings.locale') }}</RadioGroupLabel>
+      <RadioGroupLabel class="label-like">{{ $t('settings.locale') }}</RadioGroupLabel>
       <RadioGroupOption
         v-for="locale in $i18n.availableLocales"
         :key="locale"
diff --git a/src/components/QAComponent.vue b/src/components/QAComponent.vue
index 4b77cee..4dfb048 100644
--- a/src/components/QAComponent.vue
+++ b/src/components/QAComponent.vue
@@ -16,7 +16,7 @@ const keysWithLinks = ['contact', 'studyDetails'];
 </script>
 <template>
   <div class="flex-container flex-col min-h-0">
-    <label class="uppercase text-xs">{{ $t('qa.title') }}</label>
+    <label class="label-like">{{ $t('qa.title') }}</label>
     <div class="flex-container flex-col has-scroll">
       <Disclosure v-for="key in questions" :key="key" v-slot="{open}">
         <DisclosureButton class="QA__button">
diff --git a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
index e7a633e..172aece 100644
--- a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SettingsView > renders 1`] = `
-"<div class="text-sm uppercase" id="headlessui-radiogroup-v-0" role="radiogroup">
-  <div data-v-7747040a="" class="flex-container flex-col"><label data-v-7747040a="" id="headlessui-label-v-1" class="text-xs">Language</label>
+"<div id="headlessui-radiogroup-v-0" role="radiogroup">
+  <div data-v-7747040a="" class="flex-container flex-col"><label data-v-7747040a="" id="headlessui-label-v-1" class="label-like">Language</label>
     <div data-v-7747040a="" id="headlessui-radiogroup-option-v-2" role="radio" aria-checked="true" tabindex="0" data-headlessui-state="checked" class="locale-changer__option"><svg data-v-7747040a="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
         <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" class="transition-all"></path>
       </svg>
@@ -15,7 +15,7 @@ exports[`SettingsView > renders 1`] = `
     </div>
   </div>
 </div>
-<div data-v-bcc04aab="" class="flex-container flex-col min-h-0"><label data-v-bcc04aab="" class="uppercase text-xs">Common Questions</label>
+<div data-v-bcc04aab="" class="flex-container flex-col min-h-0"><label data-v-bcc04aab="" class="label-like">Common Questions</label>
   <div data-v-bcc04aab="" class="flex-container flex-col has-scroll"><button data-v-bcc04aab="" id="headlessui-disclosure-button-v-6" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">What's this app for?</span><svg data-v-bcc04aab="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;" class="">
         <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
       </svg></button>
@@ -54,7 +54,7 @@ exports[`SettingsView > renders 1`] = `
     </transition-stub>
   </div>
 </div>
-<div class="flex-container flex-col justify-center"><label for="reset-button" class="uppercase text-xs">Remove all data from the app</label><button data-v-24e38f3d="" class="button button--danger self-end" id="reset-button" data-test-id="reset-button"><svg data-v-24e38f3d="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+<div class="flex-container flex-col justify-center"><label for="reset-button" class="label-like">Remove all data from the app</label><button data-v-24e38f3d="" class="button button--danger self-end" id="reset-button" data-test-id="reset-button"><svg data-v-24e38f3d="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
       <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z" class="transition-all"></path>
     </svg>Reset</button></div>"
 `;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 8494687..ca1bd1f 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -25,7 +25,7 @@ const reset = () => {
   <LocaleChanger />
   <QAComponent />
   <div class="flex-container flex-col justify-center">
-    <label for="reset-button" class="uppercase text-xs">{{ $t('settings.reset.label') }}</label>
+    <label for="reset-button" class="label-like">{{ $t('settings.reset.label') }}</label>
     <ButtonComponent
       id="reset-button"
       variant="danger"
diff --git a/src/views/StatsView.vue b/src/views/StatsView.vue
index ad4f5d6..86d636d 100644
--- a/src/views/StatsView.vue
+++ b/src/views/StatsView.vue
@@ -29,9 +29,9 @@ const getOptionClasses = useMemoize((active: boolean, selected: boolean) => {
 });
 </script>
 <template>
-  <Listbox v-model="selectedStat" class="relative z-10 uppercase" as="div" v-slot="{open}">
+  <Listbox v-model="selectedStat" class="relative z-10" as="div" v-slot="{open}">
     <div class="flex-container flex-col">
-      <ListboxLabel class="text-xs">{{ $t('stats.chosenStats') }}</ListboxLabel>
+      <ListboxLabel class="label-like">{{ $t('stats.chosenStats') }}</ListboxLabel>
       <ListboxButton class="stats__list-box-button">
         <span class="truncate">{{ $t(`stats.${selectedStat}`) }}</span>
         <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />