feat: remove cqmin system (#2407)

* feat: remove cqmin system

* fix: improve weather widget

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/widgets/src/calendar/calender-day.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Container, Popover, useMantineTheme } from "@mantine/core";
+import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
 
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 
 import { CalendarEventList } from "./calendar-event-list";
@@ -9,11 +10,19 @@ interface CalendarDayProps {
   date: Date;
   events: CalendarEvent[];
   disabled: boolean;
+  rootWidth: number;
+  rootHeight: number;
 }
 
-export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
-  const [opened, setOpend] = useState(false);
+export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
+  const [opened, setOpened] = useState(false);
   const { primaryColor } = useMantineTheme();
+  const board = useRequiredBoard();
+  const mantineTheme = useMantineTheme();
+  const actualItemRadius = mantineTheme.radius[board.itemRadius];
+
+  const minAxisSize = Math.min(rootWidth, rootHeight);
+  const shouldScaleDown = minAxisSize < 350;
 
   return (
     <Popover
@@ -25,7 +34,7 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
       transitionProps={{
         transition: "pop",
       }}
-      onChange={setOpend}
+      onChange={setOpened}
       opened={opened}
       disabled={disabled}
     >
@@ -35,30 +44,23 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
           w="100%"
           p={0}
           m={0}
-          bd={`1cqmin solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          bd={`3px solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          pos={"relative"}
           style={{
             alignContent: "center",
-            borderRadius: "3.5cqmin",
+            borderRadius: actualItemRadius,
             cursor: disabled ? "default" : "pointer",
           }}
           onClick={() => {
             if (disabled) return;
 
-            setOpend((prev) => !prev);
+            setOpened((prev) => !prev);
           }}
         >
-          <div
-            style={{
-              textAlign: "center",
-              whiteSpace: "nowrap",
-              fontSize: "5cqmin",
-              lineHeight: "5cqmin",
-              paddingTop: "1.25cqmin",
-            }}
-          >
+          <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
             {date.getDate()}
-          </div>
-          <NotificationIndicator events={events} />
+          </Text>
+          {rootHeight >= 350 && <NotificationIndicator events={events} />}
         </Container>
       </Popover.Target>
       <Popover.Dropdown>
@@ -75,19 +77,10 @@ interface NotificationIndicatorProps {
 const NotificationIndicator = ({ events }: NotificationIndicatorProps) => {
   const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
   return (
-    <Container h="0.7cqmin" w="80%" display="flex" p={0} style={{ flexDirection: "row", justifyContent: "center" }}>
+    <Flex h="xs" w="75%" pos={"absolute"} bottom={0} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
       {notificationEvents.map((notificationEvent) => {
-        return (
-          <Container
-            key={notificationEvent}
-            bg={notificationEvent}
-            h="100%"
-            mx="0.25cqmin"
-            p={0}
-            style={{ flex: 1, borderRadius: "1000px" }}
-          />
-        );
+        return <Box key={notificationEvent} bg={notificationEvent} h={4} p={0} style={{ flex: 1, borderRadius: 5 }} />;
       })}
-    </Container>
+    </Flex>
   );
 };

packages/widgets/src/calendar/component.tsx

@@ -2,11 +2,14 @@
 
 import { useState } from "react";
 import { useParams } from "next/navigation";
+import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
+import { useElementSize } from "@mantine/hooks";
 import dayjs from "dayjs";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
 
@@ -60,6 +63,10 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const params = useParams();
   const locale = params.locale as string;
   const { firstDayOfWeek } = useSettings();
+  const board = useRequiredBoard();
+  const mantineTheme = useMantineTheme();
+  const actualItemRadius = mantineTheme.radius[board.itemRadius];
+  const { ref, width, height } = useElementSize();
 
   return (
     <Calendar
@@ -72,43 +79,39 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
       date={month}
       maxLevel="month"
       firstDayOfWeek={firstDayOfWeek}
-      w="100%"
-      h="100%"
       static={isEditMode}
       className={classes.calendar}
+      w={"100%"}
+      h={"100%"}
+      ref={ref}
       styles={{
         calendarHeaderControl: {
           pointerEvents: isEditMode ? "none" : undefined,
-          height: "12cqmin",
-          width: "12cqmin",
-          borderRadius: "3.5cqmin",
+          borderRadius: "md",
         },
         calendarHeaderLevel: {
-          height: "12cqmin",
-          fontSize: "6cqmin",
           pointerEvents: "none",
         },
         levelsGroup: {
           height: "100%",
-          padding: "2.5cqmin",
+          padding: "md",
         },
         calendarHeader: {
           maxWidth: "unset",
           marginBottom: 0,
         },
-        day: {
-          width: "12cqmin",
-          height: "12cqmin",
-          borderRadius: "3.5cqmin",
-        },
         monthCell: {
           textAlign: "center",
         },
+        day: {
+          borderRadius: actualItemRadius,
+          width: width < 350 ? 20 : 50,
+          height: height < 350 ? 20 : 50,
+        },
         month: {
           height: "100%",
         },
         weekday: {
-          fontSize: "5.5cqmin",
           padding: 0,
         },
       }}
@@ -122,7 +125,13 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
           }))
           .filter((event): event is CalendarEvent => Boolean(event.date));
         return (
-          <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode || eventsForDate.length === 0} />
+          <CalendarDay
+            date={tileDate}
+            events={eventsForDate}
+            disabled={isEditMode || eventsForDate.length === 0}
+            rootWidth={width}
+            rootHeight={height}
+          />
         );
       }}
     />