fix(trace-view): Styling adjustments to match new design (#83459)

## Before ![image](https://github.com/user-attachments/assets/3aaa8cd4-66a0-4e87-9360-831331ad5045) ## After ![image](https://github.com/user-attachments/assets/293b0a69-e2c5-4730-b04a-17cabcd958aa)
getsentry · Jan 15, 2025 · 7e3d477 · 7e3d477
1 parent 844df2b
commit 7e3d477
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -406,6 +406,7 @@ export function Trace({
         className="TraceIndicatorsContainer"
         ref={manager.registerIndicatorContainerRef}
       >
+        <div className="TraceIndicatorContainerMiddleLine" />
         {trace.indicators.length > 0
           ? trace.indicators.map((indicator, i) => {
               const status =
@@ -776,7 +777,7 @@ const TraceStylingWrapper = styled('div')`
 
     &:before {
       background-color: ${p => p.theme.background};
-      height: 44px;
+      height: 38px;
 
       .TraceScrollbarContainer {
         height: 44px;
@@ -785,7 +786,7 @@ const TraceStylingWrapper = styled('div')`
 
     .TraceIndicator.Timeline {
       .TraceIndicatorLabelContainer {
-        top: 26px;
+        top: 22px;
       }
       .TraceIndicatorLine {
         top: 30px;
@@ -803,9 +804,10 @@ const TraceStylingWrapper = styled('div')`
     left: 0;
     top: 0;
     width: 100%;
-    height: 26px;
-    background-color: ${p => p.theme.backgroundSecondary};
+    height: 38px;
+    background-color: ${p => p.theme.background};
     border-bottom: 1px solid ${p => p.theme.border};
+    z-index: 10;
   }
 
   &.Loading {
@@ -833,7 +835,7 @@ const TraceStylingWrapper = styled('div')`
   .TraceScrollbarContainer {
     left: 0;
     top: 0;
-    height: 26px;
+    height: 38px;
     position: absolute;
     overflow-x: auto;
     overscroll-behavior: none;
@@ -887,6 +889,14 @@ const TraceStylingWrapper = styled('div')`
     pointer-events: none;
   }
 
+  .TraceIndicatorContainerMiddleLine {
+    position: absolute;
+    top: 18px;
+    background-color: ${p => p.theme.border};
+    width: 100%;
+    height: 1px;
+  }
+
   .TraceIndicatorLabelContainer {
     min-width: 34px;
     text-align: center;
@@ -895,7 +905,7 @@ const TraceStylingWrapper = styled('div')`
     font-weight: ${p => p.theme.fontWeightBold};
     color: ${p => p.theme.textColor};
     background-color: ${p => p.theme.background};
-    border-radius: ${p => p.theme.borderRadius};
+    border-radius: 100px;
     border: 1px solid ${p => p.theme.border};
     display: inline-block;
     line-height: 1;
@@ -929,6 +939,7 @@ const TraceStylingWrapper = styled('div')`
 
   .TraceIndicatorLabel {
     padding: 2px;
+    border-radius: 100px;
   }
 
   .TraceIndicator {
@@ -1020,7 +1031,7 @@ const TraceStylingWrapper = styled('div')`
       .TraceIndicatorLabelContainer {
         font-weight: ${p => p.theme.fontWeightNormal};
         min-width: 0;
-        top: 8px;
+        top: 22px;
         width: auto;
         border: none;
         background-color: transparent;

diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx
@@ -739,7 +739,7 @@ const TabsHeightContainer = styled('div')<{
   left: ${p => (p.layout === 'drawer left' ? '0' : 'initial')};
   right: ${p => (p.layout === 'drawer right' ? '0' : 'initial')};
   position: ${p => (p.absolute ? 'absolute' : 'relative')};
-  height: ${p => (p.hasIndicators ? '38px' : '26px')};
+  height: 38px;
   border-bottom: 1px solid ${p => p.theme.border};
   display: flex;
 `;