From 543113292bca5ed8730e3e4306ff4d880f5f4fe8 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 17 Apr 2023 14:48:04 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Calendar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/calendar/CalendarDay.tsx  |  4 +-
 src/widgets/calendar/CalendarTile.tsx | 77 ++++++++++++++-------------
 2 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx
index 86887e03a..7124e40e7 100644
--- a/src/widgets/calendar/CalendarDay.tsx
+++ b/src/widgets/calendar/CalendarDay.tsx
@@ -1,4 +1,4 @@
-import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { ActionIcon, Box, Button, Indicator, IndicatorProps, Popover } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { isToday } from '../../tools/shared/time/date.tool';
 import { MediaList } from './MediaList';
@@ -70,7 +70,7 @@ const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps)
   if (medias.length === 0) return children;
 
   return (
-    <Indicator size={10} withBorder offset={5} color={color} position={position}>
+    <Indicator size={10} withBorder offset={-5} color={color} position={position}>
       {children}
     </Indicator>
   );
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx
index 1d0008f04..e1cac7830 100644
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/src/widgets/calendar/CalendarTile.tsx
@@ -9,6 +9,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';
 import { MediasType } from './type';
+import { useColorTheme } from '../../tools/color';
 
 const definition = defineWidget({
   id: 'calendar',
@@ -50,6 +51,7 @@ interface CalendarTileProps {
 function CalendarTile({ widget }: CalendarTileProps) {
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
+  const { secondaryColor } = useColorTheme();
 
   const { data: medias } = useQuery({
     queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
@@ -65,42 +67,45 @@ function CalendarTile({ widget }: CalendarTileProps) {
   });
 
   return (
-    <Group grow style={{ height: '100%' }}>
-      <Calendar
-        defaultDate={new Date()}
-        onPreviousMonth={setMonth}
-        onNextMonth={setMonth}
-        size="xs"
-        locale={i18n?.resolvedLanguage ?? 'en'}
-        firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
-        hideWeekdays
-        date={month}
-        hasNextLevel={false}
-        styles={{
-          calendar: {
-            height: '100%',
-          },
-          monthLevelGroup: {
-            height: '100%',
-          },
-          monthLevel: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-          },
-          month: {
-            flex: 1,
-          },
-          calendarHeader: {
-            maxWidth: 'inherit',
-          },
-        }}
-        renderDay={(date) => (
-          <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
-        )}
-      />
-    </Group>
+    <Calendar
+      defaultDate={new Date()}
+      onPreviousMonth={setMonth}
+      onNextMonth={setMonth}
+      size="xs"
+      locale={i18n?.resolvedLanguage ?? 'en'}
+      firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
+      hideWeekdays
+      style={{ position: 'relative', top: -10 }}
+      date={month}
+      maxLevel="month"
+      hasNextLevel={false}
+      styles={{
+        calendarHeader: {
+          maxWidth: 'inherit',
+        },
+        calendar: {
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+        },
+        monthLevelGroup: {
+          height: '100%',
+        },
+        monthLevel: {
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+        },
+        month: {
+          flex: 1,
+        },
+      }}
+      renderDay={(date) => (
+        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
+      )}
+    />
   );
 }