From 8d645ca404c3852b7bea194cc6357d7745019068 Mon Sep 17 00:00:00 2001 From: Darkham42 Date: Sat, 11 Jun 2022 23:22:58 +0200 Subject: [PATCH 1/2] fix: calendar current day for light theme --- src/components/modules/calendar/CalendarModule.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index edde221ea..6939657be 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/src/components/modules/calendar/CalendarModule.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-children-prop */ -import { Box, Divider, Indicator, Popover, ScrollArea, createStyles } from '@mantine/core'; +import { Box, Divider, Indicator, Popover, ScrollArea, createStyles, useMantineColorScheme } from '@mantine/core'; import React, { useEffect, useState } from 'react'; import { Calendar } from '@mantine/dates'; import { IconCalendar as CalendarIcon } from '@tabler/icons'; @@ -25,6 +25,7 @@ export const CalendarModule: IModule = { export default function CalendarComponent(props: any) { const { config } = useConfig(); + const { colorScheme } = useMantineColorScheme(); const { secondaryColor } = useColorTheme(); const useStyles = createStyles(() => ({ weekend: { @@ -99,8 +100,8 @@ export default function CalendarComponent(props: any) { onChange={(day: any) => {}} dayStyle={(date) => date.getDay() === today.getDay() && date.getDate() === today.getDate() - ? { backgroundColor: '#2C2E33' } - : null + ? { backgroundColor: colorScheme === 'dark' ? '#2C2E33' : '#f8f9fa' } + : {} } dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend }) From 0acb1f6b6d300f26f58d1428b55d7e7f458041b1 Mon Sep 17 00:00:00 2001 From: Darkham42 Date: Sat, 11 Jun 2022 23:44:14 +0200 Subject: [PATCH 2/2] refactor: use theme --- src/components/modules/calendar/CalendarModule.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index 6939657be..f483c2f77 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/src/components/modules/calendar/CalendarModule.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-children-prop */ -import { Box, Divider, Indicator, Popover, ScrollArea, createStyles, useMantineColorScheme } from '@mantine/core'; +import { Box, Divider, Indicator, Popover, ScrollArea, createStyles, useMantineTheme } from '@mantine/core'; import React, { useEffect, useState } from 'react'; import { Calendar } from '@mantine/dates'; import { IconCalendar as CalendarIcon } from '@tabler/icons'; @@ -25,13 +25,14 @@ export const CalendarModule: IModule = { export default function CalendarComponent(props: any) { const { config } = useConfig(); - const { colorScheme } = useMantineColorScheme(); + const theme = useMantineTheme(); const { secondaryColor } = useColorTheme(); - const useStyles = createStyles(() => ({ + const useStyles = createStyles((theme) => ({ weekend: { color: `${secondaryColor} !important`, }, })); + const [sonarrMedias, setSonarrMedias] = useState([] as any); const [lidarrMedias, setLidarrMedias] = useState([] as any); const [radarrMedias, setRadarrMedias] = useState([] as any); @@ -100,7 +101,7 @@ export default function CalendarComponent(props: any) { onChange={(day: any) => {}} dayStyle={(date) => date.getDay() === today.getDay() && date.getDate() === today.getDate() - ? { backgroundColor: colorScheme === 'dark' ? '#2C2E33' : '#f8f9fa' } + ? { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0] } : {} } dayClassName={(date, modifiers) =>