Various cleanup of UI styles

getsentry · Nov 27, 2023 · dc616e4 · dc616e4
1 parent 7aa34ec
commit dc616e4
Show file tree

Hide file tree

Showing 18 changed files with 141 additions and 160 deletions.
diff --git a/packages/overlay/package.json b/packages/overlay/package.json
@@ -41,7 +41,6 @@
   "devDependencies": {
     "@sentry/types": "^7.77.0",
     "@spotlightjs/tsconfig": "workspace:*",
-    "@tailwindcss/forms": "^0.5.4",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

diff --git a/packages/overlay/src/components/CardList.tsx b/packages/overlay/src/components/CardList.tsx
@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export default function CardList(props: Omit<ComponentPropsWithoutRef<'div'>, 'className'>) {
+  return <div className="divide-y divide-indigo-900 border-y border-indigo-900 bg-indigo-950" {...props} />;
+}
diff --git a/packages/overlay/src/components/Debugger.tsx b/packages/overlay/src/components/Debugger.tsx
@@ -34,7 +34,7 @@ export default function Debugger({
       }}
     >
       <div className="sentry-debugger">
-        <div className="flex items-center gap-x-2 bg-indigo-950 px-6 py-4 text-indigo-200">
+        <div className="flex items-center gap-x-2 px-6 py-4 text-indigo-200">
           <h1 className="font-raleway flex flex-1 items-end gap-x-1 leading-7 opacity-80">
             <div className="inline-flex items-center gap-x-4">
               <Logo height={32} width={32} />
@@ -72,7 +72,7 @@ export default function Debugger({
             </div>
           </h1>
           <button
-            className="-my-1 -mr-3 cursor-pointer rounded bg-indigo-950 px-3 py-1 font-mono text-2xl hover:bg-black"
+            className="-my-1 -mr-3 cursor-pointer rounded px-3 py-1 font-mono text-2xl hover:bg-indigo-900"
             onClick={() => {
               setOpen(false);
             }}

diff --git a/packages/overlay/src/components/SidePanel.tsx b/packages/overlay/src/components/SidePanel.tsx
@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+export function SidePanelHeader({
+  title,
+  subtitle,
+  backTo,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  backTo: string;
+}) {
+  return (
+    <div className="mb-4 flex border-b border-b-indigo-400 pb-4">
+      <div className="flex-1">
+        <h2 className="text-xl text-indigo-300">{title}</h2>
+        {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"
+        to={backTo}
+      >
+        {'✕'}
+      </Link>
+    </div>
+  );
+}
+
+export default function SidePanel(props: Omit<ComponentPropsWithoutRef<'div'>, 'className'>) {
+  return (
+    <div
+      className="fixed bottom-0 left-1/4 right-0 top-0 h-full overflow-auto border-l border-l-indigo-400 bg-gradient-to-br from-indigo-900 to-indigo-950 to-20% px-6 py-4"
+      {...props}
+    />
+  );
+}
diff --git a/packages/overlay/src/components/Tabs.tsx b/packages/overlay/src/components/Tabs.tsx
@@ -46,7 +46,7 @@ export default function Tabs({ tabs, nested }: Props) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <nav className="-mb-px flex space-x-8 px-6" aria-label="Tabs">
+        <nav className="flex space-x-8 border-b border-b-indigo-900 px-6" aria-label="Tabs">
           {tabs.map(tab => (
             <Link
               to={`${nested ? '' : '/'}${tab.id}`}
@@ -55,7 +55,7 @@ export default function Tabs({ tabs, nested }: Props) {
                 tab.active
                   ? 'border-indigo-200 text-indigo-100'
                   : 'border-transparent text-indigo-400 hover:border-indigo-400 hover:text-indigo-100',
-                '-mx-2 flex whitespace-nowrap border-b-2 px-2 py-3 text-sm font-medium',
+                '-m-y -mx-2 flex whitespace-nowrap border-b-2 px-2 py-3 text-sm font-medium',
               )}
               onClick={() => tab.onSelect && tab.onSelect()}
               aria-current={tab.active ? 'page' : undefined}

diff --git a/packages/overlay/src/index.css b/packages/overlay/src/index.css
@@ -9,7 +9,7 @@
 }
 
 .sentry-debugger {
-  @apply flex h-full flex-col overflow-auto overflow-x-hidden rounded-lg bg-indigo-900 font-sans text-white shadow-xl;
+  @apply flex h-full flex-col overflow-auto overflow-x-hidden rounded-lg bg-gradient-to-br from-indigo-900 to-indigo-950 to-20% font-sans text-white shadow-xl;
 }
 
 /* .sentry-debugger .tree li {

diff --git a/packages/overlay/src/integrations/console/console-tab.tsx b/packages/overlay/src/integrations/console/console-tab.tsx
@@ -7,7 +7,7 @@ export default function ConsoleTab({ processedEvents }: Props) {
   const messages = (processedEvents || []) as ConsoleMessage[];
 
   return (
-    <div className="divide-y divide-indigo-500 bg-indigo-950 p-4">
+    <div className="divide-y divide-indigo-900 bg-indigo-950 p-4">
       <h1 className="mb-2 text-xl">Console Logs</h1>
       <div className="flex flex-col gap-2">
         {messages.map((message, index) => {

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-500 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 divide-indigo-900 bg-indigo-950 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/EventList.tsx b/packages/overlay/src/integrations/sentry/components/EventList.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import CardList from '~/components/CardList';
 import { useSentryEvents } from '../data/useSentryEvents';
 import { SentryEvent } from '../types';
 import { ErrorSummary } from './Events/Error';
@@ -15,28 +16,26 @@ export default function EventList() {
 
   const matchingEvents = events.filter(e => e.type !== 'transaction');
 
-  return (
-    <div className="divide-y divide-indigo-500 bg-indigo-950">
-      {matchingEvents.length !== 0 ? (
-        matchingEvents.map(e => {
-          return (
-            <Link
-              className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-800"
-              key={e.event_id}
-              to={e.event_id}
-            >
-              <PlatformIcon event={e} className="text-indigo-300" />
-              <div className="flex w-48 flex-col truncate font-mono text-indigo-300">
-                <span>{(e.event_id || '').substring(0, 8)}</span>
-                <TimeSince date={e.timestamp} />
-              </div>
-              <div className="flex-1">{renderEvent(e)}</div>
-            </Link>
-          );
-        })
-      ) : (
-        <div className="p-6 text-indigo-300">Looks like there's no events recorded matching this query. 🤔</div>
-      )}
-    </div>
+  return matchingEvents.length !== 0 ? (
+    <CardList>
+      {matchingEvents.map(e => {
+        return (
+          <Link
+            className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-900"
+            key={e.event_id}
+            to={e.event_id}
+          >
+            <PlatformIcon event={e} className="text-indigo-300" />
+            <div className="flex w-48 flex-col truncate font-mono text-indigo-300">
+              <span>{(e.event_id || '').substring(0, 8)}</span>
+              <TimeSince date={e.timestamp} />
+            </div>
+            <div className="flex-1">{renderEvent(e)}</div>
+          </Link>
+        );
+      })}
+    </CardList>
+  ) : (
+    <div className="p-6 text-indigo-300">Looks like there's no events recorded matching this query. 🤔</div>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SdkList.tsx b/packages/overlay/src/integrations/sentry/components/SdkList.tsx
@@ -1,3 +1,4 @@
+import CardList from '~/components/CardList';
 import { useSentrySdks } from '../data/useSentrySdks';
 import PlatformIcon from './PlatformIcon';
 import TimeSince from './TimeSince';
@@ -15,9 +16,9 @@ export default function SdkList() {
 
   return (
     <>
-      <div className="divide-y divide-indigo-500 bg-indigo-950">
-        {sdkList.length !== 0 ? (
-          sdkList.map(sdk => {
+      {sdkList.length !== 0 ? (
+        <CardList>
+          {sdkList.map(sdk => {
             return (
               <div className="flex items-center gap-x-4 px-6 py-4" key={`${sdk.name}-${sdk.version}`}>
                 <PlatformIcon platform={sdkToPlatform(sdk.name)} />
@@ -29,11 +30,11 @@ export default function SdkList() {
                 </div>
               </div>
             );
-          })
-        ) : (
-          <div className="p-6 text-indigo-300">Looks like there's no SDKs that have reported yet. 🤔</div>
-        )}
-      </div>
+          })}
+        </CardList>
+      ) : (
+        <div className="p-6 text-indigo-300">Looks like there's no SDKs that have reported yet. 🤔</div>
+      )}
     </>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { format as formatSQL } from 'sql-formatter';
+import SidePanel, { SidePanelHeader } from '~/components/SidePanel';
 import dataCache from '../data/sentryDataCache';
 import { SentryErrorEvent, Span, TraceContext } from '../types';
 import { getDuration } from '../utils/duration';
@@ -34,21 +35,16 @@ export default function SpanDetails({
   const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction');
 
   return (
-    <div className="fixed bottom-0 left-1/4 right-0 top-0 h-full overflow-auto border-l border-l-indigo-400 bg-indigo-900 px-6 py-4">
-      <div className="mb-4 flex border-b border-b-indigo-400 pb-4">
-        <div className="flex-1">
-          <h2 className="text-xl text-indigo-300">Span Details</h2>
-          <h3 className="font-mono">
+    <SidePanel>
+      <SidePanelHeader
+        title="Span Details"
+        subtitle={
+          <>
             {span.op} <span className="text-indigo-500">&mdash;</span> {span.span_id}
-          </h3>
-        </div>
-        <Link
-          className="-my-1 -mr-3 cursor-pointer rounded bg-indigo-900 px-3 py-1 font-mono text-2xl hover:bg-black"
-          to={`/traces/${span.trace_id}`}
-        >
-          {'✕'}
-        </Link>
-      </div>
+          </>
+        }
+        backTo={`/traces/${span.trace_id}`}
+      />
 
       <div className="space-y-6">
         <div>
@@ -157,15 +153,19 @@ export default function SpanDetails({
         <div>
           <h2 className="mb-2 font-bold uppercase">Sub-tree</h2>
           <div className="-mx-3 border border-indigo-900 bg-indigo-950">
-            <SpanTree
-              traceContext={traceContext}
-              tree={span.children || []}
-              startTimestamp={startTimestamp}
-              totalDuration={totalDuration}
-            />
+            {span.children?.length ? (
+              <SpanTree
+                traceContext={traceContext}
+                tree={span.children}
+                startTimestamp={startTimestamp}
+                totalDuration={totalDuration}
+              />
+            ) : (
+              <div className="p-4">No children present at this node.</div>
+            )}
           </div>
         </div>
       </div>
-    </div>
+    </SidePanel>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SpanTree.tsx b/packages/overlay/src/integrations/sentry/components/SpanTree.tsx
@@ -34,8 +34,8 @@ export default function SpanTree({
           >
             <Link
               className={classNames(
-                'flex cursor-pointer text-sm hover:bg-indigo-800',
-                spanId === span.span_id ? 'bg-indigo-800' : '',
+                'flex cursor-pointer text-sm hover:bg-indigo-900',
+                spanId === span.span_id ? 'bg-indigo-900' : '',
               )}
               to={`/traces/${span.trace_id}/${span.span_id}`}
             >

diff --git a/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx b/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx
@@ -44,7 +44,7 @@ export default function TraceDetails() {
           </span>
         </div>
       </div>
-      <div className="flex-1 divide-indigo-500 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 divide-indigo-900 bg-indigo-950 px-6 py-4">
         <SpanTree
           traceContext={trace}
           tree={trace.spanTree}

diff --git a/packages/overlay/src/integrations/sentry/components/TraceList.tsx b/packages/overlay/src/integrations/sentry/components/TraceList.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import CardList from '~/components/CardList';
 import classNames from '../../../lib/classNames';
 import { useSentryTraces } from '../data/useSentryTraces';
 import { getDuration } from '../utils/duration';
@@ -10,13 +11,13 @@ export default function TraceList() {
 
   return (
     <>
-      <div className="divide-y divide-indigo-500 bg-indigo-950">
-        {traceList.length !== 0 ? (
-          traceList.map(trace => {
+      {traceList.length !== 0 ? (
+        <CardList>
+          {traceList.map(trace => {
             const duration = getDuration(trace.start_timestamp, trace.timestamp);
             return (
               <Link
-                className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-800"
+                className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-900"
                 key={trace.trace_id}
                 to={trace.trace_id}
               >
@@ -42,11 +43,11 @@ export default function TraceList() {
                 </div>
               </Link>
             );
-          })
-        ) : (
-          <div className="p-6 text-indigo-300">Looks like there's no traces recorded matching this query. 🤔</div>
-        )}
-      </div>
+          })}
+        </CardList>
+      ) : (
+        <div className="p-6 text-indigo-300">Looks like there's no traces recorded matching this query. 🤔</div>
+      )}
     </>
   );
 }
diff --git a/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx b/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx
@@ -1,6 +1,6 @@
 export default function ViteInspect() {
   return (
-    <div className="h-full w-full divide-y divide-indigo-500 bg-indigo-950">
+    <div className="h-full w-full divide-y divide-indigo-900 bg-indigo-950">
       <div className="flex h-full w-full flex-col gap-2">
         <iframe src="http://localhost:4321/__inspect/" className="h-full w-full" />
       </div>

diff --git a/packages/overlay/tailwind.config.js b/packages/overlay/tailwind.config.js
diff --git a/packages/overlay/tailwind.config.ts b/packages/overlay/tailwind.config.ts
@@ -0,0 +1,15 @@
+import type { Config } from 'tailwindcss';
+
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        raleway: ['Raleway', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+} satisfies Config;