Split large components

frontend/src/components/settings/AppearanceSettings.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text, Toggle } from '@geist-ui/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>
+  );
+};
+
+export default AppearanceSettings;