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 5266a3978..cc588b39c 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', @@ -31,5 +31,59 @@ 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: 'center', + mb: { xs: '2px', sm: '24px' } + }, + labelsCoop: { + width: { xs: 'auto', sm: '100%' }, + display: 'flex', + justifyContent: 'space-between', + 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' + }, + wrapperMainLabelForCoop: { + width: '100%' + } } diff --git a/src/components/app-progress-bar-line/AppProgressBarLine.tsx b/src/components/app-progress-bar-line/AppProgressBarLine.tsx index cc7e26f19..b7cfed1bd 100644 --- a/src/components/app-progress-bar-line/AppProgressBarLine.tsx +++ b/src/components/app-progress-bar-line/AppProgressBarLine.tsx @@ -6,24 +6,49 @@ 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 { value: number userRole: UserRoleEnum | '' + isCooperationActivities?: boolean } const AppProgressBarLine: FC = ({ value, - userRole + userRole, + isCooperationActivities = false }) => { const { isMobile } = useBreakpoints() + const { t } = useTranslation() const labelsValue = userRole === UserRoleEnum.Student - ? [0, 25, 50, 75, 100] - : [0, 20, 40, 60, 80, 100] - - const labelsWithPercent = isMobile ? ( - + ? studentLabelsPercentage + : tutorLabelsPercentage + const labelsWithPercentForCooperation = ( + + + {t('cooperationDetailsPage.progressBar.yourProgress')} + + + + {`${value}% ${t('cooperationDetailsPage.progressBar.completed')}`} + + + + + {`${100 - value}% ${t('cooperationDetailsPage.progressBar.needToComplete')}`} + + + + + ) + const labelsWithPercentForProfile = isMobile ? ( + {`${value}%`} ) : ( @@ -37,12 +62,25 @@ const AppProgressBarLine: FC = ({ )) ) + const labelsWithPercent = isCooperationActivities + ? labelsWithPercentForCooperation + : labelsWithPercentForProfile return ( - - {labelsWithPercent} + + + {labelsWithPercent} + 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": "до завершення" + } } diff --git a/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx b/src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx index 52073d027..a0a877a22 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',