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 = {
method: string;
className?: string;
onChange: (method: string) => void;
};
@@ -15,10 +16,11 @@ const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
export const RequestMethodDropdown = memo(function RequestMethodDropdown({
method,
onChange,
className,
}: Props) {
return (
<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()}
</Button>
</RadioDropdown>

View File

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

View File

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