Doormile/doormile_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated for the mobile view

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-06 13:56:00 +05:30
parent 59fc91f034
commit 1b76858c30
7 changed files with 368 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/Settings.jsx
View File

@@ -71,7 +71,7 @@ function Section({ icon: Icon, title, subtitle, color = 'primary', danger = fals
<Stack
direction="row" spacing={1.75} alignItems="center"
sx={{
px: 3, py: 2.25, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 3 }, py: 2.25, borderBottom: 1, borderColor: 'divider',
background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, ${theme.palette.background.paper} 72%)`
}}
>
@@ -83,7 +83,7 @@ function Section({ icon: Icon, title, subtitle, color = 'primary', danger = fals
{subtitle && <Typography variant="caption" color="text.secondary">{subtitle}</Typography>}
</Box>
</Stack>
<Box sx={{ px: 3 }}>{children}</Box>
<Box sx={{ px: { xs: 2, sm: 3 } }}>{children}</Box>
</Card>
);
}
@@ -155,10 +155,13 @@ export default function Settings() {
title="Settings"
breadcrumbs={[{ label: 'Settings' }]}
action={
<Stack direction="row" spacing={1.5} alignItems="center">
<Stack
direction="row" spacing={1.5} alignItems="center" useFlexGap flexWrap="wrap"
sx={{ width: { xs: '100%', sm: 'auto' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}
>
{dirty && <Chip size="small" label="Unsaved changes" sx={{ bgcolor: 'warning.lighter', color: 'warning.dark', fontWeight: 600 }} />}
<Button variant="outlined" onClick={discard}>Discard</Button>
<Button variant="contained" startIcon={<SaveOutlinedIcon />} onClick={save}>Save Changes</Button>
<Button variant="outlined" onClick={discard} sx={{ flex: { xs: 1, sm: 'none' } }}>Discard</Button>
<Button variant="contained" startIcon={<SaveOutlinedIcon />} onClick={save} sx={{ flex: { xs: 1, sm: 'none' } }}>Save Changes</Button>
</Stack>
}
/>