💃🏻 Settings menu styling

src/components/Settings/AdvancedSettings.tsx

@@ -37,7 +37,7 @@ export default function TitleChanger() {
   };
 
   return (
-    <Stack mb="lg">
+    <Stack mb="md" mr="sm" mt="xs">
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
         <Stack>
           <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />

src/components/Settings/CommonSettings.tsx

@@ -24,8 +24,8 @@ export default function CommonSettings(args: any) {
   );
 
   return (
-    <Stack mb="lg">
-      <Stack spacing={0}>
+    <Stack mb="md" mr="sm">
+      <Stack spacing={0} mt="xs">
         <Text>Search engine</Text>
         <Tip>
           Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or

src/components/Settings/Credits.tsx

@@ -1,10 +1,10 @@
-import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
+import { Group, ActionIcon, Anchor, Text, Stack } from '@mantine/core';
 import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';
 
 export default function Credits(props: any) {
   return (
-    <Group position="center" direction="row" mr="xs">
+    <Group position="center" mt="xs">
       <Group spacing={0}>
         <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
           <IconBrandGithub size={18} />

src/components/Settings/ModuleEnabler.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
+import { Checkbox, Group, SimpleGrid, Stack, Title } from '@mantine/core';
 import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
@@ -6,13 +6,13 @@ export default function ModuleEnabler(props: any) {
   const { config, setConfig } = useConfig();
   const modules = Object.values(Modules).map((module) => module);
   return (
-    <Group direction="column">
+    <Stack>
       <Title order={4}>Module enabler</Title>
-      <SimpleGrid cols={2} spacing="md">
+      <SimpleGrid cols={3} spacing="xs">
         {modules.map((module) => (
           <Checkbox
             key={module.title}
-            size="md"
+            size="sm"
             checked={config.modules?.[module.title]?.enabled ?? false}
             label={`${module.title}`}
             onChange={(e) => {
@@ -30,6 +30,6 @@ export default function ModuleEnabler(props: any) {
           />
         ))}
       </SimpleGrid>
-    </Group>
+    </Stack>
   );
 }