🚚 Move new-frontend to frontend (#652)

frontend/src/components/UserSettings/Appearance.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+  Badge,
+  Container,
+  Heading,
+  Radio,
+  RadioGroup,
+  Stack,
+  useColorMode,
+} from '@chakra-ui/react'
+
+const Appearance: React.FC = () => {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <>
+      <Container maxW="full">
+        <Heading size="sm" py={4}>
+          Appearance
+        </Heading>
+        <RadioGroup onChange={toggleColorMode} value={colorMode}>
+          <Stack>
+            {/* TODO: Add system default option */}
+            <Radio value="light" colorScheme="teal">
+              Light mode
+              <Badge ml="1" colorScheme="teal">
+                Default
+              </Badge>
+            </Radio>
+            <Radio value="dark" colorScheme="teal">
+              Dark mode
+            </Radio>
+          </Stack>
+        </RadioGroup>
+      </Container>
+    </>
+  )
+}
+export default Appearance