From fa45139992569aeb2513b29f61fc12f1e6e5e7a7 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Thu, 15 Feb 2024 14:54:29 -0600
Subject: [PATCH] hide days differently now that its using grid

---
 src/form/Calendar/CalendarDays/CalendarDays.module.css |  6 +-----
 src/form/Calendar/CalendarDays/CalendarDays.tsx        | 10 ++++++----
 src/utils/Theme/themes/dark.ts                         |  1 +
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/form/Calendar/CalendarDays/CalendarDays.module.css b/src/form/Calendar/CalendarDays/CalendarDays.module.css
index cc3168c6c..6ca760137 100644
--- 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
index a20ed4a74..065927a89 100644
--- 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
index 235000c48..713e18da4 100644
--- 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)',