From 6f2d24a05af48987a9cd2d0a76bbede3e9e57d65 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 12 Mar 2024 08:24:51 -0500
Subject: [PATCH] add minor ticks to timeline

---
 web/src/components/timeline/segment-metadata.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index e7015b9e8..c570d2a9d 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -64,8 +64,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
           className={`h-0.5 ${
             timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0
-              ? "w-[12px] bg-gray-400"
-              : "w-[8px] bg-gray-600"
+              ? "w-[12px] bg-neutral-600"
+              : timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) ===
+                    0 && timestamp.getSeconds() === 0
+                ? "w-[8px] bg-neutral-500 dark:bg-neutral-600" // Minor tick mark
+                : "w-[5px] bg-neutral-400 dark:bg-neutral-700"
           }`}
         ></div>
       </div>
@@ -81,11 +84,11 @@ export function Timestamp({
   segmentKey,
 }: TimestampSegmentProps) {
   return (
-    <div className="absolute left-[15px] top-[1px] h-2 z-10">
+    <div className="absolute left-[15px] h-2 z-10">
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
         <div
           key={`${segmentKey}_timestamp`}
-          className="text-[8px] text-gray-400"
+          className="text-[8px] text-neutral-600"
         >
           {timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0 &&