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

chore: add icons and toast

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-12 04:23:08 +03:30
parent 91f61614c5
commit 508b7af39f
14 changed files with 1250 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,8 +9,9 @@ import {
InputAdornment,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TickCircle, Eye, EyeSlash, CloseCircle } from 'iconsax-react';
import { TickCircle, Eye, EyeSlash, CloseCircle, Size } from 'iconsax-react';
import { PasswordValidationItem } from './PasswordValidation';
import { Icon } from '@rkheftan/harmony-ui';
interface PasswordSectionProps {
showPasswordSection: boolean;
@@ -60,8 +61,6 @@ export function PasswordSection({
const fieldSx = {
flex: '1 1 260px',
maxWidth: '309px',
width: '100%',
};
return (
@@ -127,25 +126,31 @@ export function PasswordSection({
}}
>
{validPassword && (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
<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' }}
>
{showPasswordText ? (
<Eye size="24" color="#2979FF" />
<Icon
Component={Eye}
color="primary.main"
size="medium"
/>
) : (
<EyeSlash size="24" color="#2979FF" />
<Icon
Component={EyeSlash}
size="medium"
color="primary.main"
/>
)}
</IconButton>
</Box>
@@ -184,27 +189,30 @@ export function PasswordSection({
>
{confirmPassword.length > 0 &&
(matchPassword ? (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
<Box sx={{ position: 'absolute', left: 0, px: 2 }}>
<Icon
Component={TickCircle}
size="medium"
color="success.main"
variant="Bold"
/>
</Box>
) : (
<CloseCircle
size="24"
color="red"
variant="Bold"
style={{
<Box
sx={{
position: 'absolute',
right: 0,
marginRight: '16px',
left: 0,
alignItems: 'center',
px: 2,
}}
/>
>
<Icon
Component={CloseCircle}
size="medium"
color="error.main"
variant="Bold"
/>
</Box>
))}
<IconButton
@@ -217,9 +225,17 @@ export function PasswordSection({
}}
>
{showPasswordRepititonText ? (
<Eye size="24" color="#2979FF" />
<Icon
Component={Eye}
color="primary.main"
size="medium"
/>
) : (
<EyeSlash size="24" color="#2979FF" />
<Icon
Component={EyeSlash}
size="medium"
color="primary.main"
/>
)}
</IconButton>
</Box>
@@ -252,7 +268,6 @@ export function PasswordSection({
<Box
sx={{
flex: '1 1 260px',
maxWidth: '317px',
display: 'flex',
flexDirection: 'column',
}}
@@ -269,7 +284,6 @@ export function PasswordSection({
<Box
sx={{
flex: '1 1 260px',
maxWidth: '317px',
display: 'flex',
flexDirection: 'column',
}}