fix: calendar coloring issue (#4352)

* fix: calendar coloring issue

* fix: calendar coloring issue

* fix: calendar coloring issue

* fix: calendar coloring issue

* fix: calendar coloring issue

* chore: adjust calendar color for dark theme

web/src/components/ActivityCalendar.tsx

@@ -17,15 +17,15 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
   if (count === 0) {
     return "";
   }
-  if (count >= 3) {
-    const ratio = count / maxCount;
-    if (ratio > 0.7) {
-      return "bg-primary-darker/80 text-gray-100 dark:opacity-80";
-    } else if (ratio > 0.4) {
-      return "bg-primary/80 text-gray-100 dark:opacity-80";
-    }
+  const ratio = count / maxCount;
+  if (ratio > 0.75) {
+    return "bg-primary-darker/90 text-gray-100 dark:bg-primary-lighter/80";
+  } else if (ratio > 0.5) {
+    return "bg-primary-darker/70 text-gray-100 dark:bg-primary-lighter/60";
+  } else if (ratio > 0.25) {
+    return "bg-primary/70 text-gray-100 dark:bg-primary-lighter/40";
   } else {
-    return "bg-primary/70 text-gray-100 dark:opacity-70";
+    return "bg-primary/50 text-gray-100 dark:bg-primary-lighter/20";
   }
 };
 

web/tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
           DEFAULT: "#0d9488", // Teal 600
           dark: "#0f766e", // Teal 700
           darker: "#0d5a56", // Teal 800
+          lighter: "#14b8a6", // Teal 500
         },
         success: {
           DEFAULT: "#16a34a", // Green 600