From d8c29c448a47e71cf064f44ad6ebe7c02bd57098 Mon Sep 17 00:00:00 2001 From: Nick Mitchell Date: Wed, 22 Jan 2025 17:15:06 -0500 Subject: [PATCH] fix: small tweaks to timeline ui rounded corners, plus fix a react warning Signed-off-by: Nick Mitchell --- pdl-live-react/src/view/timeline/Timeline.css | 12 ++++++++++-- pdl-live-react/src/view/timeline/TimelineBar.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/pdl-live-react/src/view/timeline/Timeline.css b/pdl-live-react/src/view/timeline/Timeline.css index 2690af1b..6915ec79 100644 --- 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,6 +55,7 @@ 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); @@ -61,7 +63,13 @@ 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 index 0a432fbf..aea70c93 100644 --- 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 (