From 6d6775bd6b2d5fbcac79fb0904f967e9071cb84a Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Sun, 11 Aug 2024 08:48:02 +0200
Subject: [PATCH] feat: customize month legend and theme styling

---
 .../integrations/activity-calendar/index.tsx      | 15 ++++++++++++++-
 apps/web/styles/globals.css                       |  5 +++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/web/lib/features/integrations/activity-calendar/index.tsx b/apps/web/lib/features/integrations/activity-calendar/index.tsx
index 10f6e9289..2676e4a21 100644
--- a/apps/web/lib/features/integrations/activity-calendar/index.tsx
+++ b/apps/web/lib/features/integrations/activity-calendar/index.tsx
@@ -76,7 +76,20 @@ export function ActivityCalendar() {
                                 }
                             ]}
                             monthSpacing={20}
-                            monthLegend={(_, __, d) => d.toLocaleString('en-US', { month: 'short' })}
+                            monthLegend={(year, month) => {
+                                return new Date(year, month).toLocaleString('en-US', { month: 'short' });
+                            }}
+                            theme={{
+                                labels: {
+                                    text: {
+                                        fill: '#9ca3af',
+                                        fontSize: 16,
+                                        font: 'icon',
+                                        animation: 'ease',
+                                        border: '12',
+                                    }
+                                }
+                            }}
                         />
                     </div>
                 </div>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index f9c16d99b..c99a79d68 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -297,6 +297,11 @@ html.dark {
 	@apply ring-0 outline-gray-200 dark:outline-none dark:border-2 dark:border-[#464242];
 }
 
+.nivo-calendar .nivo-calendar-month-legend text {
+	@apply text-black font-bold text-sm;
+
+}
+
 @keyframes zoom-in-out {
 	0% {
 		transform: scale(1);