Common questions

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;
@@ -33,6 +37,15 @@
   }
 }
 
+main a {
+  @apply underline rounded-md;
+  @apply text-slate-300;
+  &:hover,
+  &:focus {
+    @apply text-slate-50;
+  }
+}
+
 html {
   @apply h-full;
   scrollbar-width: none;

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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue';
+import IconComponent from './IconComponent.vue';
+
+const questions = [
+  'appPurpose',
+  'studyDetails',
+  'isItFree',
+  'isMyDataSafe',
+  'contact',
+  'whatCounts',
+  'categories',
+];
+
+const keysWithLinks = ['contact', 'studyDetails'];
+</script>
+<template>
+  <div class="flex-container flex-col min-h-0">
+    <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">
+          <span>{{ $t(`qa.${key}.title`) }}</span>
+          <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />
+        </DisclosureButton>
+        <transition
+          enter-active-class="transition duration-100 ease-out"
+          enter-from-class="transform h-0 opacity-0"
+          enter-to-class="transform h-full opacity-100"
+          leave-active-class="transition duration-75 ease-out"
+          leave-from-class="transform h-full opacity-100"
+          leave-to-class="transform h-0 opacity-0"
+        >
+          <DisclosurePanel class="QA__panel">
+            <i18n-t :keypath="`qa.${key}.text`" tag="span" scope="global">
+              <a
+                v-if="keysWithLinks.includes(key)"
+                :href="$t(`qa.${key}.link.url`)"
+                target="_blank"
+                noreferrer
+                noopener
+                >{{ $t(`qa.${key}.link.text`) }}</a
+              >
+            </i18n-t>
+          </DisclosurePanel>
+        </transition>
+      </Disclosure>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.QA__button {
+  letter-spacing: 1px;
+  @apply w-full cursor-pointer button-like;
+  @apply flex-container justify-between;
+  @apply bg-sky-500;
+
+  &:hover,
+  &:focus {
+    @apply bg-sky-600;
+  }
+}
+
+.QA__panel {
+  @apply p-2;
+}
+</style>

src/components/VeggieSearch.vue

@@ -73,14 +73,18 @@ const scrollToStart = async () => {
 watch(query, scrollToStart);
 </script>
 <template>
-  <Combobox nullable multiple v-model="model" as="div" class="relative h-12 z-20">
+  <Combobox nullable multiple v-model="model" as="div" class="relative h-12 z-20" v-slot="{open}">
     <ComboboxInput
       :aria-label="$t('veggieSearch.search')"
       :placeholder="$t('veggieSearch.search')"
       class="veggie-search__input"
       @change="query = $event.target.value"
     />
-    <ComboboxButton class="veggie-search__button" ref="openButton">
+    <ComboboxButton
+      ref="openButton"
+      :class="open ? 'rotate-180 transform' : ''"
+      class="veggie-search__button"
+    >
       <IconComponent icon="chevron" aria-hidden="true" />
     </ComboboxButton>
     <TransitionRoot

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,46 @@ exports[`SettingsView > renders 1`] = `
     </div>
   </div>
 </div>
-<div class="flex-container justify-center"><button data-v-24e38f3d="" class="button button--danger" 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 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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-8" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">What's the science?</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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-10" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">Is the app monetized?</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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-12" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">Is my data safe?</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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-14" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">How to get in touch?</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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-16" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">What counts as a portion?</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>
+    <transition-stub data-v-bcc04aab="" 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-bcc04aab="" id="headlessui-disclosure-button-v-18" type="button" aria-expanded="false" data-headlessui-state="" class="QA__button"><span data-v-bcc04aab="">But strawberry is a...</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>
+    <transition-stub data-v-bcc04aab="" 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>
+  </div>
+</div>
+<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/i18n/en.json

@@ -120,11 +120,53 @@
     "en": "English",
     "fi": "Suomi"
   },
+  "qa": {
+    "appPurpose": {
+      "title": "What's this app for?",
+      "text": "Eat Your Veggies is a free app for tracking plant-based ingredients on weekly basis in your diet. According to a study, consuming 30 or more veggies weekly has multiple health benefits over a less versatile diet. The key, according to study, is not as much in the amounts you consume, but in variation."
+    },
+    "categories": {
+      "title": "But strawberry is a...",
+      "text": "...false fruit, I know. Also tomato is not a vegetable in biological sense, so the app takes some liberties in its categories. Still, please report any major inaccuracies you come across! You can also request missing veggies to be added. They should be such that are commercially available globally."
+    },
+    "contact": {
+      "link": {
+        "url": "https://github.com/ajuvonen/veggies/",
+        "text": "GitHub"
+      },
+      "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!"
+    },
+    "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."
+    },
+    "isMyDataSafe": {
+      "title": "Is my data safe?",
+      "text": "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."
+    },
+    "studyDetails": {
+      "link": {
+        "url": "https://doi.org/10.1128/msystems.00031-18",
+        "text": "American Society for Microbiology (ASM)"
+      },
+      "title": "What's the science?",
+      "text": "I'm neither a nutritian nor a biologist, so I don't want to make exaggerated claims or interpretations. I'm not affiliated with the study in any way, but if you want to read more about the study, look up The American Gut Project from the journal of {0}."
+    },
+    "title": "Common Questions",
+    "whatCounts": {
+      "title": "What counts as a portion?",
+      "text": "Ultimately, how you use the app is up to your discretion. However, consider that minuscule amounts might not be of any nutritional value. Therefore I personally consider only portions of a heaping tablespoon or larger adequate. It is also worth noting that very processed foods don't count towards a portion. So ketchup should not equal a tomato."
+    }
+  },
   "settings": {
     "locale": "Language",
-    "reset": "Reset",
-    "resetDialogText": "Continuing with the reset will wipe all your previously saved data and start from scratch. This action cannot be undone.",
-    "resetDialogTitle": "Are you sure you want to reset?",
+    "reset": {
+      "button": "Reset",
+      "label": "Remove all data from the app",
+      "text": "Continuing with the reset will wipe all your previously saved data and start from scratch. This action cannot be undone.",
+      "title": "Are you sure you want to reset?"
+    },
     "title": "Settings"
   },
   "stats": {
@@ -162,6 +204,7 @@
     "uniqueVeggies": "You have sampled {0} out of {1} veggies on this app! {2}!"
   },
   "veggies": {
+    "clementine": "clementine",
     "adzuki bean": "adzuki bean",
     "almond": "almond",
     "amaranth": "amaranth",
@@ -184,6 +227,7 @@
     "black-eyed pea": "black-eyed pea",
     "blackberry": "blackberry",
     "blood grapefruit": "blood grapefruit",
+    "blood orange": "blood orange",
     "blueberry": "blueberry",
     "bok choy": "bok choy",
     "boysenberry": "boysenberry",