Minor theme updates again

2026-03-24 10:21:15 +01:00 · 2023-03-08 09:43:35 -08:00
parent eec65f8721
commit 6eaad1352a
12 changed files with 70 additions and 60 deletions
--- a/src-web/components/Dialog.tsx
+++ b/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]',
              )}
            >
--- a/src-web/components/Editor/Editor.tsx
+++ b/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
-      ?.split(/\s+/)
-      .find((c) => c.startsWith('!bg-') || c.startsWith('bg-'));
-    if (bgClass && gutterEl) {
-      gutterEl?.classList.add(`${bgClass}`);
+    const classList = className?.split(/\s+/) ?? [];
+    const bgClasses = classList
+      .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
+      .map((c) => c.replace(/^bg-/, '!bg-')) // !important
+      .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]);
--- a/src-web/components/HeaderEditor.tsx
+++ b/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}>
--- a/src-web/components/Input.tsx
+++ b/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',
-    rightSlot && '!pr-1',
+    leftSlot && '!pl-0.5',
+    rightSlot && '!pr-0.5',
  );

  return (
--- a/src-web/components/RequestPane.tsx
+++ b/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}
--- a/src-web/components/ResponsePane.tsx
+++ b/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">
-                <StatusColor statusCode={response.status}>
-                  {response.status}
-                  {response.statusReason && ` ${response.statusReason}`}
-                </StatusColor>
-                &nbsp;&bull;&nbsp;
-                {response.elapsed}ms &nbsp;&bull;&nbsp;
-                {Math.round(response.body.length / 1000)} KB
-              </div>
+              {response.status > 0 && (
+                <div className="whitespace-nowrap">
+                  <StatusColor statusCode={response.status}>
+                    {response.status}
+                    {response.statusReason && ` ${response.statusReason}`}
+                  </StatusColor>
+                  &nbsp;&bull;&nbsp;
+                  {response.elapsed}ms &nbsp;&bull;&nbsp;
+                  {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}
--- a/src-web/components/RouterError.tsx
+++ b/src-web/components/RouterError.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { Link, useRouteError } from 'react-router-dom';
-import { Button } from './Button';
+import { useRouteError } from 'react-router-dom';
 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">
-          {JSON.stringify(error, null, 2)}
+        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
+          {message}
        </pre>
        <ButtonLink to="/" color="primary">
          Go Home
--- a/src-web/components/Sidebar.tsx
+++ b/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')}