From 9b6b3e7f2de101fdcef15d76f5fde2b89e647f68 Mon Sep 17 00:00:00 2001
From: MartinsOnuoha <martinsvictor.nd@gmail.com>
Date: Fri, 27 Oct 2023 15:41:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20chore(appfilter.vue):=20add=20dr?=
 =?UTF-8?q?opdown=20toggle=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 postcss.config.js                             |   1 +
 src/assets/styles/color-scheme.scss           |   4 +-
 src/assets/styles/main.scss                   |   1 -
 src/assets/styles/variables.scss              |   5 +-
 src/components/AppCategory/AppCategory.vue    |  14 +-
 src/components/AppFilter/AppFilter.vue        |  97 +++++----
 src/components/AppFilter/_AppFilter.scss      |  25 +++
 src/components/AppHeader/HeaderActions.vue    |  12 +-
 src/components/AppHeader/ToggleDarkMode.vue   |  13 +-
 .../AppSideBanner/AppSideBanner.vue           |   6 +-
 .../AppStatementCard/AppStatementCard.vue     |  20 +-
 .../_AppStatementCard.dark.scss               |   4 +-
 .../AppStatementCard/_AppStatementCard.scss   |   3 +-
 src/components/Icons/MdiFilterMenu.vue        |   8 +
 .../Icons/MdiFilterRemoveOutline.vue          |   8 +
 src/components/Icons/MdiGithub.vue            |   9 +-
 .../Icons/MdiMoonWaningCrescent.vue           |  14 +-
 src/components/Icons/MdiWhiteBalanceSunny.vue |   8 +-
 src/main.ts                                   |   3 +-
 src/router/index.ts                           |   2 +-
 src/stores/categories.db.ts                   |   5 +-
 src/stores/db.ts                              |  16 +-
 src/stores/statements.db.ts                   | 198 +++++++++++-------
 src/types/click-outside.d.ts                  |   2 +-
 src/views/HomeView.vue                        |  33 +--
 src/views/_HomeView.dark.scss                 |   2 +-
 src/views/_HomeView.scss                      |  16 ++
 28 files changed, 320 insertions(+), 211 deletions(-)
 create mode 100644 src/components/AppFilter/_AppFilter.scss
 create mode 100644 src/components/Icons/MdiFilterMenu.vue
 create mode 100644 src/components/Icons/MdiFilterRemoveOutline.vue
 create mode 100644 src/views/_HomeView.scss

diff --git a/package.json b/package.json
index f5fcdcd7..1067109f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "commit": "npm run type-check && npm run lint && npm run format && cz"
+    "commit": "npm run type-check && npm run lint && npm run format && git add . && cz"
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..3b33f365 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
     tailwindcss: {},
diff --git a/src/assets/styles/color-scheme.scss b/src/assets/styles/color-scheme.scss
index b9de2eca..f2a2937c 100644
--- a/src/assets/styles/color-scheme.scss
+++ b/src/assets/styles/color-scheme.scss
@@ -1,5 +1,5 @@
-body[color-scheme="dark"] {
-  @import "@/views/HomeView.dark";
+body[color-scheme='dark'] {
+  @import '@/views/HomeView.dark';
   @import '@/components/AppCategory/_AppCategory.dark';
   @import '@/components/AppStatementCard/_AppStatementCard.dark';
 }
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 6ad41ce6..273ea723 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -17,4 +17,3 @@ body {
     color: var(--color-ghostwhite);
   }
 }
-
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 086776d4..987b387a 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -1,6 +1,7 @@
 :root {
-  --color-dark: #2E2E41;
-  --color-dark-light: #272C3A;
+  --color-dark: #2e2e41;
+  --color-dark-light: #272c3a;
   --color-dark-text: #242424;
+  --color-dark-icon: #4b5563;
   --color-ghostwhite: ghostwhite;
 }
diff --git a/src/components/AppCategory/AppCategory.vue b/src/components/AppCategory/AppCategory.vue
index fbd7f549..847035fa 100644
--- a/src/components/AppCategory/AppCategory.vue
+++ b/src/components/AppCategory/AppCategory.vue
@@ -1,27 +1,21 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
-import type { Category } from "@/stores/db";
+import type { PropType } from 'vue'
+import type { Category } from '@/stores/db'
 
 defineProps({
   category: { type: Object as PropType<Category>, required: true }
 })
 
-const categoryColorGroups = [
-  ['bg-amber-50', 'text-amber-500', 'border-amber-500']
-]
+const categoryColorGroups = [['bg-amber-50', 'text-amber-500', 'border-amber-500']]
 </script>
 
 <template>
-  <span :class="[
-    'AppCategory',
-    ...categoryColorGroups[0]
-  ]">
+  <span :class="['AppCategory', ...categoryColorGroups[0]]">
     <span class="mr-1">{{ category.emoji }}</span>
     {{ category.name }}
   </span>
 </template>
 
-
 <style lang="scss">
 .AppCategory {
   @apply text-center font-semibold rounded-full border font-sans;
diff --git a/src/components/AppFilter/AppFilter.vue b/src/components/AppFilter/AppFilter.vue
index 30533b42..b1198b5a 100644
--- a/src/components/AppFilter/AppFilter.vue
+++ b/src/components/AppFilter/AppFilter.vue
@@ -1,38 +1,69 @@
 <script lang="ts" setup>
-import { type Category, useDBStore } from "@/stores/db";
-import { type Ref, ref} from "vue";
+import { type Category, useDBStore } from '@/stores/db'
+import { type Ref, ref } from 'vue'
+import MdiFilterMenu from '@/components/Icons/MdiFilterMenu.vue'
+import MdiFilterRemoveOutline from '@/components/Icons/MdiFilterRemoveOutline.vue'
 
 const { categories } = useDBStore()
 
-const dropdown = ref(false);
+const dropdown = ref(false)
 const categorySearch = ref(null)
-const selectedValue: Ref<Category|null> = ref(null);
+const selectedValue: Ref<Category | null> = ref(null)
 
 const toggleDropdown = () => {
-  dropdown.value = !dropdown.value;
-  dropdown.value && categorySearch.value ? (categorySearch.value as HTMLInputElement).focus() : false;
-}
-const closeDropdown = () => dropdown.value = false
+  dropdown.value = !dropdown.value
 
+  dropdown.value && categorySearch.value
+    ? (categorySearch.value as HTMLInputElement).focus()
+    : false
+}
+const closeDropdown = () => (dropdown.value = false)
+const openDropdown = () => (dropdown.value = true)
 const selectCategory = (category: Category) => {
   selectedValue.value = category
-  console.log(category)
+  closeDropdown()
 }
 </script>
 
 <template>
-  <div @click="toggleDropdown" v-click-outside="closeDropdown"  class="AppFilter" tabindex="0">
-    <input
+  <div v-click-outside="closeDropdown" class="AppFilter">
+    <label for="category-dropdown">
+      <input
         ref="categorySearch"
-       tabindex="0"
-       data-toggle="dropdown"
-       type="search"
-       name="category-dropdown"
-       placeholder="Filter by Categories..."
-       aria-haspopup="true"
-    />
-    <ul v-show="dropdown" class="AppFilter__dropdown" role="listbox" :aria-expanded="dropdown" aria-labelledby="category-dropdown">
-      <li v-for="(category, index) in categories" :key="index" @click="selectCategory(category)" role="option" tabindex="0">
+        tabindex="0"
+        data-toggle="dropdown"
+        type="search"
+        name="category-dropdown"
+        placeholder="Filter by Categories"
+        aria-haspopup="true"
+        @focusin="openDropdown"
+      />
+      <button
+        @click="toggleDropdown"
+        id="category-dropdown-btn"
+        class="AppFilter__icon"
+        :aria-expanded="dropdown"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+      >
+        <MdiFilterRemoveOutline v-if="dropdown" />
+        <MdiFilterMenu v-else />
+      </button>
+    </label>
+    <ul
+      v-show="dropdown"
+      class="AppFilter__dropdown"
+      role="listbox"
+      :aria-expanded="dropdown"
+      aria-labelledby="category-dropdown-btn"
+    >
+      <li
+        v-for="(category, index) in categories"
+        :key="index"
+        @click="selectCategory(category)"
+        role="option"
+        tabindex="0"
+      >
         <span class="mr-2">{{ category.emoji }}</span>
         <div>{{ category.name }}</div>
       </li>
@@ -41,29 +72,5 @@ const selectCategory = (category: Category) => {
 </template>
 
 <style lang="scss">
-.AppFilter {
-  font-family: "Fira Mono", sans-serif;
-  @apply rounded-lg w-2/5 cursor-pointer relative bg-transparent border text-sm;
-
-  input {
-    @apply w-full h-full p-3 rounded-lg;
-    &:focus {
-      @apply outline-amber-500;
-    }
-  }
-  &:focus {
-    @apply outline-amber-500;
-  }
-
-  &__dropdown {
-    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll;
-    @apply text-gray-600;
-    li {
-      @apply p-2 transition-all flex;
-      &:hover {
-        @apply bg-amber-100 rounded-lg;
-      }
-    }
-  }
-}
+@import 'AppFilter';
 </style>
diff --git a/src/components/AppFilter/_AppFilter.scss b/src/components/AppFilter/_AppFilter.scss
new file mode 100644
index 00000000..5c522cad
--- /dev/null
+++ b/src/components/AppFilter/_AppFilter.scss
@@ -0,0 +1,25 @@
+.AppFilter {
+  font-family: 'Fira Mono', sans-serif;
+  @apply rounded-lg w-2/5 cursor-pointer relative bg-transparent border text-sm;
+
+  input {
+    @apply w-full h-full p-3 rounded-lg relative;
+    &:focus {
+      @apply outline-amber-500;
+    }
+  }
+
+  &__icon {
+    @apply absolute top-0 bottom-0 right-0 m-auto text-[var(--color-dark-icon)] w-10 flex justify-center items-center rounded-r-lg;
+  }
+
+  &__dropdown {
+    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll;
+    li {
+      @apply p-2 transition-all flex;
+      &:hover {
+        @apply bg-amber-100 rounded-lg;
+      }
+    }
+  }
+}
diff --git a/src/components/AppHeader/HeaderActions.vue b/src/components/AppHeader/HeaderActions.vue
index 19e1e5fa..d9cf4a48 100644
--- a/src/components/AppHeader/HeaderActions.vue
+++ b/src/components/AppHeader/HeaderActions.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import MdiGithub from "@/components/Icons/MdiGithub.vue";
-import ToggleDarkMode from "@/components/AppHeader/ToggleDarkMode.vue";
+import MdiGithub from '@/components/Icons/MdiGithub.vue'
+import ToggleDarkMode from '@/components/AppHeader/ToggleDarkMode.vue'
 
 const GITHUB_URL = 'https://github.com/MartinsOnuoha/what-should-i-design'
 </script>
@@ -8,7 +8,13 @@ const GITHUB_URL = 'https://github.com/MartinsOnuoha/what-should-i-design'
 <template>
   <div class="HeaderActions">
     <ToggleDarkMode />
-    <a :href="GITHUB_URL" target="_blank" aria-label="github" title="Contribute on Github" class="HeaderActions__github">
+    <a
+      :href="GITHUB_URL"
+      target="_blank"
+      aria-label="github"
+      title="Contribute on Github"
+      class="HeaderActions__github"
+    >
       <MdiGithub />
     </a>
   </div>
diff --git a/src/components/AppHeader/ToggleDarkMode.vue b/src/components/AppHeader/ToggleDarkMode.vue
index cf697d66..2f6d7982 100644
--- a/src/components/AppHeader/ToggleDarkMode.vue
+++ b/src/components/AppHeader/ToggleDarkMode.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
-import MdiWhiteBalanceSunny from "@/components/Icons/MdiWhiteBalanceSunny.vue";
-import MdiMoonWaningCrescent from "@/components/Icons/MdiMoonWaningCrescent.vue";
+import MdiWhiteBalanceSunny from '@/components/Icons/MdiWhiteBalanceSunny.vue'
+import MdiMoonWaningCrescent from '@/components/Icons/MdiMoonWaningCrescent.vue'
 
 const isDark = useDark({
   selector: 'body',
   attribute: 'color-scheme',
   valueDark: 'dark',
-  valueLight: 'light',
+  valueLight: 'light'
 })
 
 const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <button @click="toggleDark()" aria-label="toggle dark-mode" title="toggle dark-mode"  class="ToggleDarkMode">
+  <button
+    @click="toggleDark()"
+    aria-label="toggle dark-mode"
+    title="toggle dark-mode"
+    class="ToggleDarkMode"
+  >
     <MdiWhiteBalanceSunny v-show="isDark" />
     <MdiMoonWaningCrescent v-show="!isDark" />
   </button>
diff --git a/src/components/AppSideBanner/AppSideBanner.vue b/src/components/AppSideBanner/AppSideBanner.vue
index 28cf60d0..75852ec7 100644
--- a/src/components/AppSideBanner/AppSideBanner.vue
+++ b/src/components/AppSideBanner/AppSideBanner.vue
@@ -5,18 +5,18 @@
 </template>
 
 <script setup lang="ts">
- defineProps({
+defineProps({
   alt: {
     type: String,
     default: 'Banner image'
   }
- })
+})
 </script>
 
 <style lang="scss" scoped>
 .AppSideBanner {
   @apply h-screen bg-contain relative;
-  background-image: url("@/assets/banner.webp");
+  background-image: url('@/assets/banner.webp');
 
   &__overlay {
     @apply h-screen absolute w-full opacity-60;
diff --git a/src/components/AppStatementCard/AppStatementCard.vue b/src/components/AppStatementCard/AppStatementCard.vue
index 2717c376..214ae550 100644
--- a/src/components/AppStatementCard/AppStatementCard.vue
+++ b/src/components/AppStatementCard/AppStatementCard.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
-import type { Statement } from "@/stores/db";
-import {useDBStore} from "@/stores/db";
-import AppCategory from "@/components/AppCategory/AppCategory.vue";
+import type { PropType } from 'vue'
+import type { Statement } from '@/stores/db'
+import { useDBStore } from '@/stores/db'
+import AppCategory from '@/components/AppCategory/AppCategory.vue'
 
 const props = defineProps({
-  statement: {type: Object as PropType<Statement>, required: true},
-});
+  statement: { type: Object as PropType<Statement>, required: true }
+})
 
-const getCategories = useDBStore().categories.filter(category => props.statement?.categories.includes(category.id))
+const getCategories = useDBStore().categories.filter(
+  (category) => props.statement?.categories.includes(category.id)
+)
 </script>
 
 <template>
@@ -18,14 +20,14 @@ const getCategories = useDBStore().categories.filter(category => props.statement
         {{ statement.description }}
       </div>
       <div class="AppStatementCard__categories">
-        <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category"/>
+        <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category" />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss">
-@import "AppStatementCard";
+@import 'AppStatementCard';
 @media (prefers-color-scheme: dark) {
   @import 'AppStatementCard.dark';
 }
diff --git a/src/components/AppStatementCard/_AppStatementCard.dark.scss b/src/components/AppStatementCard/_AppStatementCard.dark.scss
index bb313add..e251db88 100644
--- a/src/components/AppStatementCard/_AppStatementCard.dark.scss
+++ b/src/components/AppStatementCard/_AppStatementCard.dark.scss
@@ -2,7 +2,5 @@
   @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1;
 }
 .AppStatementCard {
-  @apply shadow-2xl border-none;
-  background-color: var(--color-dark);
-  color: var(--color-ghostwhite);
+  @apply shadow-2xl border-none bg-[var(--color-dark)] text-[var(--color-ghostwhite)] hover:bg-gradient-to-tr from-pink-900 via-[var(--color-dark)] to-[var(--color-dark)];
 }
diff --git a/src/components/AppStatementCard/_AppStatementCard.scss b/src/components/AppStatementCard/_AppStatementCard.scss
index d32e65d1..dd1b9fb5 100644
--- a/src/components/AppStatementCard/_AppStatementCard.scss
+++ b/src/components/AppStatementCard/_AppStatementCard.scss
@@ -4,8 +4,7 @@
     @apply outline-amber-500;
   }
   .AppStatementCard {
-    @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-amber-50 transition-all;
-
+    @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-gradient-to-tr from-amber-100 via-transparent to-transparent;
     &__content {
       @apply text-lg;
     }
diff --git a/src/components/Icons/MdiFilterMenu.vue b/src/components/Icons/MdiFilterMenu.vue
new file mode 100644
index 00000000..d20129e9
--- /dev/null
+++ b/src/components/Icons/MdiFilterMenu.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m11 11l5.76-7.38a1 1 0 0 0-.17-1.4A1 1 0 0 0 16 2H2a1 1 0 0 0-.62.22a1 1 0 0 0-.17 1.4L7 11v5.87a1 1 0 0 0 .29.83l2 2a1 1 0 0 0 1.41 0a1 1 0 0 0 .3-.83V11m2 5l5 5l5-5Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/Icons/MdiFilterRemoveOutline.vue b/src/components/Icons/MdiFilterRemoveOutline.vue
new file mode 100644
index 00000000..96b8cc9b
--- /dev/null
+++ b/src/components/Icons/MdiFilterRemoveOutline.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M14.73 20.83L17.58 18l-2.85-2.83l1.42-1.41L19 16.57l2.8-2.81l1.42 1.41L20.41 18l2.81 2.83l-1.42 1.41L19 19.4l-2.85 2.84l-1.42-1.41M13 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L7.29 16.7a.989.989 0 0 1-.29-.83v-5.12L2.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L13 10.75v9.13M5.04 5L9 10.06v5.52l2 2v-7.53L14.96 5H5.04Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/Icons/MdiGithub.vue b/src/components/Icons/MdiGithub.vue
index afb49e32..299b1aed 100644
--- a/src/components/Icons/MdiGithub.vue
+++ b/src/components/Icons/MdiGithub.vue
@@ -1,5 +1,8 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
+    ></path>
+  </svg>
 </template>
-
diff --git a/src/components/Icons/MdiMoonWaningCrescent.vue b/src/components/Icons/MdiMoonWaningCrescent.vue
index 6dd985d0..8dec448d 100644
--- a/src/components/Icons/MdiMoonWaningCrescent.vue
+++ b/src/components/Icons/MdiMoonWaningCrescent.vue
@@ -1,4 +1,14 @@
-
 <template>
-  <svg class="-rotate-12" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12Z"></path></svg>
+  <svg
+    class="-rotate-12"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12Z"
+    ></path>
+  </svg>
 </template>
diff --git a/src/components/Icons/MdiWhiteBalanceSunny.vue b/src/components/Icons/MdiWhiteBalanceSunny.vue
index ff9ba551..6a504a92 100644
--- a/src/components/Icons/MdiWhiteBalanceSunny.vue
+++ b/src/components/Icons/MdiWhiteBalanceSunny.vue
@@ -1,4 +1,8 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81l1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81l1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"
+    ></path>
+  </svg>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 0bd350fd..b2dfe344 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import vClickOutside from "click-outside-vue3"
+import vClickOutside from 'click-outside-vue3'
 import App from './App.vue'
 import router from './router'
 import './assets/styles/main.scss'
diff --git a/src/router/index.ts b/src/router/index.ts
index a58d7828..9b981582 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: () => import('../views/HomeView.vue')
-    },
+    }
   ]
 })
 
diff --git a/src/stores/categories.db.ts b/src/stores/categories.db.ts
index b0d6df72..210c8bc6 100644
--- a/src/stores/categories.db.ts
+++ b/src/stores/categories.db.ts
@@ -35,7 +35,7 @@ export default {
     { id: 33, name: 'Art and Creativity', emoji: '🎨' },
     { id: 34, name: 'Science and Research', emoji: '🔬' },
     { id: 35, name: 'Space Exploration', emoji: '🚀' },
-    { id: 36, name: 'Children\'s Apps', emoji: '👶' },
+    { id: 36, name: "Children's Apps", emoji: '👶' },
     { id: 37, name: 'Accessibility Solutions', emoji: '♿' },
     { id: 38, name: 'Smart Cities', emoji: '🌆' },
     { id: 39, name: 'Pet Care and Veterinary', emoji: '🐾' },
@@ -52,7 +52,6 @@ export default {
     { id: 50, name: 'Blockchain and NFT Marketplaces', emoji: '💱' },
     { id: 51, name: 'Space Tourism', emoji: '🚀' },
     { id: 52, name: 'Agricultural Technology (AgTech)', emoji: '🌾' },
-    { id: 53, name: 'Blockchain and Cryptocurrency Gaming', emoji: '🎮' },
+    { id: 53, name: 'Blockchain and Cryptocurrency Gaming', emoji: '🎮' }
   ]
 }
-
diff --git a/src/stores/db.ts b/src/stores/db.ts
index e9ab529e..887a8385 100644
--- a/src/stores/db.ts
+++ b/src/stores/db.ts
@@ -1,17 +1,17 @@
 import { defineStore } from 'pinia'
-import statements from './statements.db';
+import statements from './statements.db'
 import categories from './categories.db'
 
 export type Statement = {
-  title: string;
-  description: string;
+  title: string
+  description: string
   categories: number[]
 }
 
 export type Category = {
-  id: number;
-  name: string;
-  emoji: string;
+  id: number
+  name: string
+  emoji: string
 }
 export const useDBStore = defineStore('db', {
   state: () => {
@@ -20,7 +20,5 @@ export const useDBStore = defineStore('db', {
       statements: statements.data
     }
   },
-  getters: {
-
-  }
+  getters: {}
 })
diff --git a/src/stores/statements.db.ts b/src/stores/statements.db.ts
index 51148d57..341291a6 100644
--- a/src/stores/statements.db.ts
+++ b/src/stores/statements.db.ts
@@ -1,203 +1,243 @@
 export default {
-  "data": [
+  data: [
     {
-      title: "Precision Farming Interface",
-      description: "Design an intuitive interface for a precision farming platform that assists farmers in optimizing crop yield, irrigation, and pest control using IoT sensors and data analytics.",
+      title: 'Precision Farming Interface',
+      description:
+        'Design an intuitive interface for a precision farming platform that assists farmers in optimizing crop yield, irrigation, and pest control using IoT sensors and data analytics.',
       categories: [18]
     },
     {
-      title: "Livestock Management App",
-      description: "Create a user-friendly app for livestock farmers to monitor the health, nutrition, and breeding of their animals, enhancing overall farm management.",
+      title: 'Livestock Management App',
+      description:
+        'Create a user-friendly app for livestock farmers to monitor the health, nutrition, and breeding of their animals, enhancing overall farm management.',
       categories: [18]
     },
     {
-      title: "Crop Disease Detection",
-      description: "Develop a mobile app that allows farmers to identify and manage crop diseases through image recognition technology and offers guidance on treatment.",
+      title: 'Crop Disease Detection',
+      description:
+        'Develop a mobile app that allows farmers to identify and manage crop diseases through image recognition technology and offers guidance on treatment.',
       categories: [18]
     },
     {
-      title: "Agricultural Weather Dashboard",
-      description: "Design a weather monitoring dashboard for farmers that provides real-time weather data, forecasts, and suggestions for optimal farming activities.",
+      title: 'Agricultural Weather Dashboard',
+      description:
+        'Design a weather monitoring dashboard for farmers that provides real-time weather data, forecasts, and suggestions for optimal farming activities.',
       categories: [18]
     },
     {
-      title: "Farm Equipment Rental Platform",
-      description: "Create a platform that enables farmers to rent and share farm equipment, complete with a user-friendly interface for equipment listing and reservation.",
+      title: 'Farm Equipment Rental Platform',
+      description:
+        'Create a platform that enables farmers to rent and share farm equipment, complete with a user-friendly interface for equipment listing and reservation.',
       categories: [18]
     },
     {
-      title: "Vertical Farming Control System",
-      description: "Design a control system interface for vertical farms, allowing users to manage indoor lighting, temperature, and nutrient levels to maximize crop growth.",
+      title: 'Vertical Farming Control System',
+      description:
+        'Design a control system interface for vertical farms, allowing users to manage indoor lighting, temperature, and nutrient levels to maximize crop growth.',
       categories: [18]
     },
     {
-      title: "Farm-to-Table Marketplace",
-      description: "Develop a marketplace interface connecting local farmers with consumers, enabling farmers to list their produce and users to make direct purchases.",
+      title: 'Farm-to-Table Marketplace',
+      description:
+        'Develop a marketplace interface connecting local farmers with consumers, enabling farmers to list their produce and users to make direct purchases.',
       categories: [18]
     },
     {
-      title: "Soil Health Assessment Tool",
-      description: "Create an app that helps farmers assess soil health, providing recommendations for soil amendments and crop rotation strategies.",
+      title: 'Soil Health Assessment Tool',
+      description:
+        'Create an app that helps farmers assess soil health, providing recommendations for soil amendments and crop rotation strategies.',
       categories: [18]
     },
     {
-      title: "Farming Supply Ordering Portal",
-      description: "Design an online portal for farmers to order agricultural supplies and equipment, emphasizing ease of use and efficiency.",
+      title: 'Farming Supply Ordering Portal',
+      description:
+        'Design an online portal for farmers to order agricultural supplies and equipment, emphasizing ease of use and efficiency.',
       categories: [18]
     },
     {
-      title: "Agrochemical Management System",
-      description: "Develop an interface for managing and tracking agrochemical usage on farms, ensuring compliance with safety and environmental regulations.",
+      title: 'Agrochemical Management System',
+      description:
+        'Develop an interface for managing and tracking agrochemical usage on farms, ensuring compliance with safety and environmental regulations.',
       categories: [18]
     },
     {
-      title: "Agricultural Drone Control",
-      description: "Create a user-friendly app for controlling agricultural drones used for crop monitoring, spraying, and mapping.",
+      title: 'Agricultural Drone Control',
+      description:
+        'Create a user-friendly app for controlling agricultural drones used for crop monitoring, spraying, and mapping.',
       categories: [18]
     },
     {
-      title: "Commodity Price Tracking",
-      description: "Design a mobile app that provides farmers with up-to-date information on commodity prices, helping them make informed selling decisions.",
+      title: 'Commodity Price Tracking',
+      description:
+        'Design a mobile app that provides farmers with up-to-date information on commodity prices, helping them make informed selling decisions.',
       categories: [18]
     },
     {
-      title: "Organic Certification Assistance",
-      description: "Develop a platform to guide farmers through the organic certification process, with an easy-to-follow interface and document submission.",
+      title: 'Organic Certification Assistance',
+      description:
+        'Develop a platform to guide farmers through the organic certification process, with an easy-to-follow interface and document submission.',
       categories: [18]
     },
     {
-      title: "Sustainable Farming Education",
-      description: "Design an educational platform that teaches sustainable farming practices, offering interactive lessons and resources for farmers.",
+      title: 'Sustainable Farming Education',
+      description:
+        'Design an educational platform that teaches sustainable farming practices, offering interactive lessons and resources for farmers.',
       categories: [18]
     },
     {
       title: "Farmers' Cooperative Management",
-      description: "Create an interface for managing farmers' cooperatives, facilitating collaboration, communication, and resource sharing among members.",
+      description:
+        "Create an interface for managing farmers' cooperatives, facilitating collaboration, communication, and resource sharing among members.",
       categories: [18]
     },
     {
-      title: "Agricultural Pest Control Planner",
-      description: "Design a tool that helps farmers plan and execute pest control measures, with a focus on eco-friendly and integrated pest management.",
+      title: 'Agricultural Pest Control Planner',
+      description:
+        'Design a tool that helps farmers plan and execute pest control measures, with a focus on eco-friendly and integrated pest management.',
       categories: [18]
     },
     {
-      title: "Remote Irrigation Control",
-      description: "Develop an app for remote irrigation control, allowing farmers to adjust water usage for their fields based on real-time conditions.",
+      title: 'Remote Irrigation Control',
+      description:
+        'Develop an app for remote irrigation control, allowing farmers to adjust water usage for their fields based on real-time conditions.',
       categories: [18]
     },
     {
-      title: "Farm Income and Expense Tracker",
-      description: "Create a financial management app for farmers to track income, expenses, and profits, promoting financial sustainability.",
+      title: 'Farm Income and Expense Tracker',
+      description:
+        'Create a financial management app for farmers to track income, expenses, and profits, promoting financial sustainability.',
       categories: [18]
     },
     {
-      title: "Drought Preparedness Dashboard",
-      description: "Design a dashboard that helps farmers prepare for drought conditions by providing water conservation strategies and water source monitoring.",
+      title: 'Drought Preparedness Dashboard',
+      description:
+        'Design a dashboard that helps farmers prepare for drought conditions by providing water conservation strategies and water source monitoring.',
       categories: [18]
     },
     {
-      title: "Sustainable Farm Certification",
-      description: "Develop an interface for farmers seeking sustainability certifications, guiding them through the application and auditing processes.",
+      title: 'Sustainable Farm Certification',
+      description:
+        'Develop an interface for farmers seeking sustainability certifications, guiding them through the application and auditing processes.',
       categories: [18]
     },
     {
-      title: "Livestock Health Monitoring",
-      description: "Design an intuitive user interface for a livestock health monitoring system that allows farmers to track the well-being of individual animals and receive timely alerts for health issues.",
+      title: 'Livestock Health Monitoring',
+      description:
+        'Design an intuitive user interface for a livestock health monitoring system that allows farmers to track the well-being of individual animals and receive timely alerts for health issues.',
       categories: [18]
     },
     {
-      title: "Drones for Crop Scouting",
-      description: "Create a user-friendly interface for an agricultural drone system that enables farmers to conduct efficient crop scouting and pest detection.",
+      title: 'Drones for Crop Scouting',
+      description:
+        'Create a user-friendly interface for an agricultural drone system that enables farmers to conduct efficient crop scouting and pest detection.',
       categories: [18]
     },
     {
-      title: "Crop Rotation Planner",
-      description: "Develop a digital tool that assists farmers in planning crop rotations for improved soil health and disease prevention, with a focus on simplicity and usability.",
+      title: 'Crop Rotation Planner',
+      description:
+        'Develop a digital tool that assists farmers in planning crop rotations for improved soil health and disease prevention, with a focus on simplicity and usability.',
       categories: [18]
     },
     {
-      title: "Farm Labor Management App",
-      description: "Design a mobile app for farmers to efficiently manage and schedule farm labor, ensuring tasks are assigned, tracked, and completed on time.",
+      title: 'Farm Labor Management App',
+      description:
+        'Design a mobile app for farmers to efficiently manage and schedule farm labor, ensuring tasks are assigned, tracked, and completed on time.',
       categories: [18]
     },
     {
-      title: "Agricultural Education Platform",
-      description: "Create an educational platform for farmers to access a wide range of agriculture-related courses, tutorials, and resources through an easy-to-navigate interface.",
+      title: 'Agricultural Education Platform',
+      description:
+        'Create an educational platform for farmers to access a wide range of agriculture-related courses, tutorials, and resources through an easy-to-navigate interface.',
       categories: [18]
     },
     {
-      title: "Farm-to-Table Delivery Service",
-      description: "Develop a user-friendly platform for farmers to connect with local restaurants and consumers, facilitating direct deliveries of farm-fresh products.",
+      title: 'Farm-to-Table Delivery Service',
+      description:
+        'Develop a user-friendly platform for farmers to connect with local restaurants and consumers, facilitating direct deliveries of farm-fresh products.',
       categories: [18]
     },
     {
-      title: "Digital Irrigation Scheduler",
-      description: "Design an irrigation scheduling tool that provides farmers with recommendations for optimal irrigation timing and duration based on soil moisture and weather conditions.",
+      title: 'Digital Irrigation Scheduler',
+      description:
+        'Design an irrigation scheduling tool that provides farmers with recommendations for optimal irrigation timing and duration based on soil moisture and weather conditions.',
       categories: [18]
     },
     {
-      title: "Farming Cooperative Marketplace",
-      description: "Create an online marketplace exclusively for farming cooperatives to buy, sell, and trade agricultural goods, with an emphasis on accessibility and community engagement.",
+      title: 'Farming Cooperative Marketplace',
+      description:
+        'Create an online marketplace exclusively for farming cooperatives to buy, sell, and trade agricultural goods, with an emphasis on accessibility and community engagement.',
       categories: [18]
     },
     {
-      title: "AgTech Dashboard Integration",
-      description: "Develop an intuitive interface for farmers to seamlessly integrate data from various agricultural technology tools, allowing them to monitor and manage their entire operation in one place.",
+      title: 'AgTech Dashboard Integration',
+      description:
+        'Develop an intuitive interface for farmers to seamlessly integrate data from various agricultural technology tools, allowing them to monitor and manage their entire operation in one place.',
       categories: [18]
     },
     {
-      title: "Sustainable Farming Certification Tracking",
-      description: "Design a digital system for farmers to track and maintain their sustainable farming certifications, streamlining the renewal and auditing processes.",
+      title: 'Sustainable Farming Certification Tracking',
+      description:
+        'Design a digital system for farmers to track and maintain their sustainable farming certifications, streamlining the renewal and auditing processes.',
       categories: [18]
     },
     {
-      title: "Food Traceability System",
-      description: "Create a traceability system for farmers to record and share the journey of their products from farm to table, ensuring transparency and consumer trust.",
+      title: 'Food Traceability System',
+      description:
+        'Create a traceability system for farmers to record and share the journey of their products from farm to table, ensuring transparency and consumer trust.',
       categories: [18]
     },
     {
-      title: "Agricultural Marketplace App",
-      description: "Design a mobile app that connects farmers with buyers and suppliers, streamlining the buying and selling of agricultural products.",
+      title: 'Agricultural Marketplace App',
+      description:
+        'Design a mobile app that connects farmers with buyers and suppliers, streamlining the buying and selling of agricultural products.',
       categories: [18]
     },
     {
-      title: "Soil Testing and Analysis Tool",
-      description: "Develop an easy-to-use soil testing and analysis tool for farmers to assess soil quality and receive recommendations for improving crop yields.",
+      title: 'Soil Testing and Analysis Tool',
+      description:
+        'Develop an easy-to-use soil testing and analysis tool for farmers to assess soil quality and receive recommendations for improving crop yields.',
       categories: [18]
     },
     {
-      title: "Weather-Responsive Crop Planner",
-      description: "Create a digital crop planner that adjusts planting and harvesting schedules based on real-time weather forecasts and climatic conditions.",
+      title: 'Weather-Responsive Crop Planner',
+      description:
+        'Create a digital crop planner that adjusts planting and harvesting schedules based on real-time weather forecasts and climatic conditions.',
       categories: [18]
     },
     {
-      title: "Farm Equipment Maintenance Tracker",
-      description: "Design an interface that helps farmers schedule and track the maintenance of their farming equipment and machinery for optimal performance.",
+      title: 'Farm Equipment Maintenance Tracker',
+      description:
+        'Design an interface that helps farmers schedule and track the maintenance of their farming equipment and machinery for optimal performance.',
       categories: [18]
     },
     {
-      title: "Agricultural Waste Management System",
-      description: "Develop a digital system for farmers to manage agricultural waste disposal and recycling, ensuring environmental sustainability.",
+      title: 'Agricultural Waste Management System',
+      description:
+        'Develop a digital system for farmers to manage agricultural waste disposal and recycling, ensuring environmental sustainability.',
       categories: [18]
     },
     {
-      title: "Aquaponics Control Panel",
-      description: "Design a user-friendly control panel for aquaponics systems, allowing farmers to monitor and adjust water quality and plant growth in an integrated environment.",
+      title: 'Aquaponics Control Panel',
+      description:
+        'Design a user-friendly control panel for aquaponics systems, allowing farmers to monitor and adjust water quality and plant growth in an integrated environment.',
       categories: [18]
     },
     {
-      title: "Sustainable Pest Control Guide",
-      description: "Create a mobile app that educates farmers on sustainable and organic pest control methods, providing step-by-step guidance and recommendations.",
+      title: 'Sustainable Pest Control Guide',
+      description:
+        'Create a mobile app that educates farmers on sustainable and organic pest control methods, providing step-by-step guidance and recommendations.',
       categories: [18]
     },
     {
       title: "Farmers' Market Directory",
-      description: "Develop a directory of local farmers' markets with a user-friendly interface, making it easy for consumers to locate and visit these markets.",
+      description:
+        "Develop a directory of local farmers' markets with a user-friendly interface, making it easy for consumers to locate and visit these markets.",
       categories: [18]
     },
     {
-      title: "Farm Safety Training Platform",
-      description: "Design an educational platform for farm safety training, offering interactive lessons and resources to promote safe agricultural practices.",
+      title: 'Farm Safety Training Platform',
+      description:
+        'Design an educational platform for farm safety training, offering interactive lessons and resources to promote safe agricultural practices.',
       categories: [18]
     }
   ]
diff --git a/src/types/click-outside.d.ts b/src/types/click-outside.d.ts
index 61802be4..4da84032 100644
--- a/src/types/click-outside.d.ts
+++ b/src/types/click-outside.d.ts
@@ -1 +1 @@
-declare module 'click-outside-vue3';
+declare module 'click-outside-vue3'
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f6e72fd7..2cad0f8c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import AppSidePanel from '@/components/AppSideBanner/AppSideBanner.vue'
-import AppStatementCard from "@/components/AppStatementCard/AppStatementCard.vue";
+import AppStatementCard from '@/components/AppStatementCard/AppStatementCard.vue'
 import AppFilter from '@/components/AppFilter/AppFilter.vue'
-import { useDBStore } from "@/stores/db";
-import HeaderActions from "@/components/AppHeader/HeaderActions.vue";
+import { useDBStore } from '@/stores/db'
+import HeaderActions from '@/components/AppHeader/HeaderActions.vue'
 
 const { statements } = useDBStore()
 </script>
@@ -17,32 +17,19 @@ const { statements } = useDBStore()
         <HeaderActions />
       </header>
       <section class="HomeView__content">
-        <AppStatementCard v-for="(statement, index) in statements" :key="index" :statement="statement" />
+        <AppStatementCard
+          v-for="(statement, index) in statements"
+          :key="index"
+          :statement="statement"
+        />
       </section>
     </main>
   </section>
 </template>
 
 <style lang="scss">
-.HomeView {
-  @apply flex h-screen;
-  background-color: var(--color-ghostwhite);
-
-  main {
-    @apply w-2/4 p-5 max-h-screen overflow-y-scroll;
-  }
-
-  &__header {
-    @apply pt-4 pb-4 flex items-center justify-between;
-  }
-
-  &__content {
-    @apply grid grid-cols-2 gap-4;
-  }
-
-}
-
+@import 'HomeView';
 @media (prefers-color-scheme: dark) {
-  @import "HomeView.dark";
+  @import 'HomeView.dark';
 }
 </style>
diff --git a/src/views/_HomeView.dark.scss b/src/views/_HomeView.dark.scss
index f08d1347..c12d90ab 100644
--- a/src/views/_HomeView.dark.scss
+++ b/src/views/_HomeView.dark.scss
@@ -1,3 +1,3 @@
 .HomeView {
-  background-color: var(--color-dark);
+  @apply bg-[var(--color-dark)];
 }
diff --git a/src/views/_HomeView.scss b/src/views/_HomeView.scss
new file mode 100644
index 00000000..a45596f2
--- /dev/null
+++ b/src/views/_HomeView.scss
@@ -0,0 +1,16 @@
+.HomeView {
+  @apply flex h-screen;
+  background-color: var(--color-ghostwhite);
+
+  main {
+    @apply w-2/4 p-5 max-h-screen overflow-y-scroll;
+  }
+
+  &__header {
+    @apply pt-4 pb-4 flex items-center justify-between;
+  }
+
+  &__content {
+    @apply grid grid-cols-2 gap-4;
+  }
+}