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-manatee-700 px-2 py-1.5 text-xs font-medium text-white',
         className,
       )}
     >

packages/webui/src/components/Fields.tsx

@@ -1,7 +1,5 @@
 import { tw } from '@/utils';
 
-import Label from './Label';
-
 type FieldProps = React.HTMLAttributes<HTMLElement> & {
   label: string;
 };
@@ -12,20 +10,18 @@ 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="space-y-2 table-row-group">{children}</div>
-    </div>
+    <table className={tw('table table-fixed min-w-full text-xs', className)} {...props}>
+      <tbody>{children}</tbody>
+    </table>
   );
 }
 
 export function Field({ label, className, children, ...props }: FieldProps) {
   if (!children) return null;
   return (
-    <div className="table-row" {...props}>
-      <div className={tw('table-cell w-40', className)}>
-        <Label label={label} />
-      </div>
-      <div className="table-cell font-mono">{children}</div>
-    </div>
+    <tr className={className} {...props}>
+      <td className={tw('table-cell w-[200px] py-1 font-semibold font-mono uppercase', className)}>{label}</td>
+      <td className="table-cell font-mono">{children}</td>
+    </tr>
   );
 }

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

@@ -8,7 +8,7 @@ export default function KeyValueList({ values }: KeyValueList) {
   if (!values.length) return null;
 
   return (
-    <table className="table-fixed min-w-full font-mono text-sm">
+    <table className="table-fixed min-w-full font-mono text-xs">
       <tbody>
         {values.map(([k, v]) => {
           let value: React.ReactNode = v;
@@ -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="pr-2 py-1 font-semibold align-top w-[200px]">{k}</td>
+              <td className="break-all 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/index.ts

@@ -9,7 +9,6 @@ export { default as DateTime } from './DateTime';
 export { default as Fields, Field } from './Fields';
 export { default as Input } from './Input';
 export { default as KeyValueList } from './KeyValueList';
-export { default as Label } from './Label';
 export { default as Loading } from './Loading';
 export { default as Menu } from './Menu';
 export { default as SearchInput } from './SearchInput';

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,8 +29,8 @@ 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',
-    selectedTab === id && 'bg-apple-400 text-[#0D280B]',
+    disabled && 'text-manatee-300 cursor-not-allowed',
+    selectedTab === id && 'bg-apple-400 text-apple-950',
   );
 
   return (

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}%`,