verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

chore: password colors change

This commit is contained in:
GleidsonDaniel 2024-03-13 16:38:18 -03:00
parent 95ea8b2a5e
commit 87f4faa97e
15 changed files with 29 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
View File

@ -101,7 +101,7 @@ const ActionSheetContentWithInputAndSubmit = ({
<> <>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null} {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} {title}
</Text> </Text>
</View> </View>

2
app/containers/CallHeader.tsx
View File

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

2
app/containers/InAppNotification/IncomingCallNotification/index.tsx
View File

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

2
app/containers/InAppNotification/IncomingCallNotification/style.tsx
View File

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

13
app/containers/Passcode/Base/Button.tsx
View File

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

6
app/containers/Passcode/Base/Dots.tsx
View File

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

9
app/containers/Passcode/Base/LockIcon.tsx
View File

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

5
app/containers/Passcode/Base/Locked.tsx
View File

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

2
app/containers/Passcode/Base/Subtitle.tsx
View File

@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
return ( return (
<Row style={styles.row}> <Row style={styles.row}>
<View style={styles.subtitleView}> <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> </View>
</Row> </Row>
); );

5
app/containers/Passcode/Base/Title.tsx
View File

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

4
app/containers/Passcode/Base/index.tsx
View File

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

6
app/containers/UIKit/VideoConferenceBlock/components/styles.ts
View File

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

21
app/lib/constants/colors.ts
View File

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

6
app/views/ChangePasscodeView.tsx
View File

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

2
app/views/ScreenLockedView.tsx
View File

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