Migrate Settings to Mantine ui

frontend/src/components/settings/AppearanceSettings.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import { Text, Toggle } from '@geist-ui/core';
+import { Text, Switch, Stack } from '@mantine/core';
 
 const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
   return (
-    <div className="setting-group">
-      <Text h4>Appearance</Text>
-      <div className="setting-item">
-        <Text>Dark Mode</Text>
-        <Toggle checked={themeSettings === 'dark'} onChange={onThemeChange} />
-      </div>
-    </div>
+    <Stack spacing="xs">
+      <Text fw={500} size="lg">
+        Appearance
+      </Text>
+      <Switch
+        label="Dark Mode"
+        checked={themeSettings === 'dark'}
+        onChange={onThemeChange}
+      />
+    </Stack>
   );
 };