WIP on Mantine v6

src/hooks/useScreenLargerThan.ts

@@ -4,5 +4,5 @@ import { useMediaQuery } from '@mantine/hooks';
 export const useScreenLargerThan = (size: MantineSize | number) => {
   const { breakpoints } = useMantineTheme();
   const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
-  return useMediaQuery(`(min-width: ${pixelCount}px)`);
+  return useMediaQuery('(min-width: 500px)');
 };

src/pages/404.tsx

@@ -55,7 +55,7 @@ const useStyles = createStyles((theme) => ({
   description: {
     maxWidth: 540,
     margin: 'auto',
-    marginTop: parseInt(theme.spacing.xl, 10),
+    marginTop: theme.spacing.xl,
     marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
   },
 }));

src/widgets/calendar/CalendarDay.tsx

@@ -1,5 +1,6 @@
-import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { Box, Indicator, IndicatorProps, Popover, useMantineTheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { isToday } from '../../tools/isToday';
 import { MediaList } from './MediaList';
 import { MediasType } from './type';
 
@@ -10,6 +11,7 @@ interface CalendarDayProps {
 
 export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
   const [opened, { close, open }] = useDisclosure(false);
+  const { colorScheme, colors } = useMantineTheme();
 
   if (medias.totalCount === 0) {
     return <div>{date.getDate()}</div>;
@@ -29,7 +31,17 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       opened={opened}
     >
       <Popover.Target>
-        <Box onClick={open}>
+        <Box
+          onClick={open}
+          style={{
+            margin: 5,
+            backgroundColor: isToday(date)
+              ? colorScheme === 'dark'
+                ? colors.dark[5]
+                : colors.gray[0]
+              : undefined,
+          }}
+        >
           <DayIndicator color="red" position="bottom-start" medias={medias.books}>
             <DayIndicator color="yellow" position="top-start" medias={medias.movies}>
               <DayIndicator color="blue" position="top-end" medias={medias.tvShows}>

src/widgets/calendar/CalendarTile.tsx

@@ -72,36 +72,14 @@ function CalendarTile({ widget }: CalendarTileProps) {
   return (
     <Group grow style={{ height: '100%' }}>
       <Calendar
-        m={0}
-        p={0}
         defaultDate={new Date()}
-        // Should be offset 5px to the left
-        style={{ position: 'relative', top: -15 }}
         onPreviousMonth={setMonth}
         onNextMonth={setMonth}
         size="xs"
         locale={i18n?.resolvedLanguage ?? 'en'}
         firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
         hideWeekdays
-        styles={{
+        date={month}
-          day: {
-            margin: -1,
-            backgroundColor: isToday(new Date())
-              ? colorScheme === 'dark'
-                ? colors.dark[5]
-                : colors.gray[0]
-              : undefined,
-          },
-          weekday: {
-            margin: 0,
-            padding: 0,
-          },
-          calendarHeader: {
-            position: 'relative',
-            margin: 0,
-            padding: 0,
-          },
-        }}
         hasNextLevel={false}
         renderDay={(date) => (
           <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />