- modified calendar

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -13,8 +13,8 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
+      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
+      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
     ]"
   >
     <Popper

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -91,13 +91,13 @@
         </transition>
       </Menu>
     </div>
-    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
       <div
         v-if="calendarState.viewMode.isMonth"
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
         <div class="py-2 bg-white">
-          Pn
+          Pon
         </div>
         <div class="py-2 bg-white">
           Wt
@@ -106,19 +106,19 @@
           Śr
         </div>
         <div class="py-2 bg-white">
-          Cz
+          Czw
         </div>
         <div class="py-2 bg-white">
           Pt
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Sb
+          Sob
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Nd
+          Ndz
         </div>
       </div>
-      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
         <div
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
@@ -127,7 +127,7 @@
             v-for="(day, index) in days"
             :key="index"
             :day="day"
-            class="flex flex-col relative py-2 px-3"
+            class="flex flex-col relative py-3 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
           />
         </div>
@@ -378,7 +378,7 @@ function getVacationInfo(day) {
 
 <style lang="css">
 .day:nth-of-type(7n - 6):before {
-  content: "Pn";
+  content: "Pon";
 }
 
 .day:nth-of-type(7n - 5):before {
@@ -390,7 +390,7 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 3):before {
-  content: "Cz";
+  content: "Czw";
 }
 
 .day:nth-of-type(7n - 2):before {
@@ -398,10 +398,10 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 1):before {
-  content: "Sb";
+  content: "Sob";
 }
 
 .day:nth-of-type(7n):before {
-  content: "Nd";
+  content: "Ndz";
 }
 </style>