🧑‍💻 Address PR comments

This commit is contained in:
ajnart
2023-03-21 11:26:19 +08:00
parent 1aeee38c0d
commit 3bb0f20066
3 changed files with 7 additions and 8 deletions

View File

@@ -20,7 +20,6 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth); const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
if (!mainAreaWidth) return null; if (!mainAreaWidth) return null;
// TODO: Calculate rem to pixels using Calc function
if (mainAreaWidth >= 1400) return 'large'; if (mainAreaWidth >= 1400) return 'large';
if (mainAreaWidth >= 800) return 'medium'; if (mainAreaWidth >= 800) return 'medium';

View File

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

View File

@@ -11,7 +11,6 @@ interface CalendarDayProps {
export const CalendarDay = ({ date, medias }: CalendarDayProps) => { export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
const [opened, { close, open }] = useDisclosure(false); const [opened, { close, open }] = useDisclosure(false);
const { colorScheme, colors } = useMantineTheme();
if (medias.totalCount === 0) { if (medias.totalCount === 0) {
return <div>{date.getDate()}</div>; return <div>{date.getDate()}</div>;
@@ -33,14 +32,14 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
<Popover.Target> <Popover.Target>
<Box <Box
onClick={open} onClick={open}
style={{ sx={(theme) => ({
margin: 5, margin: 5,
backgroundColor: isToday(date) backgroundColor: isToday(date)
? colorScheme === 'dark' ? theme.colorScheme === 'dark'
? colors.dark[5] ? theme.colors.dark[5]
: colors.gray[0] : theme.colors.gray[0]
: undefined, : undefined,
}} })}
> >
<DayIndicator color="red" position="bottom-start" medias={medias.books}> <DayIndicator color="red" position="bottom-start" medias={medias.books}>
<DayIndicator color="yellow" position="top-start" medias={medias.movies}> <DayIndicator color="yellow" position="top-start" medias={medias.movies}>