Minor style updates

src-web/components/RequestPane.tsx

@@ -55,7 +55,7 @@ export function RequestPane({ fullHeight, className }: Props) {
         defaultValue="body"
         label="Request body"
       >
-        <TabContent value="headers" className="pl-2">
+        <TabContent value="headers">
           <PairEditor
             key={activeRequest.id}
             pairs={activeRequest.headers}

src-web/components/ResponsePane.tsx

@@ -70,15 +70,13 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
           )}
 
           <HStack alignItems="center" className="ml-auto h-8">
-            <IconButton
-              title={viewMode === 'pretty' ? 'View Raw' : 'View Prettified'}
-              icon={viewMode === 'pretty' ? 'eye' : 'code'}
-              size="sm"
-              className="ml-1"
-              onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
-            />
             <Dropdown
               items={[
+                {
+                  label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
+                  onSelect: () => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty')),
+                },
+                '-----',
                 {
                   label: 'Clear Response',
                   onSelect: deleteResponse.mutate,
@@ -100,7 +98,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
               <DropdownMenuTrigger>
                 <IconButton
                   title="Show response history"
-                  icon="clock"
+                  icon="triangleDown"
                   className="ml-auto"
                   size="sm"
                 />

src-web/components/Workspace.tsx

@@ -53,6 +53,7 @@ export default function Workspace() {
             {activeRequest?.name}
           </div>
           <div className="flex-1 flex justify-end -mr-2">
+            <IconButton size="sm" title="" icon="magnifyingGlass" />
             <IconButton size="sm" title="" icon="gear" />
           </div>
         </HStack>

src-web/components/core/Icon.tsx

@@ -23,6 +23,7 @@ import {
   UpdateIcon,
   RowsIcon,
   MagicWandIcon,
+  MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
 import classnames from 'classnames';
 
@@ -50,7 +51,9 @@ const icons = {
   triangleRight: TriangleRightIcon,
   update: UpdateIcon,
   magicWand: MagicWandIcon,
+  magnifyingGlass: MagnifyingGlassIcon,
   x: Cross2Icon,
+  empty: () => <span />,
 };
 
 export interface IconProps {

src-web/components/core/IconButton.tsx

@@ -22,6 +22,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     onClick,
     className,
     iconClassName,
+    tabIndex,
     size = 'md',
     iconSize,
     ...props
@@ -32,6 +33,9 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
   return (
     <Button
       ref={ref}
+      aria-hidden={icon === 'empty'}
+      disabled={icon === 'empty'}
+      tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
       onClick={(e) => {
         if (showConfirm) setConfirmed();
         onClick?.(e);

src-web/components/core/PairEditor.tsx

@@ -95,7 +95,7 @@ function FormRow({
 }) {
   const { id } = pairContainer;
   return (
-    <div className="group grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
+    <div className="group grid grid-cols-[1fr_1fr_auto] grid-rows-1 gap-2 items-center">
       <Input
         hideLabel
         containerClassName={classnames(isLast && 'border-dashed')}
@@ -118,7 +118,7 @@ function FormRow({
         placeholder={isLast ? 'new value' : 'value'}
         useEditor={{ useTemplating: true, contentType: 'text/plain' }}
       />
-      {onDelete && (
+      {onDelete ? (
         <IconButton
           icon="trash"
           title="Delete header"
@@ -126,6 +126,8 @@ function FormRow({
           tabIndex={-1}
           className={classnames('opacity-0 group-hover:opacity-100')}
         />
+      ) : (
+        <IconButton title="" icon="empty" />
       )}
     </div>
   );