Close button should be visible on Login regardless of login state

inaturalist · Aug 19, 2022 · e0e5064 · e0e5064
1 parent 9a74595
commit e0e5064
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/src/components/LoginSignUp/Login.js b/src/components/LoginSignUp/Login.js
@@ -10,6 +10,7 @@ import {
   Linking,
   Platform,
   Pressable,
+  SafeAreaView,
   ScrollView,
   TouchableOpacity,
   View
@@ -127,12 +128,6 @@ const Login = ( ): Node => {
 
   const loginForm = (
     <>
-      <Pressable
-        onPress={() => navigation.goBack()}
-        style={closeButton.close}
-      >
-        <Icon name="close" size={35} />
-      </Pressable>
       <Image
         style={imageStyles.logo}
         resizeMode="contain"
@@ -187,12 +182,19 @@ const Login = ( ): Node => {
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={viewStyles.container}
     >
-      <ScrollView
-        style={[viewStyles.container]}
-        contentContainerStyle={viewStyles.paddedContainer}
-      >
-        {loggedIn ? logoutForm : loginForm}
-      </ScrollView>
+      <SafeAreaView style={[viewStyles.container]}>
+        <ScrollView
+          contentContainerStyle={viewStyles.paddedContainer}
+        >
+          <Pressable
+            onPress={() => navigation.goBack()}
+            style={closeButton.close}
+          >
+            <Icon name="close" size={35} />
+          </Pressable>
+          {loggedIn ? logoutForm : loginForm}
+        </ScrollView>
+      </SafeAreaView>
     </KeyboardAvoidingView>
   );
 };

diff --git a/src/styles/login/login.js b/src/styles/login/login.js
@@ -84,7 +84,9 @@ const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
 
 const closeButton: { [string]: ViewStyleProp } = StyleSheet.create( {
   close: {
-    alignSelf: "flex-end"
+    position: "absolute",
+    top: 20,
+    end: 20
   }
 } );