Align styles with new design

.changeset/kind-glasses-thank.md

@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': patch
+---
+
+Align styles with new design

packages/webui/src/collector/CollectorClient.ts

@@ -22,6 +22,8 @@ type WebSocketClientOptions = {
 const INTERNAL_HTTP_TIMEOUT = 120 * 1000;
 
 const initialTraceMap = () => {
+  // ignore coverage for this line since it's only used in dev
+  // istanbul ignore next
   return process.env.DEMO === 'true' ? mockTraceCollection() : new Map();
 };
 

packages/webui/src/components/Authorization.tsx

@@ -83,7 +83,7 @@ export default function Authorization({ value }: AuthorizationProps) {
             return (
               <div
                 data-test-id="token-minimal-view"
-                className="flex hover:bg-gray-100 rounded-sm cursor-pointer"
+                className="flex hover:bg-apple-200 rounded-sm cursor-pointer mr-4"
                 onClick={() => setTokenState(TokenState.Expanded)}
               >
                 <div className="clamp">
@@ -98,14 +98,14 @@ export default function Authorization({ value }: AuthorizationProps) {
             return <Code data-test-id="token-expanded-view">{`${type} ${token}`}</Code>;
           case TokenState.Decoded:
             return (
-              <div data-test-id="token-decoded-view" className="h-[300px]">
+              <div data-test-id="token-decoded-view" className="h-[200px]">
                 {decodedToken}
               </div>
             );
         }
       })()}
       {tokenState !== TokenState.Minimal && (
-        <div className={tw('flex flex-row gap-2 bg-gray-200 px-4 pt-4')}>
+        <div className={tw('flex flex-row gap-2 bg-manatee-100 px-4 pt-4')}>
           <>
             <Button
               data-test-id="token-expanded-button"

packages/webui/src/components/Badge.tsx

@@ -8,7 +8,7 @@ export default function Badge({ className, children }: BadgeProps) {
   return (
     <span
       className={tw(
-        'inline-flex items-center rounded-full bg-gray-400 px-3 py-1 text-sm font-medium text-white',
+        'inline-flex items-center rounded-full bg-[#787B8A] px-2 py-1.5 text-xs font-medium text-white',
         className,
       )}
     >

packages/webui/src/components/Fields.tsx

@@ -12,7 +12,7 @@ type FieldsProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
 
 export default function Fields({ className, children, ...props }: FieldsProps) {
   return (
-    <div className={tw('w-full table-fixed text-sm px-3 py-2', className)} {...props}>
+    <div className={tw('w-full table-fixed text-sm pr-3 py-2', className)} {...props}>
       <div className="space-y-2 table-row-group">{children}</div>
     </div>
   );

packages/webui/src/components/Input.tsx

@@ -68,23 +68,26 @@ function Input({ className, onChange, Icon, focusKey, type, ...props }: InputPro
         </div>
       )}
       <input
-        className="flex w-full pl-10 pr-3 py-1.5 rounded-xl bg-white text-manatee-600 border border-solid border-manatee-600 placeholder:text-manatee-600 focus:border-manatee-700 focus:text-manatee-700"
+        className="w-full pl-10 pr-3 py-2 rounded-xl bg-white text-sm text-manatee-600 border border-solid border-manatee-600 placeholder:text-manatee-600 focus:border-manatee-700 focus:text-manatee-700 focus:ring-0"
         ref={finalRef}
         type={inputType}
         onChange={handleChange}
         value={value}
         {...props}
       />
       {!value && focusKey && specialKey && (
-        <span data-test-id="focus-key" className="absolute flex items-center inset-y-0 right-0 pr-3 text-neutral">
+        <span
+          data-test-id="focus-key"
+          className="absolute flex items-center inset-y-0 right-0 pr-3 text-sm text-manatee-600"
+        >
           {specialKey}
           {focusKey}
         </span>
       )}
       {!!value && (
         <span
           data-test-id="input-clear"
-          className="absolute flex items-center inset-y-0 right-0 pr-3 text-neutral cursor-pointer"
+          className="absolute flex items-center inset-y-0 right-0 pr-3 text-manatee-600 text-sm cursor-pointer"
           onClick={clearValue}
         >
           <X />

packages/webui/src/components/KeyValueList.tsx

@@ -25,8 +25,8 @@ export default function KeyValueList({ values }: KeyValueList) {
           }
           return (
             <tr key={k} data-test-id="key-value-item">
-              <td className="whitespace-nowrap pl-3 pr-2 py-1 font-semibold align-top w-40">{k}</td>
-              <td className="break-all px-2 py-1">{value}</td>
+              <td className="whitespace-nowrap pr-2 py-1 font-semibold align-top w-40">{k}</td>
+              <td className="break-all px-2 py-1 pr-3">{value}</td>
             </tr>
           );
         })}

packages/webui/src/components/Loading.tsx

@@ -9,7 +9,7 @@ export default function Loading({ size = 2, className, ...props }: LoadingProps)
     <div className={className}>
       <div
         className={tw(
-          'inline-block rounded-full border-primary opacity-70 animate-spin',
+          'inline-block rounded-full border-manatee-400 opacity-70 animate-spin',
           size === 2 ? 'w-2 h-2 border-2' : '',
           size === 3 ? 'w-3 h-3 border-2' : '',
           size === 4 ? 'w-4 h-4 border-2' : '',

packages/webui/src/components/Menu.tsx

@@ -54,21 +54,21 @@ function Menu({ Icon, label, items, className, focusKey, ...props }: MenuProps,
     <div ref={finalRef} className={tw('relative', className)} {...props}>
       <Button
         role="menu"
-        className={tw('', isOpen && 'bg-neutral hover:shadow-none')}
+        className={tw('', isOpen && 'bg-apple-400 hover:shadow-none')}
         Icon={Icon}
         onClick={() => setIsOpen(curr => !curr)}
       >
         {label}
       </Button>
       {isOpen && (
         <div data-test-id="menu-items" className="absolute right-0 mt-2 z-50 w-56">
-          <ul className="shadow-lg py-1 divide-y divide-gray-100 rounded-md bg-neutral ring-1 ring-primary">
+          <ul className="shadow-lg py-1 divide-y divide-manatee-400 rounded-md bg-manatee-100 border border-manatee-400">
             {items.map((x: MenuItem) => {
               return (
                 <li
                   key={x.label}
                   data-test-id="menu-items-item"
-                  className="cursor-pointer py-2 px-4 hover:bg-gray-100"
+                  className="cursor-pointer py-2 px-4 hover:bg-apple-200"
                   onClick={() => handleSelection(x)}
                 >
                   <div className="flex flex-col">

packages/webui/src/components/MonacoEditor.tsx

@@ -1,6 +1,5 @@
 import { Editor, EditorProps, OnMount } from '@monaco-editor/react';
 import { useEffect, useRef } from 'react';
-import colors from 'tailwindcss/colors';
 
 export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'>;
 
@@ -34,8 +33,8 @@ export default function MonacoEditor({ value, language }: MonacoEditorProps) {
       base: 'vs',
       inherit: true,
       colors: {
-        'editor.background': colors.gray['200'],
-        'editor.lineHighlightBackground': colors.gray['200'],
+        'editor.background': '#F5F7F8',
+        'editor.lineHighlightBackground': '#F5F7F8',
       },
       rules: [],
     });

packages/webui/src/components/Section.tsx

@@ -17,8 +17,7 @@ export default function Section({ title, collapsible = true, className, children
         <div
           data-test-id="section-title"
           className={tw(
-            `flex flex-row items-center px-3 py-2`,
-            `bg-gray-300 border-b border-t border-primary`,
+            `flex flex-row items-center py-3 pr-3`,
             `font-bold uppercase`,
             collapsible ? 'cursor-pointer' : '',
             className,
@@ -29,11 +28,11 @@ export default function Section({ title, collapsible = true, className, children
           {...props}
         >
           <div className="flex-1">{title}</div>
-          {collapsible && <Icon className="h-4 w-4" />}
+          {collapsible && <Icon className="h-6 w-6" />}
         </div>
       )}
       {children && expanded && (
-        <div data-test-id="section-content" className="mb-2">
+        <div data-test-id="section-content" className="pb-4 border-b border-manatee-400">
           {children}
         </div>
       )}

packages/webui/src/components/ui/Header.tsx

@@ -12,13 +12,13 @@ export default function Header() {
   const isDebugMode = process.env.NODE_ENV !== 'production';
 
   return (
-    <header className="px-3 py-2 bg-secondary border-b border-primary shadow">
+    <header className="px-3 py-2 border-b border-manatee-400">
       <div className="flex justify-between">
         <div className="flex items-center gap-3">
           <div>
             <Logo />
           </div>
-          <div className="text-xl font-extrabold mr-4">ENVY</div>
+          <div className="text-[1.5rem] font-bold mr-4">ENVY</div>
         </div>
         <div className="flex items-center gap-3">
           <FiltersAndActions />

packages/webui/src/components/ui/Tabs.tsx

@@ -29,7 +29,7 @@ export function TabListItem({
     'text-manatee-800',
     allowInteractive && 'hover:bg-apple-200 hover:text-apple-900',
     allowInteractive && 'active:bg-apple-500 active:text-apple-950',
-    disabled && 'text-gray-400 cursor-not-allowed',
+    disabled && 'text-manatee-300 cursor-not-allowed',
     selectedTab === id && 'bg-apple-400 text-[#0D280B]',
   );
 

packages/webui/src/components/ui/TimingsDiagram.tsx

@@ -49,15 +49,15 @@ export default function TimingsDiagram({ timings }: TimingsDiagramProps) {
   const presentationData = calculateOffsets(data);
 
   return (
-    <div className="w-full bg-slate-100 rounded">
+    <div className="w-full py-2 px-3 mr-3 bg-manatee-100 text-sm">
       <table className="w-full">
         <tbody data-test-id="timings-table-body">
-          {presentationData.map(({ name, color, duration, offset, percentage }, idx) => (
-            <tr key={name} className={idx % 2 === 0 ? 'bg-slate-100' : 'bg-slate-50'}>
-              <th className="px-4 py-2  w-[15%] font-normal text-left">{name}</th>
-              <td className="px-4 py-2">
+          {presentationData.map(({ name, color, duration, offset, percentage }) => (
+            <tr key={name}>
+              <th className="w-[15%] text-left font-normal">{name}</th>
+              <td>
                 <div
-                  className={tw('relative h-8 text-sm', color)}
+                  className={tw('relative h-4', color)}
                   style={{
                     marginLeft: `${offset * 100}%`,
                     width: `${percentage * 100}%`,

packages/webui/src/components/ui/TraceDetail.tsx

@@ -12,6 +12,7 @@ import {
   getResponseBody,
 } from '@/systems';
 import { getHeader, numberFormat, pathAndQuery } from '@/utils';
+import { badgeStyle } from '@/utils/styles';
 
 import CopyAsCurlButton from './CopyAsCurlButton';
 import QueryParams from './QueryParams';
@@ -35,6 +36,7 @@ export default function TraceDetail() {
   const requestAborted = state === HttpRequestState.Aborted;
   const responseComplete = state !== HttpRequestState.Sent;
   const showResponseHeaders = state === HttpRequestState.Received;
+  const showTiming = showResponseHeaders && (!!http?.timings || !!http?.timingsBlockedByCors);
 
   const updateTimer = useCallback(() => {
     if (counterElRef.current) {
@@ -78,21 +80,21 @@ export default function TraceDetail() {
   }
 
   return (
-    <div className="h-full flex flex-col p-default bg-secondary">
-      <div className="sticky top-0 pb-2" data-test-id="summary">
+    <div className="h-full flex flex-col p-3 pr-0 bg-manatee-50">
+      <div className="sticky top-0" data-test-id="summary">
         <div className="flex flex-row gap-2 items-center">
           <div className="flex-1 flex flex-row gap-2">
-            <div>
-              <img src={getIconUri(trace)} alt="" className="w-7 h-7" />
+            <div className="flex items-center">
+              <img src={getIconUri(trace)} alt="" className="w-6 h-6" />
             </div>
-            <Badge>{method}</Badge>
+            <div className="text-xl font-bold">{method}</div>
             {requestAborted && (
-              <Badge className="bg-gray-500 uppercase" data-test-id="aborted-indicator">
+              <Badge className="bg-[#787B8A] uppercase" data-test-id="aborted-indicator">
                 Aborted
               </Badge>
             )}
             {statusCode && (
-              <Badge className={statusCodeStyle(statusCode)} data-test-id="method">
+              <Badge className={badgeStyle(trace)} data-test-id="method">
                 {httpStatusLabel}
               </Badge>
             )}
@@ -104,7 +106,7 @@ export default function TraceDetail() {
           </div>
         </div>
 
-        <div className="mt-2 mb-4 break-all font-mono" data-test-id="url">
+        <div className="mb-4 break-all" data-test-id="url">
           {url}
         </div>
 
@@ -115,9 +117,12 @@ export default function TraceDetail() {
         </TabList>
       </div>
 
-      <div className="overflow-hidden overflow-y-auto h-full border-t border-t-manatee-400" data-test-id="trace-detail">
+      <div
+        className="overflow-hidden overflow-y-auto h-full mt-2 border-t border-t-manatee-400"
+        data-test-id="trace-detail"
+      >
         <TabContent id="default">
-          <Section data-test-id="request-details" title="Request Details" className="border-t-0">
+          <Section data-test-id="request-details" title="Request Details">
             <Fields>
               <Field data-test-id="sent" label="Sent">
                 <DateTime time={timestamp} />
@@ -164,31 +169,30 @@ export default function TraceDetail() {
           </Section>
 
           {showResponseHeaders && (
-            <>
-              <Section data-test-id="request-headers" title="Response Headers">
-                <ResponseHeaders data-test-id="headers" trace={trace} />
-              </Section>
-
-              <Section data-test-id="request-headers" title="Timing">
-                {trace.http?.timingsBlockedByCors && (
-                  <div data-test-id="timings-blocked">
-                    <a
-                      href="https://github.com/FormidableLabs/envy#web-client-application"
-                      target="_blank"
-                      rel="noreferrer"
-                      className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-                    >
-                      Disabled by CORS policy
-                    </a>
-                  </div>
-                )}
-                {trace.http?.timings && (
-                  <div data-test-id="timings">
-                    <TimingsDiagram timings={trace.http.timings} />
-                  </div>
-                )}
-              </Section>
-            </>
+            <Section data-test-id="request-headers" title="Response Headers">
+              <ResponseHeaders data-test-id="headers" trace={trace} />
+            </Section>
+          )}
+          {showTiming && (
+            <Section data-test-id="request-timings" title="Timing">
+              {trace.http?.timingsBlockedByCors && (
+                <div data-test-id="timings-blocked">
+                  <a
+                    href="https://github.com/FormidableLabs/envy#web-client-application"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+                  >
+                    Disabled by CORS policy
+                  </a>
+                </div>
+              )}
+              {trace.http?.timings && (
+                <div data-test-id="timings">
+                  <TimingsDiagram timings={trace.http.timings} />
+                </div>
+              )}
+            </Section>
           )}
         </TabContent>
 
@@ -213,12 +217,3 @@ export default function TraceDetail() {
     </div>
   );
 }
-
-function statusCodeStyle(code: number) {
-  let style = 'bg-gray-500';
-  if (code >= 500) style = 'bg-purple-500';
-  else if (code >= 400) style = 'bg-red-500';
-  else if (code >= 300) style = 'bg-yellow-500';
-  else if (code >= 200) style = 'bg-green-500';
-  return style;
-}