Lots of tiny changes and flexbox usage

RocketChat · Sep 10, 2024 · eeffaba · eeffaba
1 parent eff48d5
commit eeffaba
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 76 deletions.
diff --git a/app/containers/UserGeneratedContentRules.tsx b/app/containers/UserGeneratedContentRules.tsx
@@ -15,12 +15,14 @@ const styles = StyleSheet.create({
 		marginHorizontal: 30
 	},
 	bottomContainerText: {
-		...sharedStyles.textRegular,
-		fontSize: 13,
+		...sharedStyles.textMedium,
+		fontSize: 14,
+		lineHeight: 22,
 		textAlign: 'center'
 	},
 	bottomContainerTextUnderline: {
-		fontSize: 13,
+		fontSize: 14,
+		lineHeight: 22,
 		textAlign: 'center',
 		textDecorationLine: 'underline'
 	}
@@ -40,19 +42,15 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
-				{I18n.t('Onboarding_agree_terms')}
-			</Text>
+			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Onboarding_agree_terms')}</Text>
 			<Text
-				style={[styles.bottomContainerTextUnderline, { color: colors.strokeHighlight }]}
-				onPress={() => openContract('terms-of-service')}
-			>
+				style={[styles.bottomContainerTextUnderline, { color: colors.fontInfo }]}
+				onPress={() => openContract('terms-of-service')}>
 				{I18n.t('Terms_of_Service')}
 			</Text>
 			<Text
-				style={[styles.bottomContainerTextUnderline, { color: colors.strokeHighlight }]}
-				onPress={() => openContract('privacy-policy')}
-			>
+				style={[styles.bottomContainerTextUnderline, { color: colors.fontInfo }]}
+				onPress={() => openContract('privacy-policy')}>
 				{I18n.t('Privacy_Policy')}
 			</Text>
 		</View>

diff --git a/app/views/LoginView/UserForm.tsx b/app/views/LoginView/UserForm.tsx
@@ -103,73 +103,65 @@ const UserForm = () => {
 	return (
 		<>
 			<Text style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>{I18n.t('Login')}</Text>
-			<ControlledFormTextInput
-				name='user'
-				control={control}
-				label={I18n.t('Username_or_email')}
-				containerStyle={styles.inputContainer}
-				placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
-				keyboardType='email-address'
-				returnKeyType='next'
-				onSubmitEditing={() => setFocus('password')}
-				testID='login-view-email'
-				textContentType='username'
-				autoComplete='username'
-			/>
-			<ControlledFormTextInput
-				name='password'
-				control={control}
-				label={I18n.t('Password')}
-				containerStyle={styles.inputContainer}
-				placeholder={Accounts_PasswordPlaceholder || I18n.t('Password')}
-				returnKeyType='send'
-				secureTextEntry
-				onSubmitEditing={handleSubmit(submit)}
-				testID='login-view-password'
-				textContentType='password'
-				autoComplete='password'
-			/>
-			<Button
-				title={I18n.t('Login')}
-				onPress={handleSubmit(submit)}
-				testID='login-view-submit'
-				loading={isFetching}
-				disabled={!isValid}
-				style={styles.loginButton}
-			/>
+			<View style={styles.credentialsContainer}>
+				<ControlledFormTextInput
+					name='user'
+					control={control}
+					label={I18n.t('Username_or_email')}
+					placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
+					keyboardType='email-address'
+					returnKeyType='next'
+					onSubmitEditing={() => setFocus('password')}
+					testID='login-view-email'
+					textContentType='username'
+					autoComplete='username'
+				/>
+				<ControlledFormTextInput
+					name='password'
+					control={control}
+					label={I18n.t('Password')}
+					placeholder={Accounts_PasswordPlaceholder || I18n.t('Password')}
+					returnKeyType='send'
+					secureTextEntry
+					onSubmitEditing={handleSubmit(submit)}
+					testID='login-view-password'
+					textContentType='password'
+					autoComplete='password'
+				/>
+				<Button
+					title={I18n.t('Login')}
+					onPress={handleSubmit(submit)}
+					testID='login-view-submit'
+					loading={isFetching}
+					disabled={!isValid}
+				/>
+			</View>
 			<View style={styles.bottomContainer}>
 				{Accounts_PasswordReset && (
-					<>
+					<View style={styles.bottomContainerGroup}>
 						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Forgot_password')}</Text>
 						<Button
 							title={I18n.t('Reset_password')}
 							type='secondary'
 							onPress={forgotPassword}
-							style={styles.forgotPasswordButton}
 							testID='login-view-forgot-password'
 						/>
-					</>
+					</View>
 				)}
 				{showRegistrationButton ? (
-					<>
+					<View style={styles.bottomContainerGroup}>
 						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
 							{I18n.t('You_dont_have_account')}
 						</Text>
-						<Button
-							title={I18n.t('Create_account')}
-							onPress={register}
-							type='secondary'
-							testID='login-view-register'
-							style={styles.createAccountButton}
-						/>
-					</>
+						<Button title={I18n.t('Create_account')} onPress={register} type='secondary' testID='login-view-register' />
+					</View>
 				) : (
 					<Text style={[styles.registerDisabled, { color: colors.fontSecondaryInfo }]}>
 						{Accounts_RegistrationForm_LinkReplacementText}
 					</Text>
 				)}
+				<UGCRules />
 			</View>
-			<UGCRules styleContainer={styles.ugcContainer} />
 		</>
 	);
 };

diff --git a/app/views/LoginView/styles.ts b/app/views/LoginView/styles.ts
@@ -10,30 +10,26 @@ export default StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textBold,
-		fontSize: 22
+		fontSize: 22,
+		marginBottom: 24
 	},
 	inputContainer: {
 		marginVertical: 16
 	},
-	bottomContainer: {
-		flexDirection: 'column'
-	},
-	bottomContainerText: {
-		...sharedStyles.textRegular,
-		alignSelf: 'center',
-		fontSize: 14,
-		marginTop: 32
-	},
-	loginButton: {
-		marginTop: 16
+	credentialsContainer: {
+		gap: 20
 	},
-	ugcContainer: {
+	bottomContainer: {
+		flexDirection: 'column',
+		gap: 32,
 		marginTop: 32
 	},
-	createAccountButton: {
-		marginTop: 12
+	bottomContainerGroup: {
+		gap: 12
 	},
-	forgotPasswordButton: {
-		marginTop: 12
+	bottomContainerText: {
+		...sharedStyles.textMedium,
+		alignSelf: 'center',
+		fontSize: 14
 	}
 });