🐛 Fix calendar sizing (#852)

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)
+            backgroundColor: getBgColorByDateAndTheme(theme.colorScheme, date),
-              ? theme.colorScheme === 'dark'
-                ? theme.colors.dark[5]
-                : theme.colors.gray[0]
-              : undefined,
           })}
+          w="100%"
         >
           <DayIndicator color="red" position="bottom-start" medias={medias.books}>
             <DayIndicator color="yellow" position="top-start" medias={medias.movies}>

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)} />
       )}

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];
+};