From 39aaf2c72ca4ed854a797b89a47f3a36ab007182 Mon Sep 17 00:00:00 2001
From: Petr Vecera <vecera.petr@gmail.com>
Date: Fri, 23 Aug 2024 14:30:55 +0200
Subject: [PATCH] Minimal final touches

---
 .../components/activity/activity-calendar-day.tsx | 11 ++++++-----
 ...months.tsx => activity-last-months-widget.tsx} | 15 +++++++++------
 .../components/standings/summary/summary.tsx      |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)
 rename screens/players/components/standings/summary/{activity-last-months.tsx => activity-last-months-widget.tsx} (86%)

diff --git a/screens/players/components/activity/activity-calendar-day.tsx b/screens/players/components/activity/activity-calendar-day.tsx
index 45345951..b2022c9a 100644
--- a/screens/players/components/activity/activity-calendar-day.tsx
+++ b/screens/players/components/activity/activity-calendar-day.tsx
@@ -1,6 +1,6 @@
 import { ProcessedCOHPlayerStats } from "../../../../src/coh3/coh3-types";
 import { ResponsiveCalendarCanvas } from "@nivo/calendar";
-import { useMantineColorScheme, Text, Group } from "@mantine/core";
+import { useMantineColorScheme, Text, Group, useMantineTheme } from "@mantine/core";
 import { getNivoTooltipTheme } from "../../../../components/charts/charts-components-utils";
 import dayjs from "dayjs";
 
@@ -11,8 +11,9 @@ const ActivityCalendarDay = ({
   playerStatsData: ProcessedCOHPlayerStats;
   fromYear: string;
 }) => {
-  // This works only in client side rendering
+  // This works only in client side rendering - which we have for all the charts
   const { colorScheme } = useMantineColorScheme();
+  const theme = useMantineTheme();
 
   // This is most likely a bug in Nivo, the labels on Calendar Canvas our outside / other charts have it inside
   const chartColorTheme = {
@@ -34,7 +35,7 @@ const ActivityCalendarDay = ({
       from={fromYear}
       to={dayjs(new Date()).format("YYYY-MM-DD")}
       // This is dark 5 || ideally we take this from the THEME
-      emptyColor={colorScheme === "light" ? "#eeeeee" : "#3b3b3b"}
+      emptyColor={colorScheme === "light" ? "#eeeeee" : theme.colors.dark[5]}
       colors={[
         "#f15854",
         "#f4665f",
@@ -64,7 +65,7 @@ const ActivityCalendarDay = ({
       // monthBorderColor="#ffffff"
       monthBorderWidth={1}
       dayBorderWidth={2}
-      dayBorderColor={colorScheme === "light" ? "#ffffff" : "#242424"}
+      dayBorderColor={colorScheme === "light" ? "#ffffff" : theme.colors.dark[7]} // dark "#242424"
       // legends={[
       //   {
       //     anchor: "bottom-right",
@@ -90,7 +91,7 @@ const ActivityCalendarDay = ({
         data: { wins: number; losses: number };
       }) => {
         if (value === undefined) return null;
-        const toolTipBackground = colorScheme === "light" ? "#eeeeee" : "#25262B";
+        const toolTipBackground = colorScheme === "light" ? "#eeeeee" : theme.colors.dark[4];
         return (
           <div
             style={{
diff --git a/screens/players/components/standings/summary/activity-last-months.tsx b/screens/players/components/standings/summary/activity-last-months-widget.tsx
similarity index 86%
rename from screens/players/components/standings/summary/activity-last-months.tsx
rename to screens/players/components/standings/summary/activity-last-months-widget.tsx
index e23fab81..854aa8ba 100644
--- a/screens/players/components/standings/summary/activity-last-months.tsx
+++ b/screens/players/components/standings/summary/activity-last-months-widget.tsx
@@ -1,15 +1,18 @@
 import { ResponsiveTimeRange } from "@nivo/calendar";
 import dayjs from "dayjs";
 import { ProcessedCOHPlayerStats } from "../../../../../src/coh3/coh3-types";
-import { Group, Text, useMantineColorScheme } from "@mantine/core";
+import { Group, Text, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { getNivoTooltipTheme } from "../../../../../components/charts/charts-components-utils";
 
-const ActivityLastMonths = ({
+const ActivityLastMonthsWidget = ({
   playerStatsData,
 }: {
   playerStatsData: ProcessedCOHPlayerStats | undefined;
 }) => {
   const { colorScheme } = useMantineColorScheme();
+  const theme = useMantineTheme();
+
+  console.log(theme.colors);
 
   // This is most likely a bug in Nivo, the labels on Calendar Canvas our outside / other charts have it inside
   const chartColorTheme = {
@@ -30,7 +33,7 @@ const ActivityLastMonths = ({
       data={playerStatsData?.activityByDate || []}
       from={dayjs(new Date()).subtract(4, "month").format("YYYY-MM-DD")}
       to={dayjs(new Date()).format("YYYY-MM-DD")}
-      emptyColor={colorScheme === "light" ? "#eeeeee" : "#25262B"}
+      emptyColor={colorScheme === "light" ? "#eeeeee" : theme.colors.dark[5]}
       colors={[
         "#f15854",
         "#f4665f",
@@ -58,7 +61,7 @@ const ActivityLastMonths = ({
       weekdayTicks={[]}
       margin={{ top: 25, right: 0, bottom: 15, left: -35 }}
       dayBorderWidth={2}
-      dayBorderColor={colorScheme === "light" ? "#ffffff" : "#1A1B1E"}
+      dayBorderColor={colorScheme === "light" ? "#ffffff" : theme.colors.dark[7]} // dark "#242424"
       legends={[
         {
           anchor: "bottom-right",
@@ -86,7 +89,7 @@ const ActivityLastMonths = ({
         losses: number;
       }) => {
         if (value === undefined) return null;
-        const toolTipBackground = colorScheme === "light" ? "#eeeeee" : "#25262B";
+        const toolTipBackground = colorScheme === "light" ? "#eeeeee" : theme.colors.dark[4];
         return (
           <div
             style={{
@@ -115,4 +118,4 @@ const ActivityLastMonths = ({
   );
 };
 
-export default ActivityLastMonths;
+export default ActivityLastMonthsWidget;
diff --git a/screens/players/components/standings/summary/summary.tsx b/screens/players/components/standings/summary/summary.tsx
index cc09bf35..792d032a 100644
--- a/screens/players/components/standings/summary/summary.tsx
+++ b/screens/players/components/standings/summary/summary.tsx
@@ -15,7 +15,7 @@ const DynamicGameTypesPieChart = dynamic(() => import("./game-types-pie-chart"),
   ssr: false,
 });
 
-const ActivityLastMonths = dynamic(() => import("./activity-last-months"), {
+const ActivityLastMonths = dynamic(() => import("./activity-last-months-widget"), {
   ssr: false,
 });