Issue #PS-657 fix:ALL screen UI matach with figma

tekdi · Jun 2, 2024 · 8448cee · 8448cee
1 parent 6ca473d
commit 8448cee
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 81 deletions.
diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -84,14 +84,14 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
         break;
       case 2:
         {
-        const dayOfWeek = today.getDay();
-        const lastSaturday = new Date(today);
-        lastSaturday.setDate(today.getDate() - dayOfWeek - 1);
-        const lastSunday = new Date(lastSaturday);
-        lastSunday.setDate(lastSaturday.getDate() - 6);
-        fromDate = lastSunday;
-        toDate = formatDate(lastSaturday);
-      }
+          const dayOfWeek = today.getDay();
+          const lastSaturday = new Date(today);
+          lastSaturday.setDate(today.getDate() - dayOfWeek - 1);
+          const lastSunday = new Date(lastSaturday);
+          lastSunday.setDate(lastSaturday.getDate() - 6);
+          fromDate = lastSunday;
+          toDate = formatDate(lastSaturday);
+        }
         break;
       case 3:
         fromDate = new Date(today);
@@ -116,27 +116,28 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
   };
 
   return (
-    <Box sx={{ mt: 0.6 }}>
-      <Grid container spacing={1}>
-        <Grid item sx={{ flex: 1 }}>
-          <FormControl fullWidth sx={{ m: 1 }}>
-            <Select
-              sx={{ height: '32px', width: '96%', borderRadius: '8px' }}
-              value={selectedValue}
-              displayEmpty
-              onClick={handleModalOpen}
-              inputProps={{ readOnly: true }}
-            >
-              <MenuItem value="" disabled>
-                {t('COMMON.SELECT_AN_OPTION')}
-              </MenuItem>
-              <MenuItem value={selectedValue}>
-                {selectedValue ? selectedValue : t('COMMON.SELECT_AN_OPTION')}
-              </MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
+    <Box sx={{ mt: 1, padding: '0 20px' }}>
+      <FormControl sx={{ width: '100%' }}>
+        <Select
+          sx={{
+            height: '32px',
+            width: '100%',
+            borderRadius: '8px',
+            fontSize: '14px',
+          }}
+          value={selectedValue}
+          displayEmpty
+          onClick={handleModalOpen}
+          inputProps={{ readOnly: true }}
+        >
+          <MenuItem value="" disabled>
+            {t('COMMON.SELECT_AN_OPTION')}
+          </MenuItem>
+          <MenuItem value={selectedValue}>
+            {selectedValue ? selectedValue : t('COMMON.SELECT_AN_OPTION')}
+          </MenuItem>
+        </Select>
+      </FormControl>
 
       <Modal
         open={isModalOpen}

diff --git a/src/components/LearnerAttendanceStatsListView.tsx b/src/components/LearnerAttendanceStatsListView.tsx
@@ -125,7 +125,7 @@ const StudentsStatsList: React.FC<StudentsStatsListProps> = ({
       <Stack>
         <Box
           height="60px"
-          borderTop={`1px solid  ${theme.palette.warning['300']}`}
+          borderTop={`1px solid  #D0C5B4`}
           margin="0px"
           alignItems={'center'}
           // padding="1rem"

diff --git a/src/components/LearnerListHeader.tsx b/src/components/LearnerListHeader.tsx
@@ -17,7 +17,7 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
     <Stack>
       {numberOfColumns == 3 ? (
         <Box
-          borderBottom={`1px solid ${theme.palette.warning['300']}`}
+          borderBottom={`1px solid #D0C5B4`}
           margin="0"
           alignItems={'center'}
           bgcolor={'#E6E6E6'}
@@ -33,7 +33,11 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
             <Grid item xs={6}>
               <Typography
                 textAlign={'left'}
-                sx={{ fontSize: '11px', fontWeight: '500' }}
+                sx={{
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  paddingLeft: '12px',
+                }}
               >
                 {t('COMMON.LEARNER_NAME')}
               </Typography>
@@ -52,7 +56,7 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
         </Box>
       ) : (
         <Box
-          borderBottom={`1px solid ${theme.palette.warning['300']}`}
+          borderBottom={`1px solid #E6E6E6`}
           margin="0"
           alignItems={'center'}
           bgcolor={'#E6E6E6'}

diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx
@@ -369,24 +369,29 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
           justifyContent: 'left',
           alignItems: 'center',
           color: '#4D4639',
+          paddingTop: '30px',
+          paddingBottom: '15px',
+          gap: '5px',
+          px: '20px',
         }}
         width={'100%'}
         onClick={handleBackEvent}
       >
-        <Box>
-          <KeyboardBackspaceOutlinedIcon
-            cursor={'pointer'}
-            sx={{ color: theme.palette.warning['A200'] }}
-          />
-        </Box>
-        <Typography textAlign={'left'} fontSize={'22px'} m={'1rem'}>
+        <KeyboardBackspaceOutlinedIcon
+          cursor={'pointer'}
+          sx={{ color: theme.palette.warning['A200'] }}
+        />
+        <Typography textAlign={'left'} fontSize={'22px'}>
           {t('ATTENDANCE.ATTENDANCE_OVERVIEW')}
         </Typography>
       </Box>
 
-      <Box sx={{ mt: 0.6 }}>
+      <Box sx={{ mt: 1 }}>
         <Box sx={{ minWidth: 120, gap: '15px' }} display={'flex'}>
-          <FormControl className="drawer-select" sx={{ m: 1, width: '100%' }}>
+          <FormControl
+            className="drawer-select"
+            sx={{ width: '100%', padding: '0 20px' }}
+          >
             <Select
               value={classId}
               onChange={handleCohortSelection}
@@ -399,6 +404,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
                 color: theme.palette.warning['200'],
                 width: '100%',
                 marginBottom: '0rem',
+                fontSize: '14px',
               }}
             >
               {cohortsData?.length !== 0 ? (
@@ -424,46 +430,58 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
         </Box>
       </Box>
 
-      <DateRangePopup
-        menuItems={menuItems}
-        selectedValue={selectedValue}
-        setSelectedValue={setSelectedValue}
-        onDateRangeSelected={handleDateRangeSelected}
-      />
-
-      <Box display={'flex'} className="card_overview">
-        <Grid container spacing={2}>
-          <Grid item xs={5}>
-            <OverviewCard
-              label={t('ATTENDANCE.CENTER_ATTENDANCE')}
-              value={
-                learnerData.length
-                  ? presentPercentage + ' %'
-                  : presentPercentage
-              }
-            />
-          </Grid>
-          <Grid item xs={7}>
-            <OverviewCard
-              label={t('ATTENDANCE.LOW_ATTENDANCE_STUDENTS')}
-              {...(loading && (
-                <Loader
-                  loadingText={t('COMMON.LOADING')}
-                  showBackdrop={false}
-                />
-              ))}
-              value={
-                lowAttendanceLearnerList.length > 2
-                  ? `${lowAttendanceLearnerList[0]}, ${lowAttendanceLearnerList[1]} ${t('COMMON.AND')} ${lowAttendanceLearnerList.length - 2}  ${t('COMMON.MORE')}`
-                  : lowAttendanceLearnerList.length === 2
-                    ? `${lowAttendanceLearnerList[0]}, ${lowAttendanceLearnerList[1]}`
-                    : lowAttendanceLearnerList.length === 1
-                      ? `${lowAttendanceLearnerList[0]}`
-                      : t('ATTENDANCE.N/A')
-              }
-            />
+      <Box
+        className="linerGradient"
+        sx={{
+          padding: '1rem 0',
+          mt: '4px',
+        }}
+      >
+        <DateRangePopup
+          menuItems={menuItems}
+          selectedValue={selectedValue}
+          setSelectedValue={setSelectedValue}
+          onDateRangeSelected={handleDateRangeSelected}
+        />
+
+        <Box
+          display={'flex'}
+          sx={{ padding: '0 20px', marginTop: '1rem' }}
+          className="card_overview"
+        >
+          <Grid container spacing={2}>
+            <Grid item xs={5}>
+              <OverviewCard
+                label={t('ATTENDANCE.CENTER_ATTENDANCE')}
+                value={
+                  learnerData.length
+                    ? presentPercentage + ' %'
+                    : presentPercentage
+                }
+              />
+            </Grid>
+            <Grid item xs={7}>
+              <OverviewCard
+                label={t('ATTENDANCE.LOW_ATTENDANCE_STUDENTS')}
+                {...(loading && (
+                  <Loader
+                    loadingText={t('COMMON.LOADING')}
+                    showBackdrop={false}
+                  />
+                ))}
+                value={
+                  lowAttendanceLearnerList.length > 2
+                    ? `${lowAttendanceLearnerList[0]}, ${lowAttendanceLearnerList[1]} ${t('COMMON.AND')} ${lowAttendanceLearnerList.length - 2}  ${t('COMMON.MORE')}`
+                    : lowAttendanceLearnerList.length === 2
+                      ? `${lowAttendanceLearnerList[0]}, ${lowAttendanceLearnerList[1]}`
+                      : lowAttendanceLearnerList.length === 1
+                        ? `${lowAttendanceLearnerList[0]}`
+                        : t('ATTENDANCE.N/A')
+                }
+              />
+            </Grid>
           </Grid>
-        </Grid>
+        </Box>
       </Box>
 
       <Stack mr={1} ml={1}>