ref(replay): Centralize some duplicate replay css (#68818)

static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx

@@ -1,6 +1,5 @@
 import type {CSSProperties, MouseEvent} from 'react';
 import {useCallback} from 'react';
-import styled from '@emotion/styled';
 import classNames from 'classnames';
 
 import BreadcrumbItem from 'sentry/components/replays/breadcrumbs/breadcrumbItem';
@@ -58,7 +57,7 @@ export default function BreadcrumbRow({
     currentHoverTime === undefined || currentHoverTime >= frame.offsetMs;
 
   return (
-    <StyledTimeBorder
+    <BreadcrumbItem
       className={classNames({
         beforeCurrentTime: hasOccurred,
         afterCurrentTime: !hasOccurred,
@@ -66,25 +65,16 @@ export default function BreadcrumbRow({
         afterHoverTime: currentHoverTime !== undefined ? !isBeforeHover : undefined,
       })}
       style={style}
-    >
-      <BreadcrumbItem
-        frame={frame}
-        traces={traces}
-        extraction={extraction}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        startTimestampMs={startTimestampMs}
-        expandPaths={expandPaths}
-        onDimensionChange={handleDimensionChange}
-        onInspectorExpanded={handleObjectInspectorExpanded}
-      />
-    </StyledTimeBorder>
+      frame={frame}
+      traces={traces}
+      extraction={extraction}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      startTimestampMs={startTimestampMs}
+      expandPaths={expandPaths}
+      onDimensionChange={handleDimensionChange}
+      onInspectorExpanded={handleObjectInspectorExpanded}
+    />
   );
 }
-
-const StyledTimeBorder = styled('div')`
-  /* Overridden in TabItemContainer, depending on *CurrentTime and *HoverTime classes */
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-`;

static/app/views/replays/detail/console/consoleLogRow.tsx

@@ -1,5 +1,5 @@
 import type {CSSProperties} from 'react';
-import {memo, useCallback} from 'react';
+import {useCallback} from 'react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 
@@ -25,7 +25,7 @@ interface Props extends ReturnType<typeof useCrumbHandlers> {
   onDimensionChange?: OnDimensionChange;
 }
 
-function UnmemoizedConsoleLogRow({
+export default function ConsoleLogRow({
   currentHoverTime,
   currentTime,
   expandPaths,
@@ -99,10 +99,6 @@ const ConsoleLog = styled('div')<{
       ? p.theme.alert[String(p.level)].backgroundLight
       : 'inherit'};
 
-  /* Overridden in TabItemContainer, depending on *CurrentTime and *HoverTime classes */
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-
   color: ${p => p.theme.gray400};
 
   /*
@@ -151,6 +147,3 @@ const Message = styled('div')`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-
-const ConsoleLogRow = memo(UnmemoizedConsoleLogRow);
-export default ConsoleLogRow;

static/app/views/replays/detail/tabItemContainer.tsx

@@ -8,6 +8,12 @@ const TabItemContainer = styled('div')`
   border-radius: ${p => p.theme.borderRadius};
   display: grid;
 
+  .beforeCurrentTime,
+  .afterCurrentTime {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
   .beforeHoverTime + .afterHoverTime {
     border-top-color: ${p => p.theme.purple200};
   }