From a8b69222b3a93257205d1ad7d681663687d770c5 Mon Sep 17 00:00:00 2001
From: leofvo <leofvo@proton.me>
Date: Wed, 15 Feb 2023 16:34:35 +0100
Subject: [PATCH] chore: improve course ui

---
 apps/polyflix/public/locales/en/courses.json           |  1 +
 apps/polyflix/public/locales/fr/courses.json           |  1 +
 .../ItemCollectionTimeline.component.tsx               | 10 ++++++++--
 .../polyflix/src/modules/courses/pages/[slug].page.tsx |  4 +++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/polyflix/public/locales/en/courses.json b/apps/polyflix/public/locales/en/courses.json
index 167fa607..a8861049 100644
--- 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
index 549f1723..4bdb3744 100644
--- 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/apps/polyflix/src/modules/collections/components/CollectionTimeline/ItemCollectionTimeline.component.tsx b/apps/polyflix/src/modules/collections/components/CollectionTimeline/ItemCollectionTimeline.component.tsx
index a4206d4f..242dc16d 100644
--- a/apps/polyflix/src/modules/collections/components/CollectionTimeline/ItemCollectionTimeline.component.tsx
+++ b/apps/polyflix/src/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,8 +117,12 @@ 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>
@@ -125,8 +130,9 @@ export const ItemCollectionTimeline = ({
                 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
index c3957a77..f3a407c5 100644
--- 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>