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

fix: styles

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-13 17:59:40 +03:30
parent 881e6384d3
commit f82fed54d5
11 changed files with 289 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/features/authentication/components/PasswordSection.tsx
View File

@@ -46,7 +46,7 @@ export function PasswordSection({
}: PasswordSectionProps) {
const { t } = useTranslation('completionForm');
const [showPasswordText, setShowPasswordText] = useState(false);
const [showPasswordRepititonText, setShowPasswordRepetitionText] =
const [showPasswordRepetitionText, setShowPasswordRepetitionText] =
useState(false);
const handleTogglePasswordSection = (
@@ -59,10 +59,6 @@ export function PasswordSection({
const handleTogglePasswordRepetitionEye = () =>
setShowPasswordRepetitionText((prev) => !prev);
const fieldSx = {
flex: '1 1 260px',
};
return (
<>
<FormGroup>
@@ -102,10 +98,7 @@ export function PasswordSection({
display: 'flex',
flexWrap: 'wrap',
gap: 2,
justifyContent: 'center',
'@media(min-width: 600px)': {
justifyContent: 'flex-start',
},
justifyContent: { xs: 'center', sm: 'flex-start' },
}}
>
<TextField
@@ -114,30 +107,26 @@ export function PasswordSection({
onChange={(e) => setPassword(e.target.value)}
variant="outlined"
type={showPasswordText ? 'text' : 'password'}
sx={fieldSx}
sx={{
flex: '1 1 260px',
'& .MuiInputBase-input': {
pr: 8, // Increased padding to accommodate both icons
},
}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ height: 'unset' }}>
<InputAdornment position="end">
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: 'flex-end',
minWidth: '64px', // Adjusted to fit both icons
}}
>
{validPassword && (
<Box sx={{ position: 'absolute', left: 0, px: 2 }}>
<Icon
Component={TickCircle}
size="medium"
color="success.main"
variant="Bold"
/>
</Box>
)}
<IconButton
onClick={handleTogglePasswordEye}
sx={{ ml: validPassword ? 0.5 : 'auto' }}
sx={{ p: 0.5 }}
>
{showPasswordText ? (
<Icon
@@ -153,15 +142,18 @@ export function PasswordSection({
/>
)}
</IconButton>
{validPassword && (
<Icon
Component={TickCircle}
size="medium"
color="success.main"
variant="Bold"
/>
)}
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight: validPassword ? '48px' : '20px',
},
}}
/>
<TextField
@@ -175,56 +167,26 @@ export function PasswordSection({
? t('completion.notCompatibility')
: ' '
}
type={showPasswordRepititonText ? 'text' : 'password'}
sx={fieldSx}
type={showPasswordRepetitionText ? 'text' : 'password'}
sx={{
flex: '1 1 260px',
}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ height: 'unset' }}>
<InputAdornment position="end">
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: 'flex-end',
minWidth: '64px',
}}
>
{confirmPassword.length > 0 &&
(matchPassword ? (
<Box sx={{ position: 'absolute', left: 0, px: 2 }}>
<Icon
Component={TickCircle}
size="medium"
color="success.main"
variant="Bold"
/>
</Box>
) : (
<Box
sx={{
position: 'absolute',
left: 0,
alignItems: 'center',
px: 2,
}}
>
<Icon
Component={CloseCircle}
size="medium"
color="error.main"
variant="Bold"
/>
</Box>
))}
<IconButton
onClick={handleTogglePasswordRepetitionEye}
sx={{
ml:
confirmPassword.length > 0 && matchPassword
? 0.5
: 'auto',
}}
sx={{ p: 0.5 }}
>
{showPasswordRepititonText ? (
{showPasswordRepetitionText ? (
<Icon
Component={Eye}
color="primary.main"
@@ -238,18 +200,18 @@ export function PasswordSection({
/>
)}
</IconButton>
{confirmPassword.length > 0 && (
<Icon
Component={matchPassword ? TickCircle : CloseCircle}
size="medium"
color={matchPassword ? 'success.main' : 'error.main'}
variant="Bold"
/>
)}
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight:
confirmPassword.length > 0 && matchPassword
? '48px'
: '45px',
},
}}
/>
</Box>
@@ -259,10 +221,7 @@ export function PasswordSection({
display: 'flex',
flexWrap: 'wrap',
gap: 2,
justifyContent: 'center',
'@media(min-width: 600px)': {
justifyContent: 'flex-start',
},
justifyContent: { xs: 'center', sm: 'flex-start' },
}}
>
<Box