Stylistic cleanup

getsentry · Nov 27, 2023 · 21aeb52 · 21aeb52
1 parent 326c4b3
commit 21aeb52
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 13 deletions.
diff --git a/packages/overlay/src/components/SidePanel.tsx b/packages/overlay/src/components/SidePanel.tsx
@@ -17,7 +17,7 @@ export function SidePanelHeader({
         {subtitle && <h3 className="font-mono">{subtitle}</h3>}
       </div>
       <Link
-        className="-my-1 flex cursor-pointer  items-center justify-center rounded px-6 py-1 font-mono text-2xl hover:bg-indigo-900"
+        className="-my-1 flex cursor-pointer items-center justify-center rounded px-6 py-1 font-mono text-2xl hover:bg-indigo-900"
         to={backTo}
       >
         {'✕'}

diff --git a/packages/overlay/src/components/Tabs.tsx b/packages/overlay/src/components/Tabs.tsx
@@ -45,7 +45,7 @@ export default function Tabs({ tabs, nested }: Props) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <nav className="flex space-x-8 border-b border-b-indigo-900 px-6" aria-label="Tabs">
+        <nav className="flex space-x-8 border-b border-b-indigo-700 px-6" aria-label="Tabs">
           {tabs.map(tab => (
             <NavLink
               to={`${nested ? '' : '/'}${tab.id}`}

diff --git a/packages/overlay/src/integrations/sentry/components/EventDetails.tsx b/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
@@ -77,7 +77,7 @@ export default function EventDetails() {
         )}
       </div>
       <Tabs tabs={tabs} nested={true} />
-      <div className="flex-1 divide-indigo-900 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 px-6 py-4">
         <Routes>
           <Route path="breadcrumbs" element={<EventBreadcrumbs event={event} />} />
           <Route path="contexts" element={<EventContexts event={event} />} />

diff --git a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
@@ -57,9 +57,9 @@ export default function SpanDetails({
               </span>
             </div>
             <div className="flex-1">
-              <div className="relative h-8 border border-indigo-600 py-1">
+              <div className="relative h-8 border border-indigo-800 py-1">
                 <div
-                  className="absolute bottom-0 top-0 -m-0.5 flex w-full items-center bg-indigo-600 p-0.5"
+                  className="absolute bottom-0 top-0 -m-0.5 flex w-full items-center bg-indigo-800 p-0.5"
                   style={{
                     left: `min(${((span.start_timestamp - startTimestamp) / totalDuration) * 100}%, 100% - 1px)`,
                     width: `max(1px, ${(spanDuration / totalDuration) * 100}%)`,

diff --git a/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx b/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import dataCache from '../data/sentryDataCache';
 import { getDuration } from '../utils/duration';
 import DateTime from './DateTime';
@@ -21,12 +21,17 @@ export default function TraceDetails() {
 
   return (
     <>
-      <div className="flex items-center gap-x-2 bg-indigo-950 px-6  py-4">
+      <div className="flex items-center gap-x-2 border-b border-b-indigo-700 bg-indigo-950 px-6 py-4">
         <PlatformIcon platform={trace.rootTransaction?.platform} />
         <h1 className="max-w-full flex-1 truncate text-2xl">{trace.rootTransactionName}</h1>
         <div className="font-mono text-indigo-300">
           <div>T: {trace.trace_id}</div>
-          <div>S: {trace.span_id}</div>
+          <div>
+            S:{' '}
+            <Link to={`/traces/${trace.trace_id}/${trace.span_id}`} className="underline">
+              {trace.span_id}
+            </Link>
+          </div>
         </div>
       </div>
       <div className="px-6 py-4">
@@ -44,18 +49,17 @@ export default function TraceDetails() {
           </span>
         </div>
       </div>
-      <div className="flex-1 divide-indigo-900 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 px-2 pb-6">
         <SpanTree
           traceContext={trace}
           tree={trace.spanTree}
           startTimestamp={startTimestamp}
           totalDuration={totalDuration}
         />
-
-        {span ? (
-          <SpanDetails traceContext={trace} startTimestamp={startTimestamp} totalDuration={totalDuration} span={span} />
-        ) : null}
       </div>
+      {span ? (
+        <SpanDetails traceContext={trace} startTimestamp={startTimestamp} totalDuration={totalDuration} span={span} />
+      ) : null}
     </>
   );
 }