From b03f37be0eef76e15448af278a7b135db9ae9abd Mon Sep 17 00:00:00 2001
From: Hussain Omer <m.hussainomer03@gmail.com>
Date: Fri, 13 Dec 2024 21:48:55 -0500
Subject: [PATCH] calendar styling, & more labels

---
 .../src/components/Modal Management/View.js   | 17 ++++--
 .../Streak Management/StreakTracker.js        |  2 +-
 client/src/utils/CalendarView.js              | 56 ++++++++++++++++++-
 3 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Modal Management/View.js b/client/src/components/Modal Management/View.js
index e58db33..1ffb719 100644
--- a/client/src/components/Modal Management/View.js	
+++ b/client/src/components/Modal Management/View.js	
@@ -110,7 +110,7 @@ const Task = ({ task, removeTask, completeTask, isCompleted, updateTask }) => {
         ) : (
           <span className="flex-1 min-w-0 text-center text-gray-700 dark:text-gray-200 mx-2 flex items-center justify-center gap-2 flex-wrap">
             <span className="truncate max-w-[200px] sm:max-w-none">{task.name}</span>
-            <div className="inline-flex items-center gap-1.5 flex-shrink-0">
+            <div className="inline-flex items-center justify-center w-full xs:w-auto gap-1.5 flex-wrap xs:flex-nowrap gap-y-2 xs:gap-y-0">
               {task.subtasks && (
                 <span className="inline-flex text-xs px-1.5 py-0.5 bg-blue-50 dark:bg-blue-500/10 
                              text-blue-600 dark:text-blue-400 rounded-full border 
@@ -126,12 +126,21 @@ const Task = ({ task, removeTask, completeTask, isCompleted, updateTask }) => {
                 </span>
               )}
               {!isCompleted && task.deadline && isOverdue(task.deadline) && (
-                <span className="inline-flex text-xs px-1.5 py-0.5 bg-red-50 dark:bg-red-500/10 
-                             text-red-600 dark:text-red-400 rounded-full border 
-                             border-red-200 dark:border-red-800 whitespace-nowrap">
+                <span className="inline-flex text-[10px] xs:text-xs px-1 xs:px-1.5 py-0.5 
+                               bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 
+                               rounded-full border border-red-200 dark:border-red-800 
+                               whitespace-nowrap shrink-0">
                   OVERDUE ({calculateOverduePenalty(task.deadline)} XP)
                 </span>
               )}
+              {isCompleted && task.earlyBonus > 0 && (
+                <span className="inline-flex text-[10px] xs:text-xs px-1 xs:px-1.5 py-0.5 
+                               bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 
+                               rounded-full border border-green-200 dark:border-green-800 
+                               whitespace-nowrap shrink-0">
+                  BONUS (+{task.earlyBonus} XP)
+                </span>
+              )}
             </div>
           </span>
         )}
diff --git a/client/src/components/Streak Management/StreakTracker.js b/client/src/components/Streak Management/StreakTracker.js
index 83de401..c52a611 100644
--- a/client/src/components/Streak Management/StreakTracker.js	
+++ b/client/src/components/Streak Management/StreakTracker.js	
@@ -124,7 +124,7 @@ const StreakTracker = ({ completedTasks, today = new Date(), onStreakChange = ()
         </div>
         <div className="text-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg transition-color duration-200">
           <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Longest Streak</p>
-          <p className="text-2xl font-bold text-green-600 dark:text-green-400">{longestStreak}</p>
+          <p className="text-2xl font-bold" style={{ color: '#77dd77' }}>{longestStreak}</p>
         </div>
       </div>
       
diff --git a/client/src/utils/CalendarView.js b/client/src/utils/CalendarView.js
index a52a1b6..269fd7c 100644
--- a/client/src/utils/CalendarView.js
+++ b/client/src/utils/CalendarView.js
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
 
 const CalendarView = ({ tasks }) => {
   const [currentDate, setCurrentDate] = useState(new Date());
+  const [selectedDay, setSelectedDay] = useState(null);
+  const [selectedDayTasks, setSelectedDayTasks] = useState([]);
   const tasksWithDeadlines = tasks.filter(task => task.deadline);
 
   const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
@@ -32,6 +34,14 @@ const CalendarView = ({ tasks }) => {
     return tasksWithDeadlines.filter(task => task.deadline === dateStr);
   };
 
+  const handleDayClick = (day) => {
+    if (!day) return;
+    const dateStr = new Date(currentDate.getFullYear(), currentDate.getMonth(), day).toISOString().split('T')[0];
+    const tasksForDay = tasksWithDeadlines.filter(task => task.deadline === dateStr);
+    setSelectedDay(day);
+    setSelectedDayTasks(tasksForDay);
+  };
+
   return (
     <div className="w-full max-w-5xl">
       <div className="flex items-center justify-between mb-4 sm:mb-6">
@@ -68,10 +78,13 @@ const CalendarView = ({ tasks }) => {
             return (
               <div 
                 key={`${i}-${j}`} 
+                onClick={() => day && handleDayClick(day)}
                 className={`
                   min-h-[60px] sm:min-h-[80px] p-1 sm:p-2 border dark:border-gray-700 rounded-lg
-                  ${!day ? 'invisible' : ''}
+                  ${!day ? 'invisible' : 'cursor-pointer'}
                   ${isToday ? 'bg-blue-50 dark:bg-blue-900/20' : ''}
+                  ${day ? 'hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-sm transition-all duration-200' : ''}
+                  ${dayTasks.length > 0 ? 'hover:scale-[1.02]' : ''}
                 `}
               >
                 {day && (
@@ -97,6 +110,45 @@ const CalendarView = ({ tasks }) => {
           })
         ))}
       </div>
+
+      {/* Day Detail Modal */}
+      {selectedDay && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg w-full max-w-md">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                {new Date(currentDate.getFullYear(), currentDate.getMonth(), selectedDay)
+                  .toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+              </h3>
+              <button
+                onClick={() => setSelectedDay(null)}
+                className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              >
+                <X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+              </button>
+            </div>
+            <div className="p-4">
+              {selectedDayTasks.length > 0 ? (
+                <div className="space-y-3">
+                  {selectedDayTasks.map(task => (
+                    <div 
+                      key={task.id}
+                      className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
+                    >
+                      <h4 className="font-medium text-gray-900 dark:text-gray-100">{task.name}</h4>
+                      {task.desc && (
+                        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{task.desc}</p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-center text-gray-500 dark:text-gray-400">No tasks due on this day</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };