fix: small tweaks to timeline ui

rounded corners, plus fix a react warning Signed-off-by: Nick Mitchell <[email protected]>
IBM · Jan 22, 2025 · d8c29c4 · d8c29c4
1 parent cc19e35
commit d8c29c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/pdl-live-react/src/view/timeline/Timeline.css b/pdl-live-react/src/view/timeline/Timeline.css
@@ -42,7 +42,8 @@
   height: 0.875em;
   line-height: 0.875em;
 
-  border: 1px solid var(--pf-t--global--background--color--secondary--default);
+  border-radius: 2px / 4px;
+  background-color: var(--pf-t--global--background--color--control--read-only);
   transition: background-color var(--pf-t--global--motion--delay--short)
     var(--pf-t--global--motion--timing-function--default);
   &:hover {
@@ -54,14 +55,21 @@
   position: absolute;
   min-width: 1px;
 
+  border-radius: 2px / 4px;
   background-color: var(--pf-t--global--background--color--inverse--default);
   transition: background-color var(--pf-t--global--motion--delay--short)
     var(--pf-t--global--motion--timing-function--default);
   &:hover {
     background-color: var(--pf-t--global--color--brand--hover);
   }
 
+  &[data-kind="text"] {
+    background-color: var(--pf-t--global--icon--color--disabled);
+  }
+  &[data-kind="repeat_until"] {
+    background-color: var(--pf-t--global--background--color--secondary--hover);
+  }
   &[data-kind="model"] {
-    background-color: var(--pf-t--global--icon--color--severity--none--default);
+    background-color: var(--pf-t--global--text--color--brand--default);
   }
 }
diff --git a/pdl-live-react/src/view/timeline/TimelineBar.tsx b/pdl-live-react/src/view/timeline/TimelineBar.tsx
@@ -14,7 +14,7 @@ export default function TimelineBar({
       left: (100 * (start_nanos - min)) / (max - min) + "%",
       width: (100 * (end_nanos - start_nanos)) / (max - min) + "%",
     }),
-    [start_nanos, end_nanos],
+    [start_nanos, end_nanos, min, max],
   )
 
   return (