✨ Add about modal

src/components/layout/Logo.tsx

@@ -1,6 +1,6 @@
 import { Group, Image, Text } from '@mantine/core';
 import { useConfigContext } from '../../config/provider';
-import { useColorTheme } from '../../tools/color';
+import { usePrimaryGradient } from './useGradient';
 
 interface LogoProps {
   size?: 'md' | 'xs';
@@ -9,7 +9,7 @@ interface LogoProps {
 
 export function Logo({ size = 'md', withoutText = false }: LogoProps) {
   const { config } = useConfigContext();
-  const { primaryColor, secondaryColor } = useColorTheme();
+  const primaryGradient = usePrimaryGradient();
 
   return (
     <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
@@ -25,11 +25,7 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
           size={size === 'md' ? 22 : 'xs'}
           weight="bold"
           variant="gradient"
-          gradient={{
-            from: primaryColor,
-            to: secondaryColor,
-            deg: 145,
-          }}
+          gradient={primaryGradient}
         >
           {config?.settings.customization.pageTitle || 'Homarr'}
         </Text>

src/components/layout/header/SettingsMenu.tsx

@@ -1,11 +1,13 @@
 import { ActionIcon, Menu, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
 
 export const SettingsMenu = () => {
   const [drawerOpened, drawer] = useDisclosure(false);
+  const [aboutModalOpened, aboutModal] = useDisclosure(false);
 
   return (
     <>
@@ -22,13 +24,17 @@ export const SettingsMenu = () => {
             <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
               Homarr Settings
             </Menu.Item>
-            <Menu.Item icon={<IconInfoCircle strokeWidth={1.2} size={18} />} onClick={() => {}}>
+            <Menu.Item
+              icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
+              onClick={aboutModal.open}
+            >
               About
             </Menu.Item>
           </Menu.Dropdown>
         </Menu>
       </Tooltip>
       <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
+      <AboutModal opened={aboutModalOpened} closeModal={aboutModal.close} />
     </>
   );
 };

src/components/layout/useGradient.tsx

@@ -0,0 +1,12 @@
+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,
+  };
+};