💄 Change module enabler layout

src/components/Settings/ModuleEnabler.tsx

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