starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-24 10:21:15 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Focus states

Browse Source
This commit is contained in:
Gregory Schier
2023-02-24 12:35:13 -08:00
parent 3fd8cd5713
commit 989271f653
5 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src-web/components/Editor/Editor.css
View File

@@ -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 {
border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50));
.cm-editor.cm-focused .cm-scroller {
border-color: hsl(var(--color-blue-400)/0.4);
}
.cm-editor .cm-line {

14
src-web/components/Input.tsx
View File

@@ -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}
/>

2
src-web/components/Stacks.tsx
View File

@@ -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) {

7
src-web/components/UrlBar.tsx
View File

@@ -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"
/>
}