init

src/features/settings/components/accent-color-picker.tsx

@@ -0,0 +1,61 @@
+import { Box, ColorSwatch, Group, Text } from '@mantine/core';
+import { updateUserAccentColor } from '@/utils/supertokens';
+import { useAuth } from '@/contexts/auth-context';
+
+const colors = ['blue', 'red', 'green', 'yellow', 'grape', 'orange', 'pink', 'lime'];
+interface ColorButtonProps {
+  color: string;
+  handleClick: (color: string) => void;
+  isSelected: boolean;
+}
+
+const ColorButton = ({ color, handleClick, isSelected }: ColorButtonProps) => {
+  return (
+    <Box
+      m={isSelected ? 0 :'0.125rem'}
+      bd={isSelected ? '0.125rem solid var(--mantine-color-bright)' : 'none'}
+      style={{ borderRadius: '50%' }}
+    >
+      <ColorSwatch
+        component='button'
+        color={`var(--mantine-color-${color}-6)`}
+        onClick={() => handleClick(color)}
+        size={28}
+        m={2}
+        style={{
+          color: '#fff',
+          cursor: 'pointer',
+        }}
+      />
+    </Box>
+  );
+};
+
+const AccentColorPicker = () => {
+  const { metadata, user, set } = useAuth()
+
+  const handleClick = async (color: string) => {
+    if (user) {
+      await updateUserAccentColor({ data: color });
+      set({ metadata: { ...metadata, accentColor: color } })
+    }
+  }
+
+  return (
+    <Box>
+      <Text fw={500} size='sm' mb='xs'>Accent Color</Text>
+      <Group gap='xs' w='100%' justify='space-between'>
+        {colors.map((color) => (
+          <ColorButton
+          key={color}
+          color={color}
+          handleClick={handleClick}
+          isSelected={metadata.accentColor === color}
+        />
+      ))}
+      </Group>
+    </Box>
+  );
+}
+
+export default AccentColorPicker;

src/features/settings/components/color-scheme-picker.tsx

@@ -0,0 +1,51 @@
+import { Center, Box, Text, SegmentedControl, MantineColorScheme } from '@mantine/core';
+import { SunIcon, MoonIcon, Icon, MonitorIcon } from '@phosphor-icons/react'
+import { updateUserColorScheme } from '@/utils/supertokens';
+import { useAuth } from '@/contexts/auth-context';
+
+interface ColorSchemeLabelProps {
+  colorScheme: string;
+  Icon: Icon;
+}
+const ColorSchemeLabel: React.FC<ColorSchemeLabelProps> = ({ colorScheme, Icon }) => {
+  return (<Center style={{ gap: 10 }}>
+      <Icon size={16} />
+      <span>{colorScheme}</span>
+    </Center>)
+}
+
+export function ColorSchemePicker() {
+  const { metadata, user, set } = useAuth()
+  
+  const handleClick = async (value: string) => {
+    if (user) {
+      await updateUserColorScheme({ data: value });
+      set({ metadata: { ...metadata, colorScheme: value as MantineColorScheme } })
+    }
+  }
+
+  return (
+    <Box>
+      <Text fw={500} size='sm' mb='xs'>Color Scheme</Text>
+      <SegmentedControl
+        w='100%'
+        value={metadata.colorScheme}
+        onChange={handleClick}
+        data={[
+        {
+          value: 'dark',
+          label: <ColorSchemeLabel colorScheme='Dark' Icon={MoonIcon} />
+        },
+        {
+          value: 'light',
+          label: <ColorSchemeLabel colorScheme='Light' Icon={SunIcon} />
+        },
+        {
+          value: 'auto',
+          label: <ColorSchemeLabel colorScheme='System' Icon={MonitorIcon} />
+        },
+      ]}
+    />
+    </Box>
+  )
+}