Changed icons for better readability of order

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()
 

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

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 }>()

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'

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,

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())

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()

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>
 

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>

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

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()