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: background color

This commit is contained in:
GleidsonDaniel 2024-03-18 13:27:25 -03:00
parent 624c67f048
commit a36bb292cf
81 changed files with 213 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,7 +161,7 @@ const ActionSheet = React.memo(
handleComponent={renderHandle} handleComponent={renderHandle}
enablePanDownToClose enablePanDownToClose
style={{ ...styles.container, ...bottomSheet }} style={{ ...styles.container, ...bottomSheet }}
backgroundStyle={{ backgroundColor: colors.focusedBackground }} backgroundStyle={{ backgroundColor: colors.surfaceLight }}
onChange={index => index === -1 && onClose()} onChange={index => index === -1 && onClose()}
// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker // We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
enableContentPanningGesture={data?.enableContentPanningGesture ?? true} enableContentPanningGesture={data?.enableContentPanningGesture ?? true}

2
app/containers/ActionSheet/BottomSheetContent.tsx
View File

@ -45,7 +45,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
keyExtractor={item => item.title} keyExtractor={item => item.title}
bounces={false} bounces={false}
renderItem={renderItem} renderItem={renderItem}
style={{ backgroundColor: colors.focusedBackground }} style={{ backgroundColor: colors.surfaceLight }}
keyboardDismissMode='interactive' keyboardDismissMode='interactive'
indicatorStyle='black' indicatorStyle='black'
contentContainerStyle={{ paddingBottom: bottom }} contentContainerStyle={{ paddingBottom: bottom }}

6
app/containers/ActionSheet/Item.tsx
View File

@ -29,17 +29,17 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
let color = colors.fontDefault; let color = colors.fontDefault;
if (item.danger) { if (item.danger) {
color = colors.dangerColor; color = colors.fontDanger;
} }
if (!enabled) { if (!enabled) {
color = colors.fontDisabled; color = colors.fontDisabled;
} }
return ( return (
<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}> <Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null} {item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}> <Text numberOfLines={1} style={[styles.title, { color: colors.fontDanger, marginLeft: item.icon ? 16 : 0 }]}>
{item.title} {item.title}
</Text> </Text>
</View> </View>

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

@ -50,7 +50,7 @@ const DirectoryItem = ({
}: IDirectoryItem): React.ReactElement => { }: IDirectoryItem): React.ReactElement => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}> <Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}> <View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} /> <Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
<View style={styles.directoryItemTextContainer}> <View style={styles.directoryItemTextContainer}>

4
app/containers/FormContainer.tsx
View File

@ -31,7 +31,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
return ( return (
<KeyboardView <KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
contentContainerStyle={sharedStyles.container} contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
@ -42,7 +42,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
{...scrollPersistTaps} {...scrollPersistTaps}
{...props} {...props}
> >
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].surfaceRoom }}>
{children} {children}
<AppVersion theme={theme} /> <AppVersion theme={theme} />
</SafeAreaView> </SafeAreaView>

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

@ -13,7 +13,7 @@ export const useStyle = () => {
marginHorizontal: 10, marginHorizontal: 10,
borderWidth: StyleSheet.hairlineWidth, borderWidth: StyleSheet.hairlineWidth,
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.focusedBackground, backgroundColor: colors.surfaceLight,
borderColor: colors.separatorColor, borderColor: colors.separatorColor,
flex: 1 flex: 1
}, },
@ -36,7 +36,7 @@ export const useStyle = () => {
}, },
cancelButton: { cancelButton: {
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.cancelCallButton, backgroundColor: colors.dangerColor,
marginRight: 8, marginRight: 8,
flex: 2, flex: 2,
alignItems: 'center', alignItems: 'center',
@ -48,7 +48,7 @@ export const useStyle = () => {
}, },
acceptButton: { acceptButton: {
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.acceptCallButton, backgroundColor: colors.buttonBackgroundSuccessDefault,
flex: 2, flex: 2,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'

2
app/containers/InAppNotification/NotifierComponent.tsx
View File

@ -103,7 +103,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
styles.container, styles.container,
isMasterDetail && styles.small, isMasterDetail && styles.small,
{ {
backgroundColor: themes[theme].focusedBackground, backgroundColor: themes[theme].surfaceLight,
borderColor: themes[theme].separatorColor, borderColor: themes[theme].separatorColor,
marginTop: insets.top marginTop: insets.top
} }

4
app/containers/List/ListItem.tsx
View File

@ -136,7 +136,7 @@ interface IListItemButton {
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => ( const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
<Touch <Touch
onPress={() => onPress(props.title)} onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
underlayColor={underlayColor} underlayColor={underlayColor}
enabled={!props.disabled} enabled={!props.disabled}
> >
@ -157,7 +157,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
return <Button {...props} theme={theme} onPress={onPress} />; return <Button {...props} theme={theme} onPress={onPress} />;
} }
return ( return (
<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}> <View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
<Content {...props} theme={theme} /> <Content {...props} theme={theme} />
</View> </View>
); );

4
app/containers/MessageActions/Header.tsx
View File

@ -108,12 +108,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
} }
return ( return (
<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}> <View style={[styles.container, { backgroundColor: themes[theme].surfaceLight }]}>
<FlatList <FlatList
data={frequentlyUsed.slice(0, quantity)} data={frequentlyUsed.slice(0, quantity)}
renderItem={renderItem} renderItem={renderItem}
ListFooterComponent={renderFooter} ListFooterComponent={renderFooter}
style={{ backgroundColor: themes[theme].focusedBackground }} style={{ backgroundColor: themes[theme].surfaceLight }}
keyExtractor={item => (typeof item === 'string' ? item : item.name)} keyExtractor={item => (typeof item === 'string' ? item : item.name)}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
scrollEnabled={false} scrollEnabled={false}

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].dangerColor }]}>{text}</Text> <Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
</View> </View>
</Row> </Row>
); );

2
app/containers/RoomItem/Touchable.tsx
View File

@ -223,7 +223,7 @@ const Touchable = ({
onPress={handlePress} onPress={handlePress}
testID={testID} testID={testID}
style={{ style={{
backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor backgroundColor: isFocused ? colors.chatComponentBackground : colors.surfaceRoom
}} }}
> >
{children} {children}

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

@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
}, []); }, []);
return ( return (
<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}> <View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
<FormTextInput <FormTextInput
autoCapitalize='none' autoCapitalize='none'
autoCorrect={false} autoCorrect={false}

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

@ -33,7 +33,7 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
testID={`rooms-list-header-server-${item.id}`} testID={`rooms-list-header-server-${item.id}`}
android_ripple={{ color: themes[theme].bannerBackground }} android_ripple={{ color: themes[theme].bannerBackground }}
style={({ pressed }: { pressed: boolean }) => ({ style={({ pressed }: { pressed: boolean }) => ({
backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].surfaceRoom
})} })}
> >
<View style={styles.serverItemContainer}> <View style={styles.serverItemContainer}>

2
app/containers/SupportedVersions/SupportedVersionsExpired.tsx
View File

@ -46,7 +46,7 @@ export const SupportedVersionsExpired = () => {
}; };
return ( return (
<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.focusedBackground }]}> <View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
<View style={styles.iconContainer}> <View style={styles.iconContainer}>
<CustomIcon name='warning' size={36} color={colors.dangerColor} /> <CustomIcon name='warning' size={36} color={colors.dangerColor} />
</View> </View>

2
app/containers/SupportedVersions/SupportedVersionsWarning.tsx
View File

@ -31,7 +31,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
} }
return ( return (
<View style={[styles.container, { backgroundColor: colors.focusedBackground }]}> <View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
<View style={styles.iconContainer}> <View style={styles.iconContainer}>
<CustomIcon name='warning' size={36} color={colors.dangerColor} /> <CustomIcon name='warning' size={36} color={colors.dangerColor} />
</View> </View>

6
app/containers/TextInput/FormTextInput.tsx
View File

@ -91,7 +91,7 @@ export const FormTextInput = ({
return ( return (
<View style={[styles.inputContainer, containerStyle]}> <View style={[styles.inputContainer, containerStyle]}>
{label ? ( {label ? (
<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.dangerColor }]}> <Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
{label} {label}
</Text> </Text>
) : null} ) : null}
@ -103,7 +103,7 @@ export const FormTextInput = ({
iconLeft && styles.inputIconLeft, iconLeft && styles.inputIconLeft,
(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight, (secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
{ {
backgroundColor: colors.backgroundColor, backgroundColor: colors.surfaceRoom,
borderColor: colors.strokeLight, borderColor: colors.strokeLight,
color: colors.fontTitlesLabels color: colors.fontTitlesLabels
}, },
@ -173,7 +173,7 @@ export const FormTextInput = ({
) : null} ) : null}
{left} {left}
</View> </View>
{error && error.reason ? <Text style={[styles.error, { color: colors.dangerColor }]}>{error.reason}</Text> : null} {error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
</View> </View>
); );
}; };

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

@ -110,7 +110,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
style={[ style={[
styles.content, styles.content,
isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet], isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
{ backgroundColor: themes[theme].backgroundColor } { backgroundColor: themes[theme].surfaceRoom }
]} ]}
> >
<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text> <Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>

4
app/containers/UIKit/DatePicker.tsx
View File

@ -66,11 +66,11 @@ export const DatePicker = ({ element, language, action, context, loading, value,
button = ( button = (
<Touchable <Touchable
onPress={() => onShow(!show)} onPress={() => onShow(!show)}
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
background={Touchable.Ripple(themes[theme].bannerBackground)} background={Touchable.Ripple(themes[theme].bannerBackground)}
> >
<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}> <View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].fontTitlesLabels }]}> <Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
{currentDate.toLocaleDateString(language)} {currentDate.toLocaleDateString(language)}
</Text> </Text>
{loading ? ( {loading ? (

4
app/containers/UIKit/Input.tsx
View File

@ -35,11 +35,11 @@ const styles = StyleSheet.create({
export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => ( export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
<View style={styles.container}> <View style={styles.container}>
{label ? ( {label ? (
<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].fontTitlesLabels }]}>{label}</Text> <Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
) : null} ) : null}
{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null} {description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
{parser.renderInputs({ ...element }, BlockContext.FORM, parser)} {parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null} {error ? <Text style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</Text> : null}
{hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null} {hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null}
</View> </View>
); );

2
app/containers/UIKit/MultiSelect/Input.tsx
View File

@ -22,7 +22,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
return ( return (
<Touchable <Touchable
onPress={onPress} onPress={onPress}
style={[{ backgroundColor: colors.backgroundColor }, styles.inputBorder, inputStyle]} style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
background={Touchable.Ripple(colors.bannerBackground)} background={Touchable.Ripple(colors.bannerBackground)}
disabled={disabled} disabled={disabled}
> >

2
app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
View File

@ -71,7 +71,7 @@ export const MultiSelectContent = React.memo(
testID='multi-select-search' testID='multi-select-search'
onChangeText={handleSearch} onChangeText={handleSearch}
placeholder={I18n.t('Search')} placeholder={I18n.t('Search')}
inputStyle={{ backgroundColor: colors.focusedBackground }} inputStyle={{ backgroundColor: colors.surfaceLight }}
bottomSheet={isIOS} bottomSheet={isIOS}
onSubmitEditing={() => { onSubmitEditing={() => {
setTimeout(() => { setTimeout(() => {

2
app/containers/UIKit/Select.tsx
View File

@ -52,7 +52,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
...styles.viewContainer, ...styles.viewContainer,
...(isIOS ? styles.iosPadding : {}), ...(isIOS ? styles.iosPadding : {}),
borderColor: themes[theme].separatorColor, borderColor: themes[theme].separatorColor,
backgroundColor: themes[theme].backgroundColor backgroundColor: themes[theme].surfaceRoom
}; };
const placeholderObject = useMemo( const placeholderObject = useMemo(

2
app/containers/markdown/Markdown.stories.tsx
View File

@ -11,7 +11,7 @@ const theme = 'light';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginHorizontal: 15, marginHorizontal: 15,
backgroundColor: themes[theme].backgroundColor, backgroundColor: themes[theme].surfaceRoom,
marginVertical: 50 marginVertical: 50
} }
}); });

2
app/containers/markdown/new/NewMarkdown.stories.tsx
View File

@ -25,7 +25,7 @@ export default {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginHorizontal: 15, marginHorizontal: 15,
backgroundColor: themes[theme].backgroundColor, backgroundColor: themes[theme].surfaceRoom,
marginVertical: 50 marginVertical: 50
} }
}); });

2
app/containers/message/Message.stories.tsx
View File

@ -43,7 +43,7 @@ export default {
decorators: [ decorators: [
(Story: any) => ( (Story: any) => (
<NavigationContainer> <NavigationContainer>
<ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}> <ScrollView style={{ backgroundColor: themes[_theme].surfaceRoom }}>
<MessageContext.Provider <MessageContext.Provider
value={{ value={{
user, user,

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

@ -35,7 +35,7 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
onPress={reactionInit} onPress={reactionInit}
key='message-add-reaction' key='message-add-reaction'
testID='message-add-reaction' testID='message-add-reaction'
style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
background={Touchable.Ripple(themes[theme].bannerBackground)} background={Touchable.Ripple(themes[theme].bannerBackground)}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
> >
@ -57,7 +57,7 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
testID={`message-reaction-${reaction.emoji}`} testID={`message-reaction-${reaction.emoji}`}
style={[ style={[
styles.reactionButton, styles.reactionButton,
{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor } { backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].surfaceRoom }
]} ]}
background={Touchable.Ripple(themes[theme].bannerBackground)} background={Touchable.Ripple(themes[theme].bannerBackground)}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}

4
app/ee/omnichannel/views/QueueListView.tsx
View File

@ -104,14 +104,14 @@ const QueueListView = React.memo(() => {
}; };
return ( return (
<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.backgroundColor }}> <SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.surfaceRoom }}>
<StatusBar /> <StatusBar />
<FlatList <FlatList
ref={getScrollRef} ref={getScrollRef}
data={queued} data={queued}
extraData={queued} extraData={queued}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
style={{ backgroundColor: colors.backgroundColor }} style={{ backgroundColor: colors.surfaceRoom }}
renderItem={renderItem} renderItem={renderItem}
getItemLayout={getItemLayout} getItemLayout={getItemLayout}
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}

2
app/index.tsx
View File

@ -201,7 +201,7 @@ export default class Root extends React.Component<{}, IState> {
return ( return (
<SafeAreaProvider <SafeAreaProvider
initialMetrics={initialWindowMetrics} initialMetrics={initialWindowMetrics}
style={{ backgroundColor: themes[this.state.theme].backgroundColor }} style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}
> >
<Provider store={store}> <Provider store={store}>
<ThemeContext.Provider <ThemeContext.Provider

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

@ -1,6 +1,8 @@
export const BACKGROUND_PUSH_COLOR = '#F5455C'; const fixedColors = {
overlayColor: '#1F2329CC',
backdropColor: '#000000'
};
// TODO: Remove this after the new colors are implemented
const newColors = { const newColors = {
surfaceLight: '#FFFFFF', surfaceLight: '#FFFFFF',
surfaceTint: '#F7F8FA', surfaceTint: '#F7F8FA',
@ -185,22 +187,105 @@ const newColorsDark = {
buttonSuccessDisabled: '#757575' buttonSuccessDisabled: '#757575'
}; };
const callButtons = { const newColorsBlack = {
cancelCallButton: '#F5455C', surfaceLight: '#0d0d0d',
acceptCallButton: '#158D65' // surfaceTint: '#1F2329',
surfaceRoom: '#000000'
// surfaceNeutral: '#2D3039',
// surfaceDisabled: '#24272E',
// surfaceHover: '#1A1E23',
// surfaceSelected: '#3C3F44',
// surfaceDark: '#E4E7EA',
// surfaceFeatured: '#5F1477',
// surfaceFeaturedHover: '#4A105D',
// strokeExtraLight: '#2F343D',
// strokeLight: '#333842',
// strokeMedium: '#404754',
// strokeDark: '#9EA2A8',
// strokeExtraDark: '#CBCED1',
// strokeExtraLightHighlight: '#87CBFC',
// strokeHighlight: '#3976D1',
// strokeExtraLightError: '#F49AA6',
// strokeError: '#BB3E4E',
// fontWhite: '#2F343D',
// fontDisabled: '#60646C',
// fontAnnotation: '#9EA2A8',
// fontHint: '#9EA2A8',
// fontSecondaryInfo: '#9EA2A8',
// fontDefault: '#E4E7EA',
// fontTitlesLabels: '#F2F3F5',
// fontInfo: '#739EDE',
// fontDanger: '#CF6E7A',
// fontPureBlack: '#2F343D',
// fontPureWhite: '#FFFFFF',
// statusBackgroundInfo: '#A8C3EB',
// statusBackgroundSuccess: '#C1EBDD',
// statusBackgroundDanger: '#FFBDC5',
// statusBackgroundWarning: '#FEEFBE',
// statusBackgroundWarning2: '#4E4731',
// statusBackgroundService: '#FCE3CF',
// statusBackgroundService2: '#EDD0F7',
// statusFontInfo: '#739EDE',
// statusFontSuccess: '#58AD90',
// statusFontDanger: '#D88892',
// statusFontWarning: '#C7AA66',
// statusFontWarning2: '#FFFFFF',
// statusFontService: '#CA9163',
// statusFontService2: '#C393D2',
// badgeBackgroundLevel1: '#484C51',
// badgeBackgroundLevel2: '#2C65BA',
// badgeBackgroundLevel3: '#955828',
// badgeBackgroundLevel4: '#B43C4C',
// userPresenceOnline: '#1CBF89',
// userPresenceBusy: '#C14454',
// userPresenceAway: '#AC892F',
// userPresenceOffline: '#6C727A',
// userPresenceDisabled: '#955828',
// buttonBackgroundPrimaryDefault: '#3976D1',
// buttonBackgroundPrimaryPress: '#245399',
// buttonBackgroundPrimaryDisabled: '#1D3963',
// buttonBackgroundSecondaryDefault: '#2F343D',
// buttonBackgroundSecondaryPress: '#454C59',
// buttonBackgroundSecondaryDisabled: '#2F343D',
// buttonBackgroundSecondaryDangerDefault: '#2F343D',
// buttonBackgroundSecondaryDangerPress: '#454C59',
// buttonBackgroundSecondaryDangerDisabled: '#2F343D',
// buttonBackgroundDangerDefault: '#BB3E4E',
// buttonBackgroundDangerPress: '#822C37',
// buttonBackgroundDangerDisabled: '#3D2126',
// buttonBackgroundSuccessDefault: '#1D7256',
// buttonBackgroundSuccessPress: '#134937',
// buttonBackgroundSuccessDisabled: '#1E4B40',
// buttonFontPrimary: '#FFFFFF',
// buttonPrimaryDisabled: '#6C727A',
// buttonFontSecondary: '#E4E7EA',
// buttonSecondaryDisabled: '#6C727A',
// buttonFontSecondaryDanger: '#C14454',
// buttonSecondaryDangerDisabled: '#613339',
// buttonFontDanger: '#FFFFFF',
// buttonDangerDisabled: '#757575',
// buttonFontSuccess: '#FFFFFF',
// buttonSuccessDisabled: '#757575'
}; };
export const colors = { export const colors = {
light: { light: {
...newColors, ...newColors,
backgroundColor: '#ffffff',
focusedBackground: '#ffffff',
chatComponentBackground: '#f3f4f5', chatComponentBackground: '#f3f4f5',
auxiliaryBackground: '#efeff4', auxiliaryBackground: '#efeff4',
bannerBackground: '#f1f2f4', bannerBackground: '#f1f2f4',
bodyText: '#2f343d', bodyText: '#2f343d',
backdropColor: '#000000',
dangerColor: '#f5455c', dangerColor: '#f5455c',
successColor: '#2de0a5', successColor: '#2de0a5',
borderColor: '#e1e5e8', borderColor: '#e1e5e8',
@ -255,22 +340,14 @@ export const colors = {
gray300: '#5f656e', gray300: '#5f656e',
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#1F2329', n900: '#1F2329',
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD'
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
}, },
dark: { dark: {
...newColorsDark, ...newColorsDark,
surfaceLight: '#0b182c',
backgroundColor: '#030b1b',
focusedBackground: '#0b182c',
chatComponentBackground: '#192132', chatComponentBackground: '#192132',
auxiliaryBackground: '#07101e', auxiliaryBackground: '#07101e',
bannerBackground: '#0e1f38', bannerBackground: '#0e1f38',
bodyText: '#cbced1', bodyText: '#cbced1',
backdropColor: '#000000',
dangerColor: '#f5455c', dangerColor: '#f5455c',
successColor: '#2de0a5', successColor: '#2de0a5',
borderColor: '#0f213d', borderColor: '#0f213d',
@ -325,22 +402,14 @@ export const colors = {
gray300: '#5f656e', gray300: '#5f656e',
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#FFFFFF', n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD'
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
}, },
black: { black: {
...newColorsDark, ...newColorsDark,
surfaceLight: '#0d0d0d',
backgroundColor: '#000000',
focusedBackground: '#0d0d0d',
chatComponentBackground: '#16181a', chatComponentBackground: '#16181a',
auxiliaryBackground: '#080808', auxiliaryBackground: '#080808',
bannerBackground: '#1f2329', bannerBackground: '#1f2329',
bodyText: '#cbced1', bodyText: '#cbced1',
backdropColor: '#000000',
dangerColor: '#f5455c', dangerColor: '#f5455c',
successColor: '#2de0a5', successColor: '#2de0a5',
borderColor: '#1f2329', borderColor: '#1f2329',
@ -395,10 +464,7 @@ export const colors = {
gray300: '#5f656e', gray300: '#5f656e',
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#FFFFFF', n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD'
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
} }
}; };

2
app/lib/methods/helpers/navigation/index.ts
View File

@ -48,7 +48,7 @@ export const navigationTheme = (theme: TSupportedThemes) => {
...defaultNavTheme, ...defaultNavTheme,
colors: { colors: {
...defaultNavTheme.colors, ...defaultNavTheme.colors,
background: themes[theme].backgroundColor, background: themes[theme].surfaceRoom,
border: themes[theme].borderColor border: themes[theme].borderColor
} }
}; };

2
app/lib/methods/helpers/theme.ts
View File

@ -58,7 +58,7 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
// Do nothing // Do nothing
} }
} }
setRootViewColor(themes[theme].backgroundColor); setRootViewColor(themes[theme].surfaceRoom);
}; };
export const unsubscribeTheme = () => { export const unsubscribeTheme = () => {

4
app/lib/notifications/videoConf/backgroundNotificationHandler.ts
View File

@ -5,7 +5,7 @@ import ejson from 'ejson';
import { deepLinkingClickCallPush } from '../../../actions/deepLinking'; import { deepLinkingClickCallPush } from '../../../actions/deepLinking';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { BACKGROUND_PUSH_COLOR } from '../../constants'; import { colors } from '../../constants';
import { store } from '../../store/auxStore'; import { store } from '../../store/auxStore';
const VIDEO_CONF_CHANNEL = 'video-conf-call'; const VIDEO_CONF_CHANNEL = 'video-conf-call';
@ -86,7 +86,7 @@ const displayVideoConferenceNotification = async (notification: NotificationData
visibility: AndroidVisibility.PUBLIC, visibility: AndroidVisibility.PUBLIC,
importance: AndroidImportance.HIGH, importance: AndroidImportance.HIGH,
smallIcon: 'ic_notification', smallIcon: 'ic_notification',
color: BACKGROUND_PUSH_COLOR, color: colors.light.badgeBackgroundLevel4,
actions, actions,
lightUpScreen: true, lightUpScreen: true,
loopSound: true, loopSound: true,

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

@ -167,7 +167,7 @@ const AddExistingChannelView = () => {
); );
}} }}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
contentContainerStyle={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
/> />
</SafeAreaView> </SafeAreaView>

2
app/views/AttachmentView.tsx
View File

@ -191,7 +191,7 @@ const AttachmentView = (): React.ReactElement => {
}; };
return ( return (
<View style={{ backgroundColor: colors.backgroundColor, flex: 1 }}> <View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} /> <StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
<RenderContent attachment={attachment} setLoading={setLoading} /> <RenderContent attachment={attachment} setLoading={setLoading} />
{loading ? <RCActivityIndicator absolute size='large' /> : null} {loading ? <RCActivityIndicator absolute size='large' /> : null}

2
app/views/AuthLoadingView.tsx
View File

@ -25,7 +25,7 @@ const AuthLoadingView = React.memo((): React.ReactElement => {
const text = useAppSelector(state => state.app.text); const text = useAppSelector(state => state.app.text);
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<StatusBar /> <StatusBar />
{text ? ( {text ? (
<> <>

2
app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
View File

@ -34,7 +34,7 @@ const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) =>
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}> <Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }}>
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text> <Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>
{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].fontSecondaryInfo} /> : null} {iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].fontSecondaryInfo} /> : null}

2
app/views/CannedResponsesListView/Dropdown/index.tsx
View File

@ -80,7 +80,7 @@ class Dropdown extends React.Component<IDropdownProps> {
styles.dropdownContainer, styles.dropdownContainer,
{ {
transform: [{ translateY }], transform: [{ translateY }],
backgroundColor: themes[theme!].backgroundColor, backgroundColor: themes[theme!].surfaceRoom,
borderColor: themes[theme!].separatorColor borderColor: themes[theme!].separatorColor
} }
]} ]}

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

@ -303,7 +303,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
<FlatList <FlatList
data={cannedResponsesScopeName} data={cannedResponsesScopeName}
extraData={cannedResponsesScopeName} extraData={cannedResponsesScopeName}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
renderItem={({ item }) => ( renderItem={({ item }) => (
<CannedResponseItem <CannedResponseItem
theme={theme} theme={theme}

2
app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
View File

@ -40,7 +40,7 @@ export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = f
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<View style={[styles.switchContainer, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.switchContainer, { backgroundColor: colors.surfaceRoom }]}>
<View style={styles.switchTextContainer}> <View style={styles.switchTextContainer}>
<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text> <Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}> <Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>

6
app/views/CreateChannelView/index.tsx
View File

@ -140,12 +140,12 @@ const CreateChannelView = () => {
return ( return (
<KeyboardView <KeyboardView
style={{ backgroundColor: colors.backgroundColor }} style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={[sharedStyles.container, styles.container]} contentContainerStyle={[sharedStyles.container, styles.container]}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
<StatusBar /> <StatusBar />
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='create-channel-view'> <SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
<ScrollView {...scrollPersistTaps}> <ScrollView {...scrollPersistTaps}>
<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}> <View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
<ControlledFormTextInput <ControlledFormTextInput
@ -178,7 +178,7 @@ const CreateChannelView = () => {
style={[ style={[
styles.list, styles.list,
{ {
backgroundColor: colors.backgroundColor, backgroundColor: colors.surfaceRoom,
borderColor: colors.separatorColor borderColor: colors.separatorColor
} }
]} ]}

2
app/views/DirectoryView/Options.tsx
View File

@ -91,7 +91,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
<Animated.View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor, opacity: backdropOpacity }]} /> <Animated.View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor, opacity: backdropOpacity }]} />
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<Animated.View <Animated.View
style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].backgroundColor }]} style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].surfaceRoom }]}
> >
<Touch onPress={this.close} accessibilityLabel={I18n.t('Search_by')}> <Touch onPress={this.close} accessibilityLabel={I18n.t('Search_by')}>
<View <View

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

@ -298,7 +298,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
const { data, loading, showOptionsDropdown, type, globalUsers } = this.state; const { data, loading, showOptionsDropdown, type, globalUsers } = this.state;
const { isFederationEnabled, theme } = this.props; const { isFederationEnabled, theme } = this.props;
return ( return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'> <SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='directory-view'>
<StatusBar /> <StatusBar />
<FlatList <FlatList
data={data} data={data}

2
app/views/DiscussionsView/Item.tsx
View File

@ -66,7 +66,7 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
<Touchable <Touchable
onPress={() => onPress(item)} onPress={() => onPress(item)}
testID={`discussions-view-${item.msg}`} testID={`discussions-view-${item.msg}`}
style={{ backgroundColor: colors.backgroundColor }} style={{ backgroundColor: colors.surfaceRoom }}
> >
<View style={styles.container}> <View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} /> <Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />

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

@ -188,7 +188,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
data={isSearching ? search : discussions} data={isSearching ? search : discussions}
renderItem={renderItem} renderItem={renderItem}
keyExtractor={(item: any) => item._id} keyExtractor={(item: any) => item._id}
style={{ backgroundColor: colors.backgroundColor }} style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}

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

@ -70,7 +70,7 @@ const E2EEncryptionSecurityView = () => {
}; };
return ( return (
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.backgroundColor }}> <SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.surfaceRoom }}>
<StatusBar /> <StatusBar />
<List.Container> <List.Container>
<View style={styles.container}> <View style={styles.container}>

4
app/views/E2EEnterYourPasswordView.tsx
View File

@ -44,13 +44,13 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
return ( return (
<KeyboardView <KeyboardView
style={{ backgroundColor: colors.backgroundColor }} style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={sharedStyles.container} contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
<StatusBar /> <StatusBar />
<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}> <ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-enter-your-password-view'> <SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-enter-your-password-view'>
<FormTextInput <FormTextInput
placeholder={I18n.t('Password')} placeholder={I18n.t('Password')}
returnKeyType='send' returnKeyType='send'

2
app/views/E2EHowItWorksView.tsx
View File

@ -35,7 +35,7 @@ const E2EHowItWorksView = (): React.ReactElement => {
const infoStyle = [styles.info, { color: colors.bodyText }]; const infoStyle = [styles.info, { color: colors.bodyText }];
return ( return (
<SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'> <SafeAreaView style={[styles.container, { backgroundColor: colors.surfaceRoom }]} testID='e2e-how-it-works-view'>
<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} /> <Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} /> <Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} /> <Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />

6
app/views/E2ESaveYourPasswordView.tsx
View File

@ -101,11 +101,11 @@ const E2ESaveYourPasswordView = () => {
}; };
return ( return (
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'> <SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-save-password-view'>
<StatusBar /> <StatusBar />
<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}> <ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text> <Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
<View style={styles.content}> <View style={styles.content}>
<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text> <Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text> <Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>

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

@ -92,7 +92,7 @@ const ForwardMessageView = () => {
blockUnauthenticatedAccess={blockUnauthenticatedAccess} blockUnauthenticatedAccess={blockUnauthenticatedAccess}
serverVersion={serverVersion} serverVersion={serverVersion}
/> />
<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.backgroundColor }]}> <View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.surfaceRoom }]}>
<MessagePreview message={message} /> <MessagePreview message={message} />
</View> </View>
</ScrollView> </ScrollView>

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

@ -85,7 +85,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
}; };
return ( return (
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}> <SafeAreaView style={{ backgroundColor: colors.surfaceRoom }}>
<ScrollView <ScrollView
{...scrollPersistTaps} {...scrollPersistTaps}
style={{ backgroundColor: colors.auxiliaryBackground }} style={{ backgroundColor: colors.auxiliaryBackground }}

2
app/views/JitsiMeetView/JitsiAuthModal.tsx
View File

@ -48,7 +48,7 @@ const JitsiAuthModal = ({
return ( return (
<Modal isVisible> <Modal isVisible>
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text> <Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
{isAdmin ? ( {isAdmin ? (
<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}> <Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>

4
app/views/MarkdownTableView.tsx
View File

@ -22,14 +22,14 @@ const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): Reac
if (isIOS) { if (isIOS) {
return ( return (
<ScrollView style={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ width: tableWidth }}> <ScrollView style={{ backgroundColor: colors.surfaceRoom }} contentContainerStyle={{ width: tableWidth }}>
{renderRows()} {renderRows()}
</ScrollView> </ScrollView>
); );
} }
return ( return (
<ScrollView style={{ backgroundColor: colors.backgroundColor }}> <ScrollView style={{ backgroundColor: colors.surfaceRoom }}>
<ScrollView horizontal>{renderRows()}</ScrollView> <ScrollView horizontal>{renderRows()}</ScrollView>
</ScrollView> </ScrollView>
); );

6
app/views/MessagesView/index.tsx
View File

@ -348,7 +348,7 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
renderEmpty = () => { renderEmpty = () => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]} testID={this.content.testID}> <View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]} testID={this.content.testID}>
<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</Text> <Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</Text>
</View> </View>
); );
@ -365,12 +365,12 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
} }
return ( return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID={this.content.testID}> <SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID={this.content.testID}>
<StatusBar /> <StatusBar />
<FlatList <FlatList
data={messages} data={messages}
renderItem={this.renderItem} renderItem={this.renderItem}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
keyExtractor={item => item._id} keyExtractor={item => item._id}
onEndReached={this.load} onEndReached={this.load}
ListFooterComponent={loading ? <ActivityIndicator /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}

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

@ -102,7 +102,7 @@ const NewMessageView = () => {
}} }}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListFooterComponent={List.Separator} ListFooterComponent={List.Separator}
contentContainerStyle={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
/> />
</SafeAreaView> </SafeAreaView>

2
app/views/NewServerView/ServerInput/index.tsx
View File

@ -69,7 +69,7 @@ const ServerInput = ({
<View <View
style={[ style={[
styles.serverHistory, styles.serverHistory,
{ backgroundColor: themes[theme].backgroundColor, borderColor: themes[theme].separatorColor } { backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].separatorColor }
]} ]}
> >
<FlatList <FlatList

2
app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
View File

@ -70,7 +70,7 @@ export function DeleteAccountActionSheetContent(): React.ReactElement {
const AlertText = ({ text = '' }) => { const AlertText = ({ text = '' }) => {
const { colors } = useTheme(); const { colors } = useTheme();
return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.dangerColor }}>{text}</Text>; return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.fontDanger }}>{text}</Text>;
}; };
function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removedRooms = '', password = '' }) { function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removedRooms = '', password = '' }) {

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

@ -121,7 +121,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
return null; return null;
} }
return ( return (
<View style={[styles.itemContainer, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.itemContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
<Avatar text={item.user.username} size={40} /> <Avatar text={item.user.username} size={40} />
<View style={styles.infoContainer}> <View style={styles.infoContainer}>
<View style={styles.item}> <View style={styles.item}>

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

@ -794,7 +794,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
} }
}) })
} }
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
accessibilityLabel={I18n.t('Room_Info')} accessibilityLabel={I18n.t('Room_Info')}
enabled={!isGroupChatHandler} enabled={!isGroupChatHandler}
testID='room-actions-info' testID='room-actions-info'
@ -802,7 +802,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}> <View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}> <Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>
{t === 'd' && member._id ? ( {t === 'd' && member._id ? (
<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[sharedStyles.status, { backgroundColor: themes[theme].surfaceRoom }]}>
<Status size={16} id={member._id} /> <Status size={16} id={member._id} />
</View> </View>
) : undefined} ) : undefined}

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

@ -521,12 +521,12 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
return ( return (
<KeyboardView <KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
contentContainerStyle={sharedStyles.container} contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
<StatusBar /> <StatusBar />
<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
<ScrollView <ScrollView
contentContainerStyle={sharedStyles.containerScrollView} contentContainerStyle={sharedStyles.containerScrollView}
testID='room-info-edit-view-list' testID='room-info-edit-view-list'

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

@ -283,9 +283,9 @@ const RoomInfoView = (): React.ReactElement => {
}; };
return ( return (
<ScrollView style={[styles.scroll, { backgroundColor: colors.backgroundColor }]}> <ScrollView style={[styles.scroll, { backgroundColor: colors.surfaceRoom }]}>
<StatusBar /> <StatusBar />
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='room-info-view'> <SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='room-info-view'>
<View style={[styles.avatarContainer, { backgroundColor: colors.auxiliaryBackground }]}> <View style={[styles.avatarContainer, { backgroundColor: colors.auxiliaryBackground }]}>
<RoomInfoViewAvatar <RoomInfoViewAvatar
username={room?.name || roomUser.username} username={room?.name || roomUser.username}

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

@ -379,7 +379,7 @@ const RoomMembersView = (): React.ReactElement => {
<FlatList <FlatList
data={filteredMembers || state.members} data={filteredMembers || state.members}
renderItem={({ item }) => ( renderItem={({ item }) => (
<View style={{ backgroundColor: colors.backgroundColor }}> <View style={{ backgroundColor: colors.surfaceRoom }}>
<UserItem <UserItem
name={item.name as string} name={item.name as string}
username={item.username} username={item.username}

2
app/views/RoomView/JoinCode.tsx
View File

@ -83,7 +83,7 @@ const JoinCode = React.memo(
style={[ style={[
styles.content, styles.content,
isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet], isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
{ backgroundColor: themes[theme].backgroundColor } { backgroundColor: themes[theme].surfaceRoom }
]} ]}
> >
<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text> <Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text>

2
app/views/RoomView/List/components/NavBottomFAB.tsx
View File

@ -36,7 +36,7 @@ const NavBottomFAB = memo(
return ( return (
<View style={[styles.container, positionStyle]} testID='nav-jump-to-bottom'> <View style={[styles.container, positionStyle]} testID='nav-jump-to-bottom'>
<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}> <Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.surfaceRoom }]}>
<View style={[styles.content, { borderColor: colors.borderColor }]}> <View style={[styles.content, { borderColor: colors.borderColor }]}>
<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} /> <CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
</View> </View>

2
app/views/RoomView/LoadMore/LoadMore.stories.tsx
View File

@ -26,7 +26,7 @@ export const Basic = () => (
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => ( const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}> <ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}> <ScrollView style={{ backgroundColor: themes[theme].surfaceRoom }}>
<LoadMore loaderId='5' type={MessageTypeLoad.PREVIOUS_CHUNK} /> <LoadMore loaderId='5' type={MessageTypeLoad.PREVIOUS_CHUNK} />
<Message msg='Hey!' theme={theme} /> <Message msg='Hey!' theme={theme} />
<Message msg={longText} theme={theme} isHeader={false} /> <Message msg={longText} theme={theme} isHeader={false} />

2
app/views/RoomView/Separator.tsx
View File

@ -35,7 +35,7 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
const { theme } = useTheme(); const { theme } = useTheme();
const date = ts ? moment(ts).format('LL') : null; const date = ts ? moment(ts).format('LL') : null;
const unreadLine = { backgroundColor: themes[theme].dangerColor }; const unreadLine = { backgroundColor: themes[theme].dangerColor };
const unreadText = { color: themes[theme].dangerColor }; const unreadText = { color: themes[theme].fontDanger };
if (ts && unread) { if (ts && unread) {
return ( return (
<View style={styles.container}> <View style={styles.container}>

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

@ -1467,7 +1467,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
getText: this.getText getText: this.getText
}} }}
> >
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'> <SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='room-view'>
<StatusBar /> <StatusBar />
<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} /> <Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
<List <List

2
app/views/RoomsListView/ServerDropdown.tsx
View File

@ -206,7 +206,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
styles.dropdownContainer, styles.dropdownContainer,
{ {
transform: [{ translateY }], transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor, backgroundColor: themes[theme].surfaceRoom,
borderColor: themes[theme].separatorColor borderColor: themes[theme].separatorColor
} }
]} ]}

6
app/views/RoomsListView/index.tsx
View File

@ -940,7 +940,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
renderSectionHeader = (header: string) => { renderSectionHeader = (header: string) => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
<Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text> <Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text>
</View> </View>
); );
@ -966,7 +966,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
data={searching ? search : chats} data={searching ? search : chats}
extraData={searching ? search : chats} extraData={searching ? search : chats}
keyExtractor={item => keyExtractor(item, searching)} keyExtractor={item => keyExtractor(item, searching)}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
renderItem={this.renderItem} renderItem={this.renderItem}
ListHeaderComponent={this.renderListHeader} ListHeaderComponent={this.renderListHeader}
getItemLayout={(data, index) => getItemLayout(data, index, height)} getItemLayout={(data, index) => getItemLayout(data, index, height)}
@ -989,7 +989,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
const { showServerDropdown, theme, navigation } = this.props; const { showServerDropdown, theme, navigation } = this.props;
return ( return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
<StatusBar /> <StatusBar />
{this.renderHeader()} {this.renderHeader()}
{this.renderScroll()} {this.renderScroll()}

6
app/views/SearchMessagesView/index.tsx
View File

@ -273,7 +273,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
renderEmpty = () => { renderEmpty = () => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text> <Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
</View> </View>
); );
@ -313,7 +313,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
<FlatList <FlatList
data={messages} data={messages}
renderItem={this.renderItem} renderItem={this.renderItem}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
keyExtractor={item => item._id} keyExtractor={item => item._id}
onEndReached={this.onEndReached} onEndReached={this.onEndReached}
ListFooterComponent={loading ? <ActivityIndicator /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
@ -327,7 +327,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
render() { render() {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'> <SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='search-messages-view'>
<StatusBar /> <StatusBar />
<View style={styles.searchContainer}> <View style={styles.searchContainer}>
<FormTextInput <FormTextInput

4
app/views/SelectListView.tsx
View File

@ -101,7 +101,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
renderInfoText = () => { renderInfoText = () => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<View style={{ backgroundColor: themes[theme].backgroundColor }}> <View style={{ backgroundColor: themes[theme].surfaceRoom }}>
<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text> <Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
</View> </View>
); );
@ -194,7 +194,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
keyExtractor={item => item.rid} keyExtractor={item => item.rid}
renderItem={this.renderItem} renderItem={this.renderItem}
ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText} ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }} contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
/> />
</SafeAreaView> </SafeAreaView>

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

@ -41,7 +41,7 @@ const Header = ({
const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true }); const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true });
return ( return (
<View style={{ backgroundColor: themes[theme].backgroundColor }}> <View style={{ backgroundColor: themes[theme].surfaceRoom }}>
<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' /> <SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
{users.length === 0 ? null : ( {users.length === 0 ? null : (
<View> <View>

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

@ -172,7 +172,7 @@ const SelectedUsersView = () => {
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListFooterComponent={<List.Separator />} ListFooterComponent={<List.Separator />}
ListHeaderComponent={<Header useRealName={useRealName} onChangeText={handleSearch} onPressItem={toggleUser} />} ListHeaderComponent={<Header useRealName={useRealName} onChangeText={handleSearch} onPressItem={toggleUser} />}
contentContainerStyle={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
/> />
</SafeAreaView> </SafeAreaView>

6
app/views/ShareListView/index.tsx
View File

@ -432,8 +432,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
return ( return (
<SafeAreaView> <SafeAreaView>
<ScrollView <ScrollView
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]} contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}
> >
<Text style={[styles.permissionTitle, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Read_External_Permission')}</Text> <Text style={[styles.permissionTitle, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Read_External_Permission')}</Text>
<Text style={[styles.permissionMessage, { color: themes[theme].bodyText }]}> <Text style={[styles.permissionMessage, { color: themes[theme].bodyText }]}>
@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
data={searching ? searchResults : chats} data={searching ? searchResults : chats}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]} style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }} contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
renderItem={this.renderItem} renderItem={this.renderItem}
getItemLayout={getItemLayout} getItemLayout={getItemLayout}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}

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

@ -126,7 +126,7 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
onPress={() => onRemove(item)} onPress={() => onRemove(item)}
> >
<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}> <View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
<CustomIcon name='close' color={themes[theme].backgroundColor} size={14} /> <CustomIcon name='close' color={themes[theme].surfaceRoom} size={14} />
</View> </View>
</RectButton> </RectButton>
{!item?.canUpload ? ( {!item?.canUpload ? (

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

@ -376,7 +376,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
return ( return (
<FormTextInput <FormTextInput
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]} inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].surfaceLight }]}
placeholder='' placeholder=''
onChangeText={this.onChangeText} onChangeText={this.onChangeText}
defaultValue='' defaultValue=''
@ -394,7 +394,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
const { theme } = this.props; const { theme } = this.props;
if (readOnly || isBlocked(room)) { if (readOnly || isBlocked(room)) {
return ( return (
<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}>
<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}> <Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>
{isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')} {isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')}
</Text> </Text>
@ -402,7 +402,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
); );
} }
return ( return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} /> <StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
{this.renderContent()} {this.renderContent()}
</SafeAreaView> </SafeAreaView>

6
app/views/SidebarView/index.tsx
View File

@ -309,7 +309,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return ( return (
<SidebarItem <SidebarItem
text={I18n.t('Supported_versions_warning_update_required')} text={I18n.t('Supported_versions_warning_update_required')}
textColor={themes[theme!].dangerColor} textColor={themes[theme!].fontDanger}
left={<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />} left={<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />}
theme={theme!} theme={theme!}
onPress={() => this.onPressSupportedVersionsWarning()} onPress={() => this.onPressSupportedVersionsWarning()}
@ -327,12 +327,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return null; return null;
} }
return ( return (
<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}> <SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].surfaceLight }} vertical={isMasterDetail}>
<ScrollView <ScrollView
style={[ style={[
styles.container, styles.container,
{ {
backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground backgroundColor: isMasterDetail ? themes[theme!].surfaceRoom : themes[theme!].surfaceLight
} }
]} ]}
{...scrollPersistTaps} {...scrollPersistTaps}

2
app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
View File

@ -30,7 +30,7 @@ interface IDropdownItem {
const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => { const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => {
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<Touch onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}> <Touch onPress={onPress} style={{ backgroundColor: colors.surfaceRoom }}>
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{text}</Text> <Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{text}</Text>
{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null} {iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}

2
app/views/ThreadMessagesView/Dropdown/index.tsx
View File

@ -80,7 +80,7 @@ class Dropdown extends React.Component<IDropdownProps> {
styles.dropdownContainer, styles.dropdownContainer,
{ {
transform: [{ translateY }], transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor, backgroundColor: themes[theme].surfaceRoom,
borderColor: themes[theme].separatorColor borderColor: themes[theme].separatorColor
} }
]} ]}

2
app/views/ThreadMessagesView/Item.tsx
View File

@ -77,7 +77,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
<Touchable <Touchable
onPress={() => onPress(item)} onPress={() => onPress(item)}
testID={`thread-messages-view-${item.msg}`} testID={`thread-messages-view-${item.msg}`}
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
> >
<View style={styles.container}> <View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} /> <Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />

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

@ -494,7 +494,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
data={displayingThreads} data={displayingThreads}
extraData={this.state} extraData={this.state}
renderItem={this.renderItem} renderItem={this.renderItem}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
onEndReached={this.load} onEndReached={this.load}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}

2
app/views/WithoutServersView.tsx
View File

@ -38,7 +38,7 @@ const WithoutServerView = (): React.ReactElement => {
}, [navigation]); }, [navigation]);
return ( return (
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Without_Servers')}</Text> <Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Without_Servers')}</Text>
<Text style={[styles.content, { color: colors.fontTitlesLabels }]}> <Text style={[styles.content, { color: colors.fontTitlesLabels }]}>
{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')} {I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}