From 0416c5b69e3d3a9c8f14b3680857070ee437a273 Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:17:25 -0600
Subject: [PATCH] style(streak): Disable clicking on specific date.

---
 src/pages/Streak.jsx      |  2 ++
 src/styles/StreakPage.css | 49 +++++++++++++++++++++------------------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/pages/Streak.jsx b/src/pages/Streak.jsx
index c09dc04..6e52415 100644
--- a/src/pages/Streak.jsx
+++ b/src/pages/Streak.jsx
@@ -66,9 +66,11 @@ const Streak = () => {
 
       <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
         <Calendar
+          tileDisabled={() => true}
           tileContent={({ date, view }) =>
             view === 'month' ? getTileIcon(date) : null
           }
+          className='custom-calendar'
         />
       </Box>
     </Box>
diff --git a/src/styles/StreakPage.css b/src/styles/StreakPage.css
index 7f6a438..0ac2175 100644
--- a/src/styles/StreakPage.css
+++ b/src/styles/StreakPage.css
@@ -1,31 +1,36 @@
-/* Ensure all calendar dates have the color black */
+/* Ensure all calendar dates have a consistent black color, including weekends */
 .react-calendar__month-view__days__day--weekend {
-    color: black !important; /* Override weekend color */
-  }
+  color: black !important; /* Override the weekend default color */
+}
 
-/* Custom weekday headers */
+/* Style weekday headers with bold, capitalized, and black text */
 .react-calendar__month-view__weekdays__weekday {
-    text-transform: capitalize;
-    font-weight: bold;
-    color: black;
-    font-size: 0.8rem;
+  text-transform: capitalize;
+  font-weight: bold;
+  color: black;
+  font-size: 0.8rem;
 }
 
-/* Larger navigation arrows */
+/* Enlarge navigation arrows for better visibility */
 .react-calendar__navigation button {
-    font-size: 1rem;
-    color: black;
+  font-size: 1rem;
+  color: black;
 }
 
-/* Animation for FireIcon */
-@keyframes burn-animation {
-
-    0%,
-    100% {
-        transform: scale(1);
-    }
+/* Remove the default background color */
+button.react-calendar__tile.react-calendar__month-view__days__day {
+  color: inherit;
+  background-color: #fff;
+  pointer-events: none;
+}
 
-    50% {
-        transform: scale(1.2);
-    }
-}
\ No newline at end of file
+/* Animation for FireIcon, creating a pulsing "burn" effect */
+@keyframes burn-animation {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}