✨ Add about modal

src/components/About/AboutModal.tsx

@@ -0,0 +1,165 @@
+import Image from 'next/image';
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  createStyles,
+  Group,
+  Modal,
+  Table,
+  Text,
+  Title,
+} from '@mantine/core';
+import {
+  IconBrandDiscord,
+  IconBrandGithub,
+  IconLanguage,
+  IconVersions,
+  IconVocabulary,
+  IconWorldWww,
+} from '@tabler/icons';
+import { i18n } from 'next-i18next';
+import { ReactNode } from 'react';
+import { CURRENT_VERSION } from '../../../data/constants';
+import { usePrimaryGradient } from '../layout/useGradient';
+
+interface AboutModalProps {
+  opened: boolean;
+  closeModal: () => void;
+}
+
+export const AboutModal = ({ opened, closeModal }: AboutModalProps) => {
+  const { classes } = useStyles();
+  const colorGradiant = usePrimaryGradient();
+  const informations = useInformationTableItems();
+
+  return (
+    <Modal
+      onClose={() => closeModal()}
+      opened={opened}
+      title={
+        <Group spacing="sm">
+          <Image src="/favicon-squared.png" width={30} height={30} />
+          <Title order={3} variant="gradient" gradient={colorGradiant}>
+            About Homarr
+          </Title>
+        </Group>
+      }
+      size="xl"
+    >
+      <Text mb="lg">
+        Homarr is a simple and modern homepage for your server that helps you access all of your
+        services in one place. It integrates with the services you use to display useful information
+        or control them. It&apos;s easy to install and supports many different devices.
+      </Text>
+
+      <Title order={6} mb="xs" align="center">
+        Version information:
+      </Title>
+
+      <Table mb="lg" striped highlightOnHover withBorder>
+        <tbody>
+          {informations.map((item, index) => (
+            <tr key={index}>
+              <td>
+                <Group spacing="xs">
+                  <ActionIcon className={classes.informationIcon} variant="default">
+                    {item.icon}
+                  </ActionIcon>
+                  {item.label}
+                </Group>
+              </td>
+              <td className={classes.informationTableColumn}>{item.content}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+
+      <Title order={6} mb="xs" align="center">
+        Having trouble or questions? Connect with us!
+      </Title>
+
+      <Group grow>
+        <Button
+          component="a"
+          href="https://github.com/ajnart/homarr"
+          target="_blank"
+          leftIcon={<IconBrandGithub size={20} />}
+          variant="default"
+        >
+          GitHub
+        </Button>
+        <Button
+          component="a"
+          href="https://homarr.dev/"
+          target="_blank"
+          leftIcon={<IconWorldWww size={20} />}
+          variant="default"
+        >
+          Website
+        </Button>
+        <Button
+          component="a"
+          href="https://discord.gg/aCsmEV5RgA"
+          target="_blank"
+          leftIcon={<IconBrandDiscord size={20} />}
+          variant="default"
+        >
+          Discord
+        </Button>
+      </Group>
+    </Modal>
+  );
+};
+
+interface InformationTableItem {
+  icon: ReactNode;
+  label: string;
+  content: ReactNode;
+}
+
+const useInformationTableItems = (): InformationTableItem[] => {
+  const colorGradiant = usePrimaryGradient();
+
+  const usedI18nNamespaces = i18n?.reportNamespaces?.getUsedNamespaces();
+  const configuredi18nLocales: string[] = i18n?.options.locales;
+
+  return [
+    {
+      icon: <IconVersions size={20} />,
+      label: 'Homarr version',
+      content: (
+        <Badge variant="gradient" gradient={colorGradiant}>
+          {CURRENT_VERSION}
+        </Badge>
+      ),
+    },
+    {
+      icon: <IconLanguage size={20} />,
+      label: 'Loaded I18n translation namespaces',
+      content: (
+        <Badge variant="gradient" gradient={colorGradiant}>
+          {usedI18nNamespaces?.length ?? 'loading'}
+        </Badge>
+      ),
+    },
+    {
+      icon: <IconVocabulary size={20} />,
+      label: 'Configured I18n locales',
+      content: (
+        <Badge variant="gradient" gradient={colorGradiant}>
+          {configuredi18nLocales?.length ?? 'loading'}
+        </Badge>
+      ),
+    },
+  ];
+};
+
+const useStyles = createStyles(() => ({
+  informationTableColumn: {
+    textAlign: 'right',
+  },
+  informationIcon: {
+    cursor: 'default',
+  },
+}));

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,28 +0,0 @@
-import { Box, useMantineColorScheme } from '@mantine/core';
-import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
-import { motion } from 'framer-motion';
-
-export function ColorSchemeToggle() {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
-  return (
-    <motion.div
-      whileHover={{ scale: 1.2, rotate: 90 }}
-      whileTap={{
-        scale: 0.8,
-        rotate: -90,
-        borderRadius: '100%',
-      }}
-    >
-      <Box
-        onClick={() => toggleColorScheme()}
-        sx={(theme) => ({
-          cursor: 'pointer',
-          color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
-        })}
-      >
-        {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
-      </Box>
-    </motion.div>
-  );
-}

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,
+  };
+};