🐛 Fix colors of card wrapper when category

src/components/Dashboard/Tiles/HomarrCardWrapper.tsx

@@ -5,18 +5,20 @@ import { useEditModeStore } from '../Views/useEditModeStore';
 
 interface HomarrCardWrapperProps extends CardProps {
   children: ReactNode;
+  isCategory?: boolean;
 }
 
 export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
+  const { isCategory = false, ...restProps } = props;
   const {
     cx,
     classes: { card: cardClass },
-  } = useCardStyles();
+  } = useCardStyles(isCategory);
   const isEditMode = useEditModeStore((x) => x.enabled);
   return (
     <Card
-      {...props}
+      {...restProps}
-      className={cx(props.className, cardClass)}
+      className={cx(restProps.className, cardClass)}
       withBorder
       style={{ cursor: isEditMode ? 'move' : 'default' }}
       radius="lg"

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -1,4 +1,4 @@
-import { Group, Title } from '@mantine/core';
+import { createStyles, Group, Title } from '@mantine/core';
 import { CategoryType } from '../../../../types/category';
 import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
@@ -15,7 +15,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
   const isEditMode = useEditModeStore((x) => x.enabled);
 
   return (
-    <HomarrCardWrapper pt={10} mx={10}>
+    <HomarrCardWrapper pt={10} mx={10} isCategory>
       <Group position="apart" align="center">
         <Title order={3}>{category.name}</Title>
         {isEditMode ? <CategoryEditMenu category={category} /> : null}

src/components/layout/useCardStyles.ts

@@ -1,21 +1,34 @@
 import { createStyles } from '@mantine/core';
 import { useConfigContext } from '../../config/provider';
 
-export const useCardStyles = () => {
+export const useCardStyles = (isCategory: boolean) => {
   const { config } = useConfigContext();
   const appOpacity = config?.settings.customization.appOpacity;
   return createStyles(({ colorScheme }, _params) => {
     const opacity = (appOpacity || 100) / 100;
+
+    if (colorScheme === 'dark') {
+      if (isCategory) {
+        return {
+          card: {
+            backgroundColor: `rgba(32, 33, 35, ${opacity}) !important`,
+            borderColor: `rgba(37, 38, 43, ${opacity})`,
+          },
+        };
+      }
+
+      return {
+        card: {
+          backgroundColor: `rgba(37, 38, 43, ${opacity}) !important`,
+          borderColor: `rgba(37, 38, 43, ${opacity})`,
+        },
+      };
+    }
+
     return {
       card: {
-        backgroundColor:
+        backgroundColor: `rgba(255, 255, 255, ${opacity}) !important`,
-          colorScheme === 'dark'
+        borderColor: `rgba(233, 236, 239, ${opacity})`,
-            ? `rgba(37, 38, 43, ${opacity}) !important`
-            : `rgba(255, 255, 255, ${opacity}) !important`,
-        borderColor:
-          colorScheme === 'dark'
-            ? `rgba(37, 38, 43, ${opacity})`
-            : `rgba(233, 236, 239, ${opacity})`,
       },
     };
   })();