change generate timeline part

src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx

@@ -98,10 +98,14 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
     }
   }
 
-  const generateDayDash = (index: number, dayCount: number) => {
+  const generateTimelinePart = (
+    index: number,
+    dayCount: number,
+    className: string
+  ) => {
     return (
       <div
-        className={`date-dash ${
+        className={`${className} ${
           (index === 0 && dayCount > 0) ||
           (index === getListOfWeeks().length - 1 && dayCount < 0)
             ? 'none'
@@ -117,17 +121,13 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
     return getListOfWeeks().map((day, index) => (
       <div key={index} className="day-solo">
         <div className="day-line-label">
-          {generateDayDash(index, 3)}
-          {generateDayDash(index, 2)}
-          {generateDayDash(index, 1)}
-          <div
-            className={`date-label ${
-              index * 7 < getListOfPastDays() ? 'past' : 'futur'
-            }`}
-          ></div>
-          {generateDayDash(index, -1)}
-          {generateDayDash(index, -2)}
-          {generateDayDash(index, -3)}
+          {generateTimelinePart(index, 3, 'date-dash')}
+          {generateTimelinePart(index, 2, 'date-dash')}
+          {generateTimelinePart(index, 1, 'date-dash')}
+          {generateTimelinePart(index, 0, 'date-label')}
+          {generateTimelinePart(index, -1, 'date-dash')}
+          {generateTimelinePart(index, -2, 'date-dash')}
+          {generateTimelinePart(index, -3, 'date-dash')}
         </div>
         <div className="day-letter">{day.letter}</div>
         <div className="day-date">{day.date}</div>
@@ -139,21 +139,9 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
     return getListOfDays().map((day, index) => (
       <div key={index} className="day-solo">
         <div className="day-line-label">
-          <div
-            className={`date-dash ${
-              index < getListOfPastDays() ? 'past' : 'futur'
-            }`}
-          ></div>
-          <div
-            className={`date-label ${
-              index < getListOfPastDays() ? 'past' : 'futur'
-            }`}
-          ></div>
-          <div
-            className={`date-dash ${
-              index + 1 < getListOfPastDays() ? 'past' : 'futur'
-            }`}
-          ></div>
+          {generateTimelinePart(index, 0, 'date-dash')}
+          {generateTimelinePart(index, 0, 'date-label')}
+          {generateTimelinePart(index + 1, 0, 'date-dash')}
         </div>
         <div className="day-letter">{day.letter}</div>
         <div className="day-date">{day.date}</div>