Added reuseable Switch Component according to design systems

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,56 @@ 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'
+  }
 }

src/components/app-progress-bar-line/AppProgressBarLine.tsx

@@ -7,23 +7,45 @@ import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.st
 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 | ''
+  isCooperationActivities?: boolean
 }
 
 const AppProgressBarLine: FC<AppProgressBarLineProps> = ({
   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 ? (
-    <Typography color={'primary.500'} variant='subtitle2'>
+  const labelsWithPercentForCooperation = (
+    <Box width={'100%'}>
+      <Typography sx={styles.primaryLabelsCoop} variant='body2'>
+        {t('cooperationDetailsPage.progressBar.yourProgress')}
+      </Typography>
+      <Box sx={styles.wrapperTypographyProgressCoop}>
+        <Typography sx={styles.completedLabel} variant='h5'>
+          {`${value}% ${t('cooperationDetailsPage.progressBar.completed')}`}
+        </Typography>
+        <Box sx={styles.wrapperTitleWithIconCoop}>
+          <AccessTime sx={styles.accessTimeIcon} />
+          <Typography sx={styles.primaryLabelsCoop} variant='subtitle1'>
+            {`${100 - value}% ${t('cooperationDetailsPage.progressBar.needToComplete')}`}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+  const labelsWithPercentForProfile = isMobile ? (
+    <Typography color='primary.500' variant='subtitle2'>
       {`${value}%`}
     </Typography>
   ) : (
@@ -37,12 +59,25 @@ const AppProgressBarLine: FC<AppProgressBarLineProps> = ({
       </Typography>
     ))
   )
+  const labelsWithPercent = isCooperationActivities
+    ? labelsWithPercentForCooperation
+    : labelsWithPercentForProfile
 
   return (
-    <Box sx={styles.wrapperProgress}>
-      <Box sx={styles.labels}>{labelsWithPercent}</Box>
+    <Box
+      sx={
+        isCooperationActivities
+          ? styles.wrapperProgressCoop
+          : styles.wrapperProgress
+      }
+    >
+      <Box sx={isCooperationActivities ? styles.labelsCoop : styles.labels}>
+        {labelsWithPercent}
+      </Box>
       <LinearProgress
-        sx={styles.progress(value)}
+        sx={
+          isCooperationActivities ? styles.progressCoop : styles.progress(value)
+        }
         value={value}
         variant='determinate'
       />

src/components/app-switch/AppSwitch.styles.ts

@@ -0,0 +1,79 @@
+import { SizeEnum } from '~/types'
+
+const trackMixin = (width: number, borderWidth: number) => ({
+  position: 'absolute',
+  backgroundColor: '#F7F7F7 !important',
+  border: `${borderWidth}px solid`,
+  borderColor: 'primary.200',
+  borderRadius: `${width / 3}px`,
+  opacity: 1,
+  transition: 'background-color 0.3s ease, border-color 0.3s ease',
+  '&.Mui-disabled': {
+    color: 'primary.200'
+  }
+})
+
+const thumbMixin = (diameter: number) => ({
+  width: `${diameter}px`,
+  height: `${diameter}px`,
+  boxShadow: 'none',
+  transition: 'transform 0.3s ease, background-color 0.3s ease'
+})
+
+const switchBaseMixin = (rWidth: number, tWidth: number) => ({
+  position: 'relative',
+  color: 'primary.400',
+  padding: 0,
+  left: `${rWidth / 10}px`,
+  '&.Mui-checked': {
+    color: 'primary.800',
+    left: `${rWidth - tWidth - rWidth / 10 - 20}px` //source forces +20px on transformX (literally 2 days spent to investigate it) https://github.com/mui/material-ui/blob/v6.1.8/packages/mui-material/src/Switch/Switch.js
+  },
+  '&.Mui-disabled': {
+    color: 'primary.200'
+  }
+})
+
+const rootMixin = (width: number, height: number) => ({
+  display: 'flex',
+  alignItems: 'center',
+  width: `${width}px`,
+  height: `${height}px`,
+  overflow: 'visible',
+  padding: 0,
+  margin: '5px',
+  '&:hover': {
+    '& .MuiSwitch-track': {
+      borderColor: 'primary.500'
+    }
+  }
+})
+const getMixins = (
+  trackWidth: number,
+  trackHeight: number,
+  thumbDiameter: number,
+  trackBorderWidth: number
+): object => {
+  return {
+    '&': rootMixin(trackWidth, trackHeight),
+    '& .MuiSwitch-thumb': thumbMixin(thumbDiameter),
+    '& .MuiSwitch-track': trackMixin(trackWidth, trackBorderWidth),
+    '& .MuiSwitch-switchBase': switchBaseMixin(
+      trackWidth + trackBorderWidth * 2,
+      thumbDiameter
+    )
+  }
+}
+export const switchStyles: Record<string, object> = {
+  [SizeEnum.Small.toString()]: getMixins(45, 21, 15, 1),
+  [SizeEnum.Medium.toString()]: getMixins(60, 28, 20, 2),
+  [SizeEnum.Large.toString()]: getMixins(75, 35, 25, 3)
+}
+export const formLabelStyles = {
+  formLabelBox: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    overflow: 'visible'
+  }
+}

src/components/app-switch/AppSwitch.tsx

@@ -0,0 +1,30 @@
+import { SizeEnum } from '~/types'
+import Switch, { SwitchProps } from '@mui/material/Switch'
+import { switchStyles, formLabelStyles } from './AppSwitch.styles'
+import { FormControlLabel } from '@mui/material'
+interface AppSwitchProps extends Omit<SwitchProps, 'size'> {
+  labelPosition?: 'start' | 'end' | 'top' | 'bottom'
+  size?: SizeEnum
+  label?: string
+  loading?: boolean
+}
+export const AppSwitch = ({
+  labelPosition = 'end',
+  size = SizeEnum.Small,
+  label,
+  loading,
+  disabled,
+  ...props
+}: AppSwitchProps) => {
+  const sizeStyle = switchStyles[size]
+  return (
+    <FormControlLabel
+      control={
+        <Switch disabled={loading || disabled} sx={sizeStyle} {...props} />
+      }
+      label={label ? label : ''}
+      labelPlacement={labelPosition}
+      sx={formLabelStyles.formLabelBox}
+    />
+  )
+}

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"
+  }
 }

src/constants/translations/uk/cooperation-details.json

@@ -24,5 +24,10 @@
   "tutoringSubject": "Предмет і рівень:",
   "aboutCooperation": "Про співпрацю:",
   "tutoringLanguages": "Мови:",
-  "pricing": "Ціна:"
+  "pricing": "Ціна:",
+  "progressBar": {
+    "yourProgress": "Ваш прогрес",
+    "completed": "виконано",
+    "needToComplete": "до завершення"
+  }
 }

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<SetStateAction<boolean>>
@@ -22,13 +23,20 @@ const CooperationActivitiesView: FC<CooperationActivitiesViewProps> = ({
   const { sections } = useAppSelector(cooperationsSelector)
   const { userRole } = useAppSelector((state) => state.appMain)
   const isTutor = userRole === UserRoleEnum.Tutor
-
+  const percentValue = 23
   const onEdit = () => {
     setEditMode(true)
   }
 
   return (
     <Box sx={styles.root}>
+      <Box>
+        <AppProgressBarLine
+          isCooperationActivities
+          userRole=''
+          value={percentValue}
+        />
+      </Box>
       {sections.map((item) => (
         <CooperationSectionView item={item} key={item.id} />
       ))}

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<CooperationActivitiesProps> = ({
   const dispatch = useAppDispatch()
   const { sections, resourcesAvailability } =
     useAppSelector(cooperationsSelector)
-
   const handleResourcesAvailabilityChange = (
     status: ResourcesAvailabilityEnum
   ) => {