fix: styles
This commit is contained in:
Koosha Lahouti
@@ -1,4 +1,10 @@
|
|||||||
import { Box, Typography, Button } from '@mui/material';
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
useTheme,
|
||||||
|
useMediaQuery,
|
||||||
|
} from '@mui/material';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { DeviceMessage, Logout } from 'iconsax-react';
|
import { DeviceMessage, Logout } from 'iconsax-react';
|
||||||
import Logo from '@/components/Logo';
|
import Logo from '@/components/Logo';
|
||||||
@@ -38,6 +44,8 @@ export function ActiveDevices() {
|
|||||||
current: false,
|
current: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
const theme = useTheme();
|
||||||
|
const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageWrapper>
|
<PageWrapper>
|
||||||
@@ -75,118 +83,123 @@ export function ActiveDevices() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{devices.map((device) => (
|
{devices.map((device) => (
|
||||||
<Box
|
<>
|
||||||
key={device.id}
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: { xs: 'column', sm: 'row' },
|
|
||||||
alignItems: { xs: 'flex-start', sm: 'center' },
|
|
||||||
minHeight: 50,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '138px' },
|
|
||||||
order: { xs: 1, sm: 1 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{device.timeAndDate}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
|
key={device.id}
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
flexDirection: { xs: 'column', sm: 'row' },
|
||||||
gap: 1,
|
alignItems: { xs: 'flex-start', sm: 'center' },
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
minHeight: 50,
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '138px' },
|
|
||||||
order: { xs: 2, sm: 2 },
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DeviceMessage size={24} color="#82B1FF" />
|
<Typography
|
||||||
<Typography variant="body2" noWrap>
|
variant="body2"
|
||||||
{device.deviceModel}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '138px' },
|
|
||||||
order: { xs: 3, sm: 3 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{device.ip}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
textAlign: { xs: 'left', sm: 'center' },
|
|
||||||
minWidth: { sm: '138px' },
|
|
||||||
order: { xs: 4, sm: 4 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{device.current && (
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
borderRadius: '15px',
|
|
||||||
border: '2px solid',
|
|
||||||
borderColor: 'success.main',
|
|
||||||
height: '30px',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
color: 'success.main',
|
|
||||||
textTransform: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('active.currentDevice')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
textAlign: { xs: 'left', sm: 'center' },
|
|
||||||
minWidth: { sm: '150px' },
|
|
||||||
order: { xs: 5, sm: 5 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
startIcon={<Logout size={18} color="#E53935" />}
|
|
||||||
disabled={device.current}
|
|
||||||
sx={{
|
sx={{
|
||||||
color: 'error.main',
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
minWidth: 0,
|
mb: { xs: 1, sm: 0 },
|
||||||
borderRadius: '15px',
|
minWidth: { sm: '138px' },
|
||||||
borderColor: 'error.main',
|
order: { xs: 1, sm: 1 },
|
||||||
p: '4px 8px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
textTransform: 'none',
|
|
||||||
'& .MuiButton-startIcon': {
|
|
||||||
marginRight: '4px',
|
|
||||||
marginLeft: 0,
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t('active.deleteDevice')}
|
{device.timeAndDate}
|
||||||
</Button>
|
</Typography>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 1,
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
minWidth: { sm: '138px' },
|
||||||
|
order: { xs: 2, sm: 2 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeviceMessage size={24} color="#82B1FF" />
|
||||||
|
<Typography variant="body2" noWrap>
|
||||||
|
{device.deviceModel}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
minWidth: { sm: '138px' },
|
||||||
|
order: { xs: 3, sm: 3 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{device.ip}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
textAlign: { xs: 'left', sm: 'center' },
|
||||||
|
minWidth: { sm: '138px' },
|
||||||
|
order: { xs: 4, sm: 4 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{device.current && (
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
borderRadius: '15px',
|
||||||
|
border: '2px solid',
|
||||||
|
borderColor: 'success.main',
|
||||||
|
height: '30px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
color: 'success.main',
|
||||||
|
textTransform: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('active.currentDevice')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
textAlign: { xs: 'left', sm: 'center' },
|
||||||
|
minWidth: { sm: '150px' },
|
||||||
|
order: { xs: 5, sm: 5 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<Logout size={18} color="#E53935" />}
|
||||||
|
disabled={device.current}
|
||||||
|
sx={{
|
||||||
|
color: 'error.main',
|
||||||
|
minWidth: 0,
|
||||||
|
borderRadius: '15px',
|
||||||
|
borderColor: 'error.main',
|
||||||
|
p: '4px 8px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
textTransform: 'none',
|
||||||
|
'& .MuiButton-startIcon': {
|
||||||
|
marginRight: '4px',
|
||||||
|
marginLeft: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('active.deleteDevice')}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
{isXsup && (
|
||||||
|
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
</CardContainer>
|
</CardContainer>
|
||||||
|
|||||||
@@ -46,75 +46,78 @@ export function RecentLogins() {
|
|||||||
>
|
>
|
||||||
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
|
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
|
||||||
{data.map((d) => (
|
{data.map((d) => (
|
||||||
<Box
|
<>
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: { xs: 'column', sm: 'row' },
|
|
||||||
alignItems: { xs: 'flex-start', sm: 'center' },
|
|
||||||
minHeight: 50,
|
|
||||||
}}
|
|
||||||
key={d.id}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '172.5px' },
|
|
||||||
order: { xs: 1, sm: 1 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{d.time}
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '172.5px' },
|
|
||||||
order: { xs: 1, sm: 1 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{d.device}
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
|
||||||
mb: { xs: 1, sm: 0 },
|
|
||||||
minWidth: { sm: '172.5px' },
|
|
||||||
order: { xs: 1, sm: 1 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{d.ip}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
flexBasis: { xs: '100%', sm: 'auto' },
|
display: 'flex',
|
||||||
mb: { xs: 1, sm: 0 },
|
flexDirection: { xs: 'column', sm: 'row' },
|
||||||
textAlign: { xs: 'left', sm: 'center' },
|
alignItems: { xs: 'flex-start', sm: 'center' },
|
||||||
minWidth: { sm: '172.5px' },
|
minHeight: 50,
|
||||||
order: { xs: 4, sm: 4 },
|
|
||||||
}}
|
}}
|
||||||
|
key={d.id}
|
||||||
>
|
>
|
||||||
{d.current && (
|
<Typography
|
||||||
<Button
|
variant="body2"
|
||||||
variant="outlined"
|
sx={{
|
||||||
sx={{
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
borderRadius: '15px',
|
mb: { xs: 1, sm: 0 },
|
||||||
border: '2px solid',
|
minWidth: { sm: '172.5px' },
|
||||||
borderColor: 'success.main',
|
order: { xs: 1, sm: 1 },
|
||||||
height: '30px',
|
}}
|
||||||
whiteSpace: 'nowrap',
|
>
|
||||||
color: 'success.main',
|
{d.time}
|
||||||
textTransform: 'none',
|
</Typography>
|
||||||
}}
|
<Typography
|
||||||
>
|
variant="body2"
|
||||||
{t('securityForm.currentDevice')}
|
sx={{
|
||||||
</Button>
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
)}
|
mb: { xs: 1, sm: 0 },
|
||||||
|
minWidth: { sm: '172.5px' },
|
||||||
|
order: { xs: 1, sm: 1 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{d.device}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
minWidth: { sm: '172.5px' },
|
||||||
|
order: { xs: 1, sm: 1 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{d.ip}
|
||||||
|
</Typography>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flexBasis: { xs: '100%', sm: 'auto' },
|
||||||
|
mb: { xs: 1, sm: 0 },
|
||||||
|
textAlign: { xs: 'left', sm: 'center' },
|
||||||
|
minWidth: { sm: '172.5px' },
|
||||||
|
order: { xs: 4, sm: 4 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{d.current && (
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
borderRadius: '15px',
|
||||||
|
border: '2px solid',
|
||||||
|
borderColor: 'success.main',
|
||||||
|
height: '30px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
color: 'success.main',
|
||||||
|
textTransform: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('securityForm.currentDevice')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
|
||||||
|
</>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -69,9 +69,6 @@ export function Layout() {
|
|||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { t } = useTranslation('sideMap');
|
const { t } = useTranslation('sideMap');
|
||||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
|
|
||||||
const contentMaxWidth = '100%';
|
|
||||||
// const contentWidthMd = '810px';
|
|
||||||
const navWidthMd = '274px';
|
const navWidthMd = '274px';
|
||||||
|
|
||||||
const navConfig: NavItemConfig[] = [
|
const navConfig: NavItemConfig[] = [
|
||||||
@@ -197,13 +194,16 @@ export function Layout() {
|
|||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
width={{ xs: '100vw', md: 1100 }}
|
width={{ xs: '100vw', md: 1100 }}
|
||||||
height={{ xs: '100vh', md: 800 }}
|
height="100vh"
|
||||||
display="flex"
|
display="flex"
|
||||||
flexDirection="column"
|
flexDirection="column"
|
||||||
bgcolor="background.paper"
|
bgcolor="background.paper"
|
||||||
overflow="hidden"
|
overflow="hidden"
|
||||||
borderRadius={{ xs: 0, md: 2 }}
|
borderRadius={{ xs: 0, md: 2 }}
|
||||||
boxShadow={{ xs: 0, md: 3 }}
|
boxShadow={{ xs: 0, md: 3 }}
|
||||||
|
sx={{
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{!isMdUp && (
|
{!isMdUp && (
|
||||||
<AppBar position="static" elevation={0}>
|
<AppBar position="static" elevation={0}>
|
||||||
|
|||||||
Reference in New Issue
Block a user