Merge pull request #158 from shreyas1434shinde/calenderView

Issue #PS-274 fix: UI bug fixes
tekdi · May 24, 2024 · e3fcd12 · e3fcd12
2 parents 7fdd7d5 + e5a98d0
commit e3fcd12
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/src/components/AttendanceStatusListView.tsx b/src/components/AttendanceStatusListView.tsx
@@ -53,8 +53,11 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
           marginRight="auto"
           marginY="auto"
           sx={{
-            color: theme.palette.warning['300'],
             textAlign: 'left',
+            fontSize: '14px',
+            fontWeight: '400',
+            color: '#0D599E',
+            textDecoration: 'underline',
           }}
         >
           {isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}

diff --git a/src/components/LearnerListHeader.tsx b/src/components/LearnerListHeader.tsx
@@ -31,30 +31,21 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
             justifyContent="space-between"
             p={2}
           >
-            <Grid item xs={10}>
-              <Typography textAlign={'left'} style={{ fontSize: '11px' }}>
+            <Grid item xs={4}>
+              <Typography
+                textAlign={'left'}
+                sx={{ fontSize: '11px', fontWeight: '500' }}
+              >
                 {t('COMMON.LEARNER_NAME')}
               </Typography>
             </Grid>
-            <Grid item xs={1}>
-              <Typography
-                style={{
-                  fontSize: '11px',
-                  textAlign: 'center',
-                  marginLeft: '11px',
-                }}
-              >
+            <Grid item xs={4}>
+              <Typography sx={{ fontSize: '11px', fontWeight: '500' }}>
                 {firstColumnName}
               </Typography>
             </Grid>
-            <Grid item xs={1}>
-              <Typography
-                style={{
-                  fontSize: '11px',
-                  textAlign: 'center',
-                  marginLeft: '15px',
-                }}
-              >
+            <Grid item xs={4}>
+              <Typography sx={{ fontSize: '11px', fontWeight: '500' }}>
                 {secondColumnName}
               </Typography>
             </Grid>

diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
@@ -347,11 +347,11 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
               </Typography>
               {cohortMemberList && cohortMemberList?.length != 0 ? (
                 <Box
-                  height={'54vh'}
+                  height={'56vh'}
                   sx={{
                     overflowY: 'scroll',
                     marginTop: '10px',
-                    padding: '0 10px',
+                    // padding: '0 10px',
                   }}
                 >
                   <Box className="modalBulk">
@@ -387,11 +387,11 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
                     gap={'20px'}
                     flexDirection={'row'}
                     justifyContent={'space-evenly'}
-                    marginBottom={0}
+                    marginBottom={'8px'}
                     sx={{
                       background: '#fff',
                       padding: '15px 0 15px 0',
-                      width: '86%',
+                      width: '93%',
                     }}
                   >
                     <Button

diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
@@ -617,7 +617,7 @@ const UserAttendanceHistory = () => {
               backgroundColor: 'white',
               // boxShadow: '0px 1px 3px 0px #0000004D',
               boxShadow: '0px 4px 8px 3px #00000026',
-              border: '1px solid #DED8E1',
+              border: '1px solid #D0C5B4',
             }}
             py={'5px'}
           >
@@ -636,7 +636,7 @@ const UserAttendanceHistory = () => {
             onChange={handleActiveStartDateChange}
             onDateChange={handleSelectedDateChange}
           />
-          <Box mt={2}>
+          <Box padding={'0 10px'} mt={2}>
             {/*----------------------------search and Sort---------------------------------------*/}
             <Stack mr={1} ml={1}>
               <Box mt={3} mb={3} boxShadow={'none'}>
@@ -727,11 +727,38 @@ const UserAttendanceHistory = () => {
                 />
               )}
             </Box>
-            <LearnerListHeader
+            {/* <LearnerListHeader
               numberOfColumns={3}
               firstColumnName={t('ATTENDANCE.PRESENT')}
               secondColumnName={t('ATTENDANCE.ABSENT')}
-            />
+            /> */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: '8px 8px',
+                borderBottom: '1px solid #D0C5B4',
+                bgcolor: '#E6E6E6',
+              }}
+            >
+              <Box sx={{ color: '#1F1B13', fontSize: '11px' }}>
+                {t(' LEARNER_NAME')}
+              </Box>
+              <Box sx={{ display: 'flex', gap: '13px' }}>
+                <Box sx={{ color: '#1F1B13', fontSize: '11px' }}>
+                  {t('PRESENT')}
+                </Box>
+                <Box
+                  sx={{
+                    color: '#1F1B13',
+                    fontSize: '11px',
+                    paddingRight: '10px',
+                  }}
+                >
+                  {t('ABSENT')}
+                </Box>
+              </Box>
+            </Box>
             {cohortMemberList?.length > 0 ? (
               <Box>
                 {displayStudentList?.map((user: any) => (

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -35,6 +35,7 @@ import {
 import ArrowForwardSharpIcon from '@mui/icons-material/ArrowForwardSharp';
 import AttendanceStatusListView from '../components/AttendanceStatusListView';
 import Backdrop from '@mui/material/Backdrop';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ExtraSessionsCard from '@/components/ExtraSessionsCard';
@@ -54,7 +55,6 @@ import useDeterminePathColor from '../hooks/useDeterminePathColor';
 import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 
 interface State extends SnackbarOrigin {
   openModal: boolean;
@@ -468,7 +468,12 @@ const Dashboard: React.FC<DashboardProps> = () => {
           <Header />
           <Box sx={{ display: 'flex', justifyContent: 'center' }}>
             <Box width={'100%'}>
-              <Typography textAlign={'left'} fontSize={'22px'} m={'1rem'} color={'black'}>
+              <Typography
+                textAlign={'left'}
+                fontSize={'22px'}
+                m={'1rem'}
+                color={'black'}
+              >
                 {t('DASHBOARD.DASHBOARD')}
               </Typography>
             </Box>
@@ -484,7 +489,12 @@ const Dashboard: React.FC<DashboardProps> = () => {
             >
               <Box display={'flex'} flexDirection={'column'} padding={'1rem'}>
                 <Box display={'flex'} justifyContent={'space-between'}>
-                  <Typography variant="h2" sx={{ fontSize: '14px' }} color={'black'} fontWeight={'500'}>
+                  <Typography
+                    variant="h2"
+                    sx={{ fontSize: '14px' }}
+                    color={'black'}
+                    fontWeight={'500'}
+                  >
                     {t('DASHBOARD.DAY_WISE_ATTENDANCE')}
                   </Typography>
                   <Box
@@ -727,7 +737,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                         </Typography>
                         {cohortMemberList && cohortMemberList?.length != 0 ? (
                           <Box
-                            height={'54vh'}
+                            height={'56vh'}
                             sx={{ overflowY: 'scroll', marginTop: '10px' }}
                           >
                             <Box>