chore: update calendar styles

web/src/components/ActivityCalendar.tsx

@@ -9,20 +9,20 @@ interface Props {
   onClick?: (date: string) => void;
 }
 
-const getBgColor = (count: number, maxCount: number) => {
+const getCellAdditionalStyles = (count: number, maxCount: number) => {
   if (count === 0) {
-    return "bg-gray-100 dark:bg-gray-700";
+    return "bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500";
   }
 
   const ratio = count / maxCount;
   if (ratio > 0.7) {
-    return "bg-blue-600";
+    return "bg-blue-600 text-gray-200";
   } else if (ratio > 0.5) {
-    return "bg-blue-400";
+    return "bg-blue-400 text-gray-200 dark:opacity-80";
   } else if (ratio > 0.3) {
-    return "bg-blue-300";
+    return "bg-blue-300 text-gray-200 dark:opacity-80";
   } else {
-    return "bg-blue-200";
+    return "bg-blue-200 text-gray-200 dark:opacity-80";
   }
 };
 
@@ -47,7 +47,7 @@ const ActivityCalendar = (props: Props) => {
   }
 
   return (
-    <div className={classNames("w-28 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
+    <div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
       {days.map((day, index) => {
         const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`);
         const count = data[date] || 0;
@@ -57,19 +57,21 @@ const ActivityCalendar = (props: Props) => {
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
               className={classNames(
-                "w-3 h-3 rounded flex justify-center items-center border border-transparent",
-                getBgColor(count, maxCount),
-                isToday && "border-gray-600 dark:!border-gray-400"
+                "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
+                getCellAdditionalStyles(count, maxCount),
+                isToday && "border-gray-600 dark:!border-gray-500"
               )}
               onClick={() => count && onClick && onClick(date)}
-            ></div>
+            >
+              {day}
+            </div>
           </Tooltip>
         ) : (
           <div
             key={`${date}-${index}`}
             className={classNames(
-              "shrink-0 opacity-30 w-3 h-3 rounded flex justify-center items-center border border-transparent",
-              getBgColor(count, maxCount)
+              "shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
+              getCellAdditionalStyles(count, maxCount)
             )}
           ></div>
         );

web/src/pages/Timeline.tsx

@@ -145,7 +145,7 @@ const Timeline = () => {
             {groupedByMonth.map((group, index) => (
               <Fragment key={group.month}>
                 <div className={classNames("flex justify-start items-start w-full mt-2 last:mb-4", md ? "flex-row" : "flex-col")}>
-                  <div className={classNames("flex shrink-0", md ? "flex-col w-32 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
+                  <div className={classNames("flex shrink-0", md ? "flex-col w-40 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
                     <div className={classNames("w-full flex flex-col", md && "mt-4 mb-2")}>
                       <span className="font-medium text-3xl leading-none mb-1">
                         {new Date(group.month).toLocaleString(i18n.language, { month: "short" })}