Issue #PS-798 fix: Implementation of UI component as per figma to ass…

…ign facilitator to village/centre at district level
tekdi · Jun 19, 2024 · a5b18ef · a5b18ef
1 parent 8652cae
commit a5b18ef
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 37 deletions.
diff --git a/src/components/CustomRangeModal.tsx b/src/components/CustomRangeModal.tsx
@@ -59,7 +59,7 @@ const CustomRangeModal: React.FC = () => {
                   style={{ cursor: 'pointer' }}
                 />
               </Box>
-              <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
+              <Box className="text-dark-grey">{t('COMMON.CUSTOM_RANGE')}</Box>
             </Box>
             <Box>
               <CloseIcon
@@ -69,7 +69,7 @@ const CustomRangeModal: React.FC = () => {
             </Box>
           </Box>
           <Box sx={{ paddingTop: '20px' }}>
-            <Box className="fs-14 fw-500 text-4D">
+            <Box className="fs-14 fw-500 text-dark-grey">
               {t('COMMON.FROM_TO_DATE')}
             </Box>
             <Box className="fs-22 fw-500 pt-10 text-1F">17 May – 23 May</Box>

diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -254,12 +254,15 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
           <Box>
             <Grid sx={{ padding: '20px 20px 5px' }} container>
               <Grid item xs={6}>
-                <Typography className="text-4D" textAlign={'left'}>
+                <Typography className="text-dark-grey" textAlign={'left'}>
                   {t('COMMON.DATE_RANGE')}
                 </Typography>
               </Grid>
               <Grid item xs={6} textAlign={'right'}>
-                <CloseIcon className="text-4D" onClick={handleModalClose} />
+                <CloseIcon
+                  className="text-dark-grey"
+                  onClick={handleModalClose}
+                />
               </Grid>
             </Grid>
           </Box>
@@ -288,7 +291,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                       left: '8px',
                       minWidth: 'auto',
                     }}
-                    className="text-4D"
+                    className="text-dark-grey"
                   >
                     <Image
                       height={10}
@@ -349,7 +352,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                     style={{ cursor: 'pointer' }}
                   />
                 </Box>
-                <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
+                <Box className="text-dark-grey">{t('COMMON.CUSTOM_RANGE')}</Box>
               </Box>
               <Box>
                 <CloseIcon
@@ -359,7 +362,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
               </Box>
             </Box>
             <Box sx={{ paddingTop: '10px' }}>
-              <Box className="fs-14 fw-500 text-4D">
+              <Box className="fs-14 fw-500 text-dark-grey">
                 {t('COMMON.FROM_TO_DATE')}
               </Box>
               <Box className="fs-22 fw-500 pt-10 text-1F">

diff --git a/src/components/ManageCentersModal.tsx b/src/components/ManageCentersModal.tsx
@@ -93,8 +93,8 @@ export default function ManageCentersModal() {
           <Box mx={'20px'}>
             <Box sx={{ height: '37vh', mt: '10px', overflowY: 'auto' }}>
               <Box
+                borderBottom={theme.palette.warning['A100']}
                 sx={{
-                  borderBottom: '1px solid #D0C5B4',
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',
@@ -115,8 +115,8 @@ export default function ManageCentersModal() {
               </Box>
 
               <Box
+                borderBottom={theme.palette.warning['A100']}
                 sx={{
-                  borderBottom: '1px solid #D0C5B4',
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',
@@ -137,8 +137,8 @@ export default function ManageCentersModal() {
               </Box>
 
               <Box
+                borderBottom={theme.palette.warning['A100']}
                 sx={{
-                  borderBottom: '1px solid #D0C5B4',
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',
@@ -162,8 +162,8 @@ export default function ManageCentersModal() {
               </Box>
 
               <Box
+                borderBottom={theme.palette.warning['A100']}
                 sx={{
-                  borderBottom: '1px solid #D0C5B4',
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',
@@ -186,8 +186,8 @@ export default function ManageCentersModal() {
                 </Box>
               </Box>
               <Box
+                borderBottom={theme.palette.warning['A100']}
                 sx={{
-                  borderBottom: '1px solid #D0C5B4',
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',

diff --git a/src/components/ManageUsersModal.tsx b/src/components/ManageUsersModal.tsx
@@ -85,73 +85,73 @@ export default function ManageUsersModal() {
           >
             <Button
               sx={{
-                border: '1px solid #DADADA',
-                padding: '6px, 12px 6px 12px',
+                padding: '6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Bhiwapur
             </Button>
             <Button
               sx={{
-                border: '1px solid #DADADA',
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
                 padding: '6px, 12px 6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Jabarbodi
             </Button>
             <Button
               sx={{
-                border: '1px solid #DADADA',
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
                 padding: '6px, 12px 6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Kargaon
             </Button>
             <Button
               sx={{
-                border: '1px solid #DADADA',
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
                 padding: '6px, 12px 6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Katol
             </Button>
             <Button
               sx={{
-                border: '1px solid #DADADA',
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
                 padding: '6px, 12px 6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Kondhali
             </Button>
             <Button
               sx={{
-                border: '1px solid #DADADA',
+                borderBottom: `1px solid ${theme.palette.warning[900]}`,
                 padding: '6px, 12px 6px 12px',
                 borderRadius: '8px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
-              className="text-4D"
+              className="text-dark-grey"
             >
               Metpanjara
             </Button>

diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx
@@ -38,7 +38,6 @@ import {
 } from '@/utils/Interfaces';
 import Menu, { MenuProps } from '@mui/material/Menu';
 import React, { useEffect, useState } from 'react';
-import ReactGA from 'react-ga4';
 import { alpha, styled, useTheme } from '@mui/material/styles';
 import {
   classesMissedAttendancePercentList,
@@ -55,16 +54,17 @@ import Header from '@/components/Header';
 import Loader from '@/components/Loader';
 import MarksObtainedCard from '@/components/MarksObtainedCard';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ReactGA from 'react-ga4';
 // import Header from '../components/Header';
 // import { formatDate, getTodayDate } from '../utils/Helper';
 import StudentStatsCard from '@/components/StudentStatsCard';
 import ToastMessage from '@/components/ToastMessage';
 import { format } from 'date-fns';
+import { logEvent } from '@/utils/googleAnalytics';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { showToastMessage } from '@/components/Toastify';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { logEvent } from '@/utils/googleAnalytics';
-import { showToastMessage } from '@/components/Toastify';
 
 // import { UserData, updateCustomField } from '../utils/Interfaces';
 
@@ -710,7 +710,7 @@ const LearnerProfile: React.FC = () => {
           wordBreak: 'break-word',
           fontSize: '16px',
         }}
-        className="text-4d two-line-text"
+        className="text-dark-grey two-line-text"
         color={theme.palette.warning['A200']}
       >
         {data}

diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx
@@ -111,7 +111,7 @@ const manageUser = () => {
                         marginBottom: '0rem',
                       }}
                     >
-                      <MenuItem className="text-4D fs-14 fw-500">
+                      <MenuItem className="text-dark-grey fs-14 fw-500">
                         {t('COMMON.FILTERS')}
                       </MenuItem>
                     </Select>

diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
@@ -20,7 +20,6 @@ import {
 } from '@mui/material';
 import { CustomField, UserDatas, updateCustomField } from '@/utils/Interfaces';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import ReactGA from 'react-ga4';
 import { editEditUser, getUserDetails } from '@/services/ProfileService';
 import { useTheme, withStyles } from '@mui/material/styles';
 
@@ -33,14 +32,15 @@ import Image from 'next/image';
 import Loader from '@/components/Loader';
 import Modal from '@mui/material/Modal';
 import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
+import ReactGA from 'react-ga4';
 import { getLabelForValue } from '@/utils/Helper';
+import { logEvent } from '@/utils/googleAnalytics';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { showToastMessage } from '@/components/Toastify';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import userPicture from '@/assets/images/imageOne.jpg';
 import user_placeholder from '../assets/images/user_placeholder.png';
-import { logEvent } from '@/utils/googleAnalytics';
-import { showToastMessage } from '@/components/Toastify';
 
 interface FieldOption {
   name: string;
@@ -542,13 +542,13 @@ const TeacherProfile = () => {
                     <Box
                       fontSize={'16px'}
                       lineHeight={'16px'}
-                      className="text-4d"
+                      className="text-dark-grey"
                       width={'100%'}
                       fontWeight={'500'}
                     >
                       <Typography
                         sx={{ wordBreak: 'break-word' }}
-                        className="text-4d two-line-text"
+                        className="text-dark-grey two-line-text"
                         mr={'40px'}
                       >
                         {userData?.name}
@@ -575,7 +575,7 @@ const TeacherProfile = () => {
                       fontSize={'12px'}
                       fontWeight={'500'}
                       lineHeight={'16px'}
-                      className="text-4d"
+                      className="text-dark-grey"
                     >
                       {address}
                     </Typography>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -48,7 +48,7 @@ body {
   font-size: 22px !important;
 }
 
-.text-4D {
+.text-dark-grey {
   color: var(--mui-palette-warning-A200);
 }