Unify label styles

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;

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;
 }
 

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>

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 {

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>

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"

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">

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>"
 `;

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"

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" />