From 3bb0f2006687a6cc28aa18917f22d60901c13a4c Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 21 Mar 2023 11:26:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Address=20P?=
 =?UTF-8?q?R=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dashboard/Wrappers/gridstack/store.tsx |  1 -
 src/hooks/useScreenLargerThan.ts                      |  3 ++-
 src/widgets/calendar/CalendarDay.tsx                  | 11 +++++------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx
index 483d8abb7..3cf104d56 100644
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx
@@ -20,7 +20,6 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
   const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
   if (!mainAreaWidth) return null;
 
-  // TODO: Calculate rem to pixels using Calc function
   if (mainAreaWidth >= 1400) return 'large';
 
   if (mainAreaWidth >= 800) return 'medium';
diff --git a/src/hooks/useScreenLargerThan.ts b/src/hooks/useScreenLargerThan.ts
index 1b64ef336..2b1b3abd3 100644
--- a/src/hooks/useScreenLargerThan.ts
+++ b/src/hooks/useScreenLargerThan.ts
@@ -1,8 +1,9 @@
 import { MantineSize, useMantineTheme } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
+import { MIN_WIDTH_MOBILE } from '../constants/constants';
 
 export const useScreenLargerThan = (size: MantineSize | number) => {
   const { breakpoints } = useMantineTheme();
   const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
-  return useMediaQuery('(min-width: 500px)');
+  return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`);
 };
diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx
index f41789a67..ffee6c9cf 100644
--- a/src/widgets/calendar/CalendarDay.tsx
+++ b/src/widgets/calendar/CalendarDay.tsx
@@ -11,7 +11,6 @@ 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>;
@@ -33,14 +32,14 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       <Popover.Target>
         <Box
           onClick={open}
-          style={{
+          sx={(theme) => ({
             margin: 5,
             backgroundColor: isToday(date)
-              ? colorScheme === 'dark'
-                ? colors.dark[5]
-                : colors.gray[0]
+              ? 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}>