From ff6b1112b6b2cee72d6ecc127e069cd5c26fae92 Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 21:20:40 +0200
Subject: [PATCH] feat: add consistent focus state styling to input component

Improves visual feedback by adding focus state borders to all input variants.

Changes the unfocused border from transparent to neutral-800 for better visual consistency and adds focus/blur handlers to ensure proper state management across different input types.
---
 components/common/Input.tsx        | 8 ++++++--
 components/settings/Jellyseerr.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index 7af2e0bf..fc6c4583 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -21,7 +21,7 @@ export function Input(props: InputProps) {
         ref={inputRef}
         className={`
           w-full text-lg px-5 py-5 rounded-2xl
-          ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-transparent"}
+          ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-neutral-800"}
           text-white ${extraClassName}
         `}
         allowFontScaling={false}
@@ -41,11 +41,15 @@ export function Input(props: InputProps) {
   ) : (
     <TextInput
       ref={inputRef}
-      className='p-3 rounded-xl bg-neutral-900'
+      className={`p-3 rounded-xl bg-neutral-900 ${
+        isFocused ? "border-2 border-white" : "border-2 border-neutral-800"
+      } ${extraClassName}`}
       allowFontScaling={false}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}
       clearButtonMode='while-editing'
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
       {...otherProps}
     />
   );
diff --git a/components/settings/Jellyseerr.tsx b/components/settings/Jellyseerr.tsx
index 20b7514d..0367ec39 100644
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -161,7 +161,7 @@ export const JellyseerrSettings = () => {
                   showPassword={showJellyseerrPassword}
                   onShowPasswordChange={setShowJellyseerrPassword}
                   layout='mobile'
-                  topPosition='22'
+                  topPosition='11'
                 />
               </View>
               <Button