hide days differently now that its using grid

reaviz · Feb 15, 2024 · fa45139 · fa45139
1 parent 0b31dec
commit fa45139
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.module.css b/src/form/Calendar/CalendarDays/CalendarDays.module.css
@@ -47,10 +47,6 @@
     &.roundEndDateTop {
       border-top-right-radius: var(--calendar-day-radius);
     }
-
-    &.hideDay {
-      visibility: hidden !important;
-    }
   }
 }
 
@@ -60,7 +56,7 @@
   gap: var(--spacing-sm);
   width: 100%;
   padding: var(--spacing-md) 0;
-  border-top: 1px solid var(--slate-500);
+  border-top: 1px solid var(--calendar-divider);
 
   .dayOfWeek {
     text-align: center;

diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx
@@ -125,9 +125,12 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
   const renderDay = useCallback(
     (day, ii) => {
       // Determine if the day should be shown or not
-      const hideDay =
+      if (
         (day.isPreviousMonth && hidePrevMonthDays) ||
-        (day.isNextMonth && hideNextMonthDays);
+        (day.isNextMonth && hideNextMonthDays)
+      ) {
+        return <div />;
+      }
 
       // Determine if the day is disabled
       const isDisabled =
@@ -214,8 +217,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
               hasNoRange,
             [css.endRangeDate]: isRange && isEndRangeDate,
             [css.roundEndDateTop]:
-              (isRange && isEndRangeDate && rangeConnectsTop) || hasNoRange,
-            [css.hideDay]: hideDay
+              (isRange && isEndRangeDate && rangeConnectsTop) || hasNoRange
           })}
           onMouseEnter={() => handleHover(day.date)}
           onMouseLeave={() => handleHover(null)}

diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
@@ -426,6 +426,7 @@ export const darkTheme: Theme = {
     calendar: {
       'calendar-spacing': '8px',
       'calendar-gap': '0px',
+      'calendar-divider': darkColors.slate['500'],
       'calendar-day-radius': 'var(--button-border-radius)',
       'calendar-day-color': 'var(--button-color)',
       'calendar-day-background-selected': 'var(--primary-background)',