fix: sidebar style
This commit is contained in:
Koosha Lahouti
@@ -59,273 +59,275 @@ export function SocialMedia() {
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<CardContainer
|
||||
title={t('settingForm.titleSocial')}
|
||||
subtitle={t('settingForm.descriptionSocial')}
|
||||
action={
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ backgroundColor: 'background.paper' }}>
|
||||
<CardContainer
|
||||
title={t('settingForm.titleSocial')}
|
||||
subtitle={t('settingForm.descriptionSocial')}
|
||||
action={
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
alignItems: { xs: 'stretch', sm: 'flex-start' },
|
||||
justifyContent: 'flex-start',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
alignItems: { xs: 'stretch', sm: 'flex-start' },
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: { sm: 187 },
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '8px',
|
||||
color: 'primary.main',
|
||||
fontSize: '14px',
|
||||
px: 2,
|
||||
py: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
direction: 'rtl',
|
||||
}}
|
||||
>
|
||||
{t('settingForm.addEmailOrSocialButton')}
|
||||
</Box>
|
||||
<ArrowDown3 size="20" color="#2979FF" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchor}
|
||||
open={openMenu}
|
||||
onClose={handleCloseMenu}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
minWidth: 240,
|
||||
maxWidth: '90vw',
|
||||
},
|
||||
}}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Message size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.email')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ListItemIcon>
|
||||
<Google size={20} color="#4285F4" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.google')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ListItemIcon>
|
||||
<Apple size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.apple')}</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
|
||||
{emailList.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: { sm: 187 },
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '8px',
|
||||
color: 'primary.main',
|
||||
fontSize: '14px',
|
||||
px: 2,
|
||||
py: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
py: 1,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
direction: 'rtl',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
{t('settingForm.addEmailOrSocialButton')}
|
||||
</Box>
|
||||
<ArrowDown3 size="20" color="#2979FF" />
|
||||
</Button>
|
||||
</Box>
|
||||
{item.provider === 'google' && (
|
||||
<Google size="20" variant="Bold" color="#4285F4" />
|
||||
)}
|
||||
{item.provider === 'apple' && (
|
||||
<Apple size="20" variant="Bold" color="black" />
|
||||
)}
|
||||
{item.provider === 'email' && (
|
||||
<Sms size="20" variant="Bold" color="#1976d2" />
|
||||
)}
|
||||
|
||||
<Menu
|
||||
anchorEl={anchor}
|
||||
open={openMenu}
|
||||
onClose={handleCloseMenu}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
minWidth: 240,
|
||||
maxWidth: '90vw',
|
||||
},
|
||||
}}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Message size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.email')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ListItemIcon>
|
||||
<Google size={20} color="#4285F4" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.google')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ListItemIcon>
|
||||
<Apple size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('settingForm.apple')}</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="h6" noWrap>
|
||||
{item.email}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{item.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<IconButton size="small">
|
||||
<Trash size="20" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
|
||||
{emailList.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={handleCloseDialog}
|
||||
fullWidth
|
||||
maxWidth="xs"
|
||||
fullScreen={fullScreen}
|
||||
sx={{
|
||||
'& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
py: 1,
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleCloseDialog}>
|
||||
<CloseSquare size={24} color="#82B1FF" />
|
||||
</IconButton>
|
||||
{t('settingForm.addEmailButton')}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
minWidth: 0,
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{item.provider === 'google' && (
|
||||
<Google size="20" variant="Bold" color="#4285F4" />
|
||||
)}
|
||||
{item.provider === 'apple' && (
|
||||
<Apple size="20" variant="Bold" color="black" />
|
||||
)}
|
||||
{item.provider === 'email' && (
|
||||
<Sms size="20" variant="Bold" color="#1976d2" />
|
||||
)}
|
||||
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="h6" noWrap>
|
||||
{item.email}
|
||||
<Box>
|
||||
<Typography fontWeight="bold">
|
||||
{t('settingForm.newEmail')}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{item.time}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('settingForm.dialogHeader')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<IconButton size="small">
|
||||
<Trash size="20" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={handleCloseDialog}
|
||||
fullWidth
|
||||
maxWidth="xs"
|
||||
fullScreen={fullScreen}
|
||||
sx={{
|
||||
'& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleCloseDialog}>
|
||||
<CloseSquare size={24} color="#82B1FF" />
|
||||
</IconButton>
|
||||
{t('settingForm.addEmailButton')}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography fontWeight="bold">
|
||||
{t('settingForm.newEmail')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('settingForm.dialogHeader')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
type="email"
|
||||
value={emailInput}
|
||||
onChange={handleEmailChange}
|
||||
error={emailError}
|
||||
helperText={emailError ? t('settingForm.emailError') : ''}
|
||||
label={t('settingForm.email')}
|
||||
placeholder="abc@email.com"
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{ textTransform: 'none', borderRadius: '8px' }}
|
||||
disabled={emailError || emailInput === ''}
|
||||
>
|
||||
{t('settingForm.verificationCodeButton')}
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
|
||||
<Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
|
||||
<Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
|
||||
{t('settingForm.or')}
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
<TextField
|
||||
fullWidth
|
||||
type="email"
|
||||
value={emailInput}
|
||||
onChange={handleEmailChange}
|
||||
error={emailError}
|
||||
helperText={emailError ? t('settingForm.emailError') : ''}
|
||||
label={t('settingForm.email')}
|
||||
placeholder="abc@email.com"
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{ textTransform: 'none', borderRadius: '8px' }}
|
||||
disabled={emailError || emailInput === ''}
|
||||
>
|
||||
{t('settingForm.verificationCodeButton')}
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
|
||||
<Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
|
||||
<Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
|
||||
{t('settingForm.or')}
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 1,
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
}}
|
||||
>
|
||||
<Google
|
||||
size="20"
|
||||
color="#4285F4"
|
||||
style={{ marginInlineStart: 8 }}
|
||||
/>
|
||||
{t('settingForm.google')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Apple
|
||||
size="20"
|
||||
color="black"
|
||||
style={{ marginInlineStart: 8 }}
|
||||
/>
|
||||
{t('settingForm.apple')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Google
|
||||
size="20"
|
||||
color="#4285F4"
|
||||
style={{ marginInlineStart: 8 }}
|
||||
/>
|
||||
{t('settingForm.google')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Apple
|
||||
size="20"
|
||||
color="black"
|
||||
style={{ marginInlineStart: 8 }}
|
||||
/>
|
||||
{t('settingForm.apple')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContainer>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user