🔀 Merge branch 'dev' into tests/add-tests

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';
 
@@ -22,12 +23,24 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       withinPortal
       radius="lg"
       shadow="sm"
-      transition="pop"
+      transitionProps={{
+        transition: 'pop',
+      }}
       onClose={close}
       opened={opened}
     >
       <Popover.Target>
-        <Box onClick={open}>
+        <Box
+          onClick={open}
+          sx={(theme) => ({
+            margin: 5,
+            backgroundColor: isToday(date)
+              ? theme.colorScheme === 'dark'
+                ? theme.colors.dark[5]
+                : theme.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,39 +72,15 @@ function CalendarTile({ widget }: CalendarTileProps) {
   return (
     <Group grow style={{ height: '100%' }}>
       <Calendar
-        m={0}
-        p={0}
-        month={month}
-        // Should be offset 5px to the left
-        style={{ position: 'relative', top: -15 }}
-        onMonthChange={setMonth}
+        defaultDate={new Date()}
+        onPreviousMonth={setMonth}
+        onNextMonth={setMonth}
         size="xs"
         locale={i18n?.resolvedLanguage ?? 'en'}
-        fullWidth
-        onChange={() => {}}
-        firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
-        dayStyle={(date) => ({
-          margin: -1,
-          backgroundColor: isToday(date)
-            ? colorScheme === 'dark'
-              ? colors.dark[5]
-              : colors.gray[0]
-            : undefined,
-        })}
+        firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
         hideWeekdays
-        styles={{
-          weekdayCell: {
-            margin: 0,
-            padding: 0,
-          },
-          calendarHeader: {
-            position: 'relative',
-            margin: 0,
-            padding: 0,
-          },
-        }}
-        allowLevelChange={false}
-        dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
+        date={month}
+        hasNextLevel={false}
         renderDay={(date) => (
           <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
         )}