Merge pull request #1339 from aryanpingle/main

Change timeline button borders for readability

Author: shiffman

src/components/TimestampTimeline.module.css

@@ -11,6 +11,12 @@
   display: flex;
   padding: 0;
   cursor: pointer;
+  
+  &:first-child {
+    /* border-top will be set by the variant */
+    border-top: none !important;
+  }
+
   & span {
     display: flex;
     align-items: center;
@@ -66,6 +72,10 @@
   & .time {
     color: var(--red);
   }
+
+  & .timestamp {
+    border-top: var(--border-red-light);
+  }
 }
 
 .cyan {
@@ -81,6 +91,10 @@
   & .time {
     color: var(--cyan);
   }
+
+  & .timestamp {
+    border-top: var(--border-cyan-light);
+  }
 }
 
 @media (--reduced) {

src/components/challenges/VideoSection.module.css

@@ -149,6 +149,8 @@
   color: var(--cyan);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: var(--red-lightest);
 }
 
 .partTimeline.hide,

src/components/tracks/OverviewTimeline.js

@@ -96,7 +96,7 @@ const ChapterSection = memo(
     return (
       <ul className={css.chapterList}>
         {chapter.title && (
-          <li>
+          <li className={css.chapterListItem}>
             <button
               className={cn(
                 css.chapterTitle,
@@ -129,7 +129,7 @@ const ChapterSection = memo(
                 return (
                   <li
                     key={`${video.slug}-${partIndex}`}
-                    className={cn(css.videoItem, {
+                    className={cn(css.videoItem, css.chapterListItem, {
                       [css.seen]: hasSeenPart,
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
@@ -146,7 +146,7 @@ const ChapterSection = memo(
             ) : (
               <li
                 key={video.slug}
-                className={cn(css.videoItem, {
+                className={cn(css.videoItem, css.chapterListItem, {
                   [css.seen]: hasSeenVideo,
                   [css.last]: isLastVideo
                 })}>

src/components/tracks/OverviewTimeline.module.css

@@ -36,6 +36,13 @@
   padding: 0;
 }
 
+.chapterListItem {
+  /*
+  CSS 'border' interferes with the track stop lines, so we use a box shadow that matches 'border-red-light'.
+  */
+  box-shadow: 0 -1px 0 rgba(255, 0, 0, 0.1);
+}
+
 .chapterTitle {
   position: relative;
   height: var(--baseline);

src/components/tracks/VideoSection.module.css

@@ -150,6 +150,8 @@
   color: var(--red);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: var(--red-lightest);
 }
 
 .overviewTimeline.hide,

src/styles/variables.css

@@ -111,6 +111,7 @@
   --border-red-light: 1px solid rgba(255, 0, 0, 0.1);
   --border-orange: 1px solid var(--orange);
   --border-cyan: 1px solid var(--cyan);
+  --border-cyan-light: 1px solid rgba(0, 128, 128, 0.1);
   --border-pink: 1px solid var(--pink);
 
   --box-padding: 25px;