Merge pull request #91 from AnalogMemory/fix/dates-not-visually-disabled

[style] Disabled dates in next or previous months are not visually disabled

Author: onesine

src/components/Calendar/Days.tsx

@@ -204,13 +204,18 @@ const Days: React.FC<Props> = ({
     );
 
     const buttonClass = useCallback(
-        (day: number, type: "current" | "previous" | "next") => {
+        (day: number, type: "current" | "next" | "previous") => {
             const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
-            return cn(
-                baseClass,
-                !activeDateData(day).active ? hoverClassByDay(day) : activeDateData(day).className,
-                isDateDisabled(day, type) && "line-through"
-            );
+            if (type === "current") {
+                return cn(
+                    baseClass,
+                    !activeDateData(day).active
+                        ? hoverClassByDay(day)
+                        : activeDateData(day).className,
+                    isDateDisabled(day, type) && "line-through"
+                );
+            }
+            return cn(baseClass, isDateDisabled(day, type) && "line-through", "text-gray-400");
         },
         [activeDateData, hoverClassByDay, isDateDisabled]
     );
@@ -345,7 +350,7 @@ const Days: React.FC<Props> = ({
                     type="button"
                     key={index}
                     disabled={isDateDisabled(item, "previous")}
-                    className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
+                    className={`${buttonClass(item, "previous")}`}
                     onClick={() => handleClickDay(item, "previous")}
                     onMouseOver={() => {
                         hoverDay(item, "previous");
@@ -375,7 +380,7 @@ const Days: React.FC<Props> = ({
                     type="button"
                     key={index}
                     disabled={isDateDisabled(item, "next")}
-                    className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
+                    className={`${buttonClass(item, "next")}`}
                     onClick={() => handleClickDay(item, "next")}
                     onMouseOver={() => {
                         hoverDay(item, "next");