From b1ff2ec232e2d2eccd76a2018c4a9482eda083e3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 25 Apr 2025 17:53:40 +0200
Subject: [PATCH] Changed today CTA on mobile

---
 components/calendar/SearchCTA.vue             |  2 +-
 .../calendar/dialog/QuickCreateEvent.vue      |  4 ++--
 components/calendar/menu/MenuToday.vue        | 23 +++++++++++++++----
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/calendar/SearchCTA.vue b/components/calendar/SearchCTA.vue
index 0738ed9..905a297 100644
--- a/components/calendar/SearchCTA.vue
+++ b/components/calendar/SearchCTA.vue
@@ -19,7 +19,7 @@ const breakpoints = useBreakpoints(
       >
         <PhMagnifyingGlass size="20" weight="light" />
 
-        <span class="max-lg:hidden">
+        <span v-if="breakpoints.lg.value">
           {{ $t('entity.advancedSearch.title') }}
         </span>
       </UiButton>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 98668b7..5ad48a6 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -27,12 +27,12 @@ const breakpoints = useBreakpoints(
     <Transition name="fade" appear>
       <UiButton
         class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
-        :size="breakpoints.lg.value ? 'default' : 'icon'"
+        :size="breakpoints.md.value ? 'default' : 'icon'"
         @click="toggleDialog"
       >
         <PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
 
-        <strong class="font-semibold max-lg:hidden">
+        <strong v-if="breakpoints.md.value" class="font-semibold">
           {{ $t("entity.calendar.event.newEvent") }}
         </strong>
       </UiButton>
diff --git a/components/calendar/menu/MenuToday.vue b/components/calendar/menu/MenuToday.vue
index 5860fc4..7355077 100644
--- a/components/calendar/menu/MenuToday.vue
+++ b/components/calendar/menu/MenuToday.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed } from "vue"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { PhCalendar } from "@phosphor-icons/vue"
 
 const { defaultDate, jumpToDefaultDate, getFormattedDateTitle, currentDate } = useCalendar()
 
@@ -8,15 +9,29 @@ const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
 const buttonDisabledState: ComputedRef<boolean> = computed<boolean>(() => {
   return currentDate.currentMonth === defaultDate.month && currentDate.currentYear === defaultDate.year
 })
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
 </script>
 
 <template>
   <UiTooltipProvider :delay-duration="250">
     <UiTooltip>
       <UiTooltipTrigger as-child>
-        <UiButton size="sm" variant="secondary" :disabled="buttonDisabledState" @click="jumpToDefaultDate">
-          {{ $t('entity.calendar.date.today') }}
-        </UiButton>
+        <ClientOnly>
+          <UiButton
+            :size="breakpoints.md.value ? 'default' : 'icon'"
+            variant="secondary"
+            :disabled="buttonDisabledState" @click="jumpToDefaultDate"
+          >
+            <PhCalendar v-if="!breakpoints.md.value" size="20" weight="fill" />
+
+            <span v-if="breakpoints.md.value">
+              {{ $t('entity.calendar.date.today') }}
+            </span>
+          </UiButton>
+        </ClientOnly>
       </UiTooltipTrigger>
       <UiTooltipContent>
         <p>{{ defaultDateFormatted }}</p>