Minimal final touches

cohstats · Aug 23, 2024 · 39aaf2c · 39aaf2c
1 parent 0f08113
commit 39aaf2c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git 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/...tandings/summary/activity-last-months.tsx → ...s/summary/activity-last-months-widget.tsx b/...tandings/summary/activity-last-months.tsx → ...s/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
@@ -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,
 });