Merge pull request #2883 from ever-co/feat/customize-month-legend-the…

…me-styling [Feat]: Customize month legend and theme styling
ever-co · Aug 11, 2024 · 8b466a9 · 8b466a9
2 parents c71472a + 6d6775b
commit 8b466a9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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);