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

Custom font sizes and better zoom

Browse Source
This commit is contained in:
Gregory Schier
2024-05-29 12:10:01 -07:00
parent 5eb2e2b5a2
commit 8cd3961f87
55 changed files with 487 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src-web/components/BinaryFileEditor.tsx
View File

@@ -49,7 +49,7 @@ export function BinaryFileEditor({
<Button variant="border" color="secondary" size="sm" onClick={handleClick}>
Choose File
</Button>
<div className="text-xs font-mono truncate rtl pr-3 text-fg">
<div className="text-sm font-mono truncate rtl pr-3 text-fg">
{/* Special character to insert ltr text in rtl element without making things wonky */}
&#x200E;
{filePath ?? 'Select File'}
@@ -57,7 +57,7 @@ export function BinaryFileEditor({
</HStack>
{filePath != null && mimeType !== contentType && !ignoreContentType.value && (
<Banner className="mt-3 !py-5">
<div className="text-sm mb-4 text-center">
<div className="mb-4 text-center">
<div>Set Content-Type header</div>
<InlineCode>{mimeType}</InlineCode> for current request?
</div>
@@ -65,12 +65,12 @@ export function BinaryFileEditor({
<Button
variant="solid"
color="secondary"
size="xs"
size="sm"
onClick={() => onChangeContentType(mimeType)}
>
Set Header
</Button>
<Button size="xs" variant="border" onClick={() => ignoreContentType.set(true)}>
<Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
Ignore
</Button>
</HStack>

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

@@ -28,7 +28,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
return (
<div className="pb-2">
<table className="w-full text-xs mb-auto min-w-full max-w-full divide-y divide-background-highlight">
<table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-background-highlight">
<thead>
<tr>
<th className="py-2 text-left">Domain</th>

61
src-web/components/GlobalHooks.tsx
View File

@@ -1,5 +1,6 @@
import { useQueryClient } from '@tanstack/react-query';
import { getCurrent } from '@tauri-apps/api/webviewWindow';
import { useEffect } from 'react';
import { useCommandPalette } from '../hooks/useCommandPalette';
import { cookieJarsQueryKey } from '../hooks/useCookieJars';
import { foldersQueryKey } from '../hooks/useFolders';
@@ -7,6 +8,7 @@ import { useGlobalCommands } from '../hooks/useGlobalCommands';
import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
import { useHotKey } from '../hooks/useHotKey';
import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
import { keyValueQueryKey } from '../hooks/useKeyValue';
@@ -16,15 +18,15 @@ import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { settingsQueryKey } from '../hooks/useSettings';
import { settingsQueryKey, useSettings } from '../hooks/useSettings';
import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument';
import { useSyncWindowTitle } from '../hooks/useSyncWindowTitle';
import { useUpdateSettings } from '../hooks/useUpdateSettings';
import { workspacesQueryKey } from '../hooks/useWorkspaces';
import { useZoom } from '../hooks/useZoom';
import type { Model } from '../lib/models';
import { modelsEq } from '../lib/models';
const DEFAULT_FONT_SIZE = 16;
export function GlobalHooks() {
// Include here so they always update, even if no component references them
useRecentWorkspaces();
@@ -125,26 +127,43 @@ export function GlobalHooks() {
}
});
useListenToTauriEvent<number>(
'zoom',
({ payload: zoomDelta }) => {
const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
const settings = useSettings();
useEffect(() => {
if (settings == null) {
return;
}
let newFontSize;
if (zoomDelta === 0) {
newFontSize = DEFAULT_FONT_SIZE;
} else if (zoomDelta > 0) {
newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
} else if (zoomDelta < 0) {
newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
}
const { interfaceScale, interfaceFontSize, editorFontSize } = settings;
getCurrent().setZoom(interfaceScale).catch(console.error);
document.documentElement.style.cssText = [
`font-size: ${interfaceFontSize}px`,
`--editor-font-size: ${editorFontSize}px`,
].join('; ');
}, [settings]);
const updateSettings = useUpdateSettings();
document.documentElement.style.fontSize = `${newFontSize}px`;
},
{
target: { kind: 'WebviewWindow', label: getCurrent().label },
},
);
// Handle Zoom. Note, Mac handles it in app menu, so need to also handle keyboard
// shortcuts for Windows/Linux
const zoom = useZoom();
useHotKey('app.zoom_in', () => zoom.zoomIn);
useListenToTauriEvent('zoom_in', () => zoom.zoomIn);
useHotKey('app.zoom_out', () => zoom.zoomOut);
useListenToTauriEvent('zoom_out', () => zoom.zoomOut);
useHotKey('app.zoom_out', () => zoom.zoomReset);
useListenToTauriEvent('zoom_out', () => zoom.zoomReset);
useHotKey('app.zoom_out', () => {
if (!settings) return;
updateSettings.mutate({
...settings,
interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9),
});
});
useHotKey('app.zoom_reset', () => {
if (!settings) return;
updateSettings.mutate({ ...settings, interfaceScale: 1 });
});
return null;
}

8
src-web/components/GrpcConnectionMessagesPane.tsx
View File

@@ -105,7 +105,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'}
</div>
{!showLarge && activeEvent.content.length > 1000 * 1000 ? (
<VStack space={2} className="text-sm italic text-fg-subtler">
<VStack space={2} className="italic text-fg-subtler">
Message previews larger than 1MB are hidden
<div>
<Button
@@ -136,7 +136,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
{activeEvent.content}
</div>
{activeEvent.error && (
<div className="select-text cursor-text text-xs font-mono py-1 text-fg-warning">
<div className="select-text cursor-text text-sm font-mono py-1 text-fg-warning">
{activeEvent.error}
</div>
)}
@@ -220,11 +220,11 @@ function EventRow({
: 'info'
}
/>
<div className={classNames('w-full truncate text-2xs')}>
<div className={classNames('w-full truncate text-xs')}>
{content.slice(0, 1000)}
{error && <span className="text-fg-warning"> ({error})</span>}
</div>
<div className={classNames('opacity-50 text-2xs')}>
<div className={classNames('opacity-50 text-xs')}>
{format(createdAt + 'Z', 'HH:mm:ss.SSS')}
</div>
</button>

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

@@ -209,7 +209,7 @@ export function GrpcConnectionSetupPane({
rightSlot={<Icon className="text-fg-subtler" size="sm" icon="chevronDown" />}
disabled={isStreaming || services == null}
className={classNames(
'font-mono text-xs min-w-[5rem] !ring-0',
'font-mono text-sm min-w-[5rem] !ring-0',
paneSize < 400 && 'flex-1',
)}
>

13
src-web/components/GrpcProtoSelection.tsx
View File

@@ -40,7 +40,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
<HStack space={2} justifyContent="start" className="flex-row-reverse">
<Button
color="primary"
size="sm"
onClick={async () => {
const selected = await open({
title: 'Select Proto Files',
@@ -61,7 +60,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
isLoading={grpc.reflect.isFetching}
disabled={grpc.reflect.isFetching}
color="secondary"
size="sm"
onClick={() => grpc.reflect.refetch()}
>
Refresh Schema
@@ -103,25 +101,24 @@ export function GrpcProtoSelection({ requestId }: Props) {
)}
{protoFiles.length > 0 && (
<table className="w-full divide-y">
<table className="w-full divide-y divide-background-highlight">
<thead>
<tr>
<th className="text-fg-subtler">
<span className="font-mono text-sm">*.proto</span> Files
<span className="font-mono">*.proto</span> Files
</th>
<th></th>
</tr>
</thead>
<tbody className="divide-y">
<tbody className="divide-y divide-background-highlight">
{protoFiles.map((f, i) => (
<tr key={f + i} className="group">
<td className="pl-1 text-sm font-mono">{f.split('/').pop()}</td>
<td className="pl-1 font-mono">{f.split('/').pop()}</td>
<td className="w-0 py-0.5">
<IconButton
title="Remove file"
size="sm"
icon="trash"
className="ml-auto opacity-30 transition-opacity group-hover:opacity-100"
className="ml-auto opacity-50 transition-opacity group-hover:opacity-100"
onClick={async () => {
await protoFilesKv.set(protoFiles.filter((p) => p !== f));
}}

4
src-web/components/KeyboardShortcutsDialog.tsx
View File

@@ -1,10 +1,10 @@
import { hotkeyActions } from '../hooks/useHotKey';
import { HotKeyList } from './core/HotKeyList';
export const KeyboardShortcutsDialog = () => {
export function KeyboardShortcutsDialog() {
return (
<div className="h-full w-full pb-2">
<HotKeyList hotkeys={hotkeyActions} />
</div>
);
};
}

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

@@ -45,7 +45,7 @@ export function RecentConnectionsDropdown({
label: (
<HStack space={2} alignItems="center">
{formatDistanceToNowStrict(c.createdAt + 'Z')} ago &bull;{' '}
<span className="font-mono text-xs">{c.elapsed}ms</span>
<span className="font-mono text-sm">{c.elapsed}ms</span>
</HStack>
),
leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,

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

@@ -86,7 +86,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
hotkeyAction="request_switcher.toggle"
className={classNames(
className,
'text-fg text-sm truncate pointer-events-auto',
'text-fg truncate pointer-events-auto',
activeRequest === null && 'text-fg-subtler italic',
)}
>

6
src-web/components/RecentResponsesDropdown.tsx
View File

@@ -43,13 +43,13 @@ export const RecentResponsesDropdown = function ResponsePane({
disabled: responses.length === 0,
},
{ type: 'separator', label: 'History' },
...responses.slice(0, 20).map((r) => ({
...responses.slice(0, 20).map((r: HttpResponse) => ({
key: r.id,
label: (
<HStack space={2} alignItems="center">
<StatusTag className="text-xs" response={r} />
<StatusTag className="text-sm" response={r} />
<span>&rarr;</span>{' '}
<span className="font-mono text-xs">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
<span className="font-mono text-sm">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
</HStack>
),
leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,

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

@@ -94,7 +94,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
<HStack
alignItems="center"
className={classNames(
'text-fg-subtle text-sm w-full flex-shrink-0',
'text-fg-subtle w-full flex-shrink-0',
// Remove a bit of space because the tabs have lots too
'-mb-1.5',
)}

90
src-web/components/Settings/SettingsAppearance.tsx
View File

@@ -7,6 +7,7 @@ import { useSettings } from '../../hooks/useSettings';
import { useThemes } from '../../hooks/useThemes';
import { useUpdateSettings } from '../../hooks/useUpdateSettings';
import { trackEvent } from '../../lib/analytics';
import { clamp } from '../../lib/clamp';
import { isThemeDark } from '../../lib/theme/window';
import type { ButtonProps } from '../core/Button';
import { Button } from '../core/Button';
@@ -14,8 +15,10 @@ import { Editor } from '../core/Editor';
import type { IconProps } from '../core/Icon';
import { Icon } from '../core/Icon';
import { IconButton } from '../core/IconButton';
import { PlainInput } from '../core/PlainInput';
import type { SelectOption } from '../core/Select';
import { Select } from '../core/Select';
import { Separator } from '../core/Separator';
import { HStack, VStack } from '../core/Stacks';
const buttonColors: ButtonProps['color'][] = [
@@ -75,6 +78,41 @@ export function SettingsAppearance() {
return (
<VStack space={2} className="mb-4">
<PlainInput
size="sm"
name="interfaceFontSize"
label="Font Size"
placeholder="16"
type="number"
labelPosition="left"
defaultValue={`${settings.interfaceFontSize}`}
validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
onChange={(v) =>
updateSettings.mutate({
...settings,
interfaceFontSize: clamp(parseInt(v) || 16, 8, 30),
})
}
/>
<PlainInput
size="sm"
name="editorFontSize"
label="Editor Font Size"
placeholder="14"
type="number"
labelPosition="left"
defaultValue={`${settings.editorFontSize}`}
validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
onChange={(v) =>
updateSettings.mutate({
...settings,
editorFontSize: clamp(parseInt(v) || 14, 8, 30),
})
}
/>
<Separator className="my-4" />
<Select
name="appearance"
label="Appearance"
@@ -91,37 +129,35 @@ export function SettingsAppearance() {
{ label: 'Dark', value: 'dark' },
]}
/>
<div className="grid grid-cols-2 gap-3">
<Select
name="lightTheme"
label={'Light Theme' + (appearance !== 'dark' ? ' (active)' : '')}
labelPosition="top"
size="sm"
value={activeTheme.light.id}
options={lightThemes}
onChange={async (themeLight) => {
await updateSettings.mutateAsync({ ...settings, themeLight });
trackEvent('setting', 'update', { themeLight });
}}
/>
<Select
name="darkTheme"
label={'Dark Theme' + (appearance === 'dark' ? ' (active)' : '')}
labelPosition="top"
size="sm"
value={activeTheme.dark.id}
options={darkThemes}
onChange={async (themeDark) => {
await updateSettings.mutateAsync({ ...settings, themeDark });
trackEvent('setting', 'update', { themeDark });
}}
/>
</div>
<Select
name="lightTheme"
label="Light Theme"
labelPosition="left"
size="sm"
value={activeTheme.light.id}
options={lightThemes}
onChange={async (themeLight) => {
await updateSettings.mutateAsync({ ...settings, themeLight });
trackEvent('setting', 'update', { themeLight });
}}
/>
<Select
name="darkTheme"
label="Dark Theme"
labelPosition="left"
size="sm"
value={activeTheme.dark.id}
options={darkThemes}
onChange={async (themeDark) => {
await updateSettings.mutateAsync({ ...settings, themeDark });
trackEvent('setting', 'update', { themeDark });
}}
/>
<VStack
space={3}
className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
>
<div className="text-sm text-fg font-bold">
<div className="text-fg font-bold">
Theme Preview <span className="text-fg-subtle">({appearance})</span>
</div>
<HStack space={1.5} alignItems="center" className="w-full">

3
src-web/components/Settings/SettingsDialog.tsx
View File

@@ -16,8 +16,7 @@ enum Tab {
}
const tabs = [Tab.General, Tab.Appearance, Tab.Design];
const useTabState = createGlobalState<string>(Tab.Appearance);
const useTabState = createGlobalState<string>(tabs[0]!);
export const SettingsDialog = () => {
const [tab, setTab] = useTabState();

28
src-web/components/Settings/SettingsGeneral.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
import { useAppInfo } from '../../hooks/useAppInfo';
import { useCheckForUpdates } from '../../hooks/useCheckForUpdates';
@@ -35,19 +36,13 @@ export function SettingsGeneral() {
labelPosition="left"
size="sm"
value={settings.updateChannel}
onChange={async (updateChannel) => {
onChange={(updateChannel) => {
trackEvent('setting', 'update', { update_channel: updateChannel });
await updateSettings.mutateAsync({ ...settings, updateChannel });
updateSettings.mutate({ ...settings, updateChannel });
}}
options={[
{
label: 'Release',
value: 'stable',
},
{
label: 'Early Bird (Beta)',
value: 'beta',
},
{ label: 'Release', value: 'stable' },
{ label: 'Early Bird (Beta)', value: 'beta' },
]}
/>
<IconButton
@@ -59,12 +54,11 @@ export function SettingsGeneral() {
onClick={() => checkForUpdates.mutateAsync()}
/>
</div>
<Separator className="my-4" />
<Heading size={2}>
Workspace{' '}
<div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 text-sm rounded text-fg">
<div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 rounded text-fg text-shrink">
{workspace.name}
</div>
</Heading>
@@ -77,28 +71,28 @@ export function SettingsGeneral() {
labelPosition="left"
defaultValue={`${workspace.settingRequestTimeout}`}
validate={(value) => parseInt(value) >= 0}
onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
onChange={(v) => updateWorkspace.mutate({ settingRequestTimeout: parseInt(v) || 0 })}
/>
<Checkbox
checked={workspace.settingValidateCertificates}
title="Validate TLS Certificates"
onChange={async (settingValidateCertificates) => {
onChange={(settingValidateCertificates) => {
trackEvent('workspace', 'update', {
validate_certificates: JSON.stringify(settingValidateCertificates),
});
await updateWorkspace.mutateAsync({ settingValidateCertificates });
updateWorkspace.mutate({ settingValidateCertificates });
}}
/>
<Checkbox
checked={workspace.settingFollowRedirects}
title="Follow Redirects"
onChange={async (settingFollowRedirects) => {
onChange={(settingFollowRedirects) => {
trackEvent('workspace', 'update', {
follow_redirects: JSON.stringify(settingFollowRedirects),
});
await updateWorkspace.mutateAsync({ settingFollowRedirects });
updateWorkspace.mutate({ settingFollowRedirects });
}}
/>
</VStack>

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

@@ -53,7 +53,7 @@ export function SettingsDropdown() {
dialog.show({
id: 'hotkey',
title: 'Keyboard Shortcuts',
size: 'sm',
size: 'dynamic',
render: () => <KeyboardShortcutsDialog />,
});
},

6
src-web/components/Sidebar.tsx
View File

@@ -512,7 +512,7 @@ function SidebarItems({
className={classNames(
tree.depth > 0 && 'border-l border-background-highlight-secondary',
tree.depth === 0 && 'ml-0',
tree.depth >= 1 && 'ml-[1.2em]',
tree.depth >= 1 && 'ml-[1.2rem]',
)}
>
{tree.children.map((child, i) => {
@@ -811,7 +811,7 @@ const SidebarItem = forwardRef(function SidebarItem(
data-active={isActive}
data-selected={selected}
className={classNames(
'w-full flex gap-1.5 items-center text-sm h-xs px-1.5 rounded-md',
'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md',
editing && 'ring-1 focus-within:ring-focus',
isActive && 'bg-background-highlight-secondary text-fg',
!isActive &&
@@ -855,7 +855,7 @@ const SidebarItem = forwardRef(function SidebarItem(
{isResponseLoading(latestHttpResponse) ? (
<Icon spin size="sm" icon="refresh" className="text-fg-subtler" />
) : (
<StatusTag className="text-2xs" response={latestHttpResponse} />
<StatusTag className="text-xs" response={latestHttpResponse} />
)}
</div>
) : null}

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

@@ -130,7 +130,7 @@ export default function Workspace() {
'grid w-full h-full',
// Animate sidebar width changes but only when not resizing
// because it's too slow to animate on mouse move
!isResizing && 'transition-all',
!isResizing && 'transition-grid',
)}
>
{floating ? (

2
src-web/components/core/Button.tsx
View File

@@ -71,7 +71,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
justify === 'start' && 'justify-start',
justify === 'center' && 'justify-center',
size === 'md' && 'h-md px-3 rounded-md',
size === 'sm' && 'h-sm px-2.5 text-sm rounded-md',
size === 'sm' && 'h-sm px-2.5 rounded-md',
size === 'xs' && 'h-xs px-2 text-sm rounded-md',
size === '2xs' && 'h-5 px-1 text-xs rounded',

2
src-web/components/core/Checkbox.tsx
View File

@@ -28,7 +28,7 @@ export function Checkbox({
as="label"
space={2}
alignItems="center"
className={classNames(className, 'text-fg text-sm', disabled && 'opacity-disabled')}
className={classNames(className, 'text-fg', disabled && 'opacity-disabled')}
>
<div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
<input

14
src-web/components/core/Dropdown.tsx
View File

@@ -448,16 +448,14 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
<HStack
space={2}
alignItems="center"
className="pb-0.5 px-1.5 mb-2 text-xs border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
>
<Icon icon="search" size="xs" className="text-fg-subtle" />
<div className="text-fg">{filter}</div>
</HStack>
)}
{filteredItems.length === 0 && (
<span className="text-fg-subtler text-sm text-center px-2 py-1">
No matches
</span>
<span className="text-fg-subtler text-center px-2 py-1">No matches</span>
)}
{filteredItems.map((item, i) => {
if (item.type === 'separator') {
@@ -531,14 +529,18 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
onFocus={handleFocus}
onClick={handleClick}
justify="start"
leftSlot={item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
leftSlot={
item.leftSlot && (
<div className="pr-2 flex justify-start text-fg-subtle">{item.leftSlot}</div>
)
}
rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
innerClassName="!text-left"
color="custom"
className={classNames(
className,
'h-xs', // More compact
'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm whitespace-nowrap',
'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
'focus:bg-background-highlight focus:text-fg rounded',
item.variant === 'default' && 'text-fg-subtle',
item.variant === 'danger' && 'text-fg-danger',

15
src-web/components/core/Editor/Editor.css
View File

@@ -104,8 +104,7 @@
}
.cm-scroller {
@apply font-mono text-[0.75rem];
@apply font-mono text-editor;
/*
* Round corners or they'll stick out of the editor bounds of editor is rounded.
* Could potentially be pushed up from the editor like we do with bg color but this
@@ -185,7 +184,7 @@
}
.cm-tooltip.cm-tooltip-hover {
@apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-xs;
@apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
@apply px-2 py-1;
a {
@@ -208,7 +207,7 @@
/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip.cm-completionInfo {
@apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-xs;
@apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-sm;
.cm-completionIcon {
@apply italic font-mono;
@@ -267,7 +266,7 @@
}
&.cm-completionInfo-right {
@apply ml-1 -mt-0.5 text-sm;
@apply ml-1 -mt-0.5;
}
&.cm-completionInfo-right-narrow {
@@ -279,12 +278,14 @@
}
&.cm-tooltip-autocomplete {
@apply font-mono text-editor;
& > ul {
@apply p-1 max-h-[40vh];
}
& > ul > li {
@apply cursor-default px-2 rounded-sm text-fg-subtle h-7 flex items-center;
@apply cursor-default px-2 py-1.5 rounded-sm text-fg-subtle flex items-center;
}
& > ul > li[aria-selected] {
@@ -292,7 +293,7 @@
}
.cm-completionIcon {
@apply text-xs flex items-center pb-0.5 flex-shrink-0;
@apply text-sm flex items-center pb-0.5 flex-shrink-0;
}
.cm-completionLabel {

2
src-web/components/core/FormattedError.tsx
View File

@@ -9,7 +9,7 @@ export function FormattedError({ children }: Props) {
return (
<pre
className={classNames(
'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
'w-full select-auto cursor-text bg-gray-100 p-3 rounded',
'whitespace-pre-wrap border border-fg-danger border-dashed overflow-x-auto',
)}
>

2
src-web/components/core/HotKeyLabel.tsx
View File

@@ -7,5 +7,5 @@ interface Props {
export function HotKeyLabel({ action }: Props) {
const label = useHotKeyLabel(action);
return <span className="text-fg-subtle">{label}</span>;
return <span className="text-fg-subtle whitespace-nowrap">{label}</span>;
}

2
src-web/components/core/HotKeyList.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
return (
<div className="h-full flex items-center justify-center text-sm">
<div className="h-full flex items-center justify-center">
<VStack space={2}>
{hotkeys.map((hotkey) => (
<HStack key={hotkey} className="grid grid-cols-2">

2
src-web/components/core/HttpMethodTag.tsx
View File

@@ -27,7 +27,7 @@ export function HttpMethodTag({ request, className }: Props) {
const m = method.toLowerCase();
return (
<span className={classNames(className, 'text-2xs font-mono text-fg-subtle')}>
<span className={classNames(className, 'text-xs font-mono text-fg-subtle')}>
{methodMap[m] ?? m.slice(0, 3).toUpperCase()}
</span>
);

4
src-web/components/core/InlineCode.tsx
View File

@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
<code
className={classNames(
className,
'font-mono text-xs bg-background-highlight-secondary border border-background-highlight',
'px-1.5 py-0.5 rounded text-fg-info shadow-inner',
'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight',
'px-1.5 py-0.5 rounded text-fg shadow-inner',
)}
{...props}
/>

6
src-web/components/core/Input.tsx
View File

@@ -133,11 +133,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
>
<label
htmlFor={id}
className={classNames(
labelClassName,
'text-sm text-fg whitespace-nowrap',
hideLabel && 'sr-only',
)}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>

2
src-web/components/core/JsonAttributeTree.tsx
View File

@@ -80,7 +80,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
<span className={classNames(labelClassName, 'select-text group-hover:text-fg')}>{label}</span>
);
return (
<div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-2xs')}>
<div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-xs')}>
<div className="flex items-center">
{isExpandable ? (
<button className="group relative flex items-center pl-4 w-full" onClick={toggleExpanded}>

2
src-web/components/core/PairEditor.tsx
View File

@@ -389,7 +389,7 @@ function PairEditorRow({
<Button
size="xs"
color="secondary"
className="font-mono text-xs"
className="font-mono text-sm"
onClick={async (e) => {
e.preventDefault();
const selected = await open({

148
src-web/components/core/PlainInput.tsx Normal file
View File

@@ -0,0 +1,148 @@
import classNames from 'classnames';
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import { IconButton } from './IconButton';
import type { InputProps } from './Input';
import { HStack } from './Stacks';
export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type'> & {
type: 'text' | 'password' | 'number';
};
export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function Input(
{
className,
containerClassName,
defaultValue,
forceUpdateKey,
hideLabel,
label,
labelClassName,
labelPosition = 'top',
leftSlot,
name,
onBlur,
onChange,
onFocus,
onPaste,
placeholder,
require,
rightSlot,
size = 'md',
type = 'text',
validate,
...props
}: PlainInputProps,
ref,
) {
const [obscured, setObscured] = useStateWithDeps(type === 'password', [type]);
const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
const [focused, setFocused] = useState(false);
const handleFocus = useCallback(() => {
setFocused(true);
onFocus?.();
}, [onFocus]);
const handleBlur = useCallback(() => {
setFocused(false);
onBlur?.();
}, [onBlur]);
const id = `input-${name}`;
const inputClassName = classNames(
className,
'!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
'px-1.5 text-xs font-mono',
);
const isValid = useMemo(() => {
if (require && !validateRequire(currentValue)) return false;
if (validate && !validate(currentValue)) return false;
return true;
}, [currentValue, validate, require]);
const handleChange = useCallback(
(value: string) => {
setCurrentValue(value);
onChange?.(value);
},
[onChange],
);
const wrapperRef = useRef<HTMLDivElement>(null);
return (
<div
ref={wrapperRef}
className={classNames(
'w-full',
'pointer-events-auto', // Just in case we're placing in disabled parent
labelPosition === 'left' && 'flex items-center gap-2',
labelPosition === 'top' && 'flex-row gap-0.5',
)}
>
<label
htmlFor={id}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>
<HStack
alignItems="stretch"
className={classNames(
containerClassName,
'x-theme-input',
'relative w-full rounded-md text-fg',
'border',
focused ? 'border-border-focus' : 'border-background-highlight',
!isValid && '!border-fg-danger',
size === 'md' && 'min-h-md',
size === 'sm' && 'min-h-sm',
size === 'xs' && 'min-h-xs',
)}
>
{leftSlot}
<HStack
alignItems="center"
className={classNames(
'w-full min-w-0',
leftSlot && 'pl-0.5 -ml-2',
rightSlot && 'pr-0.5 -mr-2',
)}
>
<input
ref={ref}
key={forceUpdateKey}
id={id}
type={type === 'password' && !obscured ? 'text' : type}
defaultValue={defaultValue}
placeholder={placeholder}
onChange={(e) => handleChange(e.target.value)}
onPaste={(e) => onPaste?.(e.clipboardData.getData('Text'))}
className={inputClassName}
onFocus={handleFocus}
onBlur={handleBlur}
{...props}
/>
</HStack>
{type === 'password' && (
<IconButton
title={obscured ? `Show ${label}` : `Obscure ${label}`}
size="xs"
className="mr-0.5 group/obscure !h-auto my-0.5"
iconClassName="text-fg-subtle group-hover/obscure:text-fg"
iconSize="sm"
icon={obscured ? 'eye' : 'eyeClosed'}
onClick={() => setObscured((o) => !o)}
/>
)}
{rightSlot}
</HStack>
</div>
);
});
function validateRequire(v: string) {
return v.length > 0;
}

8
src-web/components/core/Select.tsx
View File

@@ -45,11 +45,7 @@ export function Select<T extends string>({
>
<label
htmlFor={id}
className={classNames(
labelClassName,
'text-sm text-fg whitespace-nowrap',
hideLabel && 'sr-only',
)}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>
@@ -58,7 +54,7 @@ export function Select<T extends string>({
style={selectBackgroundStyles}
onChange={(e) => onChange(e.target.value as T)}
className={classNames(
'font-mono text-xs border w-full outline-none bg-transparent pl-2 pr-7',
'font-mono text-sm border w-full outline-none bg-transparent pl-2 pr-7',
'bg-background-highlight-secondary border-background-highlight focus:border-border-focus',
size === 'xs' && 'h-xs',
size === 'sm' && 'h-sm',

2
src-web/components/core/Separator.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export function Separator({ className, orientation = 'horizontal', children }: Props) {
return (
<div role="separator" className={classNames(className, 'flex items-center')}>
{children && <div className="text-xs text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
{children && <div className="text-sm text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
<div
className={classNames(
'bg-background-highlight',

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -84,7 +84,7 @@ export function Tabs({
{tabs.map((t) => {
const isActive = t.value === value;
const btnClassName = classNames(
'h-full flex items-center text-sm rounded',
'h-full flex items-center rounded',
'!px-2 ml-[1px]',
addBorders && 'border',
isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',

2
src-web/components/responseViewers/ImageViewer.tsx
View File

@@ -20,7 +20,7 @@ export function ImageViewer({ response, className }: Props) {
if (!show) {
return (
<>
<div className="text-sm italic text-fg-subtler">
<div className="italic text-fg-subtler">
Response body is too large to preview.{' '}
<button className="cursor-pointer underline hover:text-fg" onClick={() => setShow(true)}>
Show anyway