From 35749fd8a30728a16df6883bb6fb44ce16286171 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 7 Apr 2024 21:35:21 +0200
Subject: [PATCH] Changed icons for better readability of order

---
 src/components/calendar/Calendar.vue               |  2 +-
 src/components/calendar/CalendarEvent.vue          |  1 +
 src/components/calendar/CalendarEventDetails.vue   |  3 ++-
 src/components/calendar/CalendarMenu.vue           |  1 +
 src/components/calendar/CalendarMenuNav.vue        |  3 ++-
 src/components/calendar/CalendarMenuToday.vue      |  1 +
 src/components/calendar/CalendarSwitch.vue         |  7 ++++---
 src/components/calendar/CalendarTile.vue           | 14 +++++++++-----
 src/components/calendar/search/CalendarSearch.vue  |  6 +++---
 .../calendar/search/lists/SearchList.vue           |  3 ++-
 src/components/calendar/state/Monthly.vue          |  1 +
 11 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index deded6b..1636137 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
 import CalendarMenu from './CalendarMenu.vue'
 import Century from './state/Century.vue'
 import Decade from './state/Decade.vue'
 import Monthly from './state/Monthly.vue'
 import Year from './state/Year.vue'
-import { computed } from 'vue'
 
 const { currentConfig } = useCalendar()
 
diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 4df8e22..20c104b 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
+
 import CalendarEventDetails from './CalendarEventDetails.vue'
 
 defineProps<{
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 4bb8521..9c66bb8 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { PopoverContent } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
+import { PopoverContent } from '@/components/ui/popover'
+
 const { getFormattedDateTitle } = useCalendar()
 
 defineProps<{ event: CalendarEvent }>()
diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index cf186b1..62b02cd 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -4,6 +4,7 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { PhMapPin } from '@phosphor-icons/vue'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 060d9c4..a3667eb 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/CalendarStore'
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   PhCaretDoubleLeft,
   PhCaretDoubleRight,
diff --git a/src/components/calendar/CalendarMenuToday.vue b/src/components/calendar/CalendarMenuToday.vue
index 345c31c..ce716ec 100644
--- a/src/components/calendar/CalendarMenuToday.vue
+++ b/src/components/calendar/CalendarMenuToday.vue
@@ -3,6 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useCalendar } from '@/stores/CalendarStore'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+
 import Button from '../ui/button/Button.vue'
 
 const { defaultDate, isCurrentScreenActive } = storeToRefs(useCalendar())
diff --git a/src/components/calendar/CalendarSwitch.vue b/src/components/calendar/CalendarSwitch.vue
index 99f0f02..a663bf0 100644
--- a/src/components/calendar/CalendarSwitch.vue
+++ b/src/components/calendar/CalendarSwitch.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useCalendar } from '@/stores/CalendarStore'
+import { PhCalendarBlank } from '@phosphor-icons/vue'
+import { computed } from 'vue'
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,9 +11,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { useCalendar } from '@/stores/CalendarStore'
-import { PhCalendarBlank } from '@phosphor-icons/vue'
-import { computed } from 'vue'
 import Button from '../ui/button/Button.vue'
 
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index e3be10d..785b76b 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -38,9 +38,15 @@ const isSelectedDate = computed(() => {
       'text-slate-300': !props.faded
     }"
   >
-    <div class="text-center">
+    <!-- Used for "display all events" -->
+    <button class="absolute inset-0 w-full h-full cursor-default z-0" />
+
+    <button
+      class="relative z-10 group block w-full text-center cursor-pointer"
+      @click="selectDate(date)"
+    >
       <span
-        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold transition-colors"
+        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-slate-800"
         :class="{
           'bg-slate-800': isDefaultDate && !isSelectedDate,
           'text-white bg-blue-500': isSelectedDate
@@ -48,7 +54,7 @@ const isSelectedDate = computed(() => {
       >
         {{ date.day }}
       </span>
-    </div>
+    </button>
 
     <ul
       v-if="eventsForTheDay.length > 0"
@@ -61,8 +67,6 @@ const isSelectedDate = computed(() => {
         <CalendarEvent :event />
       </li>
     </ul>
-
-    <button class="absolute inset-0 w-full h-full cursor-default z-0" @click="selectDate(date)" />
   </div>
 </template>
 
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index caffa45..dbbb8c7 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -15,7 +15,7 @@ import type { LeimDateOrder } from '@/models/Date'
 import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
 import { useCharacters } from '@/stores/CharacterStore'
 import { useCalendarEvents } from '@/stores/EventStore'
-import { PhCaretDoubleDown, PhCaretDoubleUp, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core'
 import { VisuallyHidden } from 'radix-vue'
 import { computed, ref } from 'vue'
@@ -173,7 +173,7 @@ whenever(keys.control_period, () => {
                   size="icon"
                   @click="setOrderDesc()"
                 >
-                  <PhCaretDoubleUp size="18" />
+                  <PhClockCounterClockwise size="18" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
@@ -190,7 +190,7 @@ whenever(keys.control_period, () => {
                   size="icon"
                   @click="setOrderAsc()"
                 >
-                  <PhCaretDoubleDown size="18" />
+                  <PhClockClockwise size="18" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index 30767da..e63e3d3 100644
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/src/components/calendar/search/lists/SearchList.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Button } from '@/components/ui/button'
 import { isCharacter, type Character } from '@/models/Characters'
 import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
 import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
@@ -7,6 +6,8 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { computed } from 'vue'
 import type { SearchMode } from '../../Search'
 
+import { Button } from '@/components/ui/button'
+
 const props = defineProps<{
   results: (Character | CalendarEvent)[]
   currentEntity: SearchMode
diff --git a/src/components/calendar/state/Monthly.vue b/src/components/calendar/state/Monthly.vue
index dcd3d03..6d1bcae 100644
--- a/src/components/calendar/state/Monthly.vue
+++ b/src/components/calendar/state/Monthly.vue
@@ -3,6 +3,7 @@ import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
+
 import CalendarTile from '../CalendarTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()