♻️ Improved code structure for layout, remove most settings components

src/components/layout/Common/Logo.tsx

@@ -0,0 +1,38 @@
+import { Group, Image, Text } from '@mantine/core';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+
+import { useConfigContext } from '../../../config/provider';
+import { usePrimaryGradient } from './useGradient';
+
+interface LogoProps {
+  size?: 'md' | 'xs';
+  withoutText?: boolean;
+}
+
+export function Logo({ size = 'md', withoutText = false }: LogoProps) {
+  const { config } = useConfigContext();
+  const primaryGradient = usePrimaryGradient();
+  const largerThanMd = useScreenLargerThan('md');
+
+  return (
+    <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
+      <Image
+        width={size === 'md' ? 50 : 12}
+        src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'}
+        alt="Homarr Logo"
+        className="dashboard-header-logo-image"
+      />
+      {withoutText || !largerThanMd ? null : (
+        <Text
+          size={size === 'md' ? 22 : 10}
+          weight="bold"
+          variant="gradient"
+          className="dashboard-header-logo-text"
+          gradient={primaryGradient}
+        >
+          {config?.settings.customization.pageTitle || 'Homarr'}
+        </Text>
+      )}
+    </Group>
+  );
+}

src/components/layout/Common/useCardStyles.ts

@@ -0,0 +1,36 @@
+import { createStyles } from '@mantine/core';
+
+import { useConfigContext } from '../../../config/provider';
+
+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: `rgba(255, 255, 255, ${opacity}) !important`,
+        borderColor: `rgba(233, 236, 239, ${opacity})`,
+      },
+    };
+  })();
+};

src/components/layout/Common/useGradient.tsx

@@ -0,0 +1,13 @@
+import { MantineGradient } from '@mantine/core';
+
+import { useColorTheme } from '../../../tools/color';
+
+export const usePrimaryGradient = (): MantineGradient => {
+  const { primaryColor, secondaryColor } = useColorTheme();
+
+  return {
+    from: primaryColor,
+    to: secondaryColor,
+    deg: 145,
+  };
+};