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}
enablePanDownToClose
style={{ ...styles.container, ...bottomSheet }}
backgroundStyle={{ backgroundColor: colors.focusedBackground }}
backgroundStyle={{ backgroundColor: colors.surfaceLight }}
onChange={index => index === -1 && onClose()}
// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
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}
bounces={false}
renderItem={renderItem}
style={{ backgroundColor: colors.focusedBackground }}
style={{ backgroundColor: colors.surfaceLight }}
keyboardDismissMode='interactive'
indicatorStyle='black'
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;
if (item.danger) {
color = colors.dangerColor;
color = colors.fontDanger;
}
if (!enabled) {
color = colors.fontDisabled;
}
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}
<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}
</Text>
</View>

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

@ -50,7 +50,7 @@ const DirectoryItem = ({
}: IDirectoryItem): React.ReactElement => {
const { theme } = useTheme();
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]}>
<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
<View style={styles.directoryItemTextContainer}>

4
app/containers/FormContainer.tsx
View File

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

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

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

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

@ -103,7 +103,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
styles.container,
isMasterDetail && styles.small,
{
backgroundColor: themes[theme].focusedBackground,
backgroundColor: themes[theme].surfaceLight,
borderColor: themes[theme].separatorColor,
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) => (
<Touch
onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
underlayColor={underlayColor}
enabled={!props.disabled}
>
@ -157,7 +157,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
return <Button {...props} theme={theme} onPress={onPress} />;
}
return (
<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
<View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
<Content {...props} theme={theme} />
</View>
);

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

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

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

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

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

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

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

@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
}, []);
return (
<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
<FormTextInput
autoCapitalize='none'
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}`}
android_ripple={{ color: themes[theme].bannerBackground }}
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}>

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

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

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

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

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

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

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

@ -110,7 +110,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
style={[
styles.content,
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>

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

@ -66,11 +66,11 @@ export const DatePicker = ({ element, language, action, context, loading, value,
button = (
<Touchable
onPress={() => onShow(!show)}
style={{ backgroundColor: themes[theme].backgroundColor }}
style={{ backgroundColor: themes[theme].surfaceRoom }}
background={Touchable.Ripple(themes[theme].bannerBackground)}
>
<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)}
</Text>
{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) => (
<View style={styles.container}>
{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}
{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
{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}
</View>
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
app/index.tsx
View File

@ -201,7 +201,7 @@ export default class Root extends React.Component<{}, IState> {
return (
<SafeAreaProvider
initialMetrics={initialWindowMetrics}
style={{ backgroundColor: themes[this.state.theme].backgroundColor }}
style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}
>
<Provider store={store}>
<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 = {
surfaceLight: '#FFFFFF',
surfaceTint: '#F7F8FA',
@ -185,22 +187,105 @@ const newColorsDark = {
buttonSuccessDisabled: '#757575'
};
const callButtons = {
cancelCallButton: '#F5455C',
acceptCallButton: '#158D65'
const newColorsBlack = {
surfaceLight: '#0d0d0d',
// 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 = {
light: {
...newColors,
backgroundColor: '#ffffff',
focusedBackground: '#ffffff',
chatComponentBackground: '#f3f4f5',
auxiliaryBackground: '#efeff4',
bannerBackground: '#f1f2f4',
bodyText: '#2f343d',
backdropColor: '#000000',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#e1e5e8',
@ -255,22 +340,14 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#1F2329',
statusBackgroundWarning: '#FFECAD',
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
statusBackgroundWarning: '#FFECAD'
},
dark: {
...newColorsDark,
surfaceLight: '#0b182c',
backgroundColor: '#030b1b',
focusedBackground: '#0b182c',
chatComponentBackground: '#192132',
auxiliaryBackground: '#07101e',
bannerBackground: '#0e1f38',
bodyText: '#cbced1',
backdropColor: '#000000',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#0f213d',
@ -325,22 +402,14 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD',
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
statusBackgroundWarning: '#FFECAD'
},
black: {
...newColorsDark,
surfaceLight: '#0d0d0d',
backgroundColor: '#000000',
focusedBackground: '#0d0d0d',
chatComponentBackground: '#16181a',
auxiliaryBackground: '#080808',
bannerBackground: '#1f2329',
bodyText: '#cbced1',
backdropColor: '#000000',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#1f2329',
@ -395,10 +464,7 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD',
overlayColor: '#1F2329CC',
taskBoxColor: '#9297a2',
...callButtons
statusBackgroundWarning: '#FFECAD'
}
};

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

@ -48,7 +48,7 @@ export const navigationTheme = (theme: TSupportedThemes) => {
...defaultNavTheme,
colors: {
...defaultNavTheme.colors,
background: themes[theme].backgroundColor,
background: themes[theme].surfaceRoom,
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
}
}
setRootViewColor(themes[theme].backgroundColor);
setRootViewColor(themes[theme].surfaceRoom);
};
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 i18n from '../../../i18n';
import { BACKGROUND_PUSH_COLOR } from '../../constants';
import { colors } from '../../constants';
import { store } from '../../store/auxStore';
const VIDEO_CONF_CHANNEL = 'video-conf-call';
@ -86,7 +86,7 @@ const displayVideoConferenceNotification = async (notification: NotificationData
visibility: AndroidVisibility.PUBLIC,
importance: AndroidImportance.HIGH,
smallIcon: 'ic_notification',
color: BACKGROUND_PUSH_COLOR,
color: colors.light.badgeBackgroundLevel4,
actions,
lightUpScreen: true,
loopSound: true,

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

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

2
app/views/AttachmentView.tsx
View File

@ -191,7 +191,7 @@ const AttachmentView = (): React.ReactElement => {
};
return (
<View style={{ backgroundColor: colors.backgroundColor, flex: 1 }}>
<View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
<RenderContent attachment={attachment} setLoading={setLoading} />
{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 { colors } = useTheme();
return (
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<StatusBar />
{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();
return (
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }}>
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>
{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,
{
transform: [{ translateY }],
backgroundColor: themes[theme!].backgroundColor,
backgroundColor: themes[theme!].surfaceRoom,
borderColor: themes[theme!].separatorColor
}
]}

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

@ -303,7 +303,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
<FlatList
data={cannedResponsesScopeName}
extraData={cannedResponsesScopeName}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
renderItem={({ item }) => (
<CannedResponseItem
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();
return (
<View style={[styles.switchContainer, { backgroundColor: colors.backgroundColor }]}>
<View style={[styles.switchContainer, { backgroundColor: colors.surfaceRoom }]}>
<View style={styles.switchTextContainer}>
<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
<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 (
<KeyboardView
style={{ backgroundColor: colors.backgroundColor }}
style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={[sharedStyles.container, styles.container]}
keyboardVerticalOffset={128}
>
<StatusBar />
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='create-channel-view'>
<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
<ScrollView {...scrollPersistTaps}>
<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
<ControlledFormTextInput
@ -178,7 +178,7 @@ const CreateChannelView = () => {
style={[
styles.list,
{
backgroundColor: colors.backgroundColor,
backgroundColor: colors.surfaceRoom,
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 }]} />
</TouchableWithoutFeedback>
<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')}>
<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 { isFederationEnabled, theme } = this.props;
return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='directory-view'>
<StatusBar />
<FlatList
data={data}

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

@ -66,7 +66,7 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
<Touchable
onPress={() => onPress(item)}
testID={`discussions-view-${item.msg}`}
style={{ backgroundColor: colors.backgroundColor }}
style={{ backgroundColor: colors.surfaceRoom }}
>
<View style={styles.container}>
<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}
renderItem={renderItem}
keyExtractor={(item: any) => item._id}
style={{ backgroundColor: colors.backgroundColor }}
style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={styles.contentContainer}
onEndReachedThreshold={0.5}
removeClippedSubviews={isIOS}

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

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

4
app/views/E2EEnterYourPasswordView.tsx
View File

@ -44,13 +44,13 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
return (
<KeyboardView
style={{ backgroundColor: colors.backgroundColor }}
style={{ backgroundColor: colors.surfaceRoom }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>
<StatusBar />
<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
placeholder={I18n.t('Password')}
returnKeyType='send'

2
app/views/E2EHowItWorksView.tsx
View File

@ -35,7 +35,7 @@ const E2EHowItWorksView = (): React.ReactElement => {
const infoStyle = [styles.info, { color: colors.bodyText }];
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_info2')} 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 (
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'>
<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-save-password-view'>
<StatusBar />
<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
<Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
<View style={styles.content}>
<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</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}
serverVersion={serverVersion}
/>
<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.backgroundColor }]}>
<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.surfaceRoom }]}>
<MessagePreview message={message} />
</View>
</ScrollView>

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

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

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

@ -48,7 +48,7 @@ const JitsiAuthModal = ({
return (
<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>
{isAdmin ? (
<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) {
return (
<ScrollView style={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ width: tableWidth }}>
<ScrollView style={{ backgroundColor: colors.surfaceRoom }} contentContainerStyle={{ width: tableWidth }}>
{renderRows()}
</ScrollView>
);
}
return (
<ScrollView style={{ backgroundColor: colors.backgroundColor }}>
<ScrollView style={{ backgroundColor: colors.surfaceRoom }}>
<ScrollView horizontal>{renderRows()}</ScrollView>
</ScrollView>
);

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

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

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

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

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

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

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

@ -70,7 +70,7 @@ export function DeleteAccountActionSheetContent(): React.ReactElement {
const AlertText = ({ text = '' }) => {
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 = '' }) {

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

@ -121,7 +121,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
return null;
}
return (
<View style={[styles.itemContainer, { backgroundColor: themes[theme].backgroundColor }]}>
<View style={[styles.itemContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
<Avatar text={item.user.username} size={40} />
<View style={styles.infoContainer}>
<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')}
enabled={!isGroupChatHandler}
testID='room-actions-info'
@ -802,7 +802,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>
{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} />
</View>
) : undefined}

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

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

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

@ -283,9 +283,9 @@ const RoomInfoView = (): React.ReactElement => {
};
return (
<ScrollView style={[styles.scroll, { backgroundColor: colors.backgroundColor }]}>
<ScrollView style={[styles.scroll, { backgroundColor: colors.surfaceRoom }]}>
<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 }]}>
<RoomInfoViewAvatar
username={room?.name || roomUser.username}

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

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

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

@ -83,7 +83,7 @@ const JoinCode = React.memo(
style={[
styles.content,
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>

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

@ -36,7 +36,7 @@ const NavBottomFAB = memo(
return (
<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 }]}>
<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
</View>

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

@ -26,7 +26,7 @@ export const Basic = () => (
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<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} />
<Message msg='Hey!' theme={theme} />
<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 date = ts ? moment(ts).format('LL') : null;
const unreadLine = { backgroundColor: themes[theme].dangerColor };
const unreadText = { color: themes[theme].dangerColor };
const unreadText = { color: themes[theme].fontDanger };
if (ts && unread) {
return (
<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
}}
>
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'>
<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='room-view'>
<StatusBar />
<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
<List

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

@ -206,7 +206,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor,
backgroundColor: themes[theme].surfaceRoom,
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) => {
const { theme } = this.props;
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>
</View>
);
@ -966,7 +966,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
data={searching ? search : chats}
extraData={searching ? search : chats}
keyExtractor={item => keyExtractor(item, searching)}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
renderItem={this.renderItem}
ListHeaderComponent={this.renderListHeader}
getItemLayout={(data, index) => getItemLayout(data, index, height)}
@ -989,7 +989,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
const { showServerDropdown, theme, navigation } = this.props;
return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
<StatusBar />
{this.renderHeader()}
{this.renderScroll()}

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

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

4
app/views/SelectListView.tsx
View File

@ -101,7 +101,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
renderInfoText = () => {
const { theme } = this.props;
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>
</View>
);
@ -194,7 +194,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
keyExtractor={item => item.rid}
renderItem={this.renderItem}
ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
keyboardShouldPersistTaps='always'
/>
</SafeAreaView>

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

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

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

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

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

@ -432,8 +432,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
return (
<SafeAreaView>
<ScrollView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}
style={{ backgroundColor: themes[theme].surfaceRoom }}
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.permissionMessage, { color: themes[theme].bodyText }]}>
@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
data={searching ? searchResults : chats}
keyExtractor={keyExtractor}
style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
renderItem={this.renderItem}
getItemLayout={getItemLayout}
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)}
>
<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>
</RectButton>
{!item?.canUpload ? (

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

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

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

@ -309,7 +309,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return (
<SidebarItem
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} />}
theme={theme!}
onPress={() => this.onPressSupportedVersionsWarning()}
@ -327,12 +327,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return null;
}
return (
<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].surfaceLight }} vertical={isMasterDetail}>
<ScrollView
style={[
styles.container,
{
backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
backgroundColor: isMasterDetail ? themes[theme!].surfaceRoom : themes[theme!].surfaceLight
}
]}
{...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 { colors } = useTheme();
return (
<Touch onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}>
<Touch onPress={onPress} style={{ backgroundColor: colors.surfaceRoom }}>
<View style={styles.container}>
<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{text}</Text>
{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,
{
transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor,
backgroundColor: themes[theme].surfaceRoom,
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
onPress={() => onPress(item)}
testID={`thread-messages-view-${item.msg}`}
style={{ backgroundColor: themes[theme].backgroundColor }}
style={{ backgroundColor: themes[theme].surfaceRoom }}
>
<View style={styles.container}>
<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}
extraData={this.state}
renderItem={this.renderItem}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
contentContainerStyle={styles.contentContainer}
onEndReached={this.load}
onEndReachedThreshold={0.5}

2
app/views/WithoutServersView.tsx
View File

@ -38,7 +38,7 @@ const WithoutServerView = (): React.ReactElement => {
}, [navigation]);
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.content, { color: colors.fontTitlesLabels }]}>
{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}