From 2e5fbef62c3917cac05741f48eea54110fe69cc4 Mon Sep 17 00:00:00 2001 From: ttpl-rt-214 Date: Wed, 14 Aug 2024 11:13:13 +0530 Subject: [PATCH 1/3] #PS-1317 fixPS-1527 UI Improvement --- src/components/CohortSelectionSection.tsx | 1 + src/components/CustomRangeModal.tsx | 2 +- src/components/DateRangePopup.tsx | 2 +- src/components/ManageUser.tsx | 6 +++--- src/pages/assessments/index.tsx | 5 +++-- src/services/UpdateAssesmentService.ts | 17 +++-------------- src/styles/globals.css | 10 ++++++++++ 7 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx index 0830e1d2..ab1c996c 100644 --- a/src/components/CohortSelectionSection.tsx +++ b/src/components/CohortSelectionSection.tsx @@ -315,6 +315,7 @@ const CohortSelectionSection: React.FC = ({ {blockName} {t('DASHBOARD.BLOCK')} diff --git a/src/components/CustomRangeModal.tsx b/src/components/CustomRangeModal.tsx index f2a6b0a9..c53a017d 100644 --- 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 index 4d5c50f5..b046abbe 100644 --- a/src/components/DateRangePopup.tsx +++ b/src/components/DateRangePopup.tsx @@ -400,7 +400,7 @@ const DateRangePopup: React.FC = ({ 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 index 5f5a9727..1b189f3a 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -631,7 +631,7 @@ const ManageUser: React.FC = ({ sx={{ gap: '15px', alignItems: 'center', - '@media (min-width: 900px)': { + '@media (min-width: 600px)': { background: theme.palette.action.selected, padding: '20px', borderRadius: '12px', @@ -648,7 +648,7 @@ const ManageUser: React.FC = ({ @@ -660,7 +660,7 @@ const ManageUser: React.FC = ({ 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 index dea3d2b1..bd5e678c 100644 --- 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: '#fff' }} onClick={() => handleAssessmentDetails(assessment.userId)} > @@ -304,8 +305,8 @@ const Assessments = () => { ); diff --git a/src/services/UpdateAssesmentService.ts b/src/services/UpdateAssesmentService.ts index 402e35c0..baef378a 100644 --- 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 index 49be981c..0274009f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1008,4 +1008,14 @@ legend.Mui-focused { .MuiRadio-root.Mui-checked { color: var(--mui-palette-warning-300) !important; +} + +/* Remove yellow border on focus */ +.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #1F1B13 !important; /* Set this to the desired color or 'inherit' to remove the focus color */ +} + +/* Remove yellow color from label on focus */ +.MuiInputLabel-root.Mui-focused { + color: #1F1B13 !important; /* Set this to the desired color or 'inherit' to remove the focus color */ } \ No newline at end of file From 336f102745d7cba9f3083fd9f59c7aadeee8ac1b Mon Sep 17 00:00:00 2001 From: ttpl-rt-214 Date: Wed, 14 Aug 2024 12:29:57 +0530 Subject: [PATCH 2/3] #PS-1317 fixPS-1527 UI Improvement --- src/pages/login.tsx | 27 +++++++++++++++++---------- src/styles/globals.css | 9 ++++++--- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/pages/login.tsx b/src/pages/login.tsx index d026a83e..b2bcadbf 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -245,15 +245,17 @@ const LoginPage = () => { App Logo{' '} - + + + }} item xs={12} sm={12} md={6}> Login Image - +
{ 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' }, }} > { '@media (max-width: 700px)': { width: '100%', }, + '@media (min-width: 900px)': { + width: '100%', + }, }} > { '@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/styles/globals.css b/src/styles/globals.css index 0274009f..8f7d5ba9 100644 --- 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 { @@ -1018,4 +1018,7 @@ legend.Mui-focused { /* Remove yellow color from label on focus */ .MuiInputLabel-root.Mui-focused { color: #1F1B13 !important; /* Set this to the desired color or 'inherit' to remove the focus color */ -} \ No newline at end of file +} +/* *{ + border: 1px solid red; +} */ \ No newline at end of file From cffbb52b44db43ebaac3a3fdb8c9c81b8ec8ffc8 Mon Sep 17 00:00:00 2001 From: ttpl-rt-214 Date: Wed, 14 Aug 2024 12:43:35 +0530 Subject: [PATCH 3/3] #PS-1317 fixPS-1527 UI Improvement --- src/pages/assessments/index.tsx | 2 +- src/styles/globals.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/assessments/index.tsx b/src/pages/assessments/index.tsx index bd5e678c..7548d278 100644 --- a/src/pages/assessments/index.tsx +++ b/src/pages/assessments/index.tsx @@ -214,7 +214,7 @@ const Assessments = () => { justifyContent: 'space-between', borderRadius: '8px', gap: '5px', - background: '#fff' + background: theme.palette.warning['A400'] }} onClick={() => handleAssessmentDetails(assessment.userId)} > diff --git a/src/styles/globals.css b/src/styles/globals.css index 5c27fc65..a7c3bfa8 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1010,7 +1010,7 @@ legend.Mui-focused { color: var(--mui-palette-warning-300) !important; } -.__floater .__floater__open { +.__floater __floater__open { z-index: 9999 !important; } @@ -1020,10 +1020,10 @@ legend.Mui-focused { /* Remove yellow border on focus */ .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { - border-color: #1F1B13 !important; + border-color: var(--mui-palette-warning-300) !important; } /* Remove yellow color from label on focus */ .MuiInputLabel-root.Mui-focused { - color: #1F1B13 !important; + color: var(--mui-palette-warning-300) !important; }