Improve LoginCard with different sized screens

sos-lapsikyla · Dec 22, 2023 · b133889 · b133889
1 parent 65ffcc0
commit b133889
Showing 1 changed file with 34 additions and 28 deletions.
diff --git a/src/Screens/components/LoginCard.tsx b/src/Screens/components/LoginCard.tsx
@@ -73,33 +73,35 @@ const LoginCard = ({
 
   return (
     <Card style={[styles.card, style]} {...viewProps}>
-      <Message style={styles.title} id={titleMessageId} />
-      <NamedInputField
-        autoCapitalize="none"
-        name="onboarding.signUp.userName"
-        onChangeText={onUserNameChange}
-        autoComplete="off"
-        testID="onboarding.signUp.userName"
-      />
-      <NamedInputField
-        autoCapitalize="none"
-        name="onboarding.signUp.password"
-        isPasswordInput={true}
-        onChangeText={onPasswordChange}
-        autoComplete="off"
-        testID="onboarding.signUp.password"
-        onBlur={handlePasswordValidate}
-        onSubmitEditing={handlePasswordValidate}
-        isError={isInvalidPassword}
-      />
-      {isSignup && (
-        <InfoBox messageId="main.settings.account.password.requirements" />
-      )}
-      <ErrorMessage
-        getMessageId={getErrorMessageId}
-        data={remoteAction}
-        testID={'components.loginCard.errorMessage'}
-      />
+      <RN.View style={styles.formFields}>
+        <Message style={styles.title} id={titleMessageId} />
+        <NamedInputField
+          autoCapitalize="none"
+          name="onboarding.signUp.userName"
+          onChangeText={onUserNameChange}
+          autoComplete="off"
+          testID="onboarding.signUp.userName"
+        />
+        <NamedInputField
+          autoCapitalize="none"
+          name="onboarding.signUp.password"
+          isPasswordInput={true}
+          onChangeText={onPasswordChange}
+          autoComplete="off"
+          testID="onboarding.signUp.password"
+          onBlur={handlePasswordValidate}
+          onSubmitEditing={handlePasswordValidate}
+          isError={isInvalidPassword}
+        />
+        {isSignup && (
+          <InfoBox messageId="main.settings.account.password.requirements" />
+        )}
+        <ErrorMessage
+          getMessageId={getErrorMessageId}
+          data={remoteAction}
+          testID={'components.loginCard.errorMessage'}
+        />
+      </RN.View>
 
       <RN.View style={styles.buttonContainer}>
         <Button
@@ -128,7 +130,6 @@ const styles = RN.StyleSheet.create({
   card: {
     flexDirection: 'column',
     justifyContent: 'space-between',
-    gap: 24,
     marginVertical: 20,
     padding: 24,
     alignSelf: 'stretch',
@@ -138,6 +139,11 @@ const styles = RN.StyleSheet.create({
     textAlign: 'center',
     color: colors.darkestBlue,
   },
+  formFields: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    gap: 24,
+  },
   buttonContainer: {
     flexDirection: 'row',
     alignItems: 'center',