Replace alerts with toasts and fix header image size

5 files changed, 50 insertions, 38 deletions

diff --git a/client/package.json b/client/package.json
index 9769511..3a75fec 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.4.0",
+    "react-toastify": "^9.0.8",
     "react-webcam": "^7.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
index d5e08c4..a6e8523 100644
--- a/client/src/components/Header/Header.jsx
+++ b/client/src/components/Header/Header.jsx
@@ -4,7 +4,7 @@ import styles from './Header.module.css'
 const Header = ({ subheading }) => {
   return (
     <header className={styles.header}>
-      <img src={`${process.env.PUBLIC_URL}/favicon.ico`} />
+      <img src={`${process.env.PUBLIC_URL}/favicon.ico`} className={styles.header__image}/>
       <h3 className={styles.header__subheading}>{subheading}</h3>
     </header>
   )
diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
index 2214f1b..c67df95 100644
--- a/client/src/components/Header/Header.module.css
+++ b/client/src/components/Header/Header.module.css
@@ -13,3 +13,8 @@
   font-size: var(--font-medium);
   font-weight: 400;
 }
+
+.header__image {
+  width: 150px;
+  height: 150px;
+}
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index d4b0a2a..18529a4 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -19,6 +19,8 @@ import {
 } from '../../constants/RegEx'
 import { createUser } from '../../services/apiservice'
 import { useTranslation } from 'react-i18next'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 const Enrollment = () => {
   const { t } = useTranslation()
@@ -55,51 +57,51 @@ const Enrollment = () => {
   const handleSubmit = () => {
     if (page === 0) {
       if (formData.indianResident === '') {
-        return alert(t('PLEASE_SELECT_YOUR_RESIDENCY'))
+        toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY'))
       } else if (formData.name === '' || formData.name.length < 1) {
-        return alert(t('PLEASE_ENTER_YOUR_NAME'))
+        toast.error(t('PLEASE_ENTER_YOUR_NAME'))
       } else if (!validString.test(formData.name)) {
-        return alert(t('PLEASE_ENTER_VALID_NAME'))
+        toast.error(t('PLEASE_ENTER_VALID_NAME'))
       } else if (formData.gender === '') {
-        return alert(t('PLEASE_SELECT_YOUR_GENDER'))
+        toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
       } else {
         setPage(page + 1)
       }
     } else if (page === 1) {
       if (formData.mobile === '') {
-        return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
       } else if (!validMobileNumber.test(formData.mobile)) {
-        return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
       } else if (formData.email === '') {
-        return alert(t('PLEASE_ENTER_YOUR_EMAIL'))
+        toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
       } else if (!validEmail.test(formData.email)) {
-        return alert(t('PLEASE_ENTER_VALID_EMAIL'))
+        toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
       } else {
         setPage(page + 1)
       }
     } else if (page === 2) {
       if (formData.country === '') {
-        return alert(t('PLEASE_SELECT_YOUR_COUNTRY'))
+        toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
       } else if (formData.state === '') {
-        return alert(t('PLEASE_SELECT_YOUR_STATE'))
+        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
       } else if (formData.district === '') {
-        return alert(t('PLEASE_SELECT_YOUR_DISTRICT'))
+        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
       } else if (formData.village === '') {
-        return alert(t('PLEASE_ENTER_YOUR_VILLAGE'))
+        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
       } else if (formData.houseNo === '') {
-        return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
       } else if (formData.street === '') {
-        return alert(t('PLEASE_ENTER_YOUR_STREET'))
+        toast.error(t('PLEASE_ENTER_YOUR_STREET'))
       } else if (formData.locality === '') {
-        return alert(t('PLEASE_ENTER_YOUR_LOCALITY'))
+        toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
       } else if (formData.postOffice === '') {
-        return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
+        toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
       } else if (formData.landmark === '') {
-        return alert(t('PLEASE_ENTER_NEAREST_LANDMARK'))
+        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else if (formData.pincode === '') {
-        return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
+        toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
       } else if (!validPincode.test(formData.pincode)) {
-        return alert(t('PLEASE_ENTER_VALID_PINCODE'))
+        toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
         setFormData({
           ...formData,
@@ -188,6 +190,7 @@ const Enrollment = () => {
   }
   return (
     <>
+      <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
       {conditionalComponent()}
       {conditionalButton()}
     </>
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 6640cd3..8853678 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -14,6 +14,8 @@ import {
 import UpdateSelect from '../UpdateSelect/UpdateSelect'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 const Demographic = () => {
   const { t } = useTranslation()
@@ -80,45 +82,45 @@ const Demographic = () => {
   const handleSubmit = () => {
     if (page === 0) {
       if (formData.name === '' || formData.name.length < 1) {
-        return alert(t('PLEASE_ENTER_YOUR_NAME'))
+        toast.error(t('PLEASE_ENTER_YOUR_NAME'))
       } else if (!validString.test(formData.name)) {
-        return alert(t('PLEASE_ENTER_VALID_NAME'))
+        toast.error(t('PLEASE_ENTER_VALID_NAME'))
       } else if (formData.gender === '') {
-        return alert(t('PLEASE_SELECT_YOUR_GENDER'))
+        toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
       } else if (formData.mobile === '') {
-        return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
       } else if (!validMobileNumber.test(formData.mobile)) {
-        return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
       } else if (formData.email === '') {
-        return alert(t('PLEASE_ENTER_YOUR_EMAIL'))
+        toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
       } else if (!validEmail.test(formData.email)) {
-        return alert(t('PLEASE_ENTER_VALID_EMAIL'))
+        toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
       } else {
         setPage(page + 1)
       }
     } else if (page === 1) {
       if (formData.country === '') {
-        return alert(t('PLEASE_SELECT_YOUR_COUNTRY'))
+        toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
       } else if (formData.state === '') {
-        return alert(t('PLEASE_SELECT_YOUR_STATE'))
+        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
       } else if (formData.district === '') {
-        return alert(t('PLEASE_SELECT_YOUR_DISTRICT'))
+        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
       } else if (formData.village === '') {
-        return alert(t('PLEASE_ENTER_YOUR_VILLAGE'))
+        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
       } else if (formData.houseNo === '') {
-        return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
+        toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
       } else if (formData.street === '') {
-        return alert(t('PLEASE_ENTER_YOUR_STREET'))
+        toast.error(t('PLEASE_ENTER_YOUR_STREET'))
       } else if (formData.locality === '') {
-        return alert(t('PLEASE_ENTER_YOUR_LOCALITY'))
+        toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
       } else if (formData.postOffice === '') {
-        return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
+        toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
       } else if (formData.landmark === '') {
-        return alert(t('PLEASE_ENTER_NEAREST_LANDMARK'))
+        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else if (formData.pincode === '') {
-        return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
+        toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
       } else if (!validPincode.test(formData.pincode)) {
-        return alert(t('PLEASE_ENTER_VALID_PINCODE'))
+        toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
         setFormData({
           ...formData,
@@ -158,6 +160,7 @@ const Demographic = () => {
   }
   return (
     <>
+      <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
       {conditionalComponent()}
       {conditionalButton()}
     </>