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

wip: colors

This commit is contained in:
GleidsonDaniel 2024-03-18 14:52:46 -03:00
parent 3f6231e35a
commit e5aae0f9d3
26 changed files with 49 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/Avatar/AvatarWithEdit.tsx
View File

@ -69,7 +69,7 @@ const AvatarWithEdit = ({
<Button
title={I18n.t('Edit')}
type='secondary'
backgroundColor={colors.editAndUploadButtonAvatar}
backgroundColor={colors.buttonBackgroundSecondaryDefault}
onPress={handleEdit}
testID='avatar-edit-button'
style={styles.editAvatarButton}

2
app/containers/Button/index.tsx
View File

@ -50,7 +50,7 @@ const Button = ({
const { colors } = useTheme();
const isPrimary = type === 'primary';
let textColor = isPrimary ? colors.buttonText : colors.bodyText;
let textColor = isPrimary ? colors.fontWhite : colors.bodyText;
if (color) {
textColor = color;
}

2
app/containers/ImageViewer/ImageViewer.tsx
View File

@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
const { colors } = useTheme();
return (
<View style={[styles.flex, { width, height, backgroundColor: colors.previewBackground }]}>
<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceDark }]}>
<GestureDetector gesture={gesture}>
<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
<Component

2
app/containers/LoginServices/ButtonService.tsx
View File

@ -16,7 +16,7 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
onPress={onPress}
style={[styles.serviceButton, { backgroundColor }]}
activeOpacity={0.5}
underlayColor={colors.buttonText}
underlayColor={colors.fontWhite}
>
<View style={styles.serviceButtonContainer}>
{authType === 'oauth' || authType === 'apple' ? (

6
app/containers/RoomItem/Actions.tsx
View File

@ -46,7 +46,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
<CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name={isRead ? 'flag' : 'check'}
color={colors.buttonText}
color={colors.fontWhite}
/>
</RectButton>
</View>
@ -129,7 +129,7 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
<CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name={favorite ? 'star-filled' : 'star'}
color={colors.buttonText}
color={colors.fontWhite}
/>
</RectButton>
</Animated.View>
@ -149,7 +149,7 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
<CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name='unread-on-top-disabled'
color={colors.buttonText}
color={colors.fontWhite}
/>
</RectButton>
</Animated.View>

2
app/containers/Toast.tsx
View File

@ -47,7 +47,7 @@ const Toast = (): React.ReactElement => {
// @ts-ignore
position='center'
style={[styles.toast, { backgroundColor: colors.toastBackground }]}
textStyle={[styles.text, { color: colors.buttonText }]}
textStyle={[styles.text, { color: colors.fontWhite }]}
opacity={0.9}
/>
);

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

@ -31,7 +31,7 @@ export default function useStyle() {
callToActionButtonText: {
fontSize: 12,
...sharedStyles.textSemibold,
color: colors.buttonText
color: colors.fontWhite
},
callToActionCallBackText: {
fontSize: 12,

14
app/containers/UnreadBadge/getUnreadStyle.test.js
View File

@ -16,7 +16,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].fontAnnotation,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
});
@ -27,7 +27,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].fontInfo,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
});
@ -39,7 +39,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].badgeBackgroundLevel4,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
});
@ -51,7 +51,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].badgeBackgroundLevel3,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
});
@ -65,7 +65,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].badgeBackgroundLevel4,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
expect(
getUnreadStyleUtil({
@ -75,7 +75,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].badgeBackgroundLevel3,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
expect(
getUnreadStyleUtil({
@ -84,7 +84,7 @@ const testsForTheme = theme => {
})
).toEqual({
backgroundColor: themes[theme].fontInfo,
color: themes[theme].buttonText
color: themes[theme].fontWhite
});
});
};

2
app/containers/UnreadBadge/getUnreadStyle.ts
View File

@ -20,7 +20,7 @@ export const getUnreadStyle = ({
}
let backgroundColor = themes[theme].fontAnnotation;
const color = themes[theme].buttonText;
const color = themes[theme].fontWhite;
if ((userMentions && userMentions > 0) || tunreadUser?.length) {
backgroundColor = themes[theme].badgeBackgroundLevel4;
} else if ((groupMentions && groupMentions > 0) || tunreadGroup?.length) {

4
app/containers/message/Broadcast.tsx
View File

@ -27,8 +27,8 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
testID='message-broadcast-reply'
>
<>
<CustomIcon name='arrow-back' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
<CustomIcon name='arrow-back' size={20} style={styles.buttonIcon} color={themes[theme].fontWhite} />
<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
</>
</Touchable>
</View>

4
app/containers/message/CallButton.tsx
View File

@ -21,8 +21,8 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
hitSlop={BUTTON_HIT_SLOP}
>
<>
<CustomIcon name='camera' size={16} style={styles.buttonIcon} color={themes[theme].buttonText} />
<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Click_to_join')}</Text>
<CustomIcon name='camera' size={16} style={styles.buttonIcon} color={themes[theme].fontWhite} />
<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Click_to_join')}</Text>
</>
</Touchable>
</View>

2
app/containers/message/Components/OverlayComponent/index.tsx
View File

@ -19,7 +19,7 @@ const OverlayComponent = ({
return (
<>
<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
<View style={[style, styles.blurView, { backgroundColor: colors.surfaceDark }]} />
<View style={[style, styles.blurIndicator]}>
{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
</View>

4
app/containers/message/Discussion.tsx
View File

@ -34,8 +34,8 @@ const Discussion = React.memo(
hitSlop={BUTTON_HIT_SLOP}
>
<>
<CustomIcon name='discussions' size={16} style={styles.buttonIcon} color={themes[theme].buttonText} />
<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
<CustomIcon name='discussions' size={16} style={styles.buttonIcon} color={themes[theme].fontWhite} />
<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{buttonText}</Text>
</>
</Touchable>
<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>

2
app/containers/message/Thread.tsx
View File

@ -21,7 +21,7 @@ const Thread = React.memo(
return (
<View style={styles.buttonContainer}>
<View style={[styles.button, { backgroundColor: themes[theme].tintColor }]} testID={`message-thread-button-${msg}`}>
<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
</View>
<ThreadDetails
item={{

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

@ -1,5 +1,4 @@
const fixedColors = {
overlayColor: '#1F2329CC',
backdropColor: '#000000'
};
@ -251,7 +250,7 @@ const newColorsBlack = {
buttonBackgroundPrimaryPress: '#245399',
buttonBackgroundPrimaryDisabled: '#1D3963',
buttonBackgroundSecondaryDefault: '#2F343D',
buttonBackgroundSecondaryDefault: '#0E0D0D',
buttonBackgroundSecondaryPress: '#454C59',
buttonBackgroundSecondaryDisabled: '#2F343D',
@ -305,12 +304,7 @@ export const colors = {
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
searchboxBackground: '#E6E6E7',
buttonBackground: '#414852',
buttonText: '#ffffff',
editAndUploadButtonAvatar: '#E4E7EA',
previewBackground: '#1F2329',
previewTintColor: '#f9f9f9',
backdropOpacity: 0.3,
attachmentLoadingOpacity: 0.7,
},
@ -339,12 +333,7 @@ export const colors = {
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
searchboxBackground: '#192d4d',
buttonBackground: '#414852',
buttonText: '#ffffff',
editAndUploadButtonAvatar: '#0B182C',
previewBackground: '#030b1b',
previewTintColor: '#f9f9f9',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
black: {
@ -372,12 +361,7 @@ export const colors = {
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
searchboxBackground: '#1f1f1f',
buttonBackground: '#414852',
buttonText: '#ffffff',
editAndUploadButtonAvatar: '#0E0D0D',
previewBackground: '#000000',
previewTintColor: '#f9f9f9',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
},

12
app/views/AttachmentView.tsx
View File

@ -121,20 +121,20 @@ const AttachmentView = (): React.ReactElement => {
const options: StackNavigationOptions = {
title: title || '',
headerTitleAlign: 'center',
headerTitleStyle: { color: colors.previewTintColor },
headerTintColor: colors.previewTintColor,
headerTitleStyle: { color: colors.surfaceTint },
headerTintColor: colors.surfaceTint,
headerTitleContainerStyle: { flex: 1, maxWidth: undefined },
headerLeftContainerStyle: { flexGrow: undefined, flexBasis: undefined },
headerRightContainerStyle: { flexGrow: undefined, flexBasis: undefined },
headerLeft: () => (
<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.previewTintColor} />
<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.surfaceTint} />
),
headerRight: () =>
Allow_Save_Media_to_Gallery && !isImageBase64(attachment.image_url) ? (
<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.previewTintColor} />
<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.surfaceTint} />
) : null,
headerBackground: () => (
<HeaderBackground style={{ backgroundColor: colors.previewBackground, shadowOpacity: 0, elevation: 0 }} />
<HeaderBackground style={{ backgroundColor: colors.surfaceDark, shadowOpacity: 0, elevation: 0 }} />
)
};
navigation.setOptions(options);
@ -192,7 +192,7 @@ const AttachmentView = (): React.ReactElement => {
return (
<View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
<StatusBar barStyle='light-content' backgroundColor={colors.surfaceDark} />
<RenderContent attachment={attachment} setLoading={setLoading} />
{loading ? <RCActivityIndicator absolute size='large' /> : null}
</View>

2
app/views/CannedResponseDetail.tsx
View File

@ -124,7 +124,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
<View style={styles.cannedTagContainer}>
{cannedResponse?.tags?.length > 0 ? (
cannedResponse.tags.map(t => (
<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
</View>
))

2
app/views/CannedResponsesListView/CannedResponseItem.tsx
View File

@ -50,7 +50,7 @@ const CannedResponseItem = ({
<View style={styles.cannedTagContainer}>
{tags?.length > 0
? tags.map(t => (
<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
</View>
))

4
app/views/ChangeAvatarView/index.tsx
View File

@ -222,7 +222,7 @@ const ChangeAvatarView = () => {
title={I18n.t('Take_a_photo')}
type='secondary'
disabled={saving}
backgroundColor={colors.editAndUploadButtonAvatar}
backgroundColor={colors.buttonBackgroundSecondaryDefault}
onPress={() => pickImage(true)}
testID='change-avatar-view-take-a-photo'
/>
@ -230,7 +230,7 @@ const ChangeAvatarView = () => {
title={I18n.t('Upload_image')}
type='secondary'
disabled={saving}
backgroundColor={colors.editAndUploadButtonAvatar}
backgroundColor={colors.buttonBackgroundSecondaryDefault}
onPress={pickImage}
testID='change-avatar-view-upload-image'
/>

2
app/views/RoomInfoEditView/index.tsx
View File

@ -693,7 +693,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
disabled={!this.formIsChanged()}
testID='room-info-edit-view-submit'
>
<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityRole='button'>
<Text style={[styles.button, { color: themes[theme].fontWhite }]} accessibilityRole='button'>
{I18n.t('SAVE')}
</Text>
</TouchableOpacity>

4
app/views/RoomView/index.tsx
View File

@ -1373,7 +1373,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
enabled={!loading}
>
<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-chat-on-hold-button'>
{I18n.t('Resume')}
</Text>
</Touch>
@ -1389,7 +1389,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
enabled={!loading}
>
<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-join-button'>
{I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')}
</Text>
</Touch>

4
app/views/RoomsListView/ListHeader/index.tsx
View File

@ -36,10 +36,10 @@ const ListHeader = React.memo(
? 'Enter_Your_E2E_Password'
: 'Save_Your_Encryption_Password'
}
left={() => <List.Icon name='encrypted' color={themes[theme].buttonText} />}
left={() => <List.Icon name='encrypted' color={themes[theme].fontWhite} />}
underlayColor={themes[theme].strokeHighlight}
backgroundColor={themes[theme].actionTintColor}
color={themes[theme].buttonText}
color={themes[theme].fontWhite}
onPress={goEncryption}
testID='listheader-encryption'
/>

2
app/views/ShareListView/Header/SearchBox.tsx
View File

@ -69,7 +69,7 @@ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox)
{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
]}
>
<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme].strokeExtraLight }]}>
<CustomIcon name='search' size={14} color={themes[theme].fontSecondaryInfo} />
<TextInput
ref={inputRef}

2
app/views/ShareView/Header.tsx
View File

@ -68,7 +68,7 @@ const Header = React.memo(({ room, thread }: IHeader) => {
icon = 'channel-private';
}
const textColor = themes[theme].previewTintColor;
const textColor = themes[theme].surfaceTint;
let title;
if (thread?.id) {

2
app/views/ShareView/Thumbs.tsx
View File

@ -103,7 +103,7 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
return (
<>
<Image source={{ uri }} style={styles.thumb} />
<CustomIcon name='camera-filled' size={20} color={themes[theme].buttonText} style={styles.videoThumbIcon} />
<CustomIcon name='camera-filled' size={20} color={themes[theme].fontWhite} style={styles.videoThumbIcon} />
</>
);
}

10
app/views/ShareView/index.tsx
View File

@ -121,23 +121,23 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
const options: StackNavigationOptions = {
headerTitle: () => <Header room={room} thread={thread} />,
headerTitleAlign: 'left',
headerTintColor: themes[theme].previewTintColor
headerTintColor: themes[theme].surfaceTint
};
// if is share extension show default back button
if (!this.isShareExtension) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} color={themes[theme].previewTintColor} testID='share-view-close' />;
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} color={themes[theme].surfaceTint} testID='share-view-close' />;
}
if (!attachments.length && !readOnly) {
options.headerRight = () => (
<HeaderButton.Container>
<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].previewTintColor} />
<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].surfaceTint} />
</HeaderButton.Container>
);
}
options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].previewBackground }]} />;
options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceDark }]} />;
navigation.setOptions(options);
};
@ -403,7 +403,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
}
return (
<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
<StatusBar barStyle='light-content' backgroundColor={themes[theme].surfaceDark} />
{this.renderContent()}
</SafeAreaView>
);