fix colors (#6)

- Fix custom colors in heatmaps and consistent empty dot theming (372711a02f76d8d2262947cba80b4161c1fa59ff)
- fix color gradients (dbb3299038de20c360c1b2fc3043e5ef0ce4723d)
- Merge pr/5: Fix custom colors and intensity levels for both daily and weekly heatmaps (2165322700e1ea20105f20c63c31915c201824ee)

src/components/Heatmap.tsx

@@ -4,7 +4,7 @@ import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
 import { aggregateToWeeklyData } from "../utils/weeklyCalendar";
 import WeeklyHeatmap from "./WeeklyHeatmap";
-import { getHeatmapTheme } from "../utils/heatmapColors";
+import { getHeatmapTheme, getHeatmapColorIntensity } from "../utils/heatmapColors";
 
 type ViewMode = 'daily' | 'weekly';
 
@@ -56,6 +56,15 @@ const Heatmap: React.FC<HeatmapProps> = ({
   // Use theme-aware colors
   const emptyColor = isDarkMode ? "#374151" : "#d1d5db";
   
+  // Create intensity levels for daily view (same as weekly)
+  const intensityColors = [
+    emptyColor,  // level 0
+    getHeatmapColorIntensity(1, color), // level 1 (40% intensity)
+    getHeatmapColorIntensity(2, color), // level 2 (60% intensity)
+    getHeatmapColorIntensity(3, color), // level 3 (80% intensity)
+    getHeatmapColorIntensity(4, color)  // level 4 (100% intensity)
+  ].filter((color): color is string => color !== null); // Remove any null values and type guard
+  
   return (
     <div className="flex flex-col items-center w-full mx-auto">
       {showHeader && (
@@ -84,8 +93,8 @@ const Heatmap: React.FC<HeatmapProps> = ({
           <ActivityCalendar
             data={processedData}
             theme={{
-              light: [emptyColor, color],
-              dark: [emptyColor, color]
+              light: intensityColors,
+              dark: intensityColors
             }}
             blockSize={11}
             blockMargin={2}

src/components/HeatmapGrid.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import { ProviderInfo, CalendarData } from "../types/heatmap";
 import OrganizationCard from "./OrganizationCard";
 import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";
@@ -15,11 +15,6 @@ interface HeatmapGridProps {
 const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
   const [viewMode, setViewMode] = useState<ViewMode>('weekly');
 
-  // Memoize the toggle handler to prevent unnecessary re-renders
-  const handleViewModeToggle = useCallback((newMode: ViewMode) => {
-    setViewMode(newMode);
-  }, []);
-
   if (isLoading) {
     return (
       <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
@@ -36,7 +31,7 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
       <div className="flex justify-center">
         <ViewToggle
           viewMode={viewMode}
-          onToggle={handleViewModeToggle}
+          onToggle={setViewMode}
         />
       </div>
 
@@ -54,4 +49,4 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
   );
 };
 
-export default React.memo(HeatmapGrid);
+export default HeatmapGrid;