layout modifications

frontend/src/components/BalanceTab.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, toRefs } from "vue";
 import { maskCurrency } from "@/shared/utils";
+import SelectArrowIcon from "./ui/icons/SelectArrowIcon.vue";
 
 const props = defineProps<{
   earnings_subtotal: number;
@@ -15,34 +16,31 @@ const balance = computed(() => {
   return earnings_subtotal.value - expenses_subtotal.value;
 });
 
-const openDropdown = () => {
-  isDropdownOpen.value = true;
-};
-
-const closeDropdown = () => {
-  setTimeout(() => (isDropdownOpen.value = false), 1000);
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
 };
 </script>
 
 <template>
   <div
     class="flex flex-col justify-self-end gap-2 text-sm min-w-44 relative"
-    @mouseover="openDropdown"
-    @mouseleave="closeDropdown"
+    @click="toggleDropdown"
+    v-click-outside="() => (isDropdownOpen = false)"
   >
     <div
-      class="p-2 rounded-md"
+      class="p-2 rounded-md grid place-items-center grid-flow-col cursor-pointer duration-200"
       :class="{
-        'bg-red-600': balance < 0,
-        'bg-green-600': balance > 0,
-        'bg-gray-600': balance == 0,
+        'bg-red-600 hover:bg-red-700': balance < 0,
+        'bg-green-600 hover:bg-green-700': balance > 0,
+        'bg-gray-600 hover:bg-gray-700': balance == 0,
       }"
     >
       <span>Balance: {{ maskCurrency(balance) }}</span>
+      <SelectArrowIcon />
     </div>
     <transition name="fade">
       <div
-        class="grid grid-flow-row gap-2 min-w-44 mt-11 absolute z-50"
+        class="grid grid-flow-row text-center gap-2 min-w-44 mt-11 absolute z-50"
         v-show="isDropdownOpen"
       >
         <span

frontend/src/components/DestructiveActionModal.vue

@@ -6,14 +6,18 @@ import DangerButton from "./ui/DangerButton.vue";
 
 const props = defineProps({
   isOpen: Boolean,
+  title: String,
 });
 
-const { isOpen } = toRefs(props);
+const { isOpen, title } = toRefs(props);
 </script>
 
 <template>
   <div class="fixed z-50">
     <Dialog :isOpen="isOpen">
+      <h1 class="text-2xl text-black dark:text-white">
+        {{ title ? title : "Delete" }}
+      </h1>
       <div class="flex flex-col gap-4">
         <h1 class="text-lg text-black dark:text-white">
           Are you sure you want to delete this item? This action cannot be

frontend/src/components/EditProfileModal.vue

@@ -113,5 +113,6 @@ onMounted(() => {
     :is-open="isDeleteProfileModalOpen"
     @on-confirm="deleteProfile"
     @on-cancel="closeDeleteProfileModal"
+    :title="'Delete profile'"
   />
 </template>

frontend/src/components/ProfileSelector.vue

@@ -68,28 +68,30 @@ const otherProfiles = computed(() => {
     >
       {{ profile ? profile.description : "Select profile" }} <SelectArrowIcon />
     </button>
-    <ul
-      v-if="isDropdownOpen"
-      class="shadow-lg flex flex-col rounded-sm ring-1 ring-black ring-opacity-5 focus:outline-none absolute min-w-24 bg-light dark:bg-dark text-black dark:text-white z-50"
-    >
-      <li
-        v-for="profile in otherProfiles"
-        :key="profile.id"
-        @click="selectProfile(profile)"
-        class="cursor-pointer p-2 text-black min-w-24 dark:text-white hover:bg-dark dark:hover:bg-light hover:bg-opacity-30 dark:hover:bg-opacity-30"
-      >
-        {{ profile.description }}
-      </li>
-      <li
-        @click="openCreateProfileModal"
-        class="cursor-pointer flex flex-col min-w-24 p-2 text-black dark:text-white hover:bg-dark dark:hover:bg-light hover:bg-opacity-30 dark:hover:bg-opacity-30"
+    <transition name="fade">
+      <ul
+        v-if="isDropdownOpen"
+        class="shadow-lg flex flex-col rounded-sm ring-1 ring-black ring-opacity-5 focus:outline-none absolute min-w-24 bg-light dark:bg-dark text-black dark:text-white z-50"
       >
-        <AddIcon
-          class="text-black dark:text-white justify-self-center self-center"
+        <li
+          v-for="profile in otherProfiles"
+          :key="profile.id"
+          @click="selectProfile(profile)"
+          class="cursor-pointer p-2 text-black min-w-24 dark:text-white hover:bg-dark dark:hover:bg-light hover:bg-opacity-30 dark:hover:bg-opacity-30"
+        >
+          {{ profile.description }}
+        </li>
+        <li
           @click="openCreateProfileModal"
-        />
-      </li>
-    </ul>
+          class="cursor-pointer flex flex-col min-w-24 p-2 text-black dark:text-white hover:bg-dark dark:hover:bg-light hover:bg-opacity-30 dark:hover:bg-opacity-30"
+        >
+          <AddIcon
+            class="text-black dark:text-white justify-self-center self-center"
+            @click="openCreateProfileModal"
+          />
+        </li>
+      </ul>
+    </transition>
   </div>
 
   <CreateProfileModal
@@ -100,3 +102,14 @@ const otherProfiles = computed(() => {
     @on-cancel="closeCreateProfileModal"
   />
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/Table.vue

@@ -326,7 +326,9 @@ const handleSizeChange = (n: number) => {
         {{ tab }}
       </button>
     </div>
-    <div class="w-full flex justify-end gap-2 text-sm">
+    <div
+      class="w-full flex justify-end gap-2 text-sm text-black dark:text-white"
+    >
       <span>Items per page:</span>
       <div v-for="n in [5, 10]">
         <span
@@ -483,6 +485,7 @@ const handleSizeChange = (n: number) => {
     :is-open="isDeleteTableDataModalOpen"
     @on-confirm="deleteTableData"
     @on-cancel="closeDeleteTableDataModal"
+    :title="selectedTab === Tab.EARNING ? 'Delete earning' : 'Delete expense'"
   />
   <EditItemModal
     v-if="isEditModalOpen && selectedTab"

frontend/src/components/ThemeSwitcher.vue

@@ -23,9 +23,22 @@ const { isDarkMode } = toRefs(props);
       @click="$emit('toggle-theme')"
       class="p-2 text-black dark:text-white rounded-lg"
     >
-      <span v-if="isDarkMode"><LightModeIcon /></span>
-      <span v-else><DarkModeIcon /></span>
+      <transition name="icon-fade" mode="out-in">
+        <span v-if="isDarkMode" key="dark"><LightModeIcon /></span>
+        <span v-else key="light"><DarkModeIcon /></span>
+      </transition>
     </button>
   </div>
   <slot></slot>
 </template>
+
+<style scoped>
+.icon-fade-enter-active,
+.icon-fade-leave-active {
+  transition: opacity 0.2s ease-out;
+}
+.icon-fade-enter,
+.icon-fade-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/index.css

@@ -27,5 +27,6 @@
     color: white;
     font-family: "sunflower", sans-serif;
     font-weight: 300;
+    -webkit-font-smoothing: antialiased !important;
   }
 }

frontend/src/main.ts

@@ -3,8 +3,12 @@ import App from "./App.vue";
 import "./index.css";
 import { createPinia } from "pinia";
 import piniaPluginPersistedState from "pinia-plugin-persistedstate";
+import { clickOutside } from "./shared/directives/ClickOutside";
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedState);
 
-createApp(App).use(pinia).mount("#app");
+createApp(App)
+  .directive("click-outside", clickOutside)
+  .use(pinia)
+  .mount("#app");

frontend/src/shared/directives/ClickOutside.ts

@@ -0,0 +1,27 @@
+export const clickOutside = {
+  beforeMount(el: any, binding: any, vnode: any) {
+    el.eventSetDrag = function () {
+      el.setAttribute("data-dragging", "yes");
+    };
+    el.eventClearDrag = function () {
+      el.removeAttribute("data-dragging");
+    };
+    el.eventOnClick = function (event: any) {
+      var dragging = el.getAttribute("data-dragging");
+      if (!(el == event.target || el.contains(event.target)) && !dragging) {
+        binding.value(event);
+      }
+    };
+    document.addEventListener("touchstart", el.eventClearDrag);
+    document.addEventListener("touchmove", el.eventSetDrag);
+    document.addEventListener("click", el.eventOnClick);
+    document.addEventListener("touchend", el.eventOnClick);
+  },
+  unmounted(el: any) {
+    document.removeEventListener("touchstart", el.eventClearDrag);
+    document.removeEventListener("touchmove", el.eventSetDrag);
+    document.removeEventListener("click", el.eventOnClick);
+    document.removeEventListener("touchend", el.eventOnClick);
+    el.removeAttribute("data-dragging");
+  },
+};