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,11 +43,10 @@ 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">
<Group justify="space-between" align="center">
<div> <div>
<Text size="sm" fw={500}> <Text size="sm">Default Dark Mode</Text>
Default Theme
</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>
@@ -56,12 +54,10 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({
<Switch <Switch
checked={currentTheme === Theme.Dark} checked={currentTheme === Theme.Dark}
onChange={handleThemeToggle} onChange={handleThemeToggle}
size="lg"
onLabel={<IconMoon size={16} />}
offLabel={<IconSun size={16} />}
data-testid="theme-toggle" data-testid="theme-toggle"
/> />
</Group> </Group>
</Box>
</Stack> </Stack>
</Box> </Box>
); );