Merge pull request #145 from shreyas1434shinde/BugFixes

#PS-1317 fix PS-1527 UI Improvement
tekdi · Aug 14, 2024 · 3c962a8 · 3c962a8
2 parents 3a213b9 + cffbb52
commit 3c962a8
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 36 deletions.
diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
@@ -315,6 +315,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                   <Typography
                     color={theme.palette.warning['300']}
                     textAlign={'left'}
+                    sx={{ fontSize: '12px', color: '#777' }}
                   >
                     {blockName} {t('DASHBOARD.BLOCK')}
                   </Typography>

diff --git a/src/components/CustomRangeModal.tsx b/src/components/CustomRangeModal.tsx
@@ -81,7 +81,7 @@ const CustomRangeModal: React.FC = () => {
             sx={{
               paddingTop: '20px',
               display: 'flex',
-              gap: '10px',
+              gap: '30px',
               justifyContent: 'end',
             }}
           >

diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -400,7 +400,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
             sx={{
               padding: '20px 18px 10px',
               display: 'flex',
-              gap: '10px',
+              gap: '30px',
               justifyContent: 'end',
             }}
           >

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -550,7 +550,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                           sx={{
                             gap: '15px',
                             alignItems: 'center',
-                            '@media (min-width: 900px)': {
+                            '@media (min-width: 600px)': {
                               background: theme.palette.action.selected,
                               padding: '20px',
                               borderRadius: '12px',
@@ -567,7 +567,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                                   <Grid
                                     item
                                     xs={12}
-                                    sm={4}
+                                    sm={6}
                                     md={4}
                                     key={user.userId}
                                   >
@@ -579,7 +579,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                                       justifyContent={'space-between'}
                                       sx={{
                                         cursor: 'pointer',
-                                        '@media (min-width: 900px)': {
+                                        '@media (min-width: 600px)': {
                                           border: `1px solid  ${theme.palette.action.selected}`,
                                           padding: '4px 10px',
                                           borderRadius: '8px',

diff --git a/src/pages/assessments/index.tsx b/src/pages/assessments/index.tsx
@@ -214,6 +214,7 @@ const Assessments = () => {
                   justifyContent: 'space-between',
                   borderRadius: '8px',
                   gap: '5px',
+                  background: theme.palette.warning['A400']
                 }}
                 onClick={() => handleAssessmentDetails(assessment.userId)}
               >
@@ -304,8 +305,8 @@ const Assessments = () => {
       <SortingModal
         isModalOpen={modalOpen}
         handleCloseModal={handleCloseModal}
-        // handleSorting={handleSorting}
-        // routeName={pathname}
+      // handleSorting={handleSorting}
+      // routeName={pathname}
       />
     </>
   );

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -245,15 +245,17 @@ const LoginPage = () => {
           <Image src={appLogo} alt="App Logo" height={100} />{' '}
         </Box>
       </Box>
-      <Grid container spacing={2} alignItems={'center'}>
+
+      <Grid container spacing={2}
+        justifyContent={'center'} px={'30px'} alignItems={'center'}>
         <Grid sx={{
-          '@media (max-width: 1200px)': {
+          '@media (max-width: 900px)': {
             display: 'none'
           },
-        }} item xs={12} sm={12} md={12} lg={6}>
+        }} item xs={12} sm={12} md={6}>
           <Image className='login-img' src={loginImg} alt="Login Image" layout="responsive" />
         </Grid>
-        <Grid item xs={12} sm={12} md={12} lg={6}>
+        <Grid item xs={12} sm={12} md={6}>
           <form onSubmit={handleFormSubmit}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <Box
@@ -267,18 +269,17 @@ const LoginPage = () => {
                 borderRadius={'2rem 2rem 0 0'}
                 marginTop={'-25px'}
                 sx={{
-                  '@media (min-width: 1200px)': {
-                    // border: '1px solid red',
-                    mr: '70px',
-                    width: 'fit-content',
+                  '@media (min-width: 900px)': {
+                    width: '100%',
                     borderRadius: '16px',
                     boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'
                   },
                 }}
               >
                 <Box
-                  position={'relative'}
+
                   sx={{
+                    width: '100%',
                     '@media (max-width: 700px)': {
                       width: '100%',
                     },
@@ -315,6 +316,9 @@ const LoginPage = () => {
                       '@media (max-width: 700px)': {
                         width: '100%',
                       },
+                      '@media (min-width: 900px)': {
+                        width: '100%',
+                      },
                     }}
                   >
                     <TextField
@@ -336,6 +340,9 @@ const LoginPage = () => {
                       '@media (max-width: 768px)': {
                         width: '100%',
                       },
+                      '@media (min-width: 900px)': {
+                        width: '100%',
+                      },
                     }}
                     margin={'2rem 0 0'}
                   >
@@ -420,7 +427,7 @@ const LoginPage = () => {
                       disabled={isButtonDisabled}
                       ref={loginButtonRef}
                       sx={{
-                        '@media (min-width: 1200px)': {
+                        '@media (min-width: 900px)': {
                           width: '50%'
                         }
                       }}

diff --git a/src/services/UpdateAssesmentService.ts b/src/services/UpdateAssesmentService.ts
@@ -27,29 +27,18 @@ export const getAssessmentSubjects = (): AssessmentSubject[] => {
     return [
         {
             userId: 1,
-            subject: 'Reading',
+            subject: 'Hindi',
             score: '210/250',
             date:'2 Feb, 2024'
         },
         {
             userId: 2,
-            subject: 'Writing',
+            subject: 'English',
             score: '60/75',
             date:'2 Feb, 2024' 
 
         },
-        {
-            userId: 3,
-            subject: 'Basic Mathematics',
-            score: '60/75',
-            date:'2 Feb, 2024' 
-        },
-        {
-            userId: 4,
-            subject: 'General Knowledge',
-            score: '60/75',
-            date:'2 Feb, 2024'
-        },
+
     ];
 };
 export const getAssessmentQuestion = (): AssessmentQuestion[] => {

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -998,8 +998,8 @@ legend.Mui-focused {
 }
 
 .login-img{
-  height: 750px !important;
-  width: 92% !important;
+  /* height: 500px !important; */
+  width: 90% !important;
 }
 
 .capitalize {
@@ -1008,10 +1008,22 @@ legend.Mui-focused {
 
 .MuiRadio-root.Mui-checked {
   color: var(--mui-palette-warning-300) !important;
-.__floater __floater__open {
+}
+
+.__floater __floater__open  {
   z-index: 9999 !important;
-}}
+}
 
 .react-joyride__spotlight {
   z-index: 9999 !important;
-}
+}
+
+/* Remove yellow border on focus */
+.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: var(--mui-palette-warning-300) !important;
+}
+
+/* Remove yellow color from label on focus */
+.MuiInputLabel-root.Mui-focused {
+  color: var(--mui-palette-warning-300) !important; 
+}