Use purple highlight, remove icon highlighting, add minor glow effect…

…, misc cleanup
molly · Nov 25, 2023 · d18afcc · d18afcc
1 parent 0f3cd17
commit d18afcc
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 29 deletions.
diff --git a/src/components/timeline/Entry.js b/src/components/timeline/Entry.js
@@ -43,7 +43,6 @@ export default function Entry({
   const router = useRouter();
   const searchParams = useSearchParams();
   const isBrowserRendering = useIsBrowserRendering();
-  const ishighlighted = entry.readableId === searchParams.get("id");
 
   const [showCopiedPopup, setShowCopiedPopup] = useState(false);
   const [showLightbox, setShowLightbox] = useState(false);
@@ -109,6 +108,11 @@ export default function Entry({
     [entry.readableId, router.route]
   );
 
+  const isEntryHighlighted = useMemo(
+    () => entry.readableId === searchParams.get("id"),
+    [entry.readableId, searchParams]
+  );
+
   const renderIcon = () => {
     if (entry.faicon) {
       return (
@@ -435,15 +439,18 @@ export default function Entry({
       ref={shouldScrollToElement ? ref : null}
     >
       <div
-        className={`timeline-icon ${
-          (ishighlighted && "yellow") || entry.color || "purple"
-        }`}
+        className={clsx(
+          "timeline-icon",
+          entry.color || "purple"
+        )}
       >
         {renderIcon()}
       </div>
 
       <div
-        className={clsx("timeline-description", { highlight: ishighlighted })}
+        className={clsx("timeline-description", {
+          highlighted: isEntryHighlighted,
+        })}
       >
         <div className="entry-wrapper">
           {renderTimestampAndLinkIcons()}

diff --git a/src/styles/_tokens.sass b/src/styles/_tokens.sass
@@ -7,7 +7,7 @@ $md-breakpoint: 900
 $sm-breakpoint: 768
 $xs-breakpoint: 414
 
-$icon-colors: ("green": #59bf51, "red": #bf413e, "grey":#999999, "purple": #5948a4, "yellow": #FFC000)
+$icon-colors: ("green": #59bf51, "red": #bf413e, "grey":#999999, "purple": #5948a4)
 
 $accent: #5948a4
 // Color tokens beginning with "dark-" are used in dark mode.
@@ -60,8 +60,10 @@ $dark-filter-text: $dark-main-color
 /* Other colors ---------------------------------*/
 $timeline-line-color: #cccccc
 $timeline-icon-color: #ffffff
-$timeline-highlight-color: #ffc000
+$timeline-highlight-color: $accent
+$timeline-highlight-glow-color: lighten($accent, 20%)
 
 $dark-timeline-line-color: #444444
 $dark-timeline-icon-color: #cccccc
-$dark-timeline-highlight-color: #ffa000
+$dark-timeline-highlight-color: $dark-link-color
+$dark-timeline-highlight-glow-color: rgba(255, 255, 255, 0.5)
diff --git a/src/styles/main.sass b/src/styles/main.sass
@@ -232,8 +232,12 @@ article.timeline
   pointer-events: auto
   border: 1px solid $timeline-line-color
 
-  &.highlight
+  &.highlighted
     border: 3px solid $timeline-highlight-color
+    box-shadow: 0px 0px 10px 0px $timeline-highlight-glow-color
+
+    &::after
+      border-color: $timeline-highlight-color
 
   &::after
     background-color: $card-background
@@ -699,10 +703,16 @@ table
 
 /* RESPONSIVENESS */
 @media only screen and (min-width: #{$md-breakpoint + 1}px)
-  .timeline-entry.even .timeline-description:after
-    right: -8px
-    border-top-width: 1px
-    border-right-width: 1px
+  .timeline-entry.even 
+    .timeline-description:after
+      right: -8px
+      border-top-width: 1px
+      border-right-width: 1px
+
+    .timeline-description.highlighted:after
+      right: -9px
+      border-top-width: 3px
+      border-right-width: 3px
 
   header.page-header.timeline-page
     min-height: 250px
@@ -734,10 +744,16 @@ table
       width: 80%
 
 @media only screen and (max-width: #{$md-breakpoint}px) and (min-width: #{$xs-breakpoint + 1}px)
-  .timeline-entry.even .timeline-description:after
-    left: -8px
-    border-bottom-width: 1px
-    border-left-width: 1px
+  .timeline-entry.even
+    .timeline-description:after
+      left: -8px
+      border-bottom-width: 1px
+      border-left-width: 1px
+
+    .timeline-description.highlighted:after
+      right: -9px
+      border-top-width: 3px
+      border-right-width: 3px
 
 @media only screen and (min-width: #{$xs-breakpoint + 1}px)
   .timeline-description:after
@@ -751,10 +767,16 @@ table
     border-style: solid
     box-sizing: border-box
 
-  .timeline-entry.odd .timeline-description:after
-    left: -8px
-    border-bottom-width: 1px
-    border-left-width: 1px
+  .timeline-entry.odd
+    .timeline-description:after
+      left: -8px
+      border-bottom-width: 1px
+      border-left-width: 1px
+
+    .timeline-description.highlighted:after
+      left: -9px
+      border-bottom-width: 3px
+      border-left-width: 3px
 
   .image-right
     width: clamp(150px, 40%, 400px)
@@ -978,9 +1000,10 @@ table
   .timeline-description
     background-color: $dark-card-background
     border-color: $dark-timeline-line-color
-
-    &.highlight
-      border: 3px solid $dark-timeline-highlight-color
+
+    &.highlighted
+      border-color: $dark-timeline-highlight-color
+      box-shadow: 0px 0px 10px 0px $dark-timeline-highlight-glow-color 
 
     h2
       button .permalink-popup
@@ -1013,18 +1036,25 @@ table
     @each $name, $color in $icon-colors
       &.#{$name}
         background-color: darken($color, 20%)
-
+  
   .load-top
     button, a.button
       color: $dark-timeline-icon-color
       background-color: darken($accent, 20%)
 
   .timeline.dots::before
-    background: linear-gradient(180deg, $dark-timeline-line-color 25%, $dark-main-background 25%, $dark-main-background 50%, $dark-timeline-line-color 50%, $dark-timeline-line-color 75%, $dark-main-background 75%, $dark-main-background 100%)
+    background: linear-gradient(180deg, $dark-timeline-line-color 25%, $dark-main-background 25%, $dark-main-background 50%, $dark-timeline-line-color 50%, $dark-timeline-line-color 75%, $dark-main-background 75%, $dark-main-background 100%)  
 
-  .timeline-description:after
-    background-color: $dark-card-background
-    border-color: $dark-timeline-line-color
+  .timeline-description
+    &:after
+      background-color: $dark-card-background
+      border-color: $dark-timeline-line-color
+
+    &.highlighted
+      border-color: $dark-timeline-highlight-color 
+
+      &::after
+        border-color: $dark-timeline-highlight-color
 
   // Contribute
   table