Improve LoginCard layout

- More space between elements
sos-lapsikyla · Dec 17, 2023 · 4585882 · 4585882
1 parent 5da0ca7
commit 4585882
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 36 deletions.
diff --git a/src/Screens/Onboarding/Sign.tsx b/src/Screens/Onboarding/Sign.tsx
@@ -3,6 +3,7 @@ import RN from 'react-native';
 
 import { StackScreenProps } from '@react-navigation/stack';
 import { StackRoutes } from '..';
+import { hasNotch } from '../../lib/isDevice';
 
 import OnboardingBackground from '../components/OnboardingBackground';
 import Card from '../components/Card';
@@ -63,7 +64,7 @@ const styles = RN.StyleSheet.create({
     ...fonts.titleBold,
   },
   card: {
-    marginTop: 64,
+    marginTop: hasNotch() ? 64 : 0,
     display: 'flex',
     flexDirection: 'column',
     gap: 64,

diff --git a/src/Screens/components/LoginCard.tsx b/src/Screens/components/LoginCard.tsx
@@ -73,34 +73,29 @@ const LoginCard = ({
 
   return (
     <Card style={[styles.card, style]} {...viewProps}>
-      <RN.View>
-        <Message style={styles.title} id={titleMessageId} />
-        <NamedInputField
-          autoCapitalize="none"
-          style={styles.input}
-          name="onboarding.signUp.userName"
-          onChangeText={onUserNameChange}
-          autoComplete="off"
-          testID="onboarding.signUp.userName"
-        />
-        <NamedInputField
-          autoCapitalize="none"
-          style={styles.input}
-          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" />
-        )}
-      </RN.View>
+      <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
-        style={styles.errorText}
         getMessageId={getErrorMessageId}
         data={remoteAction}
         testID={'components.loginCard.errorMessage'}
@@ -133,6 +128,7 @@ const styles = RN.StyleSheet.create({
   card: {
     flexDirection: 'column',
     justifyContent: 'space-between',
+    gap: 24,
     marginVertical: 20,
     padding: 24,
     alignSelf: 'stretch',
@@ -141,18 +137,12 @@ const styles = RN.StyleSheet.create({
     ...fonts.titleBold,
     textAlign: 'center',
     color: colors.darkestBlue,
-    marginBottom: 10,
-  },
-  input: {
-    marginBottom: 10,
-  },
-  errorText: {
-    marginBottom: 16,
   },
   buttonContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: 24,
   },
   backButton: {
     flex: 1.2,
@@ -161,7 +151,6 @@ const styles = RN.StyleSheet.create({
   nextButton: {
     flex: 2,
     height: 32,
-    marginLeft: 24,
   },
   badgeStyle: {
     height: 32,