Merge pull request #1803 from ever-co/improve/login-register-screen-d…

…ark-theme Added dark theme to Login/Register screen
ever-co · Nov 16, 2023 · e4d99c5 · e4d99c5
2 parents 7481f96 + bcdc879
commit e4d99c5
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 155 deletions.
diff --git a/apps/mobile/app/components/CodeInput.tsx b/apps/mobile/app/components/CodeInput.tsx
@@ -10,11 +10,10 @@ interface IInput {
 	editable: boolean;
 	length?: number;
 	defaultValue?: string;
-	loginInput?: boolean;
 }
 
 export const CodeInput: FC<IInput> = (props) => {
-	const { onChange, editable, length = 6, defaultValue, loginInput = false } = props;
+	const { onChange, editable, length = 6, defaultValue } = props;
 	const { colors } = useAppTheme();
 	const inputsRef = useRef<TextInput[] | null[]>([]);
 	const [active, setActive] = useState<number>(0);
@@ -102,19 +101,12 @@ export const CodeInput: FC<IInput> = (props) => {
 				style={[
 					styles.inputStyle,
 					{
-						backgroundColor: loginInput ? '#FFFFFF' : colors.background,
-						color: loginInput ? '#282048' : colors.primary
+						backgroundColor: colors.background,
+						color: colors.primary
 					},
 					editable
 						? {
-								borderColor:
-									active === i
-										? loginInput
-											? '#282048'
-											: colors.primary
-										: loginInput
-										? '#00000021'
-										: colors.border
+								borderColor: active === i ? colors.primary : colors.border
 						  }
 						: null
 				]}

diff --git a/apps/mobile/app/components/TextField.tsx b/apps/mobile/app/components/TextField.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from 'react';
 import { StyleProp, TextInput, TextInputProps, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { isRTL, translate } from '../i18n';
-import { colors, spacing, typography } from '../theme';
+import { colors, spacing, typography, useAppTheme } from '../theme';
 import { Text, TextProps } from './Text';
 
 export interface TextFieldAccessoryProps {
@@ -152,6 +152,8 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
 
 	useImperativeHandle(ref, () => input.current);
 
+	const { colors: appThemeColors, dark } = useAppTheme();
+
 	return (
 		<TouchableOpacity
 			activeOpacity={1}
@@ -188,7 +190,7 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
 					placeholderTextColor={colors.textDim}
 					{...TextInputProps}
 					editable={!disabled}
-					style={$inputStyles}
+					style={[$inputStyles, { color: dark ? appThemeColors.primary : colors.text }]}
 				/>
 
 				{!!RightAccessory && (
@@ -244,7 +246,8 @@ const $inputStyle: TextStyle = {
 };
 
 const $helperStyle: TextStyle = {
-	marginTop: spacing.extraSmall
+	marginTop: spacing.extraSmall,
+	fontSize: 12
 };
 
 const $rightAccessoryStyle: ViewStyle = {

diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx
diff --git a/apps/mobile/app/models/AuthenticationStore.ts b/apps/mobile/app/models/AuthenticationStore.ts
@@ -26,17 +26,17 @@ export const AuthenticationStoreModel = types
 		get validationErrors() {
 			return {
 				authEmail: (function () {
-					if (store.authEmail.length === 0) return "This filed can't be blank";
+					if (store.authEmail.length === 0) return "This field can't be blank";
 					if (store.authEmail.length < 6) return 'Must be at least 6 characters';
 					if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(store.authEmail)) return 'Must be a valid email address';
 					return '';
 				})(),
 				authTeamName: (function () {
-					if (store.authTeamName.length === 0) return "This filed can't be blank";
+					if (store.authTeamName.length === 0) return "This field can't be blank";
 					return '';
 				})(),
 				authUsername: (function () {
-					if (store.authUsername.length === 0) return "This filed can't be blank";
+					if (store.authUsername.length === 0) return "This field can't be blank";
 					return '';
 				})()
 			};

diff --git a/apps/mobile/app/screens/LoginScreen/Components/EmailVerificationForm.tsx b/apps/mobile/app/screens/LoginScreen/Components/EmailVerificationForm.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
 import React, { FC } from 'react';
 import { View, Text, Dimensions, ViewStyle, TouchableOpacity } from 'react-native';
 import { ActivityIndicator } from 'react-native-paper';
@@ -24,13 +25,25 @@ interface Props {
 
 const EmailVerificationForm: FC<Props> = observer(
 	({ isLoading, setScreenStatus, verificationError, verifyEmailByCode, resendEmailVerificationCode }) => {
-		const { colors } = useAppTheme();
+		const { colors, dark } = useAppTheme();
 		const {
 			authenticationStore: { setAuthConfirmCode }
 		} = useStores();
 
 		return (
-			<Animatable.View animation={'zoomIn'} delay={100} style={styles.form}>
+			<Animatable.View
+				animation={'zoomIn'}
+				delay={100}
+				style={{
+					...styles.form,
+					backgroundColor: colors.background,
+					elevation: !dark && 10,
+					shadowColor: !dark && 'rgba(0,0,0,0.1)',
+					shadowOffset: !dark && { width: 10, height: 10 },
+					shadowOpacity: !dark && 5,
+					shadowRadius: !dark && 9
+				}}
+			>
 				<Text style={styles.text}>{translate('loginScreen.step3Title')}</Text>
 				<View>
 					<CodeInput onChange={setAuthConfirmCode} editable={!isLoading} />
@@ -60,11 +73,20 @@ const EmailVerificationForm: FC<Props> = observer(
 							})
 						}
 					>
-						<Feather name="arrow-left" size={24} color={'#3826A6'} />
-						<Text style={styles.backButtonText}>{translate('common.back')}</Text>
+						<Feather name="arrow-left" size={24} color={dark ? colors.primary : '#3826A6'} />
+						<Text style={{ ...styles.backButtonText, color: colors.primary }}>
+							{translate('common.back')}
+						</Text>
 					</TouchableOpacity>
 					<Button
-						style={[$tapButton, { width: width / 2.1, opacity: isLoading ? 0.5 : 1 }]}
+						style={[
+							$tapButton,
+							{
+								width: width / 2.1,
+								opacity: isLoading ? 0.5 : 1,
+								backgroundColor: colors.secondary
+							}
+						]}
 						textStyle={styles.tapButtonText}
 						onPress={() => verifyEmailByCode()}
 					>
@@ -97,17 +119,11 @@ const styles = EStyleSheet.create({
 		top: '-32%',
 		padding: '1.5rem',
 		alignSelf: 'center',
-		backgroundColor: '#fff',
 		alignItems: 'center',
 		borderRadius: '1rem',
 		justifyContent: 'flex-start',
 		borderWidth: 1,
 		borderColor: 'rgba(0,0,0,0.1)',
-		elevation: 10,
-		shadowColor: 'rgba(0,0,0,0.1)',
-		shadowOffset: { width: 10, height: 10 },
-		shadowOpacity: 5,
-		shadowRadius: 9,
 		zIndex: 1000
 	},
 	text: {
@@ -132,8 +148,7 @@ const styles = EStyleSheet.create({
 	},
 	backButtonText: {
 		fontSize: '0.87rem',
-		fontFamily: typography.primary.semiBold,
-		color: '#3826A6'
+		fontFamily: typography.primary.semiBold
 	},
 	tapButtonText: {
 		color: '#fff',

diff --git a/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx b/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx
@@ -8,7 +8,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 // Components
 import { translate } from '../../../i18n';
 import { Button, TextField } from '../../../components';
-import { spacing, typography } from '../../../theme';
+import { spacing, typography, useAppTheme } from '../../../theme';
 import { useStores } from '../../../models';
 import { GLOBAL_STYLE as GS } from '../../../../assets/ts/styles';
 
@@ -22,18 +22,32 @@ interface Props {
 const FillTeamNameForm: FC<Props> = observer(({ isLoading, errors, setScreenStatus, setWithTeam }) => {
 	const authTeamInput = useRef<TextInput>();
 
+	const { colors, dark } = useAppTheme();
+
 	const {
 		authenticationStore: { authTeamName, setAuthTeamName }
 	} = useStores();
 
 	return (
-		<Animatable.View animation={'zoomIn'} delay={100} style={styles.form}>
-			<Text style={styles.text}>{translate('loginScreen.step1Title')}</Text>
+		<Animatable.View
+			animation={'zoomIn'}
+			delay={100}
+			style={{
+				...styles.form,
+				backgroundColor: colors.background,
+				...(!dark && GS.shadowSm)
+			}}
+		>
+			<Text style={{ ...styles.text, color: colors.primary }}>{translate('loginScreen.step1Title')}</Text>
 			<TextField
 				placeholder={translate('loginScreen.teamNameFieldPlaceholder')}
 				containerStyle={styles.textField}
-				placeholderTextColor={'rgba(40, 32, 72, 0.4)'}
-				inputWrapperStyle={styles.inputStyleOverride}
+				placeholderTextColor={dark ? '#7B8089' : '#28204866'}
+				inputWrapperStyle={{
+					...styles.inputStyleOverride,
+					backgroundColor: colors.background,
+					borderColor: colors.border
+				}}
 				ref={authTeamInput}
 				value={authTeamName}
 				onChangeText={setAuthTeamName}
@@ -46,10 +60,17 @@ const FillTeamNameForm: FC<Props> = observer(({ isLoading, errors, setScreenStat
 			/>
 			<View style={styles.buttonsView}>
 				<TouchableOpacity style={{ width: 130 }} onPress={() => setWithTeam(true)}>
-					<Text style={styles.joinExistedText}>{translate('loginScreen.joinExistTeam')}</Text>
+					<Text style={{ ...styles.joinExistedText, color: colors.secondary }}>
+						{translate('loginScreen.joinExistTeam')}
+					</Text>
 				</TouchableOpacity>
 				<Button
-					style={{ ...$tapButton, opacity: authTeamName.length < 3 ? 0.5 : 1 }}
+					style={{
+						...$tapButton,
+						opacity: authTeamName.length < 3 ? 0.5 : 1,
+						backgroundColor: colors.secondary,
+						borderWidth: 0
+					}}
 					textStyle={styles.tapButtonText}
 					onPress={() =>
 						setScreenStatus({
@@ -73,8 +94,8 @@ const { width } = Dimensions.get('window');
 const $tapButton: ViewStyle = {
 	marginTop: spacing.extraSmall,
 	width: width / 3,
-	borderRadius: 10,
-	backgroundColor: '#3826A6'
+	borderRadius: 10
+	// backgroundColor: '#3826A6'
 };
 
 const styles = EStyleSheet.create({
@@ -92,8 +113,7 @@ const styles = EStyleSheet.create({
 		justifyContent: 'flex-start',
 		borderWidth: 1,
 		borderColor: 'rgba(0,0,0,0.1)',
-		zIndex: 1000,
-		...GS.shadowSm
+		zIndex: 1000
 	},
 	text: {
 		fontSize: '1.5rem',
@@ -125,8 +145,7 @@ const styles = EStyleSheet.create({
 	},
 	joinExistedText: {
 		fontSize: '0.75rem',
-		fontFamily: typography.primary.semiBold,
-		color: '#3826A6'
+		fontFamily: typography.primary.semiBold
 	},
 	tapButtonText: {
 		color: '#fff',

diff --git a/apps/mobile/app/screens/LoginScreen/Components/FillUserInfoForm.tsx b/apps/mobile/app/screens/LoginScreen/Components/FillUserInfoForm.tsx
@@ -10,7 +10,7 @@ import { ActivityIndicator } from 'react-native-paper';
 
 import { translate } from '../../../i18n';
 import { Button, TextField } from '../../../components';
-import { spacing, typography } from '../../../theme';
+import { spacing, typography, useAppTheme } from '../../../theme';
 import { useStores } from '../../../models';
 import { GLOBAL_STYLE as GS } from '../../../../assets/ts/styles';
 
@@ -28,14 +28,28 @@ const FillUserInfoForm: FC<Props> = observer(({ isLoading, errors, setScreenStat
 		authenticationStore: { authEmail, setAuthEmail, authUsername, setAuthUsername }
 	} = useStores();
 
+	const { colors, dark } = useAppTheme();
+
 	return (
-		<Animatable.View animation={'zoomIn'} delay={100} style={styles.form}>
-			<Text style={styles.text}>{translate('loginScreen.step2Title')}</Text>
+		<Animatable.View
+			animation={'zoomIn'}
+			delay={100}
+			style={{
+				...styles.form,
+				backgroundColor: colors.background,
+				...(!dark && GS.shadowSm)
+			}}
+		>
+			<Text style={{ ...styles.text, color: colors.primary }}>{translate('loginScreen.step2Title')}</Text>
 			<TextField
 				placeholder={translate('loginScreen.userNameFieldPlaceholder')}
 				containerStyle={styles.textField}
-				placeholderTextColor={'rgba(40, 32, 72, 0.4)'}
-				inputWrapperStyle={styles.inputStyleOverride}
+				placeholderTextColor={dark ? '#7B8089' : '#28204866'}
+				inputWrapperStyle={{
+					...styles.inputStyleOverride,
+					backgroundColor: colors.background,
+					borderColor: colors.border
+				}}
 				ref={authTeamInput}
 				value={authUsername}
 				onChangeText={setAuthUsername}
@@ -49,8 +63,12 @@ const FillUserInfoForm: FC<Props> = observer(({ isLoading, errors, setScreenStat
 			<TextField
 				placeholder={translate('loginScreen.emailFieldPlaceholder')}
 				containerStyle={[styles.textField, { marginTop: 20 }]}
-				placeholderTextColor={'rgba(40, 32, 72, 0.4)'}
-				inputWrapperStyle={styles.inputStyleOverride}
+				placeholderTextColor={dark ? '#7B8089' : '#28204866'}
+				inputWrapperStyle={{
+					...styles.inputStyleOverride,
+					backgroundColor: colors.background,
+					borderColor: colors.border
+				}}
 				ref={authTeamInput}
 				value={authEmail}
 				onChangeText={setAuthEmail}
@@ -76,13 +94,21 @@ const FillUserInfoForm: FC<Props> = observer(({ isLoading, errors, setScreenStat
 						})
 					}
 				>
-					<Feather name="arrow-left" size={24} color={'#3826A6'} />
-					<Text style={[styles.backButtonText, { color: '#282048', fontSize: 14 }]}>
+					<Feather name="arrow-left" size={24} color={dark ? colors.primary : '#3826A6'} />
+					<Text style={[styles.backButtonText, { color: dark ? colors.primary : '#282048', fontSize: 14 }]}>
 						{translate('common.back')}
 					</Text>
 				</TouchableOpacity>
 				<Button
-					style={[$tapButton, { width: width / 2.1, opacity: isLoading ? 0.5 : 1 }]}
+					style={[
+						$tapButton,
+						{
+							width: width / 2.1,
+							opacity: isLoading ? 0.5 : 1,
+							borderWidth: 0,
+							backgroundColor: colors.secondary
+						}
+					]}
 					textStyle={styles.tapButtonText}
 					onPress={() => createNewTeam()}
 				>
@@ -125,8 +151,7 @@ const styles = EStyleSheet.create({
 		justifyContent: 'flex-start',
 		borderWidth: 1,
 		borderColor: 'rgba(0,0,0,0.1)',
-		zIndex: 1000,
-		...GS.shadowSm
+		zIndex: 1000
 	},
 	text: {
 		fontSize: '1.5rem',