wip: colors
This commit is contained in:
parent
e5aae0f9d3
commit
0d6aacf263
|
@ -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 }} />}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ export const useStyle = () => {
|
|||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 4,
|
||||
backgroundColor: colors.surfaceLight,
|
||||
borderColor: colors.separatorColor,
|
||||
borderColor: colors.strokeLight,
|
||||
flex: 1
|
||||
},
|
||||
small: {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
]}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 }) => (
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -19,7 +19,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
|
|||
style={[
|
||||
styles.centerContainer,
|
||||
{
|
||||
borderColor: colors.separatorColor
|
||||
borderColor: colors.strokeLight
|
||||
}
|
||||
]}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -81,7 +81,7 @@ class Dropdown extends React.Component<IDropdownProps> {
|
|||
{
|
||||
transform: [{ translateY }],
|
||||
backgroundColor: themes[theme!].surfaceRoom,
|
||||
borderColor: themes[theme!].separatorColor
|
||||
borderColor: themes[theme!].strokeLight
|
||||
}
|
||||
]}
|
||||
>
|
||||
|
|
|
@ -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'
|
||||
/>
|
||||
),
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 }]}>
|
||||
|
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -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'
|
||||
/>
|
||||
),
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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} />}
|
||||
|
|
|
@ -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 }]} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
]}
|
||||
>
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 }]}>
|
||||
|
|
|
@ -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'
|
||||
/>
|
||||
),
|
||||
|
|
|
@ -81,7 +81,7 @@ class Dropdown extends React.Component<IDropdownProps> {
|
|||
{
|
||||
transform: [{ translateY }],
|
||||
backgroundColor: themes[theme].surfaceRoom,
|
||||
borderColor: themes[theme].separatorColor
|
||||
borderColor: themes[theme].strokeLight
|
||||
}
|
||||
]}
|
||||
>
|
||||
|
|
|
@ -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'
|
||||
/>
|
||||
),
|
||||
|
|
Loading…
Reference in New Issue