From 299f215c80754a58f66bd9543c3045d312a1a7c2 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 12:08:44 +0100
Subject: [PATCH] Fix issue with active day indicator

---
 .../Timeline/components/WeekHeading/index.tsx     |  9 ++++-----
 src/components/pages/Timeline/index.tsx           | 15 ++++++++++-----
 src/components/pages/Timeline/style.module.scss   |  1 -
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/Timeline/components/WeekHeading/index.tsx b/src/components/pages/Timeline/components/WeekHeading/index.tsx
index 0f4e04d9d..ccf325ce9 100644
--- a/src/components/pages/Timeline/components/WeekHeading/index.tsx
+++ b/src/components/pages/Timeline/components/WeekHeading/index.tsx
@@ -27,14 +27,13 @@ const WeekHeading: React.FC<WeekHeadingProps> = ({
       </Card.Header>
       <Card.Body>
         {days.map((day, i) => {
+          let timeDifference =
+            dateRangeStart.getTime() + i * 86400000 - activeDay.getTime();
+          let isActive = timeDifference < 86400000 && timeDifference >= 0;
           return (
             <div
               key={day}
-              className={
-                activeDay.getDate() === dateRangeStart.getDate() + i
-                  ? styles.activeDay
-                  : styles.dayIndicator
-              }
+              className={isActive ? styles.activeDay : styles.dayIndicator}
             >
               {day}
             </div>
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 74111bf1d..f78e64c38 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -85,13 +85,17 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
 
   render() {
     const termStart = new Date("2020-09-28");
-    const activeDay = new Date("2020-10-07");
+    const activeDay = new Date("2020-10-01");
     const numWeeks = 11;
     const trackHeight = 4.25;
     const [moduleHeadings, timelineBackgrounds] = this.generateGridItems(
       numWeeks,
       trackHeight
     );
+    const activeColumn =
+      Math.ceil(
+        ((activeDay.getTime() - termStart.getTime()) / 86400000 / 7) * 6
+      ) + 1;
     return (
       <div className={styles.timelineContainer}>
         <MyBreadcrumbs />
@@ -124,14 +128,15 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
           <div
             className={styles.dayIndicatorGrid}
             style={{
-              gridTemplateColumns: `repeat(${numWeeks}, 3rem 3rem 3rem 3rem 3rem 0.625rem`
+              gridTemplateColumns: `repeat(${numWeeks}, 3rem 3rem 3rem 3rem 3rem 0.625rem`,
             }}
           >
             <div
               className={styles.dayIndicatorColumn}
-            >
-              &nbsp;
-            </div>
+              style={{
+                gridColumn: `${activeColumn} / ${activeColumn + 1}`,
+              }}
+            ></div>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index cd0d33c85..5e6f20fc3 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -135,7 +135,6 @@
 
 .dayIndicatorColumn {
   grid-row: 1;
-  grid-column: 9 / 10;
   margin-right: 0.75rem;
   margin-bottom: 0.625rem;
   margin-left: 0.75rem;
-- 
GitLab