fix coloring of selected and hovered

components/wizard/calendar.tsx

@@ -29,11 +29,15 @@ export default function MyCalendar({ ...props }) {
   const prevBooked = inSelection && getNextSmaller(daysBooked, start)
   const nextBooked = inSelection && getNextBigger(daysBooked, start)
 
-  function isSelected(date: Date) {
+  function isDateSelected(date: Date) {
     if (!startDate) {
       return false
     }
 
+    if (isSameDay(date, startDate)) {
+      return true
+    }
+
     // if end is before start, it is not within
     if (endDate && !isAfter(endDate, startDate)) {
       return false
@@ -50,18 +54,22 @@ export default function MyCalendar({ ...props }) {
     const isDaysBookedLoaded = !!daysBooked
     const isInPast = isPast(endOfDay(date))
     const isBooked = daysBooked?.includes(dateFormatBackend(date))
+    const isSelected = isDateSelected(date)
     return classnames({
       'react-calendar__tile--past': isMonthView && isInPast,
       'react-calendar__tile--booked':
         isMonthView && isDaysBookedLoaded && isBooked && !isInPast,
       'react-calendar__tile--free':
-        isMonthView && isDaysBookedLoaded && !isBooked && !isInPast,
+        isMonthView &&
+        isDaysBookedLoaded &&
+        !isBooked &&
+        !isInPast &&
+        !isSelected,
       'react-calendar__tile--selected-start':
         isMonthView && isSameDay(date, startDate),
       'react-calendar__tile--selected-end':
         isMonthView && isSameDay(date, endDate),
-      'react-calendar__tile--selected':
-        isSelected(date) || isSameDay(date, startDate),
+      'react-calendar__tile--selected': isSelected,
       'react-calendar__tile--unselectable':
         inSelection &&
         ((prevBooked && date < new Date(prevBooked)) ||

styles/index.css

@@ -205,6 +205,10 @@
   @apply bg-blue-400;
 }
 
+.react-calendar__tile--selected:hover {
+  @apply bg-blue-600;
+}
+
 .react-calendar__tile--unselectable {
   @apply cursor-not-allowed;
 }