Focus states

src-web/App.tsx

@@ -2,13 +2,11 @@ import { useState } from 'react';
 import { invoke } from '@tauri-apps/api/tauri';
 import Editor from './components/Editor/Editor';
 import { HStack, VStack } from './components/Stacks';
-import { Dropdown, DropdownMenuRadio } from './components/Dropdown';
+import { Dropdown } from './components/Dropdown';
 import { WindowDragRegion } from './components/WindowDragRegion';
 import { IconButton } from './components/IconButton';
 import { Sidebar } from './components/Sidebar';
 import { UrlBar } from './components/UrlBar';
-import { Input } from './components/Input';
-import { Button } from './components/Button';
 import { Grid } from './components/Grid';
 
 interface Response {
@@ -53,7 +51,8 @@ function App() {
         <Sidebar />
         <Grid cols={2}>
           <VStack className="w-full">
-            <HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5">
+            <HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5"></HStack>
+            <VStack className="pl-3 px-1.5 py-3" space={3}>
               <UrlBar
                 method={method}
                 url={url}
@@ -61,23 +60,11 @@ function App() {
                 onUrlChange={setUrl}
                 sendRequest={sendRequest}
               />
-            </HStack>
-            <VStack className="pl-3 px-1.5 py-3" space={3}>
               <Editor value="" contentType={contentType} />
             </VStack>
           </VStack>
           <VStack className="w-full">
             <HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">
-              {response && (
-                <div className="my-1 italic text-gray-500 text-sm w-full pointer-events-none">
-                  {response.method.toUpperCase()}
-                  &nbsp;&bull;&nbsp;
-                  {response.status}
-                  &nbsp;&bull;&nbsp;
-                  {response.elapsed}ms &nbsp;&bull;&nbsp;
-                  {response.elapsed2}ms
-                </div>
-              )}
               <Dropdown
                 items={[
                   {
@@ -97,6 +84,15 @@ function App() {
               {error && <div className="text-white bg-red-500 px-3 py-1 rounded">{error}</div>}
               {response !== null && (
                 <>
+                  <HStack
+                    items="center"
+                    className="italic text-gray-500 text-sm w-full pointer-events-none h-10 mb-3 flex-shrink-0"
+                  >
+                    {response.status}
+                    &nbsp;&bull;&nbsp;
+                    {response.elapsed}ms &nbsp;&bull;&nbsp;
+                    {response.elapsed2}ms
+                  </HStack>
                   {contentType.includes('html') ? (
                     <iframe
                       title="Response preview"

src-web/components/Editor/Editor.css

@@ -10,19 +10,21 @@
     right: 0;
     top: 0;
     bottom: 0;
-    border-radius: var(--border-radius-lg);
-    border: 1px solid hsl(var(--color-gray-50));
     font-size: 0.9rem;
 }
 
+.cm-editor .cm-scroller {
+    border: 1px solid hsl(var(--color-gray-50));
+    border-radius: var(--border-radius-lg);
+    background-color: hsl(var(--color-gray-50));
+}
+
 .cm-editor.cm-focused {
     outline: none !important;
-    border-color: hsl(var(--color-gray-100));
 }
 
-.cm-editor .cm-scroller {
+.cm-editor.cm-focused .cm-scroller {
-    border-radius: var(--border-radius-lg);
+    border-color: hsl(var(--color-blue-400)/0.4);
-    background-color: hsl(var(--color-gray-50));
 }
 
 .cm-editor .cm-line {

src-web/components/Input.tsx

@@ -29,10 +29,16 @@ export function Input({
   return (
     <HStack
       items="center"
-      className={classnames(containerClassName, 'w-full bg-gray-50 rounded-md text-sm')}
+      className={classnames(
+        containerClassName,
+        'w-full bg-gray-50 rounded-md text-sm overflow-hidden text-gray-900',
+        'border border-transparent focus-within:border-blue-400/40',
+        size === 'md' && 'h-10',
+        size === 'sm' && 'h-8',
+      )}
     >
       {leftSlot}
-      <VStack className={classnames('w-full border-gray-100/50')}>
+      <VStack className="w-full">
         <label
           htmlFor={name}
           className={classnames(
@@ -47,11 +53,9 @@ export function Input({
           id={id}
           className={classnames(
             className,
-            'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none text-gray-900',
+            'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
             leftSlot && 'pl-1',
             rightSlot && 'pr-1',
-            size === 'md' && 'h-10',
-            size === 'sm' && 'h-8',
           )}
           {...props}
         />

src-web/components/Stacks.tsx

@@ -19,7 +19,7 @@ const spaceClassesY = {
 
 interface HStackProps extends BaseStackProps {
   space?: keyof typeof spaceClassesX;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export function HStack({ className, space, children, ...props }: HStackProps) {

src-web/components/UrlBar.tsx

@@ -28,10 +28,9 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
   };
 
   return (
-    <form onSubmit={handleSendRequest} className="w-full flex items-center overflow-hidden">
+    <form onSubmit={handleSendRequest} className="w-full flex items-center">
       <Input
         hideLabel
-        size="sm"
         name="url"
         label="Enter URL"
         className="font-mono"
@@ -48,7 +47,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
               { label: 'POST', value: 'POST' },
             ]}
           >
-            <Button disabled={loading} size="xs" className="ml-1" justify="start">
+            <Button disabled={loading} size="sm" className="ml-1" justify="start">
               {method.label}
             </Button>
           </DropdownMenuRadio>
@@ -58,7 +57,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
             icon={loading ? 'update' : 'paper-plane'}
             spin={loading}
             disabled={loading}
-            size="xs"
+            size="sm"
             className="mr-1"
           />
         }