Minor theme updates again

src-web/components/Dialog.tsx

@@ -28,14 +28,14 @@ export function Dialog({
     <D.Root open={open} onOpenChange={onOpenChange}>
       <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
         <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-          <D.Overlay className="fixed inset-0 bg-gray-900/60 dark:bg-black/50" />
+          <D.Overlay className="fixed inset-0 bg-gray-600/60 dark:bg-black/50" />
           <D.Content>
             <div
               className={classnames(
                 className,
                 'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
                 'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
-                'border border-gray-200 shadow-lg',
+                'dark:border border-gray-200 shadow-md shadow-black/10',
                 wide && 'w-[80vw] max-w-[50rem]',
               )}
             >

src-web/components/Editor/Editor.tsx

@@ -54,17 +54,20 @@ export default function Editor({
     if (ref.current === null) return;
     if (singleLine) return;
     const gutterEl = ref.current.querySelector<HTMLDivElement>('.cm-gutters');
-    const bgClass = className
+    const classList = className?.split(/\s+/) ?? [];
-      ?.split(/\s+/)
+    const bgClasses = classList
-      .find((c) => c.startsWith('!bg-') || c.startsWith('bg-'));
+      .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    if (bgClass && gutterEl) {
+      .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-      gutterEl?.classList.add(`${bgClass}`);
+      .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
+    if (gutterEl) {
+      gutterEl?.classList.add(...bgClasses);
     }
   };
 
   // Create codemirror instance when ref initializes
   useEffect(() => {
     if (ref.current === null) return;
+    console.log('INIT EDITOR');
     let view: EditorView | null = null;
     try {
       const langHolder = new Compartment();
@@ -86,10 +89,6 @@ export default function Editor({
     return () => view?.destroy();
   }, [ref.current, valueKey]);
 
-  useEffect(() => {
-    syncGutterBg();
-  }, [ref.current, className]);
-
   // Update value when valueKey changes
   // TODO: This would be more efficient but the onChange handler gets fired on update
   // useEffect(() => {
@@ -103,6 +102,7 @@ export default function Editor({
   // Update language extension when contentType changes
   useEffect(() => {
     if (cm === null) return;
+    console.log('UPDATE LANG');
     const ext = getLanguageExtension({ contentType, useTemplating });
     cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
   }, [contentType]);

src-web/components/HeaderEditor.tsx

@@ -25,7 +25,6 @@ export function HeaderEditor() {
         headers.map((h, i) => {
           if (i === index) return h;
           const newHeader: HttpHeader = { ...h, ...header };
-          console.log('NEW HEADER', newHeader);
           return newHeader;
         }),
       );
@@ -37,8 +36,6 @@ export function HeaderEditor() {
     setHeaders((headers) => headers.filter((_, i) => i !== index));
   };
 
-  console.log('HEADERS', headers);
-
   return (
     <form onSubmit={handleSubmit}>
       <VStack space={2}>

src-web/components/Input.tsx

@@ -42,8 +42,8 @@ export function Input({
   const inputClassName = classnames(
     className,
     '!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
-    leftSlot && '!pl-1',
+    leftSlot && '!pl-0.5',
-    rightSlot && '!pr-1',
+    rightSlot && '!pr-0.5',
   );
 
   return (

src-web/components/RequestPane.tsx

@@ -22,7 +22,7 @@ export function RequestPane({ fullHeight, request, className }: Props) {
     >
       <div className="pl-2">
         <UrlBar
-          className="bg-transparent"
+          className="bg-transparent shadow dark:shadow-none shadow-gray-200"
           key={request.id}
           method={request.method}
           url={request.url}

src-web/components/ResponsePane.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 export function ResponsePane({ requestId, className }: Props) {
   const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
-  const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
+  const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('raw');
   const responses = useResponses(requestId);
   const response = activeResponseId
     ? responses.data.find((r) => r.id === activeResponseId)
@@ -42,12 +42,18 @@ export function ResponsePane({ requestId, className }: Props) {
     return response.body;
   }, [response?.body, contentType]);
 
+  if (!response) {
+    return null;
+  }
+
   return (
     <div className="p-2">
       <div
         className={classnames(
           className,
-          'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 bg-gray-100 rounded-md overflow-hidden border border-gray-200',
+          'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
+          'dark:bg-gray-100 rounded-md overflow-hidden border border-gray-200',
+          'shadow dark:shadow-none shadow-gray-200',
         )}
       >
         {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
@@ -58,15 +64,17 @@ export function ResponsePane({ requestId, className }: Props) {
               items="center"
               className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
             >
-              <div className="whitespace-nowrap">
+              {response.status > 0 && (
-                <StatusColor statusCode={response.status}>
+                <div className="whitespace-nowrap">
-                  {response.status}
+                  <StatusColor statusCode={response.status}>
-                  {response.statusReason && ` ${response.statusReason}`}
+                    {response.status}
-                </StatusColor>
+                    {response.statusReason && ` ${response.statusReason}`}
-                &nbsp;&bull;&nbsp;
+                  </StatusColor>
-                {response.elapsed}ms &nbsp;&bull;&nbsp;
+                  &nbsp;&bull;&nbsp;
-                {Math.round(response.body.length / 1000)} KB
+                  {response.elapsed}ms &nbsp;&bull;&nbsp;
-              </div>
+                  {Math.round(response.body.length / 1000)} KB
+                </div>
+              )}
 
               <HStack items="center" className="ml-auto h-8">
                 {contentType.includes('html') && (
@@ -122,7 +130,7 @@ export function ResponsePane({ requestId, className }: Props) {
               </div>
             ) : response?.body ? (
               <Editor
-                className="!bg-gray-100"
+                className="bg-gray-50 dark:!bg-gray-100"
                 valueKey={`${contentType}:${response.body}`}
                 defaultValue={response?.body}
                 contentType={contentType}

src-web/components/RouterError.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { Link, useRouteError } from 'react-router-dom';
+import { useRouteError } from 'react-router-dom';
-import { Button } from './Button';
 import { ButtonLink } from './ButtonLink';
 import { Heading } from './Heading';
 import { VStack } from './Stacks';
 
 export function RouterError() {
   const error = useRouteError();
-  console.log('Router Error', error);
+  const stringified = JSON.stringify(error);
+  const message = (error as any).message ?? stringified;
   return (
     <div className="flex items-center justify-center h-full">
-      <VStack space={5} className="w-auto h-auto">
+      <VStack space={5} className="max-w-[30rem] !h-auto">
         <Heading>Route Error 🔥</Heading>
-        <pre className="text-sm select-auto cursor-text bg-gray-50 p-3 rounded">
+        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
-          {JSON.stringify(error, null, 2)}
+          {message}
         </pre>
         <ButtonLink to="/" color="primary">
           Go Home

src-web/components/Sidebar.tsx

@@ -22,6 +22,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
+  console.log('OPEN', open);
   return (
     <div
       className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}

src-web/hooks/useRequest.ts

@@ -1,17 +1,21 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import { convertDates, HttpRequest } from '../lib/models';
-import { responsesQueryKey } from './useResponses';
 import { useNavigate } from 'react-router-dom';
+import type { HttpRequest } from '../lib/models';
+import { convertDates } from '../lib/models';
+import { responsesQueryKey } from './useResponses';
 
 export function requestsQueryKey(workspaceId: string) {
   return ['requests', { workspaceId }];
 }
 
 export function useRequests(workspaceId: string) {
-  return useQuery(requestsQueryKey(workspaceId), async () => {
+  return useQuery({
-    const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
+    queryKey: requestsQueryKey(workspaceId),
-    return requests.map(convertDates);
+    queryFn: async () => {
+      const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
+      return requests.map(convertDates);
+    },
   });
 }
 

src-web/lib/theme/theme.ts

@@ -87,27 +87,27 @@ export function generateColors(
 
 const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
   light: {
-    50: 0.98,
+    50: 1,
-    100: 0.88,
+    100: 0.9,
     200: 0.7,
-    300: 0.5,
+    300: 0.4,
-    400: 0.3,
+    400: 0.2,
     500: 0,
     600: -0.2,
-    700: -0.3,
+    700: -0.4,
-    800: -0.45,
+    800: -0.6,
-    900: -0.6,
+    900: -0.8,
-    950: -0.8,
+    950: -0.9,
   },
   dark: {
-    50: -0.98,
+    50: -0.9,
-    100: -0.93,
+    100: -0.8,
-    200: -0.78,
+    200: -0.6,
-    300: -0.63,
+    300: -0.4,
-    400: -0.44,
+    400: -0.2,
-    500: -0.2,
+    500: 0,
-    600: 0,
+    600: 0.2,
-    700: 0.3,
+    700: 0.4,
     800: 0.6,
     900: 0.8,
     950: 0.9,
@@ -122,8 +122,8 @@ export function generateColorVariant(
   whitePoint = 1,
 ): string {
   const { hsl } = parseColor(color || '');
-  // const lightnessMod = lightnessMap[appearance][variant];
+  const lightnessMod = lightnessMap[appearance][variant];
-  const lightnessMod = (appearance === 'dark' ? 1 : -1) * ((variant / 1000) * 2 - 1);
+  // const lightnessMod = (appearance === 'dark' ? 1 : -1) * ((variant / 1000) * 2 - 1);
   const newL =
     lightnessMod > 0
       ? hsl[2] + (100 * whitePoint - hsl[2]) * lightnessMod

src-web/lib/theme/window.ts

@@ -14,7 +14,7 @@ const darkTheme: AppTheme = {
         gray: '#656196',
         red: '#ee3b3b',
         orange: '#ff9411',
-        yellow: '#dcdc3b',
+        yellow: '#dcc73b',
         green: '#44cb44',
         blue: '#2e91ff',
         pink: '#f670f6',

tailwind.config.cjs

@@ -3,7 +3,7 @@ module.exports = {
     darkMode: ['class', '[data-appearance="dark"]'],
     content: [
         "./index.html",
-        "./src-web/**/*.{js,ts,jsx,tsx}",
+        "./src-web/**/*.{html,tsx}",
     ],
     theme: {
         extend: {},