From 2cc5e2604a2c0c19f293b6e395d9c71bfda922b3 Mon Sep 17 00:00:00 2001 From: Zhayvoronok Kateryna <1gayv425@gmail.com> Date: Wed, 13 Nov 2024 15:23:11 +0200 Subject: [PATCH 1/7] Added Progress Bae for Cooperation --- src/assets/img/cooperation-details/clock.svg | 3 ++ .../AppProgressBarLine.styles.ts | 27 +++++++++++- .../AppProgressBarLine.tsx | 43 ++++++++++++++++--- .../CooperationActivitiesView.tsx | 10 ++++- .../CooperationActivities.tsx | 2 - src/styles/app-theme/app.pallete.ts | 2 + 6 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 src/assets/img/cooperation-details/clock.svg diff --git a/src/assets/img/cooperation-details/clock.svg b/src/assets/img/cooperation-details/clock.svg new file mode 100644 index 000000000..f1f9585d8 --- /dev/null +++ b/src/assets/img/cooperation-details/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts index 5266a3978..3a7237910 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts +++ b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts @@ -31,5 +31,30 @@ export const styles = { ${palette.basic.yellowGreen} ${175 - progress}%, ${palette.basic.fruitSalad} ${200 - progress}%)` } - }) + }), + progressCoop: { + display: 'flex', + alignItems: 'center', + width: '100%', + height: '12px', + backgroundColor: `${palette.basic.turquoise100}`, + borderRadius: '5px', + '& .MuiLinearProgress-bar': { + borderRadius: '5px', + background: `${palette.basic.turquoise500}` + } + }, + wrapperProgressCoop: { + width: '100%', + display: 'flex', + flexDirection: { xs: 'row-reverse', sm: 'column' }, + alignItems: { xs: 'center' }, + marginBottom: { xs: '2px', sm: '24px' } + }, + wrapperTypographyProgressCoop: { + width: '100%', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-end' + } } diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index cc7e26f19..dd6c63ca8 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -7,23 +7,46 @@ import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.st import { LinearProgress } from '@mui/material' import { UserRoleEnum } from '~/types' +import Image from '~/assets/img/cooperation-details/clock.svg' + interface AppProgressBarLineProps { value: number userRole: UserRoleEnum | '' + isCooperationActivities?: boolean } const AppProgressBarLine: FC = ({ value, - userRole + userRole, + isCooperationActivities = false }) => { const { isMobile } = useBreakpoints() const labelsValue = userRole === UserRoleEnum.Student ? [0, 25, 50, 75, 100] : [0, 20, 40, 60, 80, 100] - - const labelsWithPercent = isMobile ? ( - + const labelsWithPercentForCooperation = ( + + + Your progress + + + + {`${value}% completed`} + + + + + {`${100 - value}% to complete`} + + + + + ) + const labelsWithPercent = isCooperationActivities ? ( + labelsWithPercentForCooperation + ) : isMobile ? ( + {`${value}%`} ) : ( @@ -39,10 +62,18 @@ const AppProgressBarLine: FC = ({ ) return ( - + {labelsWithPercent} diff --git a/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx b/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx index 52073d027..6b75cad50 100644 --- a/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx +++ b/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx @@ -11,6 +11,7 @@ import { cooperationsSelector } from '~/redux/features/cooperationsSlice' import { UserRoleEnum } from '~/types' import { useAppSelector } from '~/hooks/use-redux' +import AppProgressBarLine from '~/components/app-progress-bar-line/AppProgressBarLine' interface CooperationActivitiesViewProps { setEditMode: Dispatch> @@ -22,13 +23,20 @@ const CooperationActivitiesView: FC = ({ const { sections } = useAppSelector(cooperationsSelector) const { userRole } = useAppSelector((state) => state.appMain) const isTutor = userRole === UserRoleEnum.Tutor - + const percentValue = 23 const onEdit = () => { setEditMode(true) } return ( + + + {sections.map((item) => ( ))} diff --git a/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx b/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx index 6bdafeeee..0e22ead56 100644 --- a/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx +++ b/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx @@ -24,7 +24,6 @@ import { cooperationsSelector, setResourcesAvailability } from '~/redux/features/cooperationsSlice' - import { snackbarVariants } from '~/constants' import { ResourcesAvailabilityEnum, @@ -55,7 +54,6 @@ const CooperationActivities: FC = ({ const dispatch = useAppDispatch() const { sections, resourcesAvailability } = useAppSelector(cooperationsSelector) - const handleResourcesAvailabilityChange = ( status: ResourcesAvailabilityEnum ) => { diff --git a/src/styles/app-theme/app.pallete.ts b/src/styles/app-theme/app.pallete.ts index 15c34de20..af978b808 100644 --- a/src/styles/app-theme/app.pallete.ts +++ b/src/styles/app-theme/app.pallete.ts @@ -24,6 +24,8 @@ const palette = { turquoiseChat: '#A0F0F2', turquoiseLight: '#F5FFFF', turquoise50: '#F2FAFA', + turquoise100: '#DAF1F1', + turquoise500: '#47B8B8', turquoise700: '#2B6E6E', blueGray: '#607D8B', bismark: '#546E7A', From 4c580d7a1f533236308034be6e5aa7d4c31ad077 Mon Sep 17 00:00:00 2001 From: Zhayvoronok Kateryna <1gayv425@gmail.com> Date: Wed, 13 Nov 2024 16:00:34 +0200 Subject: [PATCH 2/7] Changed labels sizes and margin bottom for labels --- .../AppProgressBarLine.styles.ts | 7 +++++++ .../app-progress-bar-line/AppProgressBarLine.tsx | 14 ++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts index 3a7237910..1342a3560 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts +++ b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts @@ -51,6 +51,13 @@ export const styles = { alignItems: { xs: 'center' }, marginBottom: { xs: '2px', sm: '24px' } }, + labelsCoop: { + width: { xs: 'auto', sm: '100%' }, + display: 'flex', + justifyContent: 'space-between', + marginBottom: { xs: '0', sm: '0px' }, + marginLeft: { xs: '20px', sm: '0' } + }, wrapperTypographyProgressCoop: { width: '100%', display: 'flex', diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index dd6c63ca8..44e42d5ae 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -27,16 +27,20 @@ const AppProgressBarLine: FC = ({ : [0, 20, 40, 60, 80, 100] const labelsWithPercentForCooperation = ( - + Your progress - + {`${value}% completed`} - + {`${100 - value}% to complete`} @@ -69,7 +73,9 @@ const AppProgressBarLine: FC = ({ : styles.wrapperProgress } > - {labelsWithPercent} + + {labelsWithPercent} + Date: Wed, 13 Nov 2024 16:05:33 +0200 Subject: [PATCH 3/7] Fixed Sonar issue --- .../app-progress-bar-line/AppProgressBarLine.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index 44e42d5ae..8bfe745e7 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -47,9 +47,7 @@ const AppProgressBarLine: FC = ({ ) - const labelsWithPercent = isCooperationActivities ? ( - labelsWithPercentForCooperation - ) : isMobile ? ( + const labelsWithPercentForProfile = isMobile ? ( {`${value}%`} @@ -64,6 +62,9 @@ const AppProgressBarLine: FC = ({ )) ) + const labelsWithPercent = isCooperationActivities + ? labelsWithPercentForCooperation + : labelsWithPercentForProfile return ( Date: Thu, 14 Nov 2024 11:27:56 +0200 Subject: [PATCH 4/7] Refactored: CSS file improvement --- .../AppProgressBarLine.styles.ts | 33 +++++++++++++++---- .../AppProgressBarLine.tsx | 17 ++++------ .../CooperationActivitiesView.tsx | 2 +- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts index 1342a3560..f36d93710 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts +++ b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts @@ -6,14 +6,14 @@ export const styles = { display: 'flex', flexDirection: { xs: 'row-reverse', sm: 'column' }, alignItems: { xs: 'center' }, - marginTop: { xs: '8px', sm: '40px' } + mt: { xs: '8px', sm: '40px' } }, labels: { width: { xs: 'auto', sm: '100%' }, display: 'flex', justifyContent: 'space-between', - marginBottom: { xs: '0', sm: '10px' }, - marginLeft: { xs: '20px', sm: '0' } + mb: { xs: '0', sm: '10px' }, + ml: { xs: '20px', sm: '0' } }, progress: (progress: number) => ({ display: 'flex', @@ -48,20 +48,39 @@ export const styles = { width: '100%', display: 'flex', flexDirection: { xs: 'row-reverse', sm: 'column' }, - alignItems: { xs: 'center' }, - marginBottom: { xs: '2px', sm: '24px' } + alignItems: 'center', + mb: { xs: '2px', sm: '24px' } }, labelsCoop: { width: { xs: 'auto', sm: '100%' }, display: 'flex', justifyContent: 'space-between', - marginBottom: { xs: '0', sm: '0px' }, - marginLeft: { xs: '20px', sm: '0' } + mb: '0', + ml: { xs: '20px', sm: '0' } }, wrapperTypographyProgressCoop: { width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' + }, + accessTimeIcon: { + color: 'primary.500', + mr: '8px', + fontSize: '1rem', + display: 'flex', + alignItems: 'flex-end' + }, + primaryLabelsCoop: { + color: 'primary.500', + fontSize: '12px' + }, + completedLabel: { + color: `${palette.basic.turquoise700}`, + fontSize: '20px' + }, + wrapperTitleWithIconCoop: { + display: 'flex', + alignItems: 'center' } } diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index 8bfe745e7..574234ac1 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -7,8 +7,7 @@ import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.st import { LinearProgress } from '@mui/material' import { UserRoleEnum } from '~/types' -import Image from '~/assets/img/cooperation-details/clock.svg' - +import { AccessTime } from '@mui/icons-material' interface AppProgressBarLineProps { value: number userRole: UserRoleEnum | '' @@ -27,20 +26,16 @@ const AppProgressBarLine: FC = ({ : [0, 20, 40, 60, 80, 100] const labelsWithPercentForCooperation = ( - + Your progress - + {`${value}% completed`} - - - + + + {`${100 - value}% to complete`} diff --git a/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx b/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx index 6b75cad50..a0a877a22 100644 --- a/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx +++ b/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx @@ -33,7 +33,7 @@ const CooperationActivitiesView: FC = ({ From 5df89ad1aec70c368f92c15f7578136bb0180431 Mon Sep 17 00:00:00 2001 From: Zhayvoronok Kateryna <1gayv425@gmail.com> Date: Thu, 14 Nov 2024 21:42:02 +0200 Subject: [PATCH 5/7] Added ua/en translation for labels --- .../app-progress-bar-line/AppProgressBarLine.tsx | 8 +++++--- src/constants/translations/en/cooperation-details.json | 7 ++++++- src/constants/translations/uk/cooperation-details.json | 7 ++++++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index 574234ac1..e41478ad3 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -8,6 +8,7 @@ import { LinearProgress } from '@mui/material' import { UserRoleEnum } from '~/types' import { AccessTime } from '@mui/icons-material' +import { useTranslation } from 'react-i18next' interface AppProgressBarLineProps { value: number userRole: UserRoleEnum | '' @@ -20,6 +21,7 @@ const AppProgressBarLine: FC = ({ isCooperationActivities = false }) => { const { isMobile } = useBreakpoints() + const { t } = useTranslation() const labelsValue = userRole === UserRoleEnum.Student ? [0, 25, 50, 75, 100] @@ -27,16 +29,16 @@ const AppProgressBarLine: FC = ({ const labelsWithPercentForCooperation = ( - Your progress + {t('cooperationDetailsPage.progressBar.yourProgress')} - {`${value}% completed`} + {`${value}% ${t('cooperationDetailsPage.progressBar.completed')}`} - {`${100 - value}% to complete`} + {`${100 - value}% ${t('cooperationDetailsPage.progressBar.needToComplete')}`} diff --git a/src/constants/translations/en/cooperation-details.json b/src/constants/translations/en/cooperation-details.json index 77dd057bd..5a92b8b50 100644 --- a/src/constants/translations/en/cooperation-details.json +++ b/src/constants/translations/en/cooperation-details.json @@ -24,5 +24,10 @@ "tutoringSubject": "Tutoring subject & level:", "aboutCooperation": "About cooperation:", "tutoringLanguages": "Tutoring languages:", - "pricing": "Pricing:" + "pricing": "Pricing:", + "progressBar": { + "yourProgress": "Your progress", + "completed": "completed", + "needToComplete": "to complete" + } } diff --git a/src/constants/translations/uk/cooperation-details.json b/src/constants/translations/uk/cooperation-details.json index 1749df513..ec734340e 100644 --- a/src/constants/translations/uk/cooperation-details.json +++ b/src/constants/translations/uk/cooperation-details.json @@ -24,5 +24,10 @@ "tutoringSubject": "Предмет і рівень:", "aboutCooperation": "Про співпрацю:", "tutoringLanguages": "Мови:", - "pricing": "Ціна:" + "pricing": "Ціна:", + "progressBar": { + "yourProgress": "Ваш прогрес", + "completed": "виконано", + "needToComplete": "до завершення" + } } From 43c70ef209dafa3c2b72c0d4e763096c4af78911 Mon Sep 17 00:00:00 2001 From: Zhayvoronok Kateryna <1gayv425@gmail.com> Date: Thu, 14 Nov 2024 22:23:06 +0200 Subject: [PATCH 6/7] Deleted unused svg file --- src/assets/img/cooperation-details/clock.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/img/cooperation-details/clock.svg diff --git a/src/assets/img/cooperation-details/clock.svg b/src/assets/img/cooperation-details/clock.svg deleted file mode 100644 index f1f9585d8..000000000 --- a/src/assets/img/cooperation-details/clock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 730ebd2021d80faf0de44feaf1154be728349c15 Mon Sep 17 00:00:00 2001 From: Zhayvoronok Kateryna <1gayv425@gmail.com> Date: Thu, 21 Nov 2024 14:21:45 +0200 Subject: [PATCH 7/7] added constants file and replaced Main Cooperation Wrapper for Labels to styles --- .../AppProgressBarLine.constans.tsx | 2 ++ .../AppProgressBarLine.styles.ts | 3 +++ .../app-progress-bar-line/AppProgressBarLine.tsx | 11 +++++++---- 3 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 src/components/app-progress-bar-line/AppProgressBarLine.constans.tsx diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.constans.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.constans.tsx new file mode 100644 index 000000000..432d1eeb8 --- /dev/null +++ b/src/components/app-progress-bar-line/AppProgressBarLine.constans.tsx @@ -0,0 +1,2 @@ +export const studentLabelsPercentage = [0, 25, 50, 75, 100] +export const tutorLabelsPercentage = [0, 20, 40, 60, 80, 100] diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts index f36d93710..cc588b39c 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts +++ b/src/components/app-progress-bar-line/AppProgressBarLine.styles.ts @@ -82,5 +82,8 @@ export const styles = { wrapperTitleWithIconCoop: { display: 'flex', alignItems: 'center' + }, + wrapperMainLabelForCoop: { + width: '100%' } } diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index e41478ad3..b7cfed1bd 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -6,7 +6,10 @@ import useBreakpoints from '~/hooks/use-breakpoints' import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.styles' import { LinearProgress } from '@mui/material' import { UserRoleEnum } from '~/types' - +import { + studentLabelsPercentage, + tutorLabelsPercentage +} from './AppProgressBarLine.constans' import { AccessTime } from '@mui/icons-material' import { useTranslation } from 'react-i18next' interface AppProgressBarLineProps { @@ -24,10 +27,10 @@ const AppProgressBarLine: FC = ({ const { t } = useTranslation() const labelsValue = userRole === UserRoleEnum.Student - ? [0, 25, 50, 75, 100] - : [0, 20, 40, 60, 80, 100] + ? studentLabelsPercentage + : tutorLabelsPercentage const labelsWithPercentForCooperation = ( - + {t('cooperationDetailsPage.progressBar.yourProgress')}