fix(mobile): simplify header component and update ForgetPasswordScreen layout

Innei · Innei · commit 8678e5439ee2 · 2025-04-23T13:50:13.000+08:00
- Removed unused imports and the HeaderCloseButton component from HeaderElements.tsx.
- Integrated DefaultHeaderBackButton for improved navigation handling.
- Adjusted padding and alignment in ForgetPasswordScreen for better layout consistency.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/mobile/src/components/layouts/header/HeaderElements.tsx b/apps/mobile/src/components/layouts/header/HeaderElements.tsx
@@ -1,50 +1,15 @@
 import { cn, withOpacity } from "@follow/utils"
-import { useCallback } from "react"
 import { useTranslation } from "react-i18next"
-import { Text, TouchableOpacity, View } from "react-native"
+import { Text, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { CheckLineIcon } from "@/src/icons/check_line"
-import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
-import { MingcuteLeftLineIcon } from "@/src/icons/mingcute_left_line"
-import {
-  useCanDismiss,
-  useIsSingleRouteInGroup,
-  useNavigation,
-  useScreenIsInSheetModal,
-} from "@/src/lib/navigation/hooks"
+import { useCanBack, useCanDismiss } from "@/src/lib/navigation/hooks"
 import { StackScreenHeaderPortal } from "@/src/lib/navigation/StackScreenHeaderPortal"
 import { useColor } from "@/src/theme/colors"
 
 import { PlatformActivityIndicator } from "../../ui/loading/PlatformActivityIndicator"
-import { UINavigationHeaderActionButton } from "./NavigationHeader"
-
-const HeaderCloseButton = () => {
-  const label = useColor("label")
-
-  const navigation = useNavigation()
-  const canDismiss = useCanDismiss()
-  const isInModal = useScreenIsInSheetModal()
-  const isSingleRouteInGroup = useIsSingleRouteInGroup()
-
-  const handlePress = useCallback(() => {
-    if (canDismiss) {
-      navigation.dismiss()
-    } else {
-      navigation.back()
-    }
-  }, [canDismiss, navigation])
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      {isInModal && isSingleRouteInGroup ? (
-        <CloseCuteReIcon height={20} width={20} color={label} />
-      ) : (
-        <MingcuteLeftLineIcon height={20} width={20} color={label} />
-      )}
-    </TouchableOpacity>
-  )
-}
+import { DefaultHeaderBackButton, UINavigationHeaderActionButton } from "./NavigationHeader"
 
 export interface ModalHeaderSubmitButtonProps {
   isValid: boolean
@@ -103,15 +68,18 @@ export const HeaderSubmitTextButton = ({
 
 export const HeaderCloseOnly = () => {
   const insets = useSafeAreaInsets()
+  const canDismiss = useCanDismiss()
+  const canBack = useCanBack()
   return (
     <StackScreenHeaderPortal>
       <UINavigationHeaderActionButton
-        className="absolute left-4"
+        className="absolute"
         style={{
-          top: insets.top + 16,
+          top: insets.top,
+          left: insets.left,
         }}
       >
-        <HeaderCloseButton />
+        <DefaultHeaderBackButton canGoBack={canBack} canDismiss={canDismiss} />
       </UINavigationHeaderActionButton>
     </StackScreenHeaderPortal>
   )
diff --git a/apps/mobile/src/screens/(modal)/ForgetPasswordScreen.tsx b/apps/mobile/src/screens/(modal)/ForgetPasswordScreen.tsx
@@ -48,10 +48,10 @@ export const ForgetPasswordScreen: NavigationControllerView = () => {
     >
       <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
         <HeaderCloseOnly />
-        <View className="flex-1 justify-between" style={{ paddingTop: insets.bottom + 56 }}>
+        <View className="flex-1 justify-between px-5" style={{ paddingTop: insets.bottom + 56 }}>
           <View className="items-center">
             <Text className="text-text text-center text-4xl font-bold">Forgot password?</Text>
-            <Text className="text-text mx-10 mt-6 text-lg">
+            <Text className="text-text mx-10 mt-6 text-center text-lg">
               Enter your email address that you use with your account to continue.
             </Text>
 
