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-07-22 12:08:48 +03:30
committed by Koosha Lahouti
parent 4f3f25abc1
commit 6d94a0d037
9 changed files with 152 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,8 @@ export function PasswordSection({
}: PasswordSectionProps) {
const { t } = useTranslation('completionForm');
const [showPasswordText, setShowPasswordText] = useState(false);
const [showPasswordRepititonText, setShowPasswordRepetitionText] =
useState(false);
const handleTogglePasswordSection = (
e: React.ChangeEvent<HTMLInputElement>,
@@ -56,6 +58,10 @@ export function PasswordSection({
setShowPasswordText((prev) => !prev);
};
const handleTogglePasswordRepetitionEye = () => {
setShowPasswordRepetitionText((prev) => !prev);
};
return (
<>
<FormGroup>
@@ -63,14 +69,10 @@ export function PasswordSection({
<Switch
checked={showPasswordSection}
onChange={handleTogglePasswordSection}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: '#2979FF' },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: '#2979FF',
},
}}
/>
<Typography sx={{ color: showPasswordSection ? '#2979FF' : 'black' }}>
<Typography
sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
>
{t('completion.determinePassword')}
</Typography>
</Box>
@@ -88,25 +90,45 @@ export function PasswordSection({
sx={{ width: '309px' }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{validPassword && (
<TickCircle
size="16"
color="#2e7d32"
variant="Bold"
style={{ marginRight: '8px' }}
/>
)}
<IconButton onClick={handleTogglePasswordEye}>
{showPasswordText ? (
<EyeSlash size="20" color="#000" />
) : (
<Eye size="20" color="#000" />
<InputAdornment position="end" sx={{ height: 'unset' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
}}
>
{validPassword && (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
)}
</IconButton>
<IconButton
onClick={handleTogglePasswordEye}
sx={{ ml: validPassword ? 0.5 : 'auto' }}
>
{showPasswordText ? (
<Eye size="24" color="#2979FF" />
) : (
<EyeSlash size="24" color="#2979FF" />
)}
</IconButton>
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight: validPassword ? '48px' : '20px',
},
}}
/>
{password && (
@@ -147,28 +169,48 @@ export function PasswordSection({
: ' '
}
sx={{ width: '309px' }}
type={showPasswordText ? 'text' : 'password'}
type={showPasswordRepititonText ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{confirmPassword.length > 0 && matchPassword && (
<TickCircle
size="16"
color="#2e7d32"
variant="Bold"
style={{ marginRight: '8px' }}
/>
)}
<IconButton onClick={handleTogglePasswordEye}>
{showPasswordText ? (
<EyeSlash size="20" color="#000" />
) : (
<Eye size="20" color="#000" />
<InputAdornment position="end" sx={{ height: 'unset' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
}}
>
{confirmPassword.length > 0 && matchPassword && (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
)}
</IconButton>
<IconButton
onClick={handleTogglePasswordRepetitionEye}
sx={{ ml: validPassword ? 0.5 : 'auto' }}
>
{showPasswordRepititonText ? (
<Eye size="24" color="#2979FF" />
) : (
<EyeSlash size="24" color="#2979FF" />
)}
</IconButton>
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight: validPassword ? '48px' : '20px',
},
}}
/>
</Box>
)}