wip: colors

This commit is contained in:
GleidsonDaniel 2024-03-18 15:22:04 -03:00
parent e5aae0f9d3
commit 0d6aacf263
48 changed files with 68 additions and 105 deletions

View File

@ -33,7 +33,7 @@ const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
title={title}
headerLeft={left}
headerRight={right}
headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.surfaceNeutral }} />}
/>
);

View File

@ -14,7 +14,7 @@ export const useStyle = () => {
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 4,
backgroundColor: colors.surfaceLight,
borderColor: colors.separatorColor,
borderColor: colors.strokeLight,
flex: 1
},
small: {

View File

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

View File

@ -17,7 +17,7 @@ interface IListSeparator {
const ListSeparator = React.memo(({ style }: IListSeparator) => {
const { theme } = useTheme();
return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />;
return <View style={[styles.separator, style, { backgroundColor: themes[theme].strokeLight }]} />;
});
ListSeparator.displayName = 'List.Separator';

View File

@ -14,7 +14,7 @@ export default {
const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
// Using View directly instead of Header from react-navigation because it's easier to test.
<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View>
<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].surfaceNeutral }}>{title()}</View>
);
const RoomHeader = ({ ...props }) => (

View File

@ -110,7 +110,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
const { colors } = useTheme();
const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor };
const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
if (!tmid && !prid) {
return (
<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>

View File

@ -21,6 +21,8 @@ import I18n from '../../i18n';
const CONDENSED_ICON_SIZE = 24;
const EXPANDED_ICON_SIZE = 28;
const starColor = '#f5d100';
export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPress, displayMode }: ILeftActionsProps) => {
const { colors } = useTheme();
@ -118,14 +120,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
styles.actionRightButtonContainer,
{
width,
backgroundColor: colors.favoriteBackground,
backgroundColor: starColor,
left: '100%'
},
viewHeight,
animatedFavStyles
]}
>
<RectButton style={[styles.actionButton, { backgroundColor: colors.favoriteBackground }]} onPress={toggleFav}>
<RectButton style={[styles.actionButton, { backgroundColor: starColor }]} onPress={toggleFav}>
<CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name={favorite ? 'star-filled' : 'star'}
@ -138,14 +140,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
styles.actionRightButtonContainer,
{
width: width * 2,
backgroundColor: colors.hideBackground,
backgroundColor: colors.buttonBackgroundSecondaryPress,
left: '100%'
},
isCondensed && { height: ROW_HEIGHT_CONDENSED },
animatedHideStyles
]}
>
<RectButton style={[styles.actionButton, { backgroundColor: colors.hideBackground }]} onPress={onHidePress}>
<RectButton style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]} onPress={onHidePress}>
<CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name='unread-on-top-disabled'

View File

@ -19,7 +19,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
style={[
styles.centerContainer,
{
borderColor: colors.separatorColor
borderColor: colors.strokeLight
}
]}
>

View File

@ -32,7 +32,7 @@ const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.E
<View style={styles.container}>
<TextInput
autoFocus
style={[styles.title, isLight && { color: themes[theme].headerTitleColor }]}
style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }]}
placeholder={I18n.t('Search')}
onChangeText={onSearchChangeText}
testID={testID}

View File

@ -21,7 +21,7 @@ const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
barStyle = 'dark-content';
}
}
return <StatusBarRN backgroundColor={backgroundColor ?? colors.headerBackground} barStyle={barStyle} animated />;
return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} barStyle={barStyle} animated />;
};
export default StatusBar;

View File

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

View File

@ -69,7 +69,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
style={{ backgroundColor: themes[theme].surfaceRoom }}
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].strokeLight }]}>
<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
{currentDate.toLocaleDateString(language)}
</Text>

View File

@ -26,7 +26,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
background={Touchable.Ripple(colors.bannerBackground)}
disabled={disabled}
>
<View style={[styles.input, styles.inputBorder, { borderColor: colors.separatorColor }, innerInputStyle]}>
<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
{loading ? (
<ActivityIndicator style={styles.icon} />

View File

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

View File

@ -128,7 +128,7 @@ const CollapsibleQuote = React.memo(
chatComponentBackground: backgroundColor,
strokeLight,
strokeDark,
headerTintColor
fontSecondaryInfo
} = themes[theme];
try {
@ -137,7 +137,7 @@ const CollapsibleQuote = React.memo(
borderColor = attachment.color;
strokeLight = attachment.color;
strokeDark = attachment.color;
headerTintColor = headerTintColor;
fontSecondaryInfo = fontSecondaryInfo;
}
} catch (e) {
// fallback to default
@ -167,7 +167,7 @@ const CollapsibleQuote = React.memo(
<View style={styles.touchableContainer}>
<View style={styles.attachmentContainer}>
<View style={styles.authorContainer}>
<Text style={[styles.title, { color: headerTintColor }]}>{attachment.title}</Text>
<Text style={[styles.title, { color: fontSecondaryInfo }]}>{attachment.title}</Text>
</View>
{!collapsed && <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} />}
</View>

View File

@ -135,7 +135,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
backgroundColor = themes[theme].statusBackgroundWarning2;
}
if (props.highlighted) {
backgroundColor = themes[theme].headerBackground;
backgroundColor = themes[theme].surfaceNeutral;
}
if (props.hasError) {

View File

@ -224,7 +224,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
<Touchable
onPress={onPress}
style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
style={[styles.button, { backgroundColor: themes[theme].surfaceDark }]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
>
<Thumbnail loading={loading} cached={cached} />

View File

@ -190,7 +190,7 @@ const newColorsBlack = {
surfaceLight: '#0d0d0d',
surfaceTint: '#16181a',
surfaceRoom: '#000000',
surfaceNeutral: '#2F343D',
surfaceNeutral: '#2F343D', //#0d0d0d
// surfaceDisabled: '#24272E',
surfaceHover: '#080808',
// surfaceSelected: '#3C3F44',
@ -292,19 +292,6 @@ export const colors = {
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#6C727A',
actionTintColor: '#1d74f5',
separatorColor: '#cbcbcc',
navbarBackground: '#ffffff',
headerBorder: '#B2B2B2',
headerBackground: '#EEEFF1',
headerSecondaryBackground: '#ffffff',
headerTintColor: '#6C727A',
headerTitleColor: '#0C0D0F',
headerSecondaryText: '#1d74f5',
toastBackground: '#0C0D0F',
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
buttonBackground: '#414852',
backdropOpacity: 0.3,
attachmentLoadingOpacity: 0.7,
},
@ -321,19 +308,6 @@ export const colors = {
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1d74f5',
separatorColor: '#2b2b2d',
navbarBackground: '#0b182c',
headerBorder: '#2F3A4B',
headerBackground: '#0b182c',
headerSecondaryBackground: '#0b182c',
headerTintColor: '#f9f9f9',
headerTitleColor: '#f9f9f9',
headerSecondaryText: '#9297a2',
toastBackground: '#54585e',
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
buttonBackground: '#414852',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
black: {
@ -349,19 +323,6 @@ export const colors = {
tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1e9bfe',
separatorColor: '#272728',
navbarBackground: '#0d0d0d',
headerBorder: '#323232',
headerBackground: '#0d0d0d',
headerSecondaryBackground: '#0d0d0d',
headerTintColor: '#f9f9f9',
headerTitleColor: '#f9f9f9',
headerSecondaryText: '#b2b8c6',
toastBackground: '#54585e',
videoBackground: '#1f2329',
favoriteBackground: '#ffbb00',
hideBackground: '#54585e',
buttonBackground: '#414852',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
},

View File

@ -21,7 +21,7 @@ export const cardStyle = {
export const borderBottom: any = (theme: TSupportedThemes) => ({
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: themes[theme].headerBorder,
borderBottomColor: themes[theme].strokeDark,
elevation: 0
});
@ -35,10 +35,10 @@ export const headerHeight = isIOS ? 50 : 56;
export const themedHeader = (theme: TSupportedThemes) => ({
headerStyle: {
...borderBottom(theme),
backgroundColor: themes[theme].headerBackground
backgroundColor: themes[theme].surfaceNeutral
},
headerTintColor: themes[theme].headerTintColor,
headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].headerTitleColor, fontSize: 18 }
headerTintColor: themes[theme].fontSecondaryInfo,
headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].fontTitlesLabels, fontSize: 18 }
});
export const navigationTheme = (theme: TSupportedThemes) => {

View File

@ -54,8 +54,8 @@ const openLink = async (url: string, theme: TSupportedThemes = 'light'): Promise
const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
if (browser === 'inApp') {
await WebBrowser.openBrowserAsync(url, {
toolbarColor: themes[theme].headerBackground,
controlsColor: themes[theme].headerTintColor,
toolbarColor: themes[theme].surfaceNeutral,
controlsColor: themes[theme].fontSecondaryInfo,
// https://github.com/expo/expo/pull/4923
enableBarCollapsing: true,
showTitle: true

View File

@ -53,7 +53,7 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
const iconsLight = theme === 'light';
try {
// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight, true);
await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
} catch (error) {
// Do nothing
}

View File

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

View File

@ -243,7 +243,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
<HeaderBackButton
labelVisible={false}
onPress={() => navigation.pop()}
tintColor={themes[theme].headerTintColor}
tintColor={themes[theme].fontSecondaryInfo}
testID='header-back'
/>
),

View File

@ -102,7 +102,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
value={tagParamSelected}
context={BlockContext.FORM}
multiselect
inputStyle={{ borderColor: colors.separatorColor }}
inputStyle={{ borderColor: colors.strokeLight }}
/>
</>
) : null}

View File

@ -147,7 +147,7 @@ const CreateChannelView = () => {
<StatusBar />
<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
<ScrollView {...scrollPersistTaps}>
<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
<View style={[styles.containerTextInput, { borderColor: colors.strokeLight }]}>
<ControlledFormTextInput
label={isTeam ? I18n.t('Team_Name') : I18n.t('Channel_Name')}
testID='create-channel-name'
@ -179,7 +179,7 @@ const CreateChannelView = () => {
styles.list,
{
backgroundColor: colors.surfaceRoom,
borderColor: colors.separatorColor
borderColor: colors.strokeLight
}
]}
contentContainerStyle={styles.invitedList}

View File

@ -98,7 +98,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
style={[
styles.dropdownContainerHeader,
styles.dropdownItemContainer,
{ borderColor: themes[theme].separatorColor }
{ borderColor: themes[theme].strokeLight }
]}
>
<Text style={[styles.dropdownToggleText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Search_by')}</Text>
@ -115,7 +115,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
{this.renderItem('teams')}
{isFederationEnabled ? (
<>
<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].separatorColor }]} />
<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].strokeLight }]} />
<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
<View style={styles.globalUsersTextContainer}>
<Text style={[styles.dropdownItemText, { color: themes[theme].infoText }]}>

View File

@ -219,7 +219,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
style={[
sharedStyles.separatorVertical,
styles.toggleDropdownContainer,
{ borderColor: themes[theme].separatorColor }
{ borderColor: themes[theme].strokeLight }
]}
>
<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
@ -244,7 +244,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
if (index === data.length - 1) {
style = {
...sharedStyles.separatorBottom,
borderColor: themes[theme].separatorColor
borderColor: themes[theme].strokeLight
};
}

View File

@ -130,7 +130,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
<HeaderBackButton
labelVisible={false}
onPress={() => navigation.pop()}
tintColor={colors.headerTintColor}
tintColor={colors.fontSecondaryInfo}
testID='header-back'
/>
),

View File

@ -74,7 +74,7 @@ const ChangePassword = () => {
return (
<>
<List.Section>
<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
<Text style={[styles.description, { color: colors.bodyText }]}>
{I18n.t('E2E_encryption_change_password_description')}
</Text>

View File

@ -77,7 +77,7 @@ const E2EEncryptionSecurityView = () => {
<ChangePassword />
<List.Section>
<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
<Button
onPress={resetOwnKey}

View File

@ -46,7 +46,7 @@ const ForwardMessageView = () => {
<HeaderButton.Container>
<HeaderButton.Item
title={I18n.t('Send')}
color={isSendButtonEnabled ? colors.actionTintColor : colors.headerTintColor}
color={isSendButtonEnabled ? colors.actionTintColor : colors.fontSecondaryInfo}
disabled={!isSendButtonEnabled}
onPress={handlePostMessage}
testID='forward-message-view-send'

View File

@ -95,7 +95,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
<View style={styles.innerContainer}>
<FormTextInput label={I18n.t('Invite_Link')} value={invite && invite.url} editable={false} />
{renderExpiration()}
<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
<View style={[styles.divider, { backgroundColor: colors.strokeLight }]} />
<Button title={I18n.t('Share_Link')} type='primary' onPress={share} />
<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} />
</View>

View File

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

View File

@ -158,7 +158,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
styles.list,
{
backgroundColor: themes[theme].surfaceTint,
borderColor: themes[theme].separatorColor
borderColor: themes[theme].strokeLight
}
]}
refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].fontSecondaryInfo} />}

View File

@ -66,7 +66,7 @@ const SwitchContainer: React.FC<ISwitchContainer> = React.memo(
)}
</View>
{children}
<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
</>
)
);

View File

@ -649,7 +649,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
{room.broadcast
? [
<Text style={styles.broadcast}>{I18n.t('Broadcast')}</Text>,
<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
]
: null}
{serverVersion && !compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? (
@ -686,7 +686,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
<TouchableOpacity
style={[
styles.buttonContainer,
{ backgroundColor: themes[theme].buttonBackground },
{ backgroundColor: themes[theme].buttonBackgroundSecondaryDefault },
!this.formIsChanged() && styles.buttonContainerDisabled
]}
onPress={this.submit}
@ -734,7 +734,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
</Text>
</TouchableOpacity>
</View>
<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
<TouchableOpacity
style={[
styles.buttonContainer_inverted,

View File

@ -68,7 +68,7 @@ const LeftButtons = ({
label={label}
labelVisible={isIOS}
onPress={goBack}
tintColor={themes[theme].headerTintColor}
tintColor={themes[theme].fontSecondaryInfo}
labelStyle={{ fontSize, marginLeft }}
style={styles.container}
testID='header-back'

View File

@ -388,7 +388,7 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
<HeaderButton.Container>
{issuesWithNotifications || notificationsDisabled ? (
<HeaderButton.Item
color={issuesWithNotifications ? colors!.fontDanger : colors!.headerTintColor}
color={issuesWithNotifications ? colors!.fontDanger : colors!.fontSecondaryInfo}
iconName='notification-disabled'
onPress={this.navigateToNotificationOrPushTroubleshoot}
testID='room-view-push-troubleshoot'

View File

@ -77,12 +77,12 @@ const Header = React.memo(
<View style={styles.container}>
<TouchableOpacity onPress={onPress} testID='rooms-list-header-server-dropdown-button'>
<View style={styles.button}>
<Text style={[styles.title, { color: colors.headerTitleColor }]} numberOfLines={1}>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
{serverName}
</Text>
<CustomIcon
name='chevron-down'
color={colors.headerTintColor}
color={colors.fontSecondaryInfo}
style={[showServerDropdown && styles.upsideDown]}
size={18}
/>

View File

@ -207,12 +207,12 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
{
transform: [{ translateY }],
backgroundColor: themes[theme].surfaceRoom,
borderColor: themes[theme].separatorColor
borderColor: themes[theme].strokeLight
}
]}
testID='rooms-list-header-server-dropdown'
>
<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].separatorColor }]}>
<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].strokeLight }]}>
<Text style={[styles.serverHeaderText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>

View File

@ -338,7 +338,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
testID='search-message-view-input'
/>
<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
<View style={[styles.divider, { backgroundColor: themes[theme].strokeLight }]} />
</View>
{this.renderList()}
</SafeAreaView>

View File

@ -165,7 +165,7 @@ const SelectedUsersView = () => {
onPress={() => _onPressItem(item)}
testID={`select-users-view-item-${item.name}`}
icon={isChecked(username) ? 'checkbox-checked' : 'checkbox-unchecked'}
iconColor={isChecked(username) ? colors.actionTintColor : colors.separatorColor}
iconColor={isChecked(username) ? colors.actionTintColor : colors.strokeLight}
/>
);
}}

View File

@ -41,8 +41,8 @@ const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSe
style={[
styles.container,
{
borderColor: themes[theme].separatorColor,
backgroundColor: themes[theme].headerBackground
borderColor: themes[theme].strokeLight,
backgroundColor: themes[theme].surfaceNeutral
}
]}
>

View File

@ -25,7 +25,7 @@ const styles = StyleSheet.create({
});
const Header = React.memo(({ searching, onChangeSearchText, theme }: IShareListHeader) => {
const titleColorStyle = { color: themes[theme].headerTintColor };
const titleColorStyle = { color: themes[theme].fontSecondaryInfo };
const isLight = theme === 'light';
if (searching) {
return (

View File

@ -55,7 +55,7 @@ const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
const { theme } = useTheme();
return (
<Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
<Text style={[styles.cancelText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
</Touchable>
);
};
@ -66,7 +66,7 @@ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox)
<View
style={[
styles.container,
{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
{ backgroundColor: isIOS ? themes[theme].surfaceNeutral : themes[theme].surfaceLight }
]}
>
<View style={[styles.searchBox, { backgroundColor: themes[theme].strokeExtraLight }]}>

View File

@ -221,7 +221,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
<HeaderBackButton
labelVisible={false}
onPress={() => navigation.pop()}
tintColor={themes[theme].headerTintColor}
tintColor={themes[theme].fontSecondaryInfo}
testID='header-back'
/>
),

View File

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

View File

@ -137,7 +137,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
<HeaderBackButton
labelVisible={false}
onPress={() => navigation.pop()}
tintColor={themes[theme].headerTintColor}
tintColor={themes[theme].fontSecondaryInfo}
testID='header-back'
/>
),