chore: add icons and toast

src/features/authentication/components/EmailSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
   TextField,
   Box,
@@ -12,7 +12,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { TickCircle, Edit } from 'iconsax-react';
-import { Toast } from '@/components/Toast';
+import { Icon } from '@rkheftan/harmony-ui';
 
 interface EmailSectionProps {
   showEmail: boolean;
@@ -50,15 +50,11 @@ export function EmailSection({
   handleEditEmail,
 }: EmailSectionProps) {
   const { t } = useTranslation('completionForm');
-  const [showSuccessToast, setShowSuccessToast] = useState(false);
-  const [showErrorToast, setShowErrorToast] = useState(false);
 
   const onSendCodeClick = () => {
     if (!correctEmail) {
-      setShowErrorToast(true);
       return;
     }
-    setShowErrorToast(false);
     handleSendCode();
   };
 
@@ -68,14 +64,11 @@ export function EmailSection({
 
   useEffect(() => {
     if (emailVerified) {
-      setShowSuccessToast(true);
     }
   }, [emailVerified]);
 
   const fieldSx = {
     flex: '1 1 260px',
-    // maxWidth: emailVerified ? '634px' : '462px',
-    // width: '100%',
   };
 
   return (
@@ -130,15 +123,11 @@ export function EmailSection({
                 startAdornment:
                   !isVerifyingCode && emailVerified ? (
                     <InputAdornment position="end">
-                      <TickCircle
-                        size="24"
-                        color="#2e7d32"
+                      <Icon
+                        Component={TickCircle}
+                        size="medium"
                         variant="Bold"
-                        style={{
-                          position: 'absolute',
-                          right: 0,
-                          marginRight: '4px',
-                        }}
+                        color="success.main"
                       />
                     </InputAdornment>
                   ) : null,
@@ -146,10 +135,10 @@ export function EmailSection({
                   buttonState === 'counting' ? (
                     <InputAdornment position="start">
                       <IconButton onClick={handleEditEmail}>
-                        <Edit
-                          size="20"
-                          color="#2979FF"
-                          style={{ position: 'absolute', left: 0 }}
+                        <Icon
+                          Component={Edit}
+                          color="primary.main"
+                          size="medium"
                         />
                       </IconButton>
                     </InputAdornment>
@@ -226,22 +215,6 @@ export function EmailSection({
           )}
         </Box>
       )}
-
-      <Toast
-        color="success"
-        open={showSuccessToast}
-        onClose={() => setShowSuccessToast(false)}
-      >
-        {t('completion.alertSuccess')}
-      </Toast>
-
-      <Toast
-        color="error"
-        open={showErrorToast}
-        onClose={() => setShowErrorToast(false)}
-      >
-        {t('completion.emailCorrectForm')}
-      </Toast>
     </>
   );
 }