chore: password colors change

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -101,7 +101,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 			<>
 				<View style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.passcodePrimary, paddingLeft: iconName ? 16 : 0 }]}>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
 				</View>

app/containers/CallHeader.tsx

@@ -97,7 +97,7 @@ function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary,
+			color: colors.fontDefault,
 			flexShrink: 1
 		},
 		rowContainer: { flexDirection: 'row' },

app/containers/InAppNotification/IncomingCallNotification/index.tsx

@@ -73,7 +73,7 @@ const IncomingCallHeader = React.memo(
 						}}
 						style={styles.closeButton}
 					>
-						<CustomIcon name='close' size={20} color={colors.gray300} />
+						<CustomIcon name='close' size={20} />
 					</Touchable>
 					<Touchable
 						hitSlop={BUTTON_HIT_SLOP}

app/containers/InAppNotification/IncomingCallNotification/style.tsx

@@ -26,7 +26,7 @@ export const useStyle = () => {
 			marginTop: 12
 		},
 		closeButton: {
-			backgroundColor: colors.passcodeButtonActive,
+			backgroundColor: colors.buttonBackgroundSecondaryDefault,
 			marginRight: 8,
 			alignItems: 'center',
 			justifyContent: 'center',

app/containers/Passcode/Base/Button.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Text, StyleProp, ViewStyle } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import Touch from '../../Touch';
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
@@ -16,23 +15,19 @@ interface IPasscodeButton {
 }
 
 const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
 			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
-			underlayColor={themes[theme].passcodeButtonActive}
-			rippleColor={themes[theme].passcodeButtonActive}
+			underlayColor={colors.buttonBackgroundSecondaryDefault}
+			rippleColor={colors.buttonBackgroundSecondaryPress}
 			enabled={!disabled}
 			onPress={press}
 		>
-			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
-			) : (
-				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
-			)}
+			{icon ? <CustomIcon name={icon} size={36} /> : <Text style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</Text>}
 		</Touch>
 	);
 });

app/containers/Passcode/Base/Dots.tsx

@@ -15,7 +15,7 @@ interface IPasscodeDots {
 }
 
 const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<View style={styles.dotsContainer}>
@@ -25,9 +25,9 @@ const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
 				const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 				let backgroundColor = '';
 				if (lengthSup && passcode.length > 0) {
-					backgroundColor = themes[theme].passcodeDotFull;
+					backgroundColor = colors.strokeDark;
 				} else {
-					backgroundColor = themes[theme].passcodeDotEmpty;
+					backgroundColor = colors.strokeLight;
 				}
 				const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
 				const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;

app/containers/Passcode/Base/LockIcon.tsx

@@ -3,20 +3,19 @@ import { View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
-const LockIcon = React.memo(() => {
-	const { theme } = useTheme();
+const LockIcon = () => {
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.iconView}>
-				<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} />
+				<CustomIcon name='auth' size={40} color={colors.fontSecondaryInfo} />
 			</View>
 		</Row>
 	);
-});
+};
 
 export default LockIcon;

app/containers/Passcode/Base/Locked.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Grid } from 'react-native-easy-grid';
 
-import { themes } from '../../../lib/constants';
 import { resetAttempts } from '../../../lib/methods/helpers/localAuthentication';
 import { TYPE } from '../constants';
 import { getDiff, getLockedUntil } from '../utils';
@@ -50,7 +49,7 @@ const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
 
 const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const readItemFromStorage = async () => {
 		const l = await getLockedUntil();
@@ -62,7 +61,7 @@ const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	}, []);
 
 	return (
-		<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+		<Grid style={[styles.grid, { backgroundColor: colors.strokeExtraLight }]}>
 			<LockIcon />
 			<Title text={I18n.t('Passcode_app_locked_title')} />
 			<Timer time={lockedUntil} setStatus={setStatus} />

app/containers/Passcode/Base/Subtitle.tsx

@@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.subtitleView}>
-				<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text>
+				<Text style={[styles.textSubtitle, { color: themes[theme].dangerColor }]}>{text}</Text>
 			</View>
 		</Row>
 	);

app/containers/Passcode/Base/Title.tsx

@@ -3,7 +3,6 @@ import { Text, View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IPasscodeTitle {
@@ -11,12 +10,12 @@ interface IPasscodeTitle {
 }
 
 const Title = React.memo(({ text }: IPasscodeTitle) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.titleView}>
-				<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</Text>
 			</View>
 		</Row>
 	);

app/containers/Passcode/Base/index.tsx

@@ -35,7 +35,7 @@ export interface IBase {
 
 const Base = forwardRef<IBase, IPasscodeBase>(
 	({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
-		const { theme } = useTheme();
+		const { colors } = useTheme();
 		const { height } = useDimensions();
 
 		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
@@ -101,7 +101,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 
 		return (
 			<Animatable.View ref={rootRef} style={styles.container}>
-				<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+				<Grid style={[styles.grid, { backgroundColor: colors.surfaceNeutral }]}>
 					<LockIcon />
 					<Title text={title} />
 					{subtitle ? <Subtitle text={subtitle} /> : null}

app/containers/UIKit/VideoConferenceBlock/components/styles.ts

@@ -51,7 +51,7 @@ export default function useStyle() {
 		joined: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary,
+			color: colors.strokeDark,
 			marginLeft: 8
 		},
 		plusUsers: {
@@ -71,7 +71,7 @@ export default function useStyle() {
 		callBack: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		callToActionCallBack: {
 			backgroundColor: colors.conferenceCallPlusUsersButton,
@@ -86,7 +86,7 @@ export default function useStyle() {
 		notAnswered: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		enabledBackground: {
 			backgroundColor: colors.conferenceCallEnabledIconBackground

app/lib/constants/colors.ts

@@ -247,14 +247,7 @@ export const colors = {
 		searchboxBackground: '#E6E6E7',
 		buttonBackground: '#414852',
 		buttonText: '#ffffff',
-		passcodeBackground: '#EEEFF1',
-		passcodeButtonActive: '#E4E7EA',
 		editAndUploadButtonAvatar: '#E4E7EA',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#2F343D',
-		passcodeSecondary: '#6C727A',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
 		previewBackground: '#1F2329',
 		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.3,
@@ -326,14 +319,7 @@ export const colors = {
 		searchboxBackground: '#192d4d',
 		buttonBackground: '#414852',
 		buttonText: '#ffffff',
-		passcodeBackground: '#030C1B',
-		passcodeButtonActive: '#0B182C',
 		editAndUploadButtonAvatar: '#0B182C',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#FFFFFF',
-		passcodeSecondary: '#CBCED1',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
 		previewBackground: '#030b1b',
 		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.9,
@@ -405,14 +391,7 @@ export const colors = {
 		searchboxBackground: '#1f1f1f',
 		buttonBackground: '#414852',
 		buttonText: '#ffffff',
-		passcodeBackground: '#000000',
-		passcodeButtonActive: '#0E0D0D',
 		editAndUploadButtonAvatar: '#0E0D0D',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#FFFFFF',
-		passcodeSecondary: '#CBCED1',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
 		previewBackground: '#000000',
 		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.9,

app/views/ChangePasscodeView.tsx

@@ -10,7 +10,7 @@ import { hasNotch } from '../lib/methods/helpers';
 import { PasscodeChoose } from '../containers/Passcode';
 import EventEmitter from '../lib/methods/helpers/events';
 import { CustomIcon } from '../containers/CustomIcon';
-import { CHANGE_PASSCODE_EMITTER, themes } from '../lib/constants';
+import { CHANGE_PASSCODE_EMITTER } from '../lib/constants';
 
 const styles = StyleSheet.create({
 	modal: {
@@ -33,7 +33,7 @@ const ChangePasscodeView = React.memo(() => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<Partial<IArgs>>({});
 
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -75,7 +75,7 @@ const ChangePasscodeView = React.memo(() => {
 			<PasscodeChoose finishProcess={onSubmit} force={data?.force} />
 			{!data?.force ? (
 				<Touchable onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' color={themes[theme].passcodePrimary} size={30} />
+					<CustomIcon name='close' color={colors.fontDefault} size={30} />
 				</Touchable>
 			) : null}
 		</Modal>

app/views/ScreenLockedView.tsx

@@ -79,7 +79,7 @@ const ScreenLockedView = (): JSX.Element => {
 			<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
 			{data?.force ? (
 				<Touchable onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' color={colors.passcodePrimary} size={30} />
+					<CustomIcon name='close' color={colors.fontDefault} size={30} />
 				</Touchable>
 			) : null}
 		</Modal>