💄 Styling the settings

src/components/Config/SaveConfig.tsx

@@ -27,7 +27,7 @@ export default function SaveConfigComponent(props: any) {
     }
   }
   return (
-    <Group>
+    <Group spacing="xs">
       <Modal
         radius="md"
         opened={opened}
@@ -59,10 +59,11 @@ export default function SaveConfigComponent(props: any) {
           </Group>
         </form>
       </Modal>
-      <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+      <Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
         Download config
       </Button>
       <Button
+        size="xs"
         leftIcon={<Trash />}
         variant="outline"
         onClick={() => {
@@ -93,7 +94,7 @@ export default function SaveConfigComponent(props: any) {
       >
         Delete config
       </Button>
-      <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
+      <Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
         Save a copy
       </Button>
     </Group>

src/components/Settings/AdvancedSettings.tsx

@@ -3,7 +3,7 @@ import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 
 export default function TitleChanger() {
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const { config, setConfig } = useConfig();
 
   const form = useForm({
     initialValues: {
@@ -26,13 +26,19 @@ export default function TitleChanger() {
   };
 
   return (
-    <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
+    <Group direction="column" grow>
-      <TextInput label="Page title" placeholder="'Homarr 🦞" {...form.getInputProps('title')} />
+      <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
-      <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
+        <Group grow direction="column">
-      <TextInput label="Favicon" placeholder="/favicon.svg" {...form.getInputProps('favicon')} />
+          <TextInput label="Page title" placeholder="'Homarr 🦞" {...form.getInputProps('title')} />
-      <Group grow position="center" mt="xl">
+          <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
-        <Button type="submit">Save</Button>
+          <TextInput
-      </Group>
+            label="Favicon"
-    </form>
+            placeholder="/favicon.svg"
+            {...form.getInputProps('favicon')}
+          />
+          <Button type="submit">Save</Button>
+        </Group>
+      </form>
+    </Group>
   );
 }

src/components/Settings/CommonSettings.tsx

@@ -0,0 +1,124 @@
+import {
+  ActionIcon,
+  Group,
+  Text,
+  SegmentedControl,
+  TextInput,
+  Anchor,
+} from '@mantine/core';
+import { useState } from 'react';
+import { IconBrandGithub as BrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
+import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
+import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
+
+export default function CommonSettings(args: any) {
+  const { config, setConfig } = useConfig();
+
+  const matches = [
+    { label: 'Google', value: 'https://google.com/search?q=' },
+    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
+    { label: 'Bing', value: 'https://bing.com/search?q=' },
+    { label: 'Custom', value: 'Custom' },
+  ];
+
+  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
+  const [searchUrl, setSearchUrl] = useState(
+    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
+  );
+
+  return (
+    <Group direction="column" grow>
+      <Group grow direction="column" spacing={0}>
+        <Text>Search engine</Text>
+        <SegmentedControl
+          fullWidth
+          title="Search engine"
+          value={
+            // Match config.settings.searchUrl with a key in the matches array
+            searchUrl
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) => {
+              setSearchUrl(e);
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              });
+            }
+          }
+          data={matches}
+        />
+        {searchUrl === 'Custom' && (
+          <TextInput
+            label="Query URL"
+            placeholder="Custom query url"
+            value={customSearchUrl}
+            onChange={(event) => {
+              setCustomSearchUrl(event.currentTarget.value);
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: event.currentTarget.value,
+                },
+              });
+            }}
+          />
+        )}
+      </Group>
+      <ModuleEnabler />
+      <ColorSchemeSwitch />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Text
+        style={{
+          alignSelf: 'center',
+          fontSize: '0.75rem',
+          textAlign: 'center',
+          color: 'gray',
+        }}
+      >
+        Tip: You can upload your config file by dragging and dropping it onto the page!
+      </Text>
+      <Group position="center" direction="row" mr="xs">
+        <Group spacing={0}>
+          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+            <BrandGithub size={18} />
+          </ActionIcon>
+          <Text
+            style={{
+              position: 'relative',
+              fontSize: '0.90rem',
+              color: 'gray',
+            }}
+          >
+            {CURRENT_VERSION}
+          </Text>
+        </Group>
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: 'gray',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+      </Group>
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.tsx

@@ -1,135 +1,15 @@
-import {
+import { ActionIcon, Title, Tooltip, Drawer, Tabs } from '@mantine/core';
-  ActionIcon,
+import { useHotkeys } from '@mantine/hooks';
-  Group,
-  Title,
-  Text,
-  Tooltip,
-  SegmentedControl,
-  TextInput,
-  Drawer,
-  Anchor,
-  Tabs
-} from '@mantine/core';
-import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
+import { IconSettings } from '@tabler/icons';
-import { CURRENT_VERSION } from '../../../data/constants';
-import { useConfig } from '../../tools/state';
-import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
-import ConfigChanger from '../Config/ConfigChanger';
-import SaveConfigComponent from '../Config/SaveConfig';
-import ModuleEnabler from './ModuleEnabler';
 import AdvancedSettings from './AdvancedSettings';
+import CommonSettings from './CommonSettings';
 
 function SettingsMenu(props: any) {
-  const { config, setConfig } = useConfig();
-  const colorScheme = useColorScheme();
-  const { current, latest } = props;
-
-  const matches = [
-    { label: 'Google', value: 'https://google.com/search?q=' },
-    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
-    { label: 'Bing', value: 'https://bing.com/search?q=' },
-    { label: 'Custom', value: 'Custom' },
-  ];
-
-  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
-  const [searchUrl, setSearchUrl] = useState(
-    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
-  );
-
   return (
-    <Tabs>
+    <Tabs grow>
-      <Tabs.Tab label="Settings">
+      <Tabs.Tab data-autofocus label="Common">
-        <Group direction="column" grow>
+        <CommonSettings />
-          <Group grow direction="column" spacing={0}>
-            <Text>Search engine</Text>
-            <SegmentedControl
-              fullWidth
-              title="Search engine"
-              value={
-                // Match config.settings.searchUrl with a key in the matches array
-                searchUrl
-              }
-              onChange={
-                // Set config.settings.searchUrl to the value of the selected item
-                (e) => {
-                  setSearchUrl(e);
-                  setConfig({
-                    ...config,
-                    settings: {
-                      ...config.settings,
-                      searchUrl: e,
-                    },
-                  });
-                }
-              }
-              data={matches}
-            />
-            {searchUrl === 'Custom' && (
-              <TextInput
-                label="Query URL"
-                placeholder="Custom query url"
-                value={customSearchUrl}
-                onChange={(event) => {
-                  setCustomSearchUrl(event.currentTarget.value);
-                  setConfig({
-                    ...config,
-                    settings: {
-                      ...config.settings,
-                      searchUrl: event.currentTarget.value,
-                    },
-                  });
-                }}
-              />
-            )}
-          </Group>
-          <ModuleEnabler />
-          <ColorSchemeSwitch />
-          <ConfigChanger />
-          <SaveConfigComponent />
-          <Text
-            style={{
-              alignSelf: 'center',
-              fontSize: '0.75rem',
-              textAlign: 'center',
-              color: 'gray',
-            }}
-          >
-            Tip: You can upload your config file by dragging and dropping it onto the page!
-          </Text>
-          <Group position="center" direction="row" mr="xs">
-            <Group spacing={0}>
-              <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-                <BrandGithub size={18} />
-              </ActionIcon>
-              <Text
-                style={{
-                  position: 'relative',
-                  fontSize: '0.90rem',
-                  color: 'gray',
-                }}
-              >
-                {CURRENT_VERSION}
-              </Text>
-            </Group>
-            <Text
-              style={{
-                fontSize: '0.90rem',
-                textAlign: 'center',
-                color: 'gray',
-              }}
-            >
-              Made with ❤️ by @
-              <Anchor
-                href="https://github.com/ajnart"
-                style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-              >
-                ajnart
-              </Anchor>
-            </Text>
-          </Group>
-        </Group>
       </Tabs.Tab>
       <Tabs.Tab label="Advanced">
         <AdvancedSettings />

src/components/layout/Header.tsx

@@ -17,12 +17,7 @@ import SearchBar from '../modules/search/SearchModule';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import { ModuleWrapper } from '../modules/moduleWrapper';
-import {
+import { CalendarModule, TotalDownloadsModule, WeatherModule, DateModule } from '../modules';
-  CalendarModule,
-  TotalDownloadsModule,
-  WeatherModule,
-  DateModule,
-} from '../modules';
 
 const HEADER_HEIGHT = 60;