feat(replays): Iterate on Breadcrumb styles (#36396)

Added new styles to the breadcrumb component which highlights in a better way when the user is on its event.

Closes #36112

static/app/components/replays/playerRelativeTime.tsx

@@ -31,7 +31,7 @@ const PlayerRelativeTime = ({relativeTime, timestamp}: Props) => {
 
 const Value = styled('p')`
   color: ${p => p.theme.subText};
-  font-size: 0.9em;
+  font-size: ${p => p.theme.fontSizeSmall};
   font-variant-numeric: tabular-nums;
 `;
 

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

@@ -59,10 +59,13 @@ function BreadcrumbItem({
         <BreadcrumbIcon type={crumb.type} />
       </IconWrapper>
       <CrumbDetails>
-        <Title>{title}</Title>
+        <TitleContainer>
+          <Title>{title}</Title>
+          <PlayerRelativeTime relativeTime={startTimestamp} timestamp={crumb.timestamp} />
+        </TitleContainer>
+
         <Description title={description}>{description}</Description>
       </CrumbDetails>
-      <PlayerRelativeTime relativeTime={startTimestamp} timestamp={crumb.timestamp} />
     </CrumbItem>
   );
 }
@@ -71,19 +74,28 @@ const CrumbDetails = styled('div')`
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  line-height: 1.2;
-  padding: ${space(1)} 0;
+`;
+
+const TitleContainer = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  gap: ${space(1)};
 `;
 
 const Title = styled('span')`
   ${p => p.theme.overflowEllipsis};
   text-transform: capitalize;
+  font-weight: 600;
+  color: ${p => p.theme.gray400};
+  line-height: ${p => p.theme.text.lineHeightBody};
 `;
 
 const Description = styled('span')`
   ${p => p.theme.overflowEllipsis};
   font-size: 0.7rem;
   font-variant-numeric: tabular-nums;
+  line-height: ${p => p.theme.text.lineHeightBody};
+  color: ${p => p.theme.subText};
 `;
 
 type CrumbItemProps = {
@@ -93,32 +105,39 @@ type CrumbItemProps = {
 
 const CrumbItem = styled(PanelItem)<CrumbItemProps>`
   display: grid;
-  grid-template-columns: max-content max-content auto max-content;
-  align-items: center;
+  grid-template-columns: max-content auto;
+  align-items: flex-start;
   gap: ${space(1)};
   width: 100%;
 
   font-size: ${p => p.theme.fontSizeMedium};
   background: transparent;
-  padding: 0;
-  padding-right: ${space(1)};
+  padding: ${space(1)};
   text-align: left;
-
   border: none;
-  border-bottom: 1px solid ${p => p.theme.innerBorder};
-  ${p => p.isHovered && `background: ${p.theme.surface400};`}
-
-  /* overrides PanelItem css */
-  &:last-child {
-    border-bottom: 1px solid ${p => p.theme.innerBorder};
-  }
+  position: relative;
+  ${p => p.isSelected && `background-color: ${p.theme.purple100};`}
+  ${p => p.isHovered && `background-color: ${p.theme.surface100};`}
+  border-radius: ${p => p.theme.borderRadius};
 
-  /* Selected state */
-  ::before {
+  /* Draw a vertical line behind the breadcrumb icon. The line connects each row together, but is truncated for the first and last items */
+  &::after {
     content: '';
-    width: 4px;
+    position: absolute;
+    left: 19.5px;
+    width: 1px;
+    background: ${p => p.theme.gray200};
     height: 100%;
-    ${p => p.isSelected && `background-color: ${p.theme.purple300};`}
+  }
+
+  &:first-of-type::after {
+    top: ${space(1)};
+    bottom: 0;
+  }
+
+  &:last-of-type::after {
+    top: 0;
+    height: ${space(1)};
   }
 `;
 
@@ -129,13 +148,14 @@ const IconWrapper = styled('div')<Required<Pick<SVGIconProps, 'color'>>>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   color: ${p => p.theme.white};
   background: ${p => p.theme[p.color] ?? p.color};
   box-shadow: ${p => p.theme.dropShadowLightest};
   position: relative;
+  z-index: ${p => p.theme.zIndex.initial};
 `;
 
 const MemoizedBreadcrumbItem = memo(BreadcrumbItem);

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

@@ -23,7 +23,7 @@ function CrumbPlaceholder({number}: {number: number}) {
   return (
     <Fragment>
       {[...Array(number)].map((_, i) => (
-        <PlaceholderMargin key={i} height="40px" />
+        <PlaceholderMargin key={i} height="53px" />
       ))}
     </Fragment>
   );
@@ -138,21 +138,24 @@ const Panel = styled(BasePanel)`
 
 const PanelHeader = styled(BasePanelHeader)`
   background-color: ${p => p.theme.background};
-  border-bottom: none;
+  border-bottom: 1px solid ${p => p.theme.innerBorder};
   font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.gray300};
+  color: ${p => p.theme.gray500};
   text-transform: capitalize;
-  padding: ${space(1.5)} ${space(2)} ${space(0.5)};
+  padding: ${space(1)} ${space(1.5)} ${space(1)};
+  font-weight: 600;
 `;
 
 const PanelBody = styled(BasePanelBody)`
+  padding: ${space(0.5)};
   overflow-y: auto;
   max-height: calc(100% - ${TAB_HEADER_HEIGHT}px);
 `;
 
 const PlaceholderMargin = styled(Placeholder)`
-  margin: ${space(1)} ${space(1.5)};
+  margin: ${space(1)} 0;
   width: auto;
+  border-radius: ${p => p.theme.borderRadius};
 `;
 
 export default Breadcrumbs;