UI Cleanup (#216)

* switch `.jpeg` for `.webp` * prevent fout by setting font as optional * simplify class logic of navigation component * wip * console and nav hover and focus states * split pane borders * improve config tab readability * friendlier error message * improve fallback views - make them consistent * fix gutter * update general error message * remove unnecessary border * no config selected message on Tauri tab * fix "disconnect" spacing * remove unused `onMount` - again * use Switch/Match instead of Show * add fallback back Co-authored-by: Johann Derdak <[email protected]> * use lower case `(set default)` everywhere Co-authored-by: Johann Derdak <[email protected]> * adjust spans column width --------- Co-authored-by: Johann Derdak <[email protected]>
crabnebula-dev · Feb 5, 2024 · 29b1013 · 29b1013
1 parent 6751dad
commit 29b1013
Show file tree

Hide file tree

Showing 26 changed files with 194 additions and 145 deletions.
diff --git a/clients/web/pnpm-lock.yaml b/clients/web/pnpm-lock.yaml
diff --git a/clients/web/public/bg.jpeg b/clients/web/public/bg.jpeg
diff --git a/clients/web/public/bg.webp b/clients/web/public/bg.webp
diff --git a/clients/web/src/components/disconnect-button.tsx b/clients/web/src/components/disconnect-button.tsx
@@ -9,13 +9,16 @@ export function DisconnectButton() {
     <Button.Root
       type="button"
       id="close"
-      class="border-gray-700 border rounded-md p-1 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+      class="border-slate-800 border w-6 hover:w-[7.5em] focus:w-[7.5em] transition-all duration-500 ease-in-out  rounded-md p-1 inline-flex items-center justify-end text-slate-200  focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 group relative overflow-x-hidden"
       onClick={() => {
         connectionStore.abortController.abort();
         goto("/");
       }}
     >
       <span class="sr-only">Close connection</span>
+      <span class="group-hover:inline-block group-focus:inline-block hidden absolute leading-[0] px-2 right-6 text-slate-200">
+        disconnect
+      </span>
       <svg
         class="h-4 w-4"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/clients/web/src/components/errors/error-root.tsx b/clients/web/src/components/errors/error-root.tsx
@@ -16,7 +16,7 @@ export function ErrorRoot(props: Props) {
   return (
     <>
       <div class="surf-container">
-        <img class="bg-surface static" src="/bg.jpeg" aria-hidden />
+        <img class="bg-surface static" src="/bg.webp" aria-hidden />
       </div>
       <div class="p-28 grid grid-rows-[auto_1fr_auto] gap-5 h-screen text-neutral-400 ">
         <header>
@@ -30,15 +30,15 @@ export function ErrorRoot(props: Props) {
           </Switch>
         </header>
         <article class="flex flex-col justify-evenly">
-          <div class="p-5 border-2 border-slate-800 rounded-lg font-mono overflow-y-visible overflow-x-auto max-w-lg">
+          <div class="p-5 border-2 border-slate-800 rounded-lg font-mono overflow-y-visible overflow-x-auto max-w-full">
             <h2 class="text-4xl relative pb-5">System log</h2>
             <pre class="text-2xl">{errorMessage()}</pre>
             <ul class="pt-12">
               <li>App version: {pkg.version}</li>
               <li>Browser: {window.navigator.userAgent}</li>
             </ul>
           </div>
-          <div class="flex gap-10">
+          <div class="flex gap-10 pt-10">
             <a
               href="/"
               class="border border-red-400 hover:bg-red-700 hover:border-red-900 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2 focus:outline-1"

diff --git a/clients/web/src/components/errors/general-error.tsx b/clients/web/src/components/errors/general-error.tsx
@@ -1,7 +1,9 @@
 export function GeneralError() {
   return (
     <>
-      <h1 class="text-red-400 font-semibold text-6xl">Irrecoverable Error</h1>
+      <h1 class="text-red-400 font-semibold text-6xl">
+        Oops! We can’t come back...{" "}
+      </h1>
       <div class="text-3xl pt-8">
         <p>Something terrible happened.</p>
         <p>The log is on the way and we'll work on it!</p>

diff --git a/clients/web/src/components/health-status.tsx b/clients/web/src/components/health-status.tsx
@@ -17,17 +17,17 @@ const variant = (status: HealthCheckResponse_ServingStatus) => {
     // unknown
     {
       style: "inline-block mr-3 w-3 h-3 bg-gray-200 rounded-full",
-      tooltip: "Disconnected",
+      tooltip: "disconnected",
     },
     // serving
     {
       style: "inline-block mr-3 w-3 h-3 bg-green-500 rounded-full",
-      tooltip: "Connected",
+      tooltip: "connected",
     },
     // not serving
     {
       style: "inline-block mr-3 w-3 h-3 bg-red-500 rounded-full",
-      tooltip: "Disconnected",
+      tooltip: "disconnected",
     },
   ][status];
 };

diff --git a/clients/web/src/components/navigation.tsx b/clients/web/src/components/navigation.tsx
@@ -30,7 +30,7 @@ export function Navigation() {
   const { monitorData } = useMonitor();
   return (
     <nav>
-      <ul class="flex border-b flex-start border-b-neutral-800">
+      <ul class="flex flex-start">
         <For each={TABS}>
           {(tab) => (
             <Show
@@ -57,9 +57,9 @@ export function Navigation() {
                     e.currentTarget.click();
                   }}
                   href={tab.url(host, port)}
-                  activeClass="border-b-gray-500 hover:border-b-gray-400"
+                  activeClass="!border-b-slate-300 bg-slate-800"
                   inactiveClass="border-b-gray-800 hover:border-b-gray-600"
-                  class="flex -mb-[1px] items-center justify-center leading-none border-b py-2 px-4 hover:bg-gray-800 hover:border-gray-800"
+                  class="border-b-transparent hover:border-b-slate-600 flex -mb-[1px] items-center justify-center leading-none border-b py-2 px-4 hover:bg-slate-800 hover:border-slate-800"
                 >
                   {tab.title}
                 </A>

diff --git a/clients/web/src/components/sources/code-view.tsx b/clients/web/src/components/sources/code-view.tsx
@@ -20,7 +20,7 @@ export default function CodeView(props: CodeViewProps) {
   );
 
   return (
-    <div class="min-h-full h-max min-w-full w-max bg-black bg-opacity-50">
+    <div class="min-h-full h-max min-w-full w-max">
       <Suspense fallback={<Loader />}>
         <CodeHighlighter
           text={text()}

diff --git a/clients/web/src/components/sources/source-pane.tsx b/clients/web/src/components/sources/source-pane.tsx
@@ -6,6 +6,7 @@ import { decodeFileName, guessContentType } from "~/lib/sources/file-entries";
 import CodeView from "./code-view";
 import { Loader } from "~/components/loader";
 import { HighlighterLang } from "~/lib/code-highlight";
+import { Heading } from "../heading";
 
 export function SourcePane() {
   const params = useParams<Record<"source", string>>();
@@ -16,7 +17,16 @@ export function SourcePane() {
   const sizeHint = () => parseInt(searchParams.sizeHint);
 
   return (
-    <Show when={params.source} keyed>
+    <Show
+      when={params.source}
+      keyed
+      fallback={
+        <div class="h-full grid gap-4 text-center content-center justify-center items-center border-l p-4 border-gray-800">
+          <Heading>No File Selected</Heading>
+          &larr; Use the sidebar to get started.
+        </div>
+      }
+    >
       <Suspense fallback={<Loader />}>
         <Show when={contentType()} fallback={<UnknownView path={filePath()} />}>
           {(resolvedContentType) => (

diff --git a/clients/web/src/components/span/span-detail-panel.tsx b/clients/web/src/components/span/span-detail-panel.tsx
@@ -12,16 +12,16 @@ export function SpanDetailPanel() {
     searchParams.span ? spans.get(BigInt(searchParams.span)) : undefined;
 
   return (
-    <>
-      <Show when={!span()}>
+    <Show
+      when={span()}
+      fallback={
         <div class="h-full grid gap-4 text-center content-center justify-center items-center border-l p-4 border-gray-800">
           <Heading>No Span Selected</Heading>
           &larr; Pick a span to get started.
         </div>
-      </Show>
-      <Show when={span()}>
-        {(detailSpan) => <SpanDetail span={detailSpan()} />}
-      </Show>
-    </>
+      }
+    >
+      {(detailSpan) => <SpanDetail span={detailSpan()} />}
+    </Show>
   );
 }
diff --git a/clients/web/src/components/span/span-list.tsx b/clients/web/src/components/span/span-list.tsx
@@ -87,6 +87,7 @@ export function SpanList() {
         <tr class="text-left">
           <For each={columns}>
             {(column) => {
+              console.log(column);
               return (
                 <th
                   tabIndex="0"
@@ -96,7 +97,13 @@ export function SpanList() {
                     }
                   }}
                   onClick={() => column.isSortable && sortColumn(column.name)}
-                  class="p-1 cursor-pointer hover:bg-[#ffffff09]"
+                  class={`p-1 cursor-pointer hover:bg-[#ffffff09] ${
+                    column.name === "time" || column.name === "initiated"
+                      ? "w-2/12" // time and initiated
+                      : column.name === "name"
+                      ? "w-3/12" // name
+                      : "w-5/12" // waterfall
+                  }`}
                 >
                   <div class="flex uppercase select-none items-center gap-2">
                     {column.name}

diff --git a/clients/web/src/components/split-pane.tsx b/clients/web/src/components/split-pane.tsx
@@ -35,7 +35,7 @@ export function SplitPane(props: WrapperProps) {
     splitInstance = Split(paneIds, {
       sizes,
       minSize: defaultMinSizes,
-      gutterSize: gutterSize ?? 10,
+      gutterSize: gutterSize ?? 5,
       onDragEnd: function (sizes) {
         setToLocalStorage(splitGutterSizeKey, sizes);
       },
@@ -48,10 +48,7 @@ export function SplitPane(props: WrapperProps) {
     <div class={clsx(`flex h-full overflow-auto`, props.class)}>
       <For each={children}>
         {(pane, idx) => (
-          <section
-            id={paneNames[idx()]}
-            class="border-neutral-800 border-x-2 overflow-auto"
-          >
+          <section id={paneNames[idx()]} class="overflow-auto">
             {pane}
           </section>
         )}

diff --git a/clients/web/src/components/tauri/configuration-tooltip.tsx b/clients/web/src/components/tauri/configuration-tooltip.tsx
@@ -44,8 +44,8 @@ export function ConfigurationTooltip(props: {
           </span>
         </Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content class="bg-gray-900 text-xl font-medium text-white border-solid border border-gray-700">
-            <Tooltip.Arrow />
+          <Tooltip.Content class="bg-gray-900 text-xl font-medium text-white">
+            <Tooltip.Arrow style={{ fill: "rgb(55, 65, 81)" }} />
             <div class="relative overflow-auto max-w-5xl max-h-96">
               <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">

diff --git a/clients/web/src/components/tauri/configuration-value.tsx b/clients/web/src/components/tauri/configuration-value.tsx
@@ -60,23 +60,18 @@ function TextValue(props: TextConfigurationValueProps) {
 
   const value = () =>
     typeof props.value === "boolean" ? (
-      props.value ? (
-        <span class="font-mono">true</span>
-      ) : (
-        <span class="font-mono">false</span>
-      )
+      <span class="font-mono">{String(props.value)}</span>
     ) : (
       props.value
     );
-
   return (
-    <div class="flex text-xl border-1 border-[#4B4B4B] border-2 ">
+    <div class="flex text-xl hover:bg-slate-800">
       <div class="basis-2/5 p-1">
         <ConfigurationTooltip parentKey={props.parentKey} key={props.key} />
       </div>
-      <div class="basis-3/5 border-l-2 border-[#4B4B4B] p-1 text-right flex justify-between">
-        <Flags key={key()} value={props.value} />
+      <div class="basis-3/5 p-1 text-right flex justify-between">
         <span class="ml-auto">{value()}</span>
+        <Flags key={key()} value={props.value} />
       </div>
     </div>
   );
@@ -117,8 +112,8 @@ function ArrayValue(props: ArrayConfigurationValueProps) {
             {(value, childKey) => (
               <li>
                 <ConfigurationValue
+                  key={String(childKey())}
                   parentKey={props.parentKey + "." + props.key}
-                  key={childKey().toString()}
                   value={value}
                 />
               </li>