Merge branch 'gridstack' of https://github.com/manuel-rw/homarr into gridstack

src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -77,7 +77,7 @@ export const IconSelector = ({ onChange }: IconSelectorProps) => {
           <ScrollArea style={{ height: 250 }} type="always">
             <Flex gap={4} wrap="wrap" pr={15}>
               {slicedFilteredItems.map((item) => (
-                <ActionIcon onClick={() => onChange(item)} size={40} p={3}>
+                <ActionIcon key={item.url} onClick={() => onChange(item)} size={40} p={3}>
                   <img className={classes.icon} src={item.url} alt="" />
                 </ActionIcon>
               ))}

src/components/Dashboard/Tiles/Calendar/CalendarTile.tsx

@@ -1,4 +1,4 @@
-import { Card, createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core';
+import { createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -6,6 +6,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useColorTheme } from '../../../../tools/color';
 import { isToday } from '../../../../tools/isToday';
 import { CalendarIntegrationType } from '../../../../types/integration';
+import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
 import { CalendarDay } from './CalendarDay';
 import { MediasType } from './type';
@@ -36,7 +37,7 @@ export const CalendarTile = ({ className, module }: CalendarTileProps) => {
   if (!module) return <></>;
 
   return (
-    <Card className={className} withBorder p="xs">
+    <HomarrCardWrapper className={className} p={6}>
       <Calendar
         month={month}
         onMonthChange={setMonth}
@@ -63,8 +64,8 @@ export const CalendarTile = ({ className, module }: CalendarTileProps) => {
         renderDay={(date) => (
           <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} />
         )}
-      ></Calendar>
-    </Card>
+      />
+    </HomarrCardWrapper>
   );
 };
 

src/components/Dashboard/Tiles/HomarrCardWrapper.tsx

@@ -11,5 +11,5 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
     cx,
     classes: { card: cardClass },
   } = useCardStyles();
-  return <Card {...props} className={cx(props.className, cardClass)} />;
+  return <Card {...props} className={cx(props.className, cardClass)} withBorder radius="lg" shadow="md" />;
 };

src/components/Dashboard/Tiles/Service/ServiceTile.tsx

@@ -4,6 +4,7 @@ import { createStyles } from '@mantine/styles';
 import { ServiceType } from '../../../../types/service';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
+import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
 import { ServiceMenu } from './ServiceMenu';
 import { ServicePing } from './ServicePing';
@@ -34,7 +35,7 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
   );
 
   return (
-    <Card className={cx(className, cardClass)} withBorder radius="lg" shadow="md">
+    <HomarrCardWrapper className={className}>
       {/* TODO: add service menu */}
 
       <div style={{ position: 'absolute', top: 10, right: 10 }}>
@@ -60,7 +61,7 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
         </UnstyledButton>
       )}
       <ServicePing service={service} />
-    </Card>
+    </HomarrCardWrapper>
   );
 };
 

src/styles/global.scss

@@ -2,7 +2,7 @@
 
 .grid-stack-placeholder > .placeholder-content {
   background-color: rgb(248, 249, 250) !important;
-  border-radius: 5px;
+  border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }