Fix theme toggle

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>
   );
 };