Fix URL bar spacing

This commit is contained in:
Gregory Schier
2023-03-20 17:01:29 -07:00
parent 268545c728
commit 74a1cb61c1
3 changed files with 10 additions and 5 deletions

View File

@@ -4,6 +4,7 @@ import { RadioDropdown } from './core/RadioDropdown';
type Props = { type Props = {
method: string; method: string;
className?: string;
onChange: (method: string) => void; onChange: (method: string) => void;
}; };
@@ -15,10 +16,11 @@ const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
export const RequestMethodDropdown = memo(function RequestMethodDropdown({ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
method, method,
onChange, onChange,
className,
}: Props) { }: Props) {
return ( return (
<RadioDropdown value={method} items={methodItems} onChange={onChange}> <RadioDropdown value={method} items={methodItems} onChange={onChange}>
<Button type="button" size="sm" className="mx-0.5" justify="start"> <Button size="sm" className={className}>
{method.toUpperCase()} {method.toUpperCase()}
</Button> </Button>
</RadioDropdown> </RadioDropdown>

View File

@@ -29,7 +29,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
); );
return ( return (
<form onSubmit={handleSubmit} className={className}> <form onSubmit={handleSubmit} className={classnames('url-bar', className)}>
<Input <Input
key={requestId} key={requestId}
hideLabel hideLabel
@@ -42,7 +42,9 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
onChange={handleUrlChange} onChange={handleUrlChange}
defaultValue={url} defaultValue={url}
placeholder="Enter a URL..." placeholder="Enter a URL..."
leftSlot={<RequestMethodDropdown method={method} onChange={handleMethodChange} />} leftSlot={
<RequestMethodDropdown method={method} onChange={handleMethodChange} className="mx-0.5" />
}
rightSlot={ rightSlot={
<IconButton <IconButton
title="Send Request" title="Send Request"

View File

@@ -47,8 +47,9 @@ export function Input({
const inputClassName = classnames( const inputClassName = classnames(
className, className,
'!bg-transparent min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder', '!bg-transparent min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
!!leftSlot && '!pl-0.5', // Bump things over if the slots are occupied
!!rightSlot && '!pr-0.5', leftSlot && 'pl-0.5 -ml-2',
rightSlot && 'pr-0.5 -mr-2',
); );
const isValid = useMemo(() => { const isValid = useMemo(() => {