From 0334a4845fdc877ca784daf485153c8d8b3bfe5d Mon Sep 17 00:00:00 2001
From: johnnyjoy <yourselfhosted@gmail.com>
Date: Tue, 21 Jan 2025 22:55:57 +0800
Subject: [PATCH] chore: tweak calendar styles

---
 web/src/components/ActivityCalendar.tsx | 16 +++++++++-------
 web/src/components/MemoFilters.tsx      |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
index 9443dd3c9..e89b43823 100644
--- a/web/src/components/ActivityCalendar.tsx
+++ b/web/src/components/ActivityCalendar.tsx
@@ -18,13 +18,15 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
   if (count === 0) {
     return "";
   }
-  const ratio = count / maxCount;
-  if (ratio > 0.7) {
-    return "bg-primary-darker text-gray-100 dark:opacity-80";
-  } else if (ratio > 0.4) {
-    return "bg-primary-dark text-gray-100 dark:opacity-80";
+  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";
+    }
   } else {
-    return "bg-primary text-gray-100 dark:opacity-70";
+    return "bg-primary/70 text-gray-100 dark:opacity-70";
   }
 };
 
@@ -88,7 +90,7 @@ const ActivityCalendar = (props: Props) => {
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
               className={cn(
-                "w-6 h-6 text-xs rounded-xl flex justify-center items-center border cursor-default",
+                "w-6 h-6 text-xs rounded-lg flex justify-center items-center border cursor-default",
                 "text-gray-400",
                 item.isCurrentMonth ? getCellAdditionalStyles(count, maxCount) : "opacity-60",
                 item.isCurrentMonth && isToday && "border-zinc-400",
diff --git a/web/src/components/MemoFilters.tsx b/web/src/components/MemoFilters.tsx
index 0bd2fe8bb..b401bc5f9 100644
--- a/web/src/components/MemoFilters.tsx
+++ b/web/src/components/MemoFilters.tsx
@@ -1,5 +1,5 @@
 import { isEqual } from "lodash-es";
-import { CalendarIcon, CheckCircleIcon, CodeIcon, EyeIcon, FilterIcon, LinkIcon, SearchIcon, TagIcon, XIcon } from "lucide-react";
+import { CalendarIcon, CheckCircleIcon, CodeIcon, EyeIcon, FilterIcon, HashIcon, LinkIcon, SearchIcon, XIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 import { FilterFactor, getMemoFilterKey, MemoFilter, parseFilterQuery, stringifyFilters, useMemoFilterStore } from "@/store/v1";
@@ -100,7 +100,7 @@ const MemoFilters = () => {
 
 const FactorIcon = ({ factor, className }: { factor: FilterFactor; className?: string }) => {
   const iconMap = {
-    tagSearch: <TagIcon className={className} />,
+    tagSearch: <HashIcon className={className} />,
     visibility: <EyeIcon className={className} />,
     contentSearch: <SearchIcon className={className} />,
     displayTime: <CalendarIcon className={className} />,