chore: improve course ui

polyflix · Feb 15, 2023 · a8b6922 · a8b6922
1 parent f87de9b
commit a8b6922
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/apps/polyflix/public/locales/en/courses.json b/apps/polyflix/public/locales/en/courses.json
@@ -8,6 +8,7 @@
     }
   },
   "collections": "Modules",
+  "collectionNumber": "Module {{number}}",
   "introduction": "Getting started",
   "courseCard": {
     "footerElements": "{{count}} module(s) in this course",

diff --git a/apps/polyflix/public/locales/fr/courses.json b/apps/polyflix/public/locales/fr/courses.json
@@ -8,6 +8,7 @@
     }
   },
   "collections": "Modules",
+  "collectionNumber": "Module {{number}}",
   "introduction": "Présentation",
   "courseCard": {
     "footerElements": "{{count}} module(s) dans ce cours",

diff --git a/...rc/modules/collections/components/CollectionTimeline/ItemCollectionTimeline.component.tsx b/...rc/modules/collections/components/CollectionTimeline/ItemCollectionTimeline.component.tsx
@@ -102,6 +102,7 @@ export const ItemCollectionTimeline = ({
         <TimelineSeparator>
           <TimelineDot
             color={+query.get('index')! === index ? 'primary' : 'grey'}
+            sx={{ textAlign: 'center' }}
           >
             <Icon name={elementIcon(element.type)} />
           </TimelineDot>
@@ -116,17 +117,22 @@ export const ItemCollectionTimeline = ({
                 variant="body1"
                 sx={{
                   textDecoration: isHover ? 'underline' : 'none',
-                  color: 'black',
                 }}
+                color={(theme) =>
+                  +query.get('index')! === index
+                    ? theme.palette.primary.main
+                    : theme.palette.grey[500]
+                }
               >
                 {element.name}
               </Typography>
               <Typography
                 variant="caption"
                 sx={{
                   textTransform: 'capitalize',
-                  color: 'black',
+                  opacity: 0.7,
                 }}
+                color={(theme) => theme.palette.grey[500]}
               >
                 {element.type}
               </Typography>

diff --git a/apps/polyflix/src/modules/courses/pages/[slug].page.tsx b/apps/polyflix/src/modules/courses/pages/[slug].page.tsx
@@ -217,7 +217,7 @@ export const CourseSlugPage = () => {
             <>
               <Stack spacing={2}>
                 <Typography variant="h4">{t('collections')}</Typography>
-                {course?.modules?.map((module) => (
+                {course?.modules?.map((module, index) => (
                   <>
                     {module.visibility === 'private' &&
                     user?.id != module.user?.id &&
@@ -230,6 +230,7 @@ export const CourseSlugPage = () => {
                             width: 'auto',
                           }}
                         >
+                          {t('collectionNumber', { number: index + 1 })} -{' '}
                           {module.name}
                         </Typography>
                         <Alert severity="error">
@@ -251,6 +252,7 @@ export const CourseSlugPage = () => {
                               width: 'auto',
                             }}
                           >
+                            {t('collectionNumber', { number: index + 1 })} -{' '}
                             {module.name}
                           </Typography>
                         </Link>