Fix input focus border

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: (
           <div className="flex items-center">

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',

src-web/components/core/Input.tsx

@@ -57,12 +57,12 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(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<EditorView | undefined, InputProps>(function Inp
         className={classnames(
           containerClassName,
           'relative w-full rounded-md text-gray-900',
-          'border border-highlight',
+          'border',
-          focused && 'border-focus',
+          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<EditorView | undefined, InputProps>(function Inp
           placeholder={placeholder}
           onChange={handleChange}
           className={inputClassName}
-          onFocus={handleOnFocus}
+          onFocus={handleFocus}
-          onBlur={handleOnBlur}
+          onBlur={handleBlur}
           {...props}
         />
         {type === 'password' && (