Refactor theme toggle layout in ProfileSettings component

This commit is contained in:
2025-11-03 19:11:50 +01:00
parent 054d9da867
commit 4acba662b6

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Box, Stack, TextInput, Group, Text, Switch } from '@mantine/core'; import { Box, Stack, TextInput, Group, Text, Switch } from '@mantine/core';
import { IconMoon, IconSun } from '@tabler/icons-react';
import { useAuth } from '@/contexts/AuthContext'; import { useAuth } from '@/contexts/AuthContext';
import { Theme, type UserProfileSettings } from '@/types/models'; import { Theme, type UserProfileSettings } from '@/types/models';
@@ -44,24 +43,21 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({
placeholder="Enter email" placeholder="Enter email"
data-testid="email-input" data-testid="email-input"
/> />
<Group justify="space-between" align="flex-start"> <Box mb="md">
<div> <Group justify="space-between" align="center">
<Text size="sm" fw={500}> <div>
Default Theme <Text size="sm">Default Dark Mode</Text>
</Text> <Text size="xs" c="dimmed">
<Text size="xs" c="dimmed"> Sets the default theme for new workspaces
Sets the default theme for new workspaces </Text>
</Text> </div>
</div> <Switch
<Switch checked={currentTheme === Theme.Dark}
checked={currentTheme === Theme.Dark} onChange={handleThemeToggle}
onChange={handleThemeToggle} data-testid="theme-toggle"
size="lg" />
onLabel={<IconMoon size={16} />} </Group>
offLabel={<IconSun size={16} />} </Box>
data-testid="theme-toggle"
/>
</Group>
</Stack> </Stack>
</Box> </Box>
); );