ref(replays): Remove unneeded TimelinePosition and fold its css into scrubber.tsx

[ryan953]

There are two components to talk about, the Timeline (top part of screen shot) and Scrubber (lower), lets take them each in turn.

Here's the Before/After:

	Before	After
Mouse @ ~2:15 (scrubber being hovered)
Mouse @ ~5:15 (scrubber being hovered)
Mouse @ ~5:15 (timeline being hovered)

1. Timeline

   • Keep background leading to the currentTime is still purple100
   • Change background leading to the mouseTime to be transparent (was purple100)
   • Proposing to re-add the right-border to the currentTime bar, so both currentTime and mouseTime have the same border-right-color: purple300
   • Removed rectangle above mouseTime right-edge. See Design Nit: Timeline should not have extra 'rectangle' sticking out above the hoverTime marker -> remove it #36815
   • Added border-left-radius to the currentTime background, so it doesn't poke out. See Design Nit: Timeline current & hover state doesn't have rounded corners, purple rectangles stick out past the border #36821

2. Scrubber

   • Change background leading to the currentTime is purple200 (was purple100)
     • When the round currentTime nub was not visible, the purple200 blends into the gray background too much imo
     • The background here was purple300 before fix(replays): timeline scrubber colors #36853, i think moving it to 100 was an accident
   • Keep background leading to the mouseTime is still transparent
   • Keep rectangle to mark the mouseTime is still present

3. Refactors

   • Don't need <TimelinePosition>. It was setting the border-right property for us, but now it's part of scrubber.tsx. Save a few dom nodes.

Fixes #36815
Fixes #36821

[ryan953]

cc @Jesse-Box I'm proposing some timeline color changes here, and fixing scrubber colors.

[Jesse-Box]

Hey man, I think you raise some good points here, and although I think the purple200 is too distracting for me personally, I understand you're trying to find the best for both cases.

Did you try replacing the scrubber's cursor style for the timeline one

[ryan953]

Hey man, I think you raise some good points here, and although I think the purple200 is too distracting for me personally, I understand you're trying to find the best for both cases.

Did you try replacing the scrubber's cursor style for the timeline one

Yeah purple200 is a big step up :( in both spots. They don’t have to be the same though!

For me in the timeline, without a border on the edge purple100 is ok against the white background, we could add a right border there to match the mouse cursor tracking. Then it’s like your moving that bar along.
But the scrubber with 200 on top the gray is really better imo. The scrubber I think still needs that rectangle thing, so it is visible when you hover to the left of the current time.

I think with the timeline when we made the purple area taller it kinda brought some stuff along for the ride, for example the overlapping transparencies from before.