added the dark theme styling to the rest of the login/register screens

ever-co · Nov 16, 2023 · bcdc879 · bcdc879
1 parent 517fb9e
commit bcdc879
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 63 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
@@ -246,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/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/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',

diff --git a/apps/mobile/app/screens/LoginScreen/Components/PassCode.tsx b/apps/mobile/app/screens/LoginScreen/Components/PassCode.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
 import React, { FC, useEffect, useRef, useState } from 'react';
 import * as Animatable from 'react-native-animatable';
 import EStyleSheet from 'react-native-extended-stylesheet';
@@ -41,7 +42,7 @@ const PassCode: FC<Props> = observer(
 		signInWorkspace,
 		setIsWorkspaceScreen
 	}) => {
-		const { colors } = useAppTheme();
+		const { colors, dark } = useAppTheme();
 		const {
 			authenticationStore: { authEmail, setAuthEmail, setAuthInviteCode, authInviteCode, setTempAuthToken },
 			teamStore: { activeTeamId, setActiveTeamId }
@@ -173,15 +174,29 @@ const PassCode: FC<Props> = observer(
 		}, [step]);
 
 		return (
-			<Animatable.View animation={'zoomIn'} delay={100} style={styles.form}>
+			<Animatable.View
+				animation={'zoomIn'}
+				delay={100}
+				style={{
+					...styles.form,
+					backgroundColor: colors.background,
+					...(!dark && GS.shadowSm)
+				}}
+			>
 				{step === 'Email' ? (
 					<>
-						<Text style={styles.text}>{translate('loginScreen.inviteStepLabel')}</Text>
+						<Text style={{ ...styles.text, color: colors.primary }}>
+							{translate('loginScreen.inviteStepLabel')}
+						</Text>
 						<TextField
 							placeholder={translate('loginScreen.emailFieldPlaceholder')}
 							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={authEmail}
 							onChangeText={onChangeEmail}
@@ -195,15 +210,10 @@ const PassCode: FC<Props> = observer(
 					</>
 				) : step === 'Code' ? (
 					<View>
-						<Text style={{ ...styles.text, alignSelf: 'center' }}>
+						<Text style={{ ...styles.text, alignSelf: 'center', color: colors.primary }}>
 							{translate('loginScreen.inviteCodeFieldLabel')}
 						</Text>
-						<CodeInput
-							onChange={onChangeAuthCode}
-							editable={!isLoading}
-							defaultValue={authInviteCode}
-							loginInput={true}
-						/>
+						<CodeInput onChange={onChangeAuthCode} editable={!isLoading} defaultValue={authInviteCode} />
 						{joinError ? <Text style={styles.verifyError}>{joinError}</Text> : null}
 						<TouchableOpacity onPress={() => getAuthCode()}>
 							<Text style={styles.resendText}>
@@ -217,7 +227,7 @@ const PassCode: FC<Props> = observer(
 					</View>
 				) : (
 					<View style={styles.tenantsContainer}>
-						<Text style={{ ...styles.text, alignSelf: 'center' }}>
+						<Text style={{ ...styles.text, alignSelf: 'center', color: colors.primary }}>
 							{translate('loginScreen.selectWorkspaceFieldLabel')}
 						</Text>
 
@@ -251,8 +261,12 @@ const PassCode: FC<Props> = observer(
 						}}
 						onPress={() => onPrevStep()}
 					>
-						<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: dark ? colors.primary : '#282048', fontSize: 14 }]}
+						>
+							{translate('common.back')}
+						</Text>
 					</TouchableOpacity>
 					<Button
 						style={[
@@ -265,7 +279,9 @@ const PassCode: FC<Props> = observer(
 									(step === 'Code' && !isValid.step2) ||
 									(step === 'Tenant' && !isValid.step3)
 										? 0.5
-										: 1
+										: 1,
+								backgroundColor: colors.secondary,
+								borderWidth: 0
 							}
 						]}
 						textStyle={styles.tapButtonText}
@@ -315,13 +331,11 @@ 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',
 		marginBottom: '2rem',
-		color: '#1A1C1E',
 		width: '100%',
 		textAlign: 'center',
 		fontFamily: typography.primary.semiBold

diff --git a/apps/mobile/app/screens/LoginScreen/Components/UserTenants.tsx b/apps/mobile/app/screens/LoginScreen/Components/UserTenants.tsx
@@ -6,6 +6,7 @@ import { View, Text, StyleSheet, Image, FlatList } from 'react-native';
 import { IWorkspace } from '../../../services/interfaces/IAuthentication';
 import { SvgXml } from 'react-native-svg';
 import { grayCircleIcon, greenCircleTickIcon } from '../../../components/svgs/icons';
+import { useAppTheme } from '../../../theme';
 
 interface IValid {
 	step1: boolean;
@@ -35,10 +36,11 @@ const UserTenants: FC<IUserTenants> = ({
 	setIsValid,
 	setTempAuthToken
 }) => {
+	const { colors } = useAppTheme();
 	return (
-		<View style={styles.tenantContainer}>
+		<View style={{ ...styles.tenantContainer, backgroundColor: colors.background, borderColor: colors.border }}>
 			<View style={styles.tenantNameContainer}>
-				<Text style={{ fontSize: 17 }}>{data.user.tenant.name}</Text>
+				<Text style={{ fontSize: 17, color: colors.primary }}>{data.user.tenant.name}</Text>
 				<View
 					onTouchStart={() => {
 						setSelectedWorkspace(index);
@@ -66,7 +68,7 @@ const UserTenants: FC<IUserTenants> = ({
 									source={{ uri: item.team_logo }}
 									style={{ width: 25, height: 25, borderRadius: 100 }}
 								/>
-								<Text style={{ fontSize: 18 }}>
+								<Text style={{ fontSize: 18, color: colors.primary }}>
 									{item.team_name}({item.team_member_count})
 								</Text>
 							</View>