- polishing calendar

resources/js/Pages/Calendar.vue

@@ -106,22 +106,20 @@
               v-for="day in calendar"
               :key="day.dayOfMonth"
               class="border border-gray-300"
-              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
+              :class="{'bg-red-100': day.isWeekend || day.isHoliday }"
             >
               <div
                 v-if="day.vacations.includes(user.id)"
                 class="flex justify-center items-center"
               >
-                <svg
-                  class="w-6 h-6 text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 640 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M115.38 136.9l102.11 37.18c35.19-81.54 86.21-144.29 139-173.7-95.88-4.89-188.78 36.96-248.53 111.8-6.69 8.4-2.66 21.05 7.42 24.72zm132.25 48.16l238.48 86.83c35.76-121.38 18.7-231.66-42.63-253.98-7.4-2.7-15.13-4-23.09-4-58.02.01-128.27 69.17-172.76 171.15zM521.48 60.5c6.22 16.3 10.83 34.6 13.2 55.19 5.74 49.89-1.42 108.23-18.95 166.98l102.62 37.36c10.09 3.67 21.31-3.43 21.57-14.17 2.32-95.69-41.91-187.44-118.44-245.36zM560 447.98H321.06L386 269.5l-60.14-21.9-72.9 200.37H16c-8.84 0-16 7.16-16 16.01v32.01C0 504.83 7.16 512 16 512h544c8.84 0 16-7.17 16-16.01v-32.01c0-8.84-7.16-16-16-16z"
-                  />
-                </svg>
+                <Popper hover>
+                  <VacationTypeCalendarIcon :status="day.vacationTypes[user.id]" />
+                  <template #content>
+                    <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
+                      {{ day.vacationTypes[user.id] }}
+                    </div>
+                  </template>
+                </Popper>
               </div>
             </td>
           </tr>
@@ -136,16 +134,20 @@ import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
 import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {useMonthInfo} from '@/Composables/monthInfo'
+import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
+import Popper from 'vue3-popper'
 
 export default {
   name: 'VacationCalendar',
   components: {
+    VacationTypeCalendarIcon,
     Menu,
     MenuButton,
     MenuItem,
     MenuItems,
     CheckIcon,
     ChevronDownIcon,
+    Popper,
   },
   props: {
     users: {