diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 01f79e73..21300bad 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -54,7 +54,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
const tabs = useMemo(
() => [
- { label: 'Body', value: 'body' },
+ { label: 'Preview', value: 'body' },
{
label: (
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 8e07b918..06bfcbcb 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -192,7 +192,7 @@ const _SidebarItem = forwardRef(function SidebarItem(
justify="start"
onKeyDown={handleKeyDown}
className={classnames(
- editing && 'focus-within:border-focus',
+ editing && 'ring-1 focus-within:ring-focus',
active
? 'bg-highlight text-gray-900'
: 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx
index 90bf07e5..818f0446 100644
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -57,12 +57,12 @@ export const Input = forwardRef(function Inp
const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
const [focused, setFocused] = useState(false);
- const handleOnFocus = useCallback(() => {
+ const handleFocus = useCallback(() => {
setFocused(true);
onFocus?.();
}, [onFocus]);
- const handleOnBlur = useCallback(() => {
+ const handleBlur = useCallback(() => {
setFocused(false);
onBlur?.();
}, [onBlur]);
@@ -107,8 +107,8 @@ export const Input = forwardRef(function Inp
className={classnames(
containerClassName,
'relative w-full rounded-md text-gray-900',
- 'border border-highlight',
- focused && 'border-focus',
+ 'border',
+ focused ? 'border-focus' : 'border-highlight',
!isValid && '!border-invalid',
size === 'md' && 'h-md leading-md',
size === 'sm' && 'h-sm leading-sm',
@@ -125,8 +125,8 @@ export const Input = forwardRef(function Inp
placeholder={placeholder}
onChange={handleChange}
className={inputClassName}
- onFocus={handleOnFocus}
- onBlur={handleOnBlur}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
{...props}
/>
{type === 'password' && (