Better URL bar

src-web/components/Button.tsx

@@ -31,7 +31,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
-        color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-700',
+        color === undefined &&
+          'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-800 hover:text-gray-900',
         color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80 text-white',
         color === 'secondary' &&
           'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80 text-white',

src-web/components/Editor/Editor.css

@@ -36,11 +36,6 @@
     cursor: text;
 }
 
-.cm-editor.cm-focused {
-    outline: 0;
-    box-shadow: 0 0 0 2pt rgba(180, 180, 180, 0.1);
-}
-
 .cm-editor .cm-cursor {
     border-left: 2px solid red;
 }

src-web/components/Icon.tsx

@@ -33,7 +33,12 @@ export function Icon({ icon, spin, size = 'md', className }: IconProps) {
   const Component = icons[icon];
   return (
     <Component
-      className={classnames(className, size === 'md' && 'h-4 w-4', spin && 'animate-spin')}
+      className={classnames(
+        className,
+        'text-gray-800',
+        size === 'md' && 'h-4 w-4',
+        spin && 'animate-spin',
+      )}
     />
   );
 }

src-web/components/Input.tsx

@@ -1,45 +1,57 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
-import { VStack } from './Stacks';
+import { HStack, VStack } from './Stacks';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
   label: string;
   hideLabel?: boolean;
   labelClassName?: string;
-  containerClassName?: string;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
 }
 
 export function Input({
   label,
-  containerClassName,
   labelClassName,
   hideLabel,
   className,
   name,
+  leftSlot,
+  rightSlot,
   ...props
 }: Props) {
   const id = `input-${name}`;
   return (
-    <VStack className={classnames(containerClassName, 'w-full')}>
+    <HStack items="center" className="w-full bg-gray-50 h-10 rounded-md text-sm ">
-      <label
+      {leftSlot}
-        htmlFor={name}
+      <VStack
         className={classnames(
-          labelClassName,
+          'w-full border-gray-100/50',
-          'font-semibold text-sm uppercase text-gray-700',
+          leftSlot && 'border-l ml-0.5',
-          hideLabel && 'sr-only',
+          rightSlot && 'border-r mr-0.5',
         )}
       >
-        {label}
+        <label
-      </label>
+          htmlFor={name}
-      <input
+          className={classnames(
-        id={id}
+            labelClassName,
-        className={classnames(
+            'font-semibold text-sm uppercase text-gray-700',
-          className,
+            hideLabel && 'sr-only',
-          'w-0 min-w-[100%] bg-gray-50 h-10 pl-3 pr-2 rounded-md text-sm focus:outline-none',
+          )}
-        )}
+        >
-        {...props}
+          {label}
-      />
+        </label>
-    </VStack>
+        <input
+          id={id}
+          className={classnames(
+            className,
+            'bg-transparent pl-3 pr-2 h-full w-0 min-w-[100%] focus:outline-none',
+          )}
+          {...props}
+        />
+      </VStack>
+      {rightSlot}
+    </HStack>
   );
 }

src-web/components/Sidebar.tsx

@@ -11,7 +11,7 @@ type Props = HTMLAttributes<HTMLDivElement>;
 export function Sidebar({ className, ...props }: Props) {
   return (
     <div
-      className={classnames(className, 'w-52 bg-gray-50 h-full border-r border-gray-500/10')}
+      className={classnames(className, 'w-52 bg-gray-50/40 h-full border-gray-500/10')}
       {...props}
     >
       <HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">

src-web/components/UrlBar.tsx

@@ -29,32 +29,30 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
 
   return (
     <HStack as="form" className="items-end" onSubmit={handleSendRequest} space={2}>
-      <div className="w-full relative">
+      <Input
-        <div className="flex items-center absolute left-0 top-0 bottom-0">
+        hideLabel
+        name="url"
+        label="Enter URL"
+        className="font-mono pr-12"
+        onChange={(e) => onUrlChange(e.currentTarget.value)}
+        value={url}
+        placeholder="Enter a URL..."
+        leftSlot={
           <DropdownMenuRadio
             onValueChange={onMethodChange}
             value={method.value}
             items={[
               { label: 'GET', value: 'GET' },
               { label: 'PUT', value: 'PUT' },
-              { label: 'PST', value: 'POST' },
+              { label: 'POST', value: 'POST' },
             ]}
           >
             <Button disabled={loading} forDropdown size="sm" className="ml-1 w-22" justify="start">
               {method.label}
             </Button>
           </DropdownMenuRadio>
-        </div>
+        }
-        <Input
+        rightSlot={
-          hideLabel
-          name="url"
-          label="Enter URL"
-          className="font-mono pr-12 !pl-20"
-          onChange={(e) => onUrlChange(e.currentTarget.value)}
-          value={url}
-          placeholder="Enter a URL..."
-        />
-        <div className="flex items-center absolute right-0 top-0 bottom-0">
           <IconButton
             icon={loading ? 'update' : 'paper-plane'}
             spin={loading}
@@ -62,8 +60,8 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
             size="sm"
             className="w-10 mr-1"
           />
-        </div>
+        }
-      </div>
+      />
     </HStack>
   );
 }

src-web/hooks/useCodemirror.ts

@@ -12,11 +12,11 @@ const myHighlightStyle = HighlightStyle.define([
     tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
     color: '#757b93',
   },
-  { tag: tags.name, color: '#4dafff' },
+  { tag: tags.name, color: '#4699de' },
-  { tag: tags.variableName, color: '#4bff4e' },
+  { tag: tags.variableName, color: '#31c434' },
   { tag: tags.attributeName, color: '#b06fff' },
   { tag: tags.attributeValue, color: '#ff964b' },
-  { tag: [tags.keyword, tags.string], color: '#fc6' },
+  { tag: [tags.keyword, tags.string], color: '#e8b045' },
   { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
 ]);
 

tailwind.config.cjs

@@ -15,6 +15,7 @@ module.exports = {
             full: '9999px',
         },
         colors: {
+            transparent: 'transparent',
             white: 'hsl(var(--color-white) / <alpha-value>)',
             background: 'hsl(var(--color-background) / <alpha-value>)',
             gray: color('gray'),