Styling settings and translations

src/components/About/AboutModal.tsx

@@ -31,6 +31,7 @@ import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfigContext } from '../../config/provider';
 import { useConfigStore } from '../../config/store';
 import { usePrimaryGradient } from '../layout/useGradient';
+import Credits from '../Settings/Common/Credits';
 
 interface AboutModalProps {
   opened: boolean;
@@ -113,6 +114,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           Discord
         </Button>
       </Group>
+      <Credits />
     </Modal>
   );
 };

src/components/Settings/Common/CommonSettings.tsx

@@ -1,4 +1,4 @@
-import { Space, Stack, Text } from '@mantine/core';
+import { ScrollArea, Space, Stack, Text } from '@mantine/core';
 import { useConfigContext } from '../../../config/provider';
 import ConfigChanger from '../../Config/ConfigChanger';
 import ConfigActions from './Config/ConfigActions';
@@ -17,12 +17,14 @@ export default function CommonSettings() {
   }
 
   return (
-    <Stack mb="md" mr="sm">
+    <Stack mb="md" mt="xs">
-      <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
+      <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
-      <Space />
+        <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
-      <LanguageSelect />
+        <Space />
-      <ConfigChanger />
+        <LanguageSelect />
-      <ConfigActions />
+        <ConfigChanger />
+        <ConfigActions />
+      </ScrollArea>
     </Stack>
   );
 }

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -35,7 +35,7 @@ export default function ConfigActions() {
         closeModal={createCopyModal.close}
         initialConfigName={config.configProperties.name}
       />
-      <Flex gap="xs" justify="stretch">
+      <Flex gap="xs" mt="xs" justify="stretch">
         <ActionIcon className={classes.actionIcon} onClick={handleDownload} variant="default">
           <IconDownload size={20} />
           <Text size="sm">{t('buttons.download')}</Text>

src/components/Settings/Common/Credits.tsx

@@ -9,40 +9,22 @@ export default function Credits() {
 
   return (
     <Group position="center" mt="xs">
-      <Group spacing={0}>
+      <Text
-        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+        style={{
-          <IconBrandGithub size={18} />
+          fontSize: '0.90rem',
-        </ActionIcon>
+          textAlign: 'center',
-        <Text
+          color: 'gray',
-          style={{
+        }}
-            position: 'relative',
+      >
-            fontSize: '0.90rem',
+        {t('credits.madeWithLove')}
-            color: 'gray',
+        <Anchor
-          }}
+          href="https://github.com/ajnart"
+          style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
         >
-          {CURRENT_VERSION}
+          ajnart
-        </Text>
+        </Anchor>
-      </Group>
+        {' '}and you !
-      <Group spacing={1}>
+      </Text>
-        <Text
-          style={{
-            fontSize: '0.90rem',
-            textAlign: 'center',
-            color: 'gray',
-          }}
-        >
-          {t('credits.madeWithLove')}
-          <Anchor
-            href="https://github.com/ajnart"
-            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-          >
-            ajnart
-          </Anchor>
-        </Text>
-        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
-          <IconBrandDiscord size={18} />
-        </ActionIcon>
-      </Group>
     </Group>
   );
 }

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -1,4 +1,5 @@
 import { Button, ScrollArea, Stack } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../config/provider';
 import { useConfigStore } from '../../../config/store';
 import { LayoutSelector } from './Layout/LayoutSelector';
@@ -14,6 +15,7 @@ import { ShadeSelector } from './Theme/ShadeSelector';
 
 export default function CustomizationSettings() {
   const { config, name: configName } = useConfigContext();
+  const { t } = useTranslation('common');
 
   const { updateConfig } = useConfigStore();
 
@@ -26,8 +28,8 @@ export default function CustomizationSettings() {
   };
 
   return (
-    <Stack mb="md" mr="sm" mt="xs">
+    <Stack mt="xs" spacing={0}>
-      <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
+      <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
         <LayoutSelector defaultLayout={config?.settings.customization.layout} />
         <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
         <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
@@ -47,7 +49,9 @@ export default function CustomizationSettings() {
         <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
       </ScrollArea>
 
-      <Button onClick={saveConfiguration} variant="light">Save Customizations</Button>
+      <Button onClick={saveConfiguration} variant="filled">
+        {t('common:save')}
+      </Button>
     </Stack>
   );
 }

src/components/Settings/SettingsDrawer.tsx

@@ -2,7 +2,6 @@ import { Drawer, ScrollArea, Tabs, Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
 import CommonSettings from './Common/CommonSettings';
-import Credits from './Common/Credits';
 import CustomizationSettings from './Customization/CustomizationSettings';
 
 function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
@@ -15,9 +14,7 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
         <Tabs.Tab value="customization">{t('tabs.customizations')}</Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel data-autofocus value="common">
-        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+        <CommonSettings />
-          <CommonSettings />
-        </ScrollArea>
       </Tabs.Panel>
       <Tabs.Panel value="customization">
         <CustomizationSettings />
@@ -48,7 +45,6 @@ export function SettingsDrawer({
       onClose={closeDrawer}
     >
       <SettingsMenu newVersionAvailable={newVersionAvailable} />
-      <Credits />
     </Drawer>
   );
 }