mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-04-18 06:49:50 +02:00
Fix URL bar spacing
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user