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

fix: account active sessions styles

Browse Source
This commit is contained in:
Sajad Mirjalili
2025-09-29 13:47:45 +03:30
parent e3fe01b9c3
commit 4a420da452
1 changed files with 58 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/features/profile/routes/ActiveDevicesPage.tsx
View File

@@ -1,11 +1,10 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { import {
Box, Box,
Typography, Typography,
Button, Button,
useTheme,
useMediaQuery,
CircularProgress, CircularProgress,
Stack,
} from '@mui/material'; } 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';
@@ -24,8 +23,6 @@ export function ActiveDevicesPage() {
const { t, i18n } = useTranslation('setting'); const { t, i18n } = useTranslation('setting');
const [devices, setDevices] = useState<Device[]>([]); const [devices, setDevices] = useState<Device[]>([]);
const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]); const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]);
const theme = useTheme();
const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
const showToast = useToast(); const showToast = useToast();
const { isLoadingProfile, refetchProfile } = useProfile(); const { isLoadingProfile, refetchProfile } = useProfile();
@@ -132,7 +129,9 @@ export function ActiveDevicesPage() {
flexGrow: 0, flexGrow: 0,
width: 'auto', width: 'auto',
}} }}
disabled={isLoadingProfile || isTerminating} disabled={
isLoadingProfile || isTerminating || devices.length === 1
}
> >
{isTerminating {isTerminating
? t('active.deleting') ? t('active.deleting')
@@ -158,20 +157,23 @@ export function ActiveDevicesPage() {
sx={{ sx={{
mx: { xs: 2, sm: 3, md: 4 }, mx: { xs: 2, sm: 3, md: 4 },
py: 2, py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper', bgcolor: 'background.paper',
}} }}
> >
{devices.map((device) => ( {devices.map((device) => (
<React.Fragment key={device.id}> <Stack
alignItems="center"
justifyContent="space-between"
flexDirection="row"
key={device.id}
>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', sm: 'row' }, flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' }, alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50, minHeight: 50,
gap: 0.5,
py: 1.5, py: 1.5,
}} }}
> >
@@ -217,85 +219,54 @@ export function ActiveDevicesPage() {
> >
{device.ip} {device.ip}
</Typography> </Typography>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '126px' },
order: { xs: 4, sm: 4 },
alignItems: 'center',
justifyContent: 'center',
}}
>
{device.current && (
<Button
variant="outlined"
size="medium"
sx={{
borderRadius: 12.5,
border: '1px solid',
borderColor: 'success.main',
whiteSpace: 'nowrap',
color: 'success.main',
textTransform: 'none',
maxWidth: '125px',
'&.Mui-disabled': {
color: 'success.main',
borderColor: 'success.main',
},
}}
disabled
>
{t('active.currentDevice')}
</Button>
)}
</Box>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
textAlign: { xs: 'left', sm: 'center' },
minWidth: { sm: '138px' },
order: { xs: 5, sm: 5 },
}}
>
<Button
size="small"
variant="outlined"
startIcon={<Icon Component={Logout} size="small" />}
disabled={
device.current || loadingDeleteIds.includes(device.id)
}
onClick={() => handleDeleteDevice(device.id)}
sx={{
color: 'error.main',
borderRadius: 1,
borderColor: 'error.main',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
whiteSpace: 'nowrap',
textTransform: 'none',
'& .MuiButton-startIcon': {
marginRight: 0.5,
marginLeft: 0,
},
}}
>
{loadingDeleteIds.includes(device.id) ? (
<CircularProgress size={20} color="error" />
) : (
t('active.deleteDevice')
)}
</Button>
</Box>
</Box> </Box>
{isXsup && ( {device.current && (
<Box sx={{ borderBottom: 1, borderColor: 'divider' }} /> <Button
variant="outlined"
size="medium"
sx={{
borderRadius: 12.5,
border: '1px solid',
borderColor: 'success.main',
whiteSpace: 'nowrap',
color: 'success.main',
textTransform: 'none',
maxWidth: '125px',
'&.Mui-disabled': {
color: 'success.main',
borderColor: 'success.main',
},
}}
disabled
>
{t('active.currentDevice')}
</Button>
)} )}
</React.Fragment>
{!device.current && (
<Button
size="small"
variant="outlined"
startIcon={<Icon Component={Logout} size="small" />}
disabled={
device.current || loadingDeleteIds.includes(device.id)
}
loading={loadingDeleteIds.includes(device.id)}
onClick={() => handleDeleteDevice(device.id)}
sx={{
color: 'error.main',
borderRadius: 1,
borderColor: 'error.main',
'& .MuiButton-startIcon': {
marginRight: 0.5,
marginLeft: 0,
},
}}
>
{t('active.deleteDevice')}
</Button>
)}
</Stack>
))} ))}
</Box> </Box>
)} )}