From f4df411d47b580225321a815014f87b4e091aa0d Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Mon, 24 Apr 2023 21:39:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20calendar=20sizing=20(#852)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/calendar/CalendarDay.tsx  |  9 +++------
 src/widgets/calendar/CalendarTile.tsx |  7 ++++++-
 src/widgets/calendar/bg-calculator.ts | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/widgets/calendar/bg-calculator.ts

diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx
index 51616521f..722a371e6 100644
--- a/src/widgets/calendar/CalendarDay.tsx
+++ b/src/widgets/calendar/CalendarDay.tsx
@@ -1,7 +1,7 @@
 import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { isToday } from '../../tools/shared/time/date.tool';
 import { MediaList } from './MediaList';
+import { getBgColorByDateAndTheme } from './bg-calculator';
 import { MediasType } from './type';
 
 interface CalendarDayProps {
@@ -34,12 +34,9 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
           onClick={open}
           sx={(theme) => ({
             margin: 5,
-            backgroundColor: isToday(date)
-              ? theme.colorScheme === 'dark'
-                ? theme.colors.dark[5]
-                : theme.colors.gray[0]
-              : undefined,
+            backgroundColor: getBgColorByDateAndTheme(theme.colorScheme, date),
           })}
+          w="100%"
         >
           <DayIndicator color="red" position="bottom-start" medias={medias.books}>
             <DayIndicator color="yellow" position="top-start" medias={medias.movies}>
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx
index 93d207378..af4f3ae2d 100644
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/src/widgets/calendar/CalendarTile.tsx
@@ -1,4 +1,4 @@
-import { Group } from '@mantine/core';
+import { useMantineTheme } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
 import { IconCalendarTime } from '@tabler/icons';
 import { useQuery } from '@tanstack/react-query';
@@ -8,6 +8,7 @@ import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';
+import { getBgColorByDateAndTheme } from './bg-calculator';
 import { MediasType } from './type';
 
 const definition = defineWidget({
@@ -48,6 +49,7 @@ interface CalendarTileProps {
 }
 
 function CalendarTile({ widget }: CalendarTileProps) {
+  const { colorScheme } = useMantineTheme();
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
 
@@ -100,6 +102,9 @@ function CalendarTile({ widget }: CalendarTileProps) {
           flex: 1,
         },
       }}
+      getDayProps={(date) => ({
+        bg: getBgColorByDateAndTheme(colorScheme, date),
+      })}
       renderDay={(date) => (
         <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
       )}
diff --git a/src/widgets/calendar/bg-calculator.ts b/src/widgets/calendar/bg-calculator.ts
new file mode 100644
index 000000000..36b776a29
--- /dev/null
+++ b/src/widgets/calendar/bg-calculator.ts
@@ -0,0 +1,16 @@
+import { ColorScheme, useMantineTheme } from '@mantine/core';
+import { isToday } from '../../tools/shared/time/date.tool';
+
+export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {
+  if (!isToday(date)) {
+    return undefined;
+  }
+
+  const { colors } = useMantineTheme();
+
+  if (colorScheme === 'dark') {
+    return colors.dark[5];
+  }
+
+  return colors.gray[2];
+};