Add corner rounding and stips based on location

src/components/App.scss

@@ -18,7 +18,10 @@ code {
 
 :root {
   --background-color: #{$white};
-  --secondary-background-color: #{$gray-100};
+	--secondary-background-color: #{$gray-100};
+	
+	--checker-even-color: #{$gray-100};
+	--checker-odd-color: #{$gray-200};
 
   --primary-text-color: #{$black};
   --secondary-text-color: #{$gray-700};
@@ -74,7 +77,10 @@ code {
 
 [data-theme="dark"] {
   --background-color: #{$gray-900};
-  --secondary-background-color: #{$gray-800};
+	--secondary-background-color: #{$gray-800};
+	
+	--checker-even-color: #{$gray-800};
+	--checker-odd-color: #{$gray-700};
 
   --primary-text-color: #{$white};
   --secondary-text-color: #{$gray-300};

src/components/pages/Timeline/index.tsx

@@ -5,6 +5,7 @@ import TermSwitcher from "./components/TermSwitcher";
 import ModuleHeading from "./components/ModuleHeading";
 import WeekHeading from "./components/WeekHeading";
 import { modulesList } from "../ModuleList/list";
+import classNames from "classnames";
 
 interface TimelineProps {
   initSideBar: () => void;
@@ -61,26 +62,31 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
       const tracks = this.state.moduleTracks[code];
       if (tracks) {
         const height = tracks.length * trackHeight;
-        for (let j = 0; j < numWeeks; j++) {
-          timelineBackgrounds.push(
-            <div
-							key={code + j}
-              style={{ height: `${height}rem` }}
-              className={styles.timelineBackground}
-            >
-              &nbsp;
-            </div>
-          );
-        }
+        const timelineBackgroundsClass = classNames(
+          i % 2 === 0
+            ? styles.timelineBackgroundEven
+            : styles.timelineBackgroundOdd,
+          i === 0 ? styles.timelineBackgroundFirst : "",
+          i === modulesList.length - 1 ? styles.timelineBackgroundLast : ""
+        );
         moduleHeadings.push(
           <div
-						key={code}
+            key={code}
             className={styles.moduleHeading}
             style={{ height: `${height}rem` }}
           >
             <ModuleHeading moduleCode={code} title={modulesList[i].title} />
           </div>
         );
+        for (let j = 0; j < numWeeks; j++) {
+          timelineBackgrounds.push(
+            <div
+              key={code + j}
+              style={{ height: `${height}rem` }}
+              className={timelineBackgroundsClass}
+            ></div>
+          );
+        }
       }
     }
     return (

src/components/pages/Timeline/style.module.scss

@@ -102,7 +102,20 @@
   padding-bottom: 0.625rem;
 }
 
-.timelineBackground {
-  background-color: var(--primary-button);
-	border-radius: 0.5rem;
+.timelineBackgroundEven {
+  background-color: var(--checker-even-color);
+}
+
+.timelineBackgroundOdd {
+  background-color: var(--checker-odd-color);
+}
+
+.timelineBackgroundFirst {
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+}
+
+.timelineBackgroundLast {
+	border-bottom-left-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
 }