Minor style tweaks

src-web/components/Button.tsx

@@ -11,10 +11,10 @@ import { Icon } from './Icon';
 const colorStyles = {
   default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-900',
   gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-900',
-  primary: 'bg-blue-400',
+  primary: 'bg-blue-400 text-white',
-  secondary: 'bg-violet-400',
+  secondary: 'bg-violet-400 text-white',
-  warning: 'bg-orange-400',
+  warning: 'bg-orange-400 text-white',
-  danger: 'bg-red-400',
+  danger: 'bg-red-400 text-white',
 };
 
 export type ButtonProps<T extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -48,6 +48,7 @@ export const Button = forwardRef(function Button<T extends ElementType>(
         'outline-none', // TODO: Add focus styles
         'border border-transparent focus-visible:border-blue-300',
         'transition-all rounded-md flex items-center hover:text-white',
+        'bg-opacity-90 hover:bg-opacity-100',
         // 'active:translate-y-[0.5px] active:scale-[0.99]',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',

src-web/components/Dialog.tsx

@@ -28,7 +28,7 @@ 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 dark:bg-black/50" />
+          <D.Overlay className="fixed inset-0 bg-gray-900/60 dark:bg-black/50" />
           <D.Content>
             <div className={classnames(className, 'fixed inset-0')}>
               <div

src-web/components/Editor/Editor.css

@@ -25,6 +25,10 @@
         @apply text-placeholder;
     }
 
+    .cm-scroller {
+        @apply font-mono text-[0.8rem];
+    }
+
     .cm-gutters {
         @apply border-0 text-gray-500 text-opacity-30;
 
@@ -39,7 +43,7 @@
     }
 
     .placeholder-widget {
-        @apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background py-0.5
+        @apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background/70
         rounded cursor-default hover:bg-gray-300 hover:text-white;
     }
 }
@@ -51,7 +55,8 @@
     }
 
     .cm-scroller {
-        overflow: hidden !important;;
+        overflow: hidden !important;
+        font-family: inherit;
     }
 
     .cm-line {
@@ -61,7 +66,7 @@
 
 .cm-multiline {
     .cm-editor {
-        @apply h-full text-[0.95em];
+        @apply h-full;
         position: absolute !important;
     }
 
@@ -128,7 +133,7 @@
 }
 
 .cm-editor .cm-selectionBackground {
-    @apply bg-gray-400;
+    @apply bg-gray-200/70;
 }
 
 .cm-editor.cm-focused .cm-selectionBackground {

src-web/components/Input.tsx

@@ -39,6 +39,13 @@ export function Input({
   ...props
 }: Props) {
   const id = `input-${name}`;
+  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',
+  );
+
   return (
     <VStack>
       <label
@@ -69,10 +76,7 @@ export function Input({
             defaultValue={defaultValue}
             placeholder={placeholder}
             onChange={onChange}
-            className={classnames(
+            className={inputClassName}
-              className,
-              '!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
-            )}
             {...props}
             {...useEditor}
           />
@@ -82,12 +86,7 @@ export function Input({
             onChange={(e) => onChange?.(e.target.value)}
             placeholder={placeholder}
             defaultValue={defaultValue}
-            className={classnames(
+            className={inputClassName}
-              className,
-              '!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none placeholder:text-placeholder',
-              leftSlot && '!pl-1',
-              rightSlot && '!pr-1',
-            )}
             {...props}
           />
         )}

src-web/components/ResponsePane.tsx

@@ -6,6 +6,7 @@ import Editor from './Editor/Editor';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 import { HStack } from './Stacks';
+import { StatusColor } from './StatusColor';
 
 interface Props {
   requestId: string;
@@ -58,8 +59,10 @@ export function ResponsePane({ requestId, className }: Props) {
               className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
             >
               <div className="whitespace-nowrap">
-                {response.status}
+                <StatusColor statusCode={response.status}>
-                {response.statusReason && ` ${response.statusReason}`}
+                  {response.status}
+                  {response.statusReason && ` ${response.statusReason}`}
+                </StatusColor>
                 &nbsp;&bull;&nbsp;
                 {response.elapsed}ms &nbsp;&bull;&nbsp;
                 {Math.round(response.body.length / 1000)} KB

src-web/components/StatusColor.tsx

@@ -0,0 +1,23 @@
+import classnames from 'classnames';
+import type { ReactNode } from 'react';
+
+interface Props {
+  statusCode: number;
+  children: ReactNode;
+}
+
+export function StatusColor({ statusCode, children }: Props) {
+  return (
+    <span
+      className={classnames(
+        statusCode >= 100 && statusCode < 200 && 'text-green-500',
+        statusCode >= 200 && statusCode < 300 && 'text-green-500',
+        statusCode >= 300 && statusCode < 400 && 'text-pink-500',
+        statusCode >= 400 && statusCode < 500 && 'text-orange-500',
+        statusCode >= 500 && statusCode < 600 && 'text-red-500',
+      )}
+    >
+      {children}
+    </span>
+  );
+}

src-web/components/UrlBar.tsx

@@ -34,7 +34,7 @@ export function UrlBar({
         hideLabel
         useEditor={{ useTemplating: true, contentType: 'url' }}
         size="sm"
-        className="font-mono"
+        className="font-mono px-0"
         name="url"
         label="Enter URL"
         containerClassName={className}

src-web/lib/theme/window.ts

@@ -12,13 +12,13 @@ const darkTheme: AppTheme = {
       whitePoint: 0.95,
       colors: {
         gray: '#656196',
-        red: '#ff2727',
+        red: '#ee3b3b',
         orange: '#ff9411',
-        yellow: '#dede34',
+        yellow: '#dcdc3b',
-        green: '#39da39',
+        green: '#44cb44',
         blue: '#2e91ff',
-        pink: '#ff74ff',
+        pink: '#f670f6',
-        violet: '#a853ff',
+        violet: '#ae70ff',
       },
     },
   },

tailwind.config.cjs

@@ -7,6 +7,9 @@ module.exports = {
     ],
     theme: {
         extend: {},
+        fontFamily: {
+            'mono': ['JetBrains Mono', "Menlo", 'monospace'],
+        },
         borderRadius: {
             none: '0px',
             sm: 'var(--border-radius-sm)',