Fix theme toggle

frontend/src/components/settings/AppearanceSettings.js

@@ -1,18 +1,25 @@
 import React from 'react';
-import { Text, Switch, Stack } from '@mantine/core';
+import { Text, Switch, Group, Box, Title } from '@mantine/core';
+import { useSettings } from '../../contexts/SettingsContext';
+
+const AppearanceSettings = ({ onThemeChange }) => {
+  const { colorScheme, toggleColorScheme } = useSettings();
+
+  const handleThemeChange = () => {
+    toggleColorScheme();
+    onThemeChange(colorScheme === 'dark' ? 'light' : 'dark');
+  };
 
-const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
   return (
-    <Stack spacing="xs">
-      <Text fw={500} size="lg">
+    <Box mb="md">
+      <Title order={3} mb="md">
         Appearance
-      </Text>
-      <Switch
-        label="Dark Mode"
-        checked={themeSettings === 'dark'}
-        onChange={onThemeChange}
-      />
-    </Stack>
+      </Title>
+      <Group justify="space-between" align="center">
+        <Text size="sm">Dark Mode</Text>
+        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
+      </Group>
+    </Box>
   );
 };
 

frontend/src/components/settings/EditorSettings.js

@@ -1,21 +1,23 @@
 import React from 'react';
-import { Text, Switch, Stack, Tooltip } from '@mantine/core';
+import { Text, Switch, Tooltip, Group, Box, Title } from '@mantine/core';
 
 const EditorSettings = ({ autoSave, onAutoSaveChange }) => {
   return (
-    <Stack spacing="xs" mt="md">
-      <Text fw={500} size="lg">
+    <Box mb="md">
+      <Title order={3} mb="md">
         Editor
-      </Text>
+      </Title>
       <Tooltip label="Auto Save feature is coming soon!" position="left">
-        <Switch
-          label="Auto Save"
-          checked={autoSave}
-          onChange={(event) => onAutoSaveChange(event.currentTarget.checked)}
-          disabled
-        />
+        <Group justify="space-between" align="center">
+          <Text size="sm">Auto Save</Text>
+          <Switch
+            checked={autoSave}
+            onChange={(event) => onAutoSaveChange(event.currentTarget.checked)}
+            disabled
+          />
+        </Group>
       </Tooltip>
-    </Stack>
+    </Box>
   );
 };
 

frontend/src/components/settings/GitSettings.js

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Text, Switch, TextInput, Stack, PasswordInput } from '@mantine/core';
+import {
+  Text,
+  Switch,
+  TextInput,
+  Stack,
+  PasswordInput,
+  Group,
+  Box,
+  Title,
+} from '@mantine/core';
 
 const GitSettings = ({
   gitEnabled,
@@ -11,55 +20,79 @@ const GitSettings = ({
   onInputChange,
 }) => {
   return (
-    <Stack spacing="xs" mt="md">
-      <Text fw={500} size="lg">
-        Git Integration
-      </Text>
-      <Switch
-        label="Enable Git"
-        checked={gitEnabled}
-        onChange={(event) =>
-          onInputChange('gitEnabled', event.currentTarget.checked)
-        }
-      />
-      <TextInput
-        label="Git URL"
-        value={gitUrl}
-        onChange={(event) => onInputChange('gitUrl', event.currentTarget.value)}
-        disabled={!gitEnabled}
-      />
-      <TextInput
-        label="Git Username"
-        value={gitUser}
-        onChange={(event) =>
-          onInputChange('gitUser', event.currentTarget.value)
-        }
-        disabled={!gitEnabled}
-      />
-      <PasswordInput
-        label="Git Token"
-        value={gitToken}
-        onChange={(event) =>
-          onInputChange('gitToken', event.currentTarget.value)
-        }
-        disabled={!gitEnabled}
-      />
-      <Switch
-        label="Auto Commit"
-        checked={gitAutoCommit}
-        onChange={(event) =>
-          onInputChange('gitAutoCommit', event.currentTarget.checked)
-        }
-        disabled={!gitEnabled}
-      />
-      <TextInput
-        label="Commit Message Template"
-        value={gitCommitMsgTemplate}
-        onChange={(event) =>
-          onInputChange('gitCommitMsgTemplate', event.currentTarget.value)
-        }
-        disabled={!gitEnabled}
-      />
+    <Stack spacing="md">
+      <Title order={3}>Git Integration</Title>
+      <Group justify="space-between" align="center">
+        <Text size="sm">Enable Git</Text>
+        <Switch
+          checked={gitEnabled}
+          onChange={(event) =>
+            onInputChange('gitEnabled', event.currentTarget.checked)
+          }
+        />
+      </Group>
+      <Box>
+        <Text size="sm" mb="xs">
+          Git URL
+        </Text>
+        <TextInput
+          value={gitUrl}
+          onChange={(event) =>
+            onInputChange('gitUrl', event.currentTarget.value)
+          }
+          disabled={!gitEnabled}
+          placeholder="Enter Git URL"
+        />
+      </Box>
+      <Box>
+        <Text size="sm" mb="xs">
+          Git Username
+        </Text>
+        <TextInput
+          value={gitUser}
+          onChange={(event) =>
+            onInputChange('gitUser', event.currentTarget.value)
+          }
+          disabled={!gitEnabled}
+          placeholder="Enter Git username"
+        />
+      </Box>
+      <Box>
+        <Text size="sm" mb="xs">
+          Git Token
+        </Text>
+        <PasswordInput
+          value={gitToken}
+          onChange={(event) =>
+            onInputChange('gitToken', event.currentTarget.value)
+          }
+          disabled={!gitEnabled}
+          placeholder="Enter Git token"
+        />
+      </Box>
+      <Group justify="space-between" align="center">
+        <Text size="sm">Auto Commit</Text>
+        <Switch
+          checked={gitAutoCommit}
+          onChange={(event) =>
+            onInputChange('gitAutoCommit', event.currentTarget.checked)
+          }
+          disabled={!gitEnabled}
+        />
+      </Group>
+      <Box>
+        <Text size="sm" mb="xs">
+          Commit Message Template
+        </Text>
+        <TextInput
+          value={gitCommitMsgTemplate}
+          onChange={(event) =>
+            onInputChange('gitCommitMsgTemplate', event.currentTarget.value)
+          }
+          disabled={!gitEnabled}
+          placeholder="Enter commit message template"
+        />
+      </Box>
     </Stack>
   );
 };