fix login and signup screen

andrew-bierman · Sep 10, 2024 · c2f4533 · c2f4533
1 parent e7174de
commit c2f4533
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 39 deletions.
diff --git a/packages/app/modules/auth/screens/LoginScreen.tsx b/packages/app/modules/auth/screens/LoginScreen.tsx
@@ -3,6 +3,7 @@ import useTheme from '../../../hooks/useTheme';
 import { useGoogleAuth, useLogin } from 'app/modules/auth';
 import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
 import { View } from 'react-native';
+import { ScrollView } from 'react-native';
 
 const demoUser = {
   email: '[email protected]',
@@ -35,25 +36,30 @@ export function LoginScreen() {
     <View
       style={{
         width: '100%',
-        alignItems: 'center',
+        height: '100%',
         backgroundColor: currentTheme.colors.background,
       }}
     >
-      <View
-        style={{
-          paddingTop: 32,
-          paddingBottom: 32,
-          width: '90%',
-          maxWidth: 400,
-        }}
-      >
-        <SignInScreen
-          promptAsync={promptAsync}
-          signIn={signIn}
-          signInStatus={signInStatus}
-          isGoogleSignInReady={isGoogleSignInReady}
-        />
-      </View>
+      <ScrollView>
+        <View
+          style={{
+            paddingTop: 32,
+            paddingBottom: 32,
+            justifyContent: 'center',
+            alignSelf: 'center',
+            alignItems: 'center',
+            width: '90%',
+            maxWidth: 400,
+          }}
+        >
+          <SignInScreen
+            promptAsync={promptAsync}
+            signIn={signIn}
+            signInStatus={signInStatus}
+            isGoogleSignInReady={isGoogleSignInReady}
+          />
+        </View>
+      </ScrollView>
     </View>
   );
 }
diff --git a/packages/app/modules/auth/screens/RegisterScreen.tsx b/packages/app/modules/auth/screens/RegisterScreen.tsx
@@ -1,8 +1,10 @@
+import React from 'react';
 import { View } from 'react-native';
 import useTheme from 'app/hooks/useTheme';
 import { useRegisterUser, useGoogleAuth } from 'app/modules/auth';
 import { SignUpScreen } from '@packrat/ui/src/Bento/forms/layouts';
 import { useState } from 'react';
+import { ScrollView } from 'react-native';
 
 export function RegisterScreen() {
   const { currentTheme } = useTheme();
@@ -29,26 +31,29 @@ export function RegisterScreen() {
     <View
       style={{
         width: '100%',
-        alignItems: 'center',
         backgroundColor: currentTheme.colors.background,
       }}
     >
-      <View
-        style={{
-          paddingTop: 32,
-          paddingBottom: 32,
-          height: '100%',
-          width: '90%',
-          maxWidth: 400,
-        }}
-      >
-        <SignUpScreen
-          promptAsync={promptAsync}
-          signup={signup}
-          signUpStatus={signUpStatus}
-          isGoogleSignInReady={isGoogleSignInReady}
-        />
-      </View>
+      <ScrollView>
+        <View
+          style={{
+            paddingTop: 32,
+            paddingBottom: 32,
+            alignItems: 'center',
+            alignSelf: 'center',
+            height: '100%',
+            width: '90%',
+            maxWidth: 400,
+          }}
+        >
+          <SignUpScreen
+            promptAsync={promptAsync}
+            signup={signup}
+            signUpStatus={signUpStatus}
+            isGoogleSignInReady={isGoogleSignInReady}
+          />
+        </View>
+      </ScrollView>
     </View>
   );
 }
diff --git a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as LocalAuthentication from 'expo-local-authentication';
 import {
   AnimatePresence,
@@ -71,13 +72,14 @@ export function SignInScreen({
   return (
     <FormCard>
       <View
-        flexDirection="column"
-        alignItems="stretch"
-        minWidth="100%"
-        maxWidth="100%"
+        fd="column"
+        f={1}
+        ai="stretch"
+        miw="100%"
+        maw="100%"
         gap="$4"
-        padding="$4"
-        paddingVertical="$14"
+        p="$4"
+        py="$14"
         $group-window-gtSm={{
           paddingVertical: '$4',
           width: 400,