amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsiveness of setting page and correct the width and height size of those pages

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-06 12:15:06 -07:00
parent 2904aed502
commit 911a20ad9f
3 changed files with 195 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/features/profile/components/setting/Setting.tsx
View File

@@ -59,115 +59,149 @@ export function Setting() {
return ( return (
<PageWrapper> <PageWrapper>
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
<Logo />
</Box>
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
<Box <Box
sx={{ sx={{
width: '100%', display: 'flex',
px: { xs: 0, sm: 3 }, flexDirection: 'column',
mx: 0, minHeight: '100vh',
}} }}
> >
<CardContainer <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
title={t('settings.title')} <Logo />
subtitle={t('settings.description')} </Box>
highlighted={isEditing} <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
action={ <Box
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}> sx={{
{isEditing && ( width: '100%',
px: { xs: 0, sm: 3 },
mx: 0,
}}
>
<CardContainer
title={t('settings.title')}
subtitle={t('settings.description')}
highlighted={isEditing}
action={
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{isEditing && (
<Button
variant="text"
onClick={handleCancel}
size="large"
sx={{
color: 'primary.main',
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '0.85rem', sm: '1rem' },
}}
>
{t('settings.rejectButton')}
</Button>
)}
<Button <Button
variant="text" onClick={handleEditToggle}
onClick={handleCancel}
size="large" size="large"
variant="outlined"
sx={{ sx={{
color: 'primary.main',
textTransform: 'none', textTransform: 'none',
width: { xs: '100%', sm: 'auto' }, border: '1px solid',
fontSize: { xs: '0.85rem', sm: '1rem' }, borderColor: 'primary.main',
borderRadius: '4px',
bgcolor: isEditing ? 'primary.main' : 'background.paper',
color: isEditing ? 'primary.contrastText' : 'primary.main',
px: { xs: 2, sm: '22px' },
py: { xs: '6px', sm: '8px' },
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
fontSize: { xs: '0.9rem', sm: '1rem' },
}} }}
> >
{t('settings.rejectButton')} {isEditing
? t('settings.saveButton')
: t('settings.editButton')}
</Button> </Button>
)} </Box>
<Button }
onClick={handleEditToggle}
size="large"
variant="outlined"
sx={{
textTransform: 'none',
border: '1px solid',
borderColor: 'primary.main',
borderRadius: '4px',
bgcolor: isEditing ? 'primary.main' : 'background.paper',
color: isEditing ? 'primary.contrastText' : 'primary.main',
px: { xs: 2, sm: '22px' },
py: { xs: '6px', sm: '8px' },
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
fontSize: { xs: '0.9rem', sm: '1rem' },
}}
>
{isEditing
? t('settings.saveButton')
: t('settings.editButton')}
</Button>
</Box>
}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
width: '100%',
}}
> >
<Box <Box
sx={{ sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', sm: 'row' }, flexDirection: 'column',
gap: 2, gap: 2,
mt: 2, bgcolor: 'background.paper',
width: '100%', width: '100%',
}} }}
> >
<Box sx={{ flex: 1 }}> <Box
{isEditing ? ( sx={{
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> display: 'flex',
<Typography variant="body1"> flexDirection: { xs: 'column', sm: 'row' },
{t('settings.theme')} gap: 2,
</Typography> mt: 2,
<ThemeToggleButton /> width: '100%',
</Box> }}
) : ( >
<Box> <Box sx={{ flex: 1 }}>
<Typography variant="caption" color="text.secondary"> {isEditing ? (
{t('settings.theme')} <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
</Typography> <Typography variant="body1">
<Typography variant="body1"> {t('settings.theme')}
{mode === 'light' </Typography>
? t('settings.light') <ThemeToggleButton />
: t('settings.dark')} </Box>
</Typography> ) : (
</Box> <Box>
)} <Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
<Typography variant="body1">
{mode === 'light'
? t('settings.light')
: t('settings.dark')}
</Typography>
</Box>
)}
</Box>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(o) => o.label}
value={
languageOptions.find((o) => o.code === draftLanguage) ||
null
}
onChange={handleDraftLanguageChange}
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((o) => o.code === savedLanguage)
?.label
}
</Typography>
</Box>
)}
</Box>
</Box> </Box>
<Box sx={{ flex: 1 }}> <Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
{isEditing ? ( {isEditing ? (
<Autocomplete <Autocomplete
options={languageOptions} options={calendarOptions}
getOptionLabel={(o) => o.label} value={selectedCalendar}
value={ onChange={(_, v) => v && setSelectedCalendar(v)}
languageOptions.find((o) => o.code === draftLanguage) ||
null
}
onChange={handleDraftLanguageChange}
renderInput={(p) => ( renderInput={(p) => (
<TextField {...p} label={t('settings.language')} /> <TextField {...p} label={t('settings.calendar')} />
)} )}
size="medium" size="medium"
fullWidth fullWidth
@@ -175,41 +209,15 @@ export function Setting() {
) : ( ) : (
<Box> <Box>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary">
{t('settings.language')} {t('settings.calendar')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((o) => o.code === savedLanguage)
?.label
}
</Typography> </Typography>
<Typography variant="body1">{selectedCalendar}</Typography>
</Box> </Box>
)} )}
</Box> </Box>
</Box> </Box>
<Box sx={{ mt: 2, width: '100%' }}> </CardContainer>
{isEditing ? ( </Box>
<Autocomplete
options={calendarOptions}
value={selectedCalendar}
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(p) => (
<TextField {...p} label={t('settings.calendar')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.calendar')}
</Typography>
<Typography variant="body1">{selectedCalendar}</Typography>
</Box>
)}
</Box>
</Box>
</CardContainer>
</Box> </Box>
</PageWrapper> </PageWrapper>
); );

14
src/features/profile/components/userInformation/UserForm.tsx
View File

@@ -1,14 +0,0 @@
import { Box } from '@mui/material';
import { PersonalInformation } from './PersonalInformation';
import { PhoneNumber } from './PhoneNumber';
import { SocialMedia } from './SocialMedia';
export function UserForm() {
return (
<Box sx={{ width: '100%', overflowX: 'clip' }}>
<PersonalInformation />
<PhoneNumber />
<SocialMedia />
</Box>
);
}

132
src/features/profile/routes/SettingPage.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import { useState } from 'react';
import { import {
createBrowserRouter, createBrowserRouter,
RouterProvider, RouterProvider,
@@ -71,7 +71,7 @@ export function Layout() {
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const contentMaxWidth = '100%'; const contentMaxWidth = '100%';
const contentWidthMd = '810px'; // const contentWidthMd = '810px';
const navWidthMd = '274px'; const navWidthMd = '274px';
const navConfig: NavItemConfig[] = [ const navConfig: NavItemConfig[] = [
@@ -183,68 +183,78 @@ export function Layout() {
return ( return (
<Box <Box
display="flex" sx={{
flexDirection="column" minHeight: '100vh',
justifyContent="center" display: 'flex',
alignItems="center" justifyContent: 'center',
minHeight="100vh" alignItems: 'center',
px={{ xs: 2, sm: 3 }} px: '185px',
py: '105px',
boxSizing: 'border-box',
backgroundColor: 'background.default',
}}
> >
{!isMdUp && ( <Box
<AppBar position="static"> width={1100}
<Toolbar sx={{ backgroundColor: 'background.paper' }}> height={800}
<IconButton display="flex"
edge="start" flexDirection="column"
color="inherit" bgcolor="background.paper"
onClick={() => setDrawerOpen(true)} overflow="hidden"
> borderRadius={2}
<Menu size={24} color="#1976d2" variant="Bold" /> >
</IconButton> {!isMdUp && (
</Toolbar> <AppBar position="static">
</AppBar> <Toolbar sx={{ backgroundColor: 'background.paper' }}>
)} <IconButton edge="start" onClick={() => setDrawerOpen(true)}>
<Box display="flex" width="100%" maxWidth="100vw"> <Menu size={24} color="#1976d2" variant="Bold" />
{isMdUp && ( </IconButton>
<Box flex="0 0 auto" width={navWidthMd} position="relative"> </Toolbar>
<SideNav </AppBar>
navConfig={navConfig}
header={<Header />}
activePath={location.pathname + location.hash}
sideNavVariant="full"
positioning="absolute"
/>
</Box>
)} )}
<Box
flexGrow={1} <Box sx={{ flexGrow: 1, display: 'flex', overflow: 'hidden' }}>
width={1070} {isMdUp && (
maxWidth={1070} <Box sx={{ width: navWidthMd, flexShrink: 0 }}>
height={{ xs: 'auto', md: '814px' }} <SideNav
sx={{ navConfig={navConfig}
bgcolor: 'background.paper', header={<Header />}
px: { xs: 2, sm: 3 }, activePath={location.pathname + location.hash}
overflowY: 'auto', sideNavVariant="full"
}} positioning="absolute"
> />
<Outlet /> </Box>
</Box> )}
</Box>
{!isMdUp && ( <Box
<Drawer sx={{
anchor="left" flexGrow: 1,
open={drawerOpen} height: '100%',
onClose={() => setDrawerOpen(false)} overflowY: 'auto',
> px: 3,
<Box width={navWidthMd}> }}
<SideNav >
navConfig={navConfig} <Outlet />
header={<Header />}
activePath={location.pathname + location.hash}
sideNavVariant="full"
/>
</Box> </Box>
</Drawer> </Box>
)}
{!isMdUp && (
<Drawer
anchor="left"
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
>
<Box width={navWidthMd}>
<SideNav
navConfig={navConfig}
header={<Header />}
activePath={location.pathname + location.hash}
sideNavVariant="full"
/>
</Box>
</Drawer>
)}
</Box>
</Box> </Box>
); );
} }