From 51445b0d99152fbbcc662f7d65c2199867aac4ec Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 3 Apr 2023 12:19:37 -0700
Subject: [PATCH] Fix input focus border

---
 src-web/components/ResponsePane.tsx |  2 +-
 src-web/components/Sidebar.tsx      |  2 +-
 src-web/components/core/Input.tsx   | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

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: (
           <div className="flex items-center">
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<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',
-          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<EditorView | undefined, InputProps>(function Inp
           placeholder={placeholder}
           onChange={handleChange}
           className={inputClassName}
-          onFocus={handleOnFocus}
-          onBlur={handleOnBlur}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           {...props}
         />
         {type === 'password' && (