@oxyhq/services 5.4.3 → 5.4.4

package/lib/commonjs/ui/screens/SignInScreen.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext.js");
-var _index = require("../styles/index.js");
-var _Avatar = _interopRequireDefault(require("../components/Avatar.js"));
+var _OxyContext = require("../context/OxyContext");
+var _styles = require("../styles");
+var _Avatar = _interopRequireDefault(require("../components/Avatar"));
 var _vectorIcons = require("@expo/vector-icons");
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _sonner = require("../../lib/sonner.js");
+var _HighFive = _interopRequireDefault(require("../../assets/illustrations/HighFive"));
+var _sonner = require("../../lib/sonner");
+var _GroupedPillButtons = _interopRequireDefault(require("../components/internal/GroupedPillButtons"));
+var _TextField = _interopRequireDefault(require("../components/internal/TextField"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SignInScreen = ({
   navigate,
   goBack,
+  onAuthenticated,
   theme
 }) => {
   // Form data states
@@ -49,8 +52,8 @@ const SignInScreen = ({
     sessions,
     oxyServices
   } = (0, _OxyContext.useOxy)();
-  const colors = (0, _index.useThemeColors)(theme);
-  const commonStyles = (0, _index.createCommonStyles)(theme);
+  const colors = (0, _styles.useThemeColors)(theme);
+  const commonStyles = (0, _styles.createCommonStyles)(theme);
 
   // Check if this should be treated as "Add Account" mode
   const isAddAccountMode = (0, _react.useMemo)(() => user && isAuthenticated && sessions && sessions.length > 0, [user, isAuthenticated, sessions]);
@@ -272,42 +275,39 @@ const SignInScreen = ({
       animateTransition(currentStep - 1);
     }
   }, [currentStep, progressAnim, animateTransition]);
-  const handleUsernameNext = (0, _react.useCallback)(() => {
+
+  // Custom next handlers for validation
+  const handleUsernameContinue = (0, _react.useCallback)(() => {
     if (!username) {
-      _sonner.toast.error('Please enter your username');
+      _sonner.toast.error('Please enter your username.');
       return;
     }
-    if (validationStatus === 'invalid') {
-      // Don't show toast if we already have an error message displayed
-      if (!errorMessage) {
-        _sonner.toast.error('Please enter a valid username');
-      }
+    if (validationStatus !== 'valid' || !userProfile) {
+      _sonner.toast.error('Please enter a valid username.');
       return;
     }
-    if (validationStatus === 'validating') {
-      _sonner.toast.error('Please wait while we validate your username');
+    setErrorMessage('');
+    nextStep();
+  }, [username, validationStatus, userProfile, setErrorMessage, nextStep]);
+  const handleSignIn = (0, _react.useCallback)(async () => {
+    if (!password) {
+      _sonner.toast.error('Please enter your password.');
       return;
     }
-    if (validationStatus === 'valid' && userProfile) {
-      setErrorMessage('');
-      nextStep();
-    } else {
-      _sonner.toast.error('Please enter a valid username');
-    }
-  }, [username, validationStatus, userProfile, errorMessage, nextStep]);
-  const handleLogin = (0, _react.useCallback)(async () => {
-    if (!username || !password) {
-      _sonner.toast.error('Please enter both username and password');
+    if (!username || !userProfile) {
+      _sonner.toast.error('Please enter a valid username first.');
       return;
     }
     try {
       setErrorMessage('');
-      await login(username, password);
-      // The authentication state change will be handled through context
+      const user = await login(username, password);
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
     } catch (error) {
       _sonner.toast.error(error.message || 'Login failed');
     }
-  }, [username, password, login]);
+  }, [username, password, login, onAuthenticated, setErrorMessage, userProfile]);
 
   // Memoized step components
   const renderUsernameStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
@@ -319,109 +319,16 @@ const SignInScreen = ({
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.modernImageContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-        width: 280,
-        height: 160,
-        viewBox: "0 0 280 160",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
-            id: "primaryGradient",
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-              offset: "0%",
-              stopColor: colors.primary,
-              stopOpacity: "0.8"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-              offset: "100%",
-              stopColor: colors.primary,
-              stopOpacity: "0.2"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
-            id: "secondaryGradient",
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-              offset: "0%",
-              stopColor: colors.primary,
-              stopOpacity: "0.1"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-              offset: "100%",
-              stopColor: colors.primary,
-              stopOpacity: "0.3"
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "80",
-          cy: "80",
-          r: "45",
-          fill: "url(#primaryGradient)"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "200",
-          cy: "80",
-          r: "35",
-          fill: "url(#secondaryGradient)"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-          d: "M40 120 Q80 40 140 80 Q200 120 240 60",
-          stroke: colors.primary,
-          strokeWidth: "4",
-          fill: "none",
-          strokeLinecap: "round"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "60",
-          cy: "50",
-          r: "8",
-          fill: colors.primary,
-          opacity: "0.6"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "220",
-          cy: "120",
-          r: "6",
-          fill: colors.primary,
-          opacity: "0.4"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "250",
-          cy: "40",
-          r: "4",
-          fill: colors.primary,
-          opacity: "0.8"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "140",
-          cy: "80",
-          r: "25",
-          fill: colors.background,
-          opacity: "0.9"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "135",
-          cy: "75",
-          r: "3",
-          fill: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "145",
-          cy: "75",
-          r: "3",
-          fill: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-          d: "M132 85 Q140 92 148 85",
-          stroke: colors.primary,
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
-        })]
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
+      width: 100,
+      height: 100
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.modernHeader,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.modernTitle, {
           color: colors.text
         }],
-        children: isAddAccountMode ? 'Add Account' : 'Welcome Back'
+        children: isAddAccountMode ? 'Add Another Account' : 'Sign In'
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.modernSubtitle, {
           color: colors.secondaryText
@@ -461,118 +368,129 @@ const SignInScreen = ({
         }],
         children: errorMessage
       })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.modernInputContainer, {
         transform: [{
           scale: inputScaleAnim
         }]
       }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.inputWrapper, {
-          borderColor: validationStatus === 'valid' ? colors.success : validationStatus === 'invalid' ? colors.error : isInputFocused ? colors.primary : colors.border
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "person-outline",
-          size: 20,
-          color: isInputFocused ? colors.primary : colors.secondaryText,
-          style: styles.inputIcon
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          style: [styles.modernInput, {
-            color: colors.text
-          }],
-          placeholder: "Enter your username",
-          placeholderTextColor: colors.placeholder,
-          value: username,
-          onChangeText: handleUsernameChange,
-          onFocus: handleInputFocus,
-          onBlur: handleInputBlur,
-          autoCapitalize: "none",
-          testID: "username-input"
-        }), validationStatus === 'validating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: colors.primary,
-          style: styles.validationIndicator
-        }), validationStatus === 'valid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "checkmark-circle",
-          size: 20,
-          color: colors.success,
-          style: styles.validationIndicator
-        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "close-circle",
-          size: 20,
-          color: colors.error,
-          style: styles.validationIndicator
-        })]
-      }), validationStatus === 'valid' && userProfile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.validationSuccessCard, {
-          backgroundColor: colors.success + '15'
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: "Username",
+        icon: "person-outline",
+        value: username,
+        onChangeText: handleUsernameChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "username-input",
+        colors: colors,
+        variant: "filled",
+        error: validationStatus === 'invalid' && username.length >= 3 ? 'Username not found' : undefined,
+        loading: validationStatus === 'validating',
+        success: validationStatus === 'valid'
+      })
+    }), validationStatus === 'valid' && userProfile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.validationSuccessCard, {
+        backgroundColor: colors.success + '10',
+        borderWidth: 1,
+        borderColor: colors.success + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.success + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "checkmark-circle",
           size: 16,
           color: colors.success
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: [styles.validationText, {
-            color: colors.success
+            color: colors.success,
+            fontWeight: '600',
+            marginBottom: 2
           }],
-          children: ["Found user: ", userProfile.displayName]
+          children: ["Welcome back, ", userProfile?.displayName || userProfile?.name || username, "!"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Ready to continue where you left off"
         })]
-      }), validationStatus === 'invalid' && username.length >= 3 && !errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.validationErrorCard, {
-          backgroundColor: colors.error + '15'
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      })]
+    }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.validationErrorCard, {
+        backgroundColor: colors.error + '10',
+        borderWidth: 1,
+        borderColor: colors.error + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.error + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "alert-circle",
           size: 16,
           color: colors.error
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.validationText, {
-            color: colors.error
+            color: colors.error,
+            fontWeight: '600',
+            marginBottom: 2
           }],
           children: "Username not found"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Check spelling or sign up"
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.modernButton, {
-        backgroundColor: colors.primary,
-        opacity: !username || validationStatus !== 'valid' ? 0.5 : 1,
-        shadowColor: colors.primary
-      }],
-      onPress: handleUsernameNext,
-      disabled: !username || validationStatus !== 'valid' || isValidating,
-      testID: "username-next-button",
-      children: isValidating ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.modernButtonText,
-          children: "Continue"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "arrow-forward",
-          size: 20,
-          color: "#FFFFFF",
-          style: styles.buttonIcon
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.footerTextContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [styles.footerText, {
-          color: colors.secondaryText
-        }],
-        children: ["Don't have an account?", ' ']
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Sign Up',
         onPress: () => navigate('SignUp'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.modernLinkText, {
-            color: colors.primary
-          }],
-          children: "Sign Up"
-        })
-      })]
+        icon: 'person-add',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: handleUsernameContinue,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        loading: isValidating,
+        testID: 'username-next-button'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameNext, navigate, styles]);
+  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameContinue, navigate, styles]);
   const renderPasswordStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -646,79 +564,36 @@ const SignInScreen = ({
           scale: inputScaleAnim
         }]
       }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.inputWrapper, {
-          borderColor: isInputFocused ? colors.primary : colors.border
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "lock-closed-outline",
-          size: 20,
-          color: isInputFocused ? colors.primary : colors.secondaryText,
-          style: styles.inputIcon
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          style: [styles.modernInput, {
-            color: colors.text
-          }],
-          placeholder: "Enter your password",
-          placeholderTextColor: colors.placeholder,
-          value: password,
-          onChangeText: handlePasswordChange,
-          onFocus: handleInputFocus,
-          onBlur: handleInputBlur,
-          secureTextEntry: !showPassword,
-          autoCapitalize: "none",
-          testID: "password-input"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowPassword(!showPassword),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: showPassword ? "eye-off" : "eye",
-            size: 20,
-            color: colors.secondaryText
-          })
-        })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: "Password",
+        icon: "lock-closed-outline",
+        value: password,
+        onChangeText: handlePasswordChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        secureTextEntry: !showPassword,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "password-input",
+        colors: colors,
+        variant: "filled",
+        error: errorMessage
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.modernButton, {
-        backgroundColor: colors.primary,
-        opacity: !password ? 0.5 : 1,
-        shadowColor: colors.primary
-      }],
-      onPress: handleLogin,
-      disabled: !password || isLoading,
-      testID: "login-button",
-      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.modernButtonText,
-          children: "Sign In"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "log-in",
-          size: 20,
-          color: "#FFFFFF",
-          style: styles.buttonIcon
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.modernNavigationButtons,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.modernBackButton, {
-          borderColor: colors.border
-        }],
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "arrow-back",
-          size: 18,
-          color: colors.text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.modernBackButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })]
-      })
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Sign In',
+        onPress: handleSignIn,
+        icon: 'log-in',
+        variant: 'primary',
+        loading: isLoading,
+        testID: 'login-button'
+      }],
+      colors: colors
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.securityNotice,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -732,7 +607,7 @@ const SignInScreen = ({
         children: "Your data is encrypted and secure"
       })]
     })]
-  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles]);
+  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles]);
   const renderCurrentStep = (0, _react.useCallback)(() => {
     switch (currentStep) {
       case 0:
@@ -768,30 +643,25 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
   scrollContent: {
     flexGrow: 1,
     paddingHorizontal: 24,
-    paddingTop: 40,
-    paddingBottom: 40
+    paddingTop: 4,
+    paddingBottom: 20
   },
   stepContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 600
-  },
-  modernImageContainer: {
-    alignItems: 'center',
-    marginBottom: 40
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
   },
   modernHeader: {
     alignItems: 'flex-start',
     width: '100%',
-    marginBottom: 32
+    marginBottom: 24
   },
   modernTitle: {
     fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
     fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
+    fontSize: 62,
     lineHeight: 48,
-    marginBottom: 12,
+    marginBottom: 18,
     textAlign: 'left',
     letterSpacing: -1
   },
@@ -902,6 +772,12 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
   buttonIcon: {
     marginLeft: 4
   },
+  // Enhanced Label Styles
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
   modernLinkText: {
     fontSize: 14,
     lineHeight: 20,
@@ -911,7 +787,7 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
   footerTextContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: 28
+    marginTop: 16
   },
   footerText: {
     fontSize: 15
@@ -971,8 +847,10 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
   modernNavigationButtons: {
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: 24,
-    marginBottom: 16
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
   },
   modernBackButton: {
     flexDirection: 'row',