verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

wip: end colors

This commit is contained in:
GleidsonDaniel 2024-03-18 15:36:52 -03:00
parent 0d6aacf263
commit b58c264556
137 changed files with 271 additions and 302 deletions
app
containers
ActionSheet
ActionSheetContentWithInputAndSubmit
index.tsx
BottomSheetContent.tsx
AudioPlayer
PlayButton.tsxSeek.tsx
BackgroundContainer
index.tsx
Button
index.tsx
Check.tsx
Chip
index.tsx
CollapsibleText
index.tsx
HeaderButton
HeaderButtons.stories.tsx
InAppNotification/IncomingCallNotification
style.tsx
List
ListHeader.tsxListInfo.tsxListItem.tsx
LoginServices
ServicesSeparator.tsx
OrSeparator.tsx
ReactionsList
AllTab.tsxReactionsTabBar.tsxUsersList.tsx
RoomItem
Actions.tsxLastMessage.tsxTag.tsxUpdatedAt.tsx
ServerItem
index.tsx
SupportedVersions
SupportedVersionsExpired.tsxSupportedVersionsWarning.tsx
TextInput
FormTextInput.tsx
ThreadDetails.tsxTouch.tsx
UIKit
DatePicker.tsx
MultiSelect
Chips.tsxInput.tsxItems.tsx
Overflow.tsxSection.tsx
VideoConferenceBlock/components
styles.ts
index.tsx
UserGeneratedContentRules.tsxUserItem.tsx
markdown
AtMention.tsxBlockQuote.tsxEmoji.tsxHashtag.tsxLink.tsxListItem.tsxPreview.tsxTable.tsxTableCell.tsxTableRow.tsxindex.tsx
new
Code.tsxCodeLine.tsxEmoji.tsxHeading.tsxImage.tsxInlineCode.tsxKatex.tsxLink.tsxOrderedList.tsxParagraph.tsxQuote.tsxTaskList.tsxUnorderedList.tsx
message
Broadcast.tsxCallButton.tsx
Components
CollapsibleQuote
index.tsx
RightIcons
MessageError.tsxReadReceipt.tsx
Discussion.tsxImage.tsxReactions.tsxRepliedThread.tsxReply.tsxThread.tsxUrls.tsxVideo.tsx
ee/omnichannel/containers/OmnichannelHeader
OmnichannelQueue.tsxindex.tsx
lib
constants
colors.ts
hooks/useVideoConf
StartACallActionSheet.tsx
methods/helpers/navigation
index.ts
views
AuthLoadingView.tsx
AutoTranslateView
index.tsx
CannedResponseDetail.tsx
CannedResponsesListView
CannedResponseItem.tsx
ChangeAvatarView
AvatarSuggestionItem.tsxindex.tsx
CloseLivechatView.tsx
DefaultBrowserView
Item.tsx
DirectoryView
Options.tsxindex.tsx
DisplayPrefsView.tsx
E2EEncryptionSecurityView
ChangePassword.tsxindex.tsx
E2EEnterYourPasswordView.tsxE2EHowItWorksView.tsxE2ESaveYourPasswordView.tsx
ForwardMessageView
SelectPersonOrChannel.tsxindex.tsx
InviteUsersEditView
Picker.tsx
Show More

6
app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
View File

@ -54,7 +54,7 @@ const FooterButtons = ({
onPress={cancelAction}
/>
<Button
style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }}
style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
title={confirmTitle}
onPress={confirmAction}
disabled={disabled}
@ -100,7 +100,7 @@ const ActionSheetContentWithInputAndSubmit = ({
<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
<>
<View style={styles.titleContainer}>
{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
{title}
</Text>
@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
/>
) : null}
<FooterButtons
confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
confirmBackgroundColor={confirmBackgroundColor || colors.strokeHighlight}
cancelAction={onCancel || hideActionSheet}
confirmAction={() => onSubmit(inputValue)}
cancelTitle={i18n.t('Cancel')}

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

@ -30,7 +30,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
style={[styles.button, { backgroundColor: colors.surfaceHover }]}
accessibilityLabel={I18n.t('Cancel')}
>
<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
</Touch>
) : null;

2
app/containers/AudioPlayer/PlayButton.tsx
View File

@ -31,7 +31,7 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
customIconName = 'play-shape-filled';
}
return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />;
return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
};
const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {

2
app/containers/AudioPlayer/Seek.tsx
View File

@ -101,7 +101,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
} as TextInputProps;
}, [timeLabel, duration, currentTime]);
const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
return (

4
app/containers/BackgroundContainer/index.tsx
View File

@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
return (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
{text && !loading ? <Text style={[styles.text, { color: themes[theme].strokeHighlight }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].strokeHighlight} /> : null}
</View>
);
};

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

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

2
app/containers/Check.tsx
View File

@ -15,7 +15,7 @@ const styles = StyleSheet.create({
const Check = React.memo(() => {
const { theme } = useTheme();
return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
});
export default Check;

6
app/containers/Chip/index.tsx
View File

@ -49,20 +49,20 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
style={({ pressed }) => [
styles.pressable,
{
backgroundColor: pressed ? colors.bannerBackground : colors.surfaceHover
backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
},
style
]}
disabled={!onPress}
onPress={() => onPress?.()}
android_ripple={{
color: colors.bannerBackground
color: colors.surfaceNeutral
}}
>
<View style={styles.container}>
{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
<View style={styles.textContainer}>
<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
{text}
</Text>
</View>

8
app/containers/CollapsibleText/index.tsx
View File

@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
if (truncatedText && showTruncated) {
return (
<Text testID={`collapsible-text-truncated-${m}`}>
<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}>
<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
{`${truncatedText}... `}
</Text>
<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}>
<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.strokeHighlight }]}>
{I18n.t('Show_more')}
</Text>
</Text>
@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
return (
<Text
accessibilityLabel={m}
style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]}
style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
testID={`collapsible-text-${m}`}
onTextLayout={event => {
const { lines } = event.nativeEvent;
@ -74,7 +74,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
<Text
testID='collapsible-text-show-less'
onPress={() => setShowTruncated(true)}
style={[styles.textInfo, { color: colors.actionTintColor }]}
style={[styles.textInfo, { color: colors.strokeHighlight }]}
>
{` ${I18n.t('Show_less')}`}
</Text>

2
app/containers/HeaderButton/HeaderButtons.stories.tsx
View File

@ -120,7 +120,7 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<HeaderExample
left={() => (
<HeaderButton.Container left>
<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />} />
<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />} />
<HeaderButton.Item iconName='threads' />
</HeaderButton.Container>
)}

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

@ -36,7 +36,7 @@ export const useStyle = () => {
},
cancelButton: {
borderRadius: 4,
backgroundColor: colors.dangerColor,
backgroundColor: colors.buttonBackgroundDangerDefault,
marginRight: 8,
flex: 2,
alignItems: 'center',

2
app/containers/List/ListHeader.tsx
View File

@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
return (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>

2
app/containers/List/ListInfo.tsx
View File

@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
);
});

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

@ -101,7 +101,7 @@ const Content = React.memo(
{translateTitle && title ? I18n.t(title) : title}
</Text>
{alert ? (
<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} />
<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].buttonBackgroundDangerDefault} style={styles.alertIcon} />
) : null}
</View>
{subtitle ? (

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

@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
type='secondary'
onPress={onPress}
style={styles.options}
color={colors.actionTintColor}
color={colors.strokeHighlight}
/>
<OrSeparator theme={theme} />
</>

2
app/containers/OrSeparator.tsx
View File

@ -29,7 +29,7 @@ interface IOrSeparator {
}
const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
const line = { backgroundColor: themes[theme].borderColor };
const line = { backgroundColor: themes[theme].strokeLight };
const text = { color: themes[theme].fontSecondaryInfo };
return (
<View style={styles.container}>

2
app/containers/ReactionsList/AllTab.tsx
View File

@ -52,7 +52,7 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
getCustomEmoji={getCustomEmoji}
/>
<View style={styles.textContainer}>
<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}>
<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
</Text>
<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>

4
app/containers/ReactionsList/ReactionsTabBar.tsx
View File

@ -37,7 +37,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
>
<View style={styles.tabBarItem}>
{tab._id === 'All' ? (
<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text>
<Text style={[styles.allTabItem, { color: colors.strokeHighlight }]}>{I18n.t('All')}</Text>
) : (
<>
<Emoji
@ -46,7 +46,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
customEmojiStyle={styles.customEmojiStyle}
getCustomEmoji={getCustomEmoji}
/>
<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text>
<Text style={[styles.reactionCount, { color: colors.strokeHighlight }]}>{tab.usernames.length}</Text>
</>
)}
</View>

2
app/containers/ReactionsList/UsersList.tsx
View File

@ -32,7 +32,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
<View style={styles.listItemContainer} testID='userItem'>
<Avatar text={item.username} size={36} />
<View style={styles.textContainer}>
<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
{useRealName && item.name ? item.name : item.username}
</Text>
</View>

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

@ -38,7 +38,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
<Animated.View
style={[
styles.actionLeftButtonContainer,
{ width: width * 2, backgroundColor: colors.tintColor, right: '100%' },
{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
viewHeight,
animatedStyles
]}

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

@ -75,7 +75,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
username,
useRealName
})}
style={[styles.markdownText, { color: alert ? colors.bodyText : colors.fontSecondaryInfo }, alignSelf]}
style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
numberOfLines={2}
/>
);

4
app/containers/RoomItem/Tag.tsx
View File

@ -14,8 +14,8 @@ const Tag = React.memo(({ name, testID }: ITag) => {
const { theme } = useTheme();
return (
<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}>
<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
{name}
</Text>
</View>

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

@ -23,7 +23,7 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
!hideUnreadStatus && [
styles.updateAlert,
{
color: colors.tintColor
color: colors.badgeBackgroundLevel2
}
]
]}

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

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

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

@ -48,12 +48,12 @@ export const SupportedVersionsExpired = () => {
return (
<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
<View style={styles.iconContainer}>
<CustomIcon name='warning' size={36} color={colors.dangerColor} />
<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
</View>
<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>
{I18n.t('Supported_versions_expired_title', { workspace_name: name })}
</Text>
<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('Supported_versions_expired_description')}</Text>
<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Supported_versions_expired_description')}</Text>
<Button title={I18n.t('Check_again')} type='primary' onPress={checkAgain} loading={checking} />
<Button
title={I18n.t('Learn_more')}

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

@ -33,7 +33,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
return (
<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
<View style={styles.iconContainer}>
<CustomIcon name='warning' size={36} color={colors.dangerColor} />
<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
</View>
{message.title ? (
<Text testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
@ -41,12 +41,12 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
</Text>
) : null}
{message.subtitle ? (
<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.bodyText }]}>
<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
{message.subtitle}
</Text>
) : null}
{message.description ? (
<Text testID='sv-warn-description' style={[styles.description, { color: colors.bodyText }]}>
<Text testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
{message.description}
</Text>
) : null}

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

@ -108,8 +108,8 @@ export const FormTextInput = ({
color: colors.fontTitlesLabels
},
error?.error && {
color: colors.dangerColor,
borderColor: colors.dangerColor
color: colors.buttonBackgroundDangerDefault,
borderColor: colors.buttonBackgroundDangerDefault
},
inputStyle
]}
@ -167,7 +167,7 @@ export const FormTextInput = ({
{loading ? (
<ActivityIndicator
style={[styles.iconContainer, styles.iconRight]}
color={colors.bodyText}
color={colors.fontDefault}
testID={testID ? `${testID}-loading` : undefined}
/>
) : null}

2
app/containers/ThreadDetails.tsx
View File

@ -91,7 +91,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
<CustomIcon
size={24}
name={isFollowing ? 'notification' : 'notification-disabled'}
color={themes[theme].auxiliaryTintColor}
color={themes[theme].strokeHighlight}
/>
</Touchable>
</View>

4
app/containers/Touch.tsx
View File

@ -17,8 +17,8 @@ const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, un
ref={ref}
onPress={onPress}
activeOpacity={1}
underlayColor={underlayColor || colors.bannerBackground}
rippleColor={colors.bannerBackground}
underlayColor={underlayColor || colors.surfaceNeutral}
rippleColor={colors.surfaceNeutral}
{...props}
>
{children}

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

@ -67,9 +67,9 @@ export const DatePicker = ({ element, language, action, context, loading, value,
<Touchable
onPress={() => onShow(!show)}
style={{ backgroundColor: themes[theme].surfaceRoom }}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
>
<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].strokeLight }]}>
<View style={[styles.input, { borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }]}>
<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
{currentDate.toLocaleDateString(language)}
</Text>
@ -79,7 +79,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
<CustomIcon
name='calendar'
size={20}
color={error ? themes[theme].dangerColor : themes[theme].fontSecondaryInfo}
color={error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].fontSecondaryInfo}
style={styles.icon}
/>
)}

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

@ -30,7 +30,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
key={item.value}
onPress={() => onSelect(item)}
style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
background={Touchable.Ripple(colors.bannerBackground)}
background={Touchable.Ripple(colors.surfaceNeutral)}
testID={`multi-select-chip-${item.value}`}
>
<>

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

@ -23,7 +23,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
<Touchable
onPress={onPress}
style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
background={Touchable.Ripple(colors.bannerBackground)}
background={Touchable.Ripple(colors.surfaceNeutral)}
disabled={disabled}
>
<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>

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

@ -40,7 +40,7 @@ const Item = ({ item, selected, onSelect }: IItem) => {
{textParser([item.text])}
</Text>
</View>
<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.tintColor} size={22} name='check' /> : null}</View>
<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.badgeBackgroundLevel2} size={22} name='check' /> : null}</View>
</View>
</Touchable>
);

6
app/containers/UIKit/Overflow.tsx
View File

@ -29,7 +29,7 @@ const styles = StyleSheet.create({
const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
<Touchable
onPress={() => onOptionPress({ value })}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
style={styles.option}
>
<Text>{parser.text(text)}</Text>
@ -62,13 +62,13 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
<>
<Touchable
ref={ref => (touchable[blockId] = ref)}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
onPress={() => onShow(!show)}
hitSlop={BUTTON_HIT_SLOP}
style={styles.menu}
>
{!loading ? (
<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
<CustomIcon size={18} name='kebab' color={themes[theme].fontDefault} />
) : (
<ActivityIndicator style={styles.loading} />
)}

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

@ -31,7 +31,7 @@ const Accessory = ({ element, parser }: IAccessoryComponent) =>
const Fields = ({ fields, parser, theme }: IFields) => (
<>
{fields.map(field => (
<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
<Text style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>{parser.text(field)}</Text>
))}
</>
);

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

@ -12,7 +12,7 @@ export default function useStyle() {
fontSize: 12,
marginLeft: 8,
...sharedStyles.textBold,
color: colors.auxiliaryTintColor
color: colors.strokeHighlight
},
iconContainer: {
width: 28,
@ -39,7 +39,7 @@ export default function useStyle() {
color: colors.surfaceDark
},
callToActionButton: {
backgroundColor: colors.tintColor,
backgroundColor: colors.badgeBackgroundLevel2,
minWidth: 50,
alignItems: 'center',
justifyContent: 'center',

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

@ -65,7 +65,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
);
}
return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
return <Text style={[styles.text, { color: themes[theme].fontDefault }]}>{element.text}</Text>;
}
mrkdwn(element: IMarkdown, context: BlockContext) {

4
app/containers/UserGeneratedContentRules.tsx
View File

@ -43,14 +43,14 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
{`${I18n.t('Onboarding_agree_terms')}\n`}
<Text
style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
onPress={() => openContract('terms-of-service')}
>
{I18n.t('Terms_of_Service')}
</Text>{' '}
{I18n.t('and')}
<Text
style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
onPress={() => openContract('privacy-policy')}
>
{' '}

8
app/containers/UserItem.tsx
View File

@ -54,20 +54,20 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
onLongPress={onLongPress}
testID={testID}
android_ripple={{
color: colors.bannerBackground
color: colors.surfaceNeutral
}}
style={({ pressed }: any) => ({
backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
backgroundColor: isIOS && pressed ? colors.surfaceNeutral : 'transparent'
})}
>
<View style={[styles.container, styles.button, style]}>
<Avatar text={username} size={30} style={styles.avatar} />
<View style={styles.textContainer}>
<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
{name}
</Text>
</View>
{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.actionTintColor} style={styles.icon} /> : null}
{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.strokeHighlight} style={styles.icon} /> : null}
</View>
</Pressable>
);

2
app/containers/markdown/AtMention.tsx
View File

@ -68,7 +68,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
);
}
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`@${mention}`}</Text>;
});
export default AtMention;

2
app/containers/markdown/BlockQuote.tsx
View File

@ -12,7 +12,7 @@ interface IBlockQuote {
const BlockQuote = React.memo(({ children, theme }: IBlockQuote) => (
<View style={styles.container}>
<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
<View style={styles.childContainer}>{children}</View>
</View>
));

2
app/containers/markdown/Emoji.tsx
View File

@ -24,7 +24,7 @@ const Emoji = React.memo(({ literal, isMessageContainsOnlyEmoji, getCustomEmoji,
return <CustomEmoji style={[isMessageContainsOnlyEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
}
return (
<Text style={[{ color: colors.bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
<Text style={[{ color: colors.fontDefault }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
{emojiUnicode}
</Text>
);

2
app/containers/markdown/Hashtag.tsx
View File

@ -64,7 +64,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
</Text>
);
}
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`#${hashtag}`}</Text>;
});
export default Hashtag;

2
app/containers/markdown/Link.tsx
View File

@ -37,7 +37,7 @@ const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {
// if you have a [](https://rocket.chat) render https://rocket.chat
return (
<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].strokeHighlight }}>
{childLength !== 0 ? children : link}
</Text>
);

2
app/containers/markdown/ListItem.tsx
View File

@ -44,7 +44,7 @@ const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue
return (
<View style={style.container}>
<View style={[{ width: bulletWidth }, style.bullet]}>
<Text style={[styles.text, styles.listPrefix, { color: themes[theme].bodyText }]}>{bullet}</Text>
<Text style={[styles.text, styles.listPrefix, { color: themes[theme].fontDefault }]}>{bullet}</Text>
</View>
<View style={style.contents}>{children}</View>
</View>

2
app/containers/markdown/Preview.tsx
View File

@ -24,7 +24,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
return (
<Text
accessibilityLabel={m}
style={[styles.text, { color: themes[theme].bodyText }, ...style]}
style={[styles.text, { color: themes[theme].fontDefault }, ...style]}
numberOfLines={numberOfLines}
testID={testID || `markdown-preview-${m}`}
>

4
app/containers/markdown/Table.tsx
View File

@ -22,7 +22,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const renderRows = (drawExtraBorders = true) => {
const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].strokeLight }];
if (drawExtraBorders) {
tableStyle.push(styles.tableExtraBorders);
}
@ -54,7 +54,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
showsVerticalScrollIndicator={false}
style={[
styles.containerTable,
{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].borderColor }
{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].strokeLight }
]}
>
{renderRows(false)}

4
app/containers/markdown/TableCell.tsx
View File

@ -15,7 +15,7 @@ interface ITableCell {
export const CELL_WIDTH = 100;
const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => {
const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }];
const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].strokeLight }];
if (!isLastCell) {
cellStyle.push(styles.cellRightBorder);
}
@ -29,7 +29,7 @@ const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell
return (
<View style={[...cellStyle, { width: CELL_WIDTH }]}>
<Text style={[textStyle, { color: themes[theme].bodyText }]}>{children}</Text>
<Text style={[textStyle, { color: themes[theme].fontDefault }]}>{children}</Text>
</View>
);
});

2
app/containers/markdown/TableRow.tsx
View File

@ -12,7 +12,7 @@ interface ITableRow {
}
const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {
const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }];
const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].strokeLight }];
if (!isLastRow) {
rowStyle.push(styles.rowBottomBorder);
}

16
app/containers/markdown/index.tsx
View File

@ -156,9 +156,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[
{
...styles.codeInline,
color: themes[theme!].bodyText,
backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].bannerBackground
color: themes[theme!].fontDefault,
backgroundColor: themes[theme!].surfaceNeutral,
borderColor: themes[theme!].surfaceNeutral
},
...style
]}
@ -175,13 +175,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[
{
...styles.codeBlock,
backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].borderColor
backgroundColor: themes[theme!].surfaceNeutral,
borderColor: themes[theme!].strokeLight
},
...style
]}
>
<Text style={[styles.codeBlockText, { color: themes[theme!].bodyText }]}>{literal}</Text>
<Text style={[styles.codeBlockText, { color: themes[theme!].fontDefault }]}>{literal}</Text>
</View>
);
};
@ -197,7 +197,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
return null;
}
return (
<Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]} numberOfLines={numberOfLines}>
<Text style={[styles.text, { color: themes[theme!].fontDefault }, ...style]} numberOfLines={numberOfLines}>
{children}
</Text>
);
@ -257,7 +257,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
// @ts-ignore
const textStyle = styles[`heading${level}Text`];
return (
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].fontDefault }]}>
{children}
</Text>
);

4
app/containers/markdown/new/Code.tsx
View File

@ -18,8 +18,8 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
style={[
styles.codeBlock,
{
backgroundColor: colors.bannerBackground,
borderColor: colors.borderColor
backgroundColor: colors.surfaceNeutral,
borderColor: colors.strokeLight
}
]}
>

2
app/containers/markdown/new/CodeLine.tsx
View File

@ -15,7 +15,7 @@ const CodeLine = ({ value }: ICodeLineProps): React.ReactElement | null => {
return null;
}
return <Text style={[styles.codeBlockText, { color: colors.bodyText }]}>{value.value}</Text>;
return <Text style={[styles.codeBlockText, { color: colors.fontDefault }]}>{value.value}</Text>;
};
export default CodeLine;

4
app/containers/markdown/new/Emoji.tsx
View File

@ -18,7 +18,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
const { getCustomEmoji } = useContext(MarkdownContext);
if ('unicode' in block) {
return <Text style={[{ color: colors.bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
return <Text style={[{ color: colors.fontDefault }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
}
const emojiToken = block?.shortCode ? `:${block.shortCode}:` : `:${block.value?.value}:`;
const emojiUnicode = shortnameToUnicode(emojiToken);
@ -28,7 +28,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
return <CustomEmoji style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
}
return (
<Text style={[{ color: colors.bodyText }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
<Text style={[{ color: colors.fontDefault }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
{emojiUnicode}
</Text>
);

2
app/containers/markdown/new/Heading.tsx
View File

@ -16,7 +16,7 @@ const Heading = ({ value, level }: IHeadingProps) => {
const textStyle = styles[`heading${level}`];
return (
<Text style={[textStyle, { color: themes[theme].bodyText }]}>
<Text style={[textStyle, { color: themes[theme].fontDefault }]}>
{value.map(block => {
switch (block.type) {
case 'PLAIN_TEXT':

4
app/containers/markdown/new/Image.tsx
View File

@ -21,12 +21,12 @@ const ImageProgress = createImageProgress(FastImage);
const MessageImage = ({ img, theme }: TMessageImage) => (
<ImageProgress
style={[styles.inlineImage, { borderColor: themes[theme].borderColor }]}
style={[styles.inlineImage, { borderColor: themes[theme].strokeLight }]}
source={{ uri: encodeURI(img) }}
resizeMode={FastImage.resizeMode.cover}
indicator={Progress.Pie}
indicatorProps={{
color: themes[theme].actionTintColor
color: themes[theme].strokeHighlight
}}
/>
);

6
app/containers/markdown/new/InlineCode.tsx
View File

@ -18,9 +18,9 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
style={[
styles.codeInline,
{
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].borderColor
color: themes[theme].fontDefault,
backgroundColor: themes[theme].surfaceNeutral,
borderColor: themes[theme].strokeLight
}
]}
>

4
app/containers/markdown/new/Katex.tsx
View File

@ -19,7 +19,7 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
return (
<MathView
math={value}
style={{ color: colors.bodyText }}
style={{ color: colors.fontDefault }}
renderError={() => (
<Katex expression={value} style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]} />
)}
@ -29,5 +29,5 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
export const InlineKaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
const { colors } = useTheme();
return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.bodyText }} />;
return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.fontDefault }} />;
};

2
app/containers/markdown/new/Link.tsx
View File

@ -39,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
};
return (
<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].strokeHighlight }]}>
{(block => {
const blockArray = Array.isArray(block) ? block : [block];
return blockArray.map(blockInArray => {

4
app/containers/markdown/new/OrderedList.tsx
View File

@ -16,8 +16,8 @@ const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => {
<View>
{value.map(item => (
<View style={styles.row} key={item.number?.toString()}>
<Text style={[styles.text, styles.listPrefix, { color: colors.bodyText }]}>{item.number}. </Text>
<Text style={[styles.text, styles.inline, { color: colors.bodyText }]}>
<Text style={[styles.text, styles.listPrefix, { color: colors.fontDefault }]}>{item.number}. </Text>
<Text style={[styles.text, styles.inline, { color: colors.fontDefault }]}>
<Inline value={item.value} />
</Text>
</View>

2
app/containers/markdown/new/Paragraph.tsx
View File

@ -32,7 +32,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
forceTrim = true;
}
return (
<Text style={[styles.text, { color: themes[theme].bodyText }]}>
<Text style={[styles.text, { color: themes[theme].fontDefault }]}>
<Inline value={value} forceTrim={forceTrim} />
</Text>
);

2
app/containers/markdown/new/Quote.tsx
View File

@ -15,7 +15,7 @@ const Quote = ({ value }: IQuoteProps) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
<View style={styles.childContainer}>
{value.map(item => (
<Paragraph value={item.value} />

4
app/containers/markdown/new/TaskList.tsx
View File

@ -17,14 +17,14 @@ const TaskList = ({ value = [] }: ITasksProps) => {
<View>
{value.map(item => (
<View style={styles.row}>
<Text style={[styles.text, { color: colors.bodyText }]}>
<Text style={[styles.text, { color: colors.fontDefault }]}>
<CustomIcon
testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
size={24}
/>
</Text>
<Text style={[styles.inline, { color: colors.bodyText }]}>
<Text style={[styles.inline, { color: colors.fontDefault }]}>
<Inline value={item.value} />
</Text>
</View>

4
app/containers/markdown/new/UnorderedList.tsx
View File

@ -17,8 +17,8 @@ const UnorderedList = ({ value }: IUnorderedListProps) => {
<View>
{value.map(item => (
<View style={styles.row}>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{'\u2022'}</Text>
<Text style={[styles.inline, { color: themes[theme].bodyText }]}>
<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022'}</Text>
<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
<Inline value={item.value} />
</Text>
</View>

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

@ -21,8 +21,8 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
<View style={styles.buttonContainer}>
<Touchable
onPress={replyBroadcast}
background={Touchable.Ripple(themes[theme].bannerBackground)}
style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
hitSlop={BUTTON_HIT_SLOP}
testID='message-broadcast-reply'
>

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

@ -16,8 +16,8 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
<View style={styles.buttonContainer}>
<Touchable
onPress={handleEnterCall}
background={Touchable.Ripple(themes[theme].bannerBackground)}
style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
hitSlop={BUTTON_HIT_SLOP}
>
<>

4
app/containers/message/Components/CollapsibleQuote/index.tsx
View File

@ -92,7 +92,7 @@ const Fields = React.memo(
<>
{attachment.fields.map(field => (
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>
{field.title}
</Text>
<Markdown
@ -161,7 +161,7 @@ const CollapsibleQuote = React.memo(
borderLeftWidth: 2
}
]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
hitSlop={BUTTON_HIT_SLOP}
>
<View style={styles.touchableContainer}>

2
app/containers/message/Components/RightIcons/MessageError.tsx
View File

@ -19,7 +19,7 @@ const MessageError = React.memo(
return (
<Touchable onPress={onErrorPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='warning' color={themes[theme].dangerColor} size={16} />
<CustomIcon name='warning' color={themes[theme].buttonBackgroundDangerDefault} size={16} />
</Touchable>
);
},

2
app/containers/message/Components/RightIcons/ReadReceipt.tsx
View File

@ -10,7 +10,7 @@ const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }: { isReadReceip
return (
<CustomIcon
name='check'
color={!unread && unread !== null ? colors.tintColor : colors.auxiliaryTintColor}
color={!unread && unread !== null ? colors.badgeBackgroundLevel2 : colors.strokeHighlight}
size={16}
style={styles.rightIcons}
/>

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

@ -25,12 +25,12 @@ const Discussion = React.memo(
return (
<>
<Text style={[styles.startedDiscussion, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Started_discussion')}</Text>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{msg}</Text>
<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{msg}</Text>
<View style={styles.buttonContainer}>
<Touchable
onPress={onDiscussionPress}
background={Touchable.Ripple(themes[theme].bannerBackground)}
style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
hitSlop={BUTTON_HIT_SLOP}
>
<>

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

@ -45,7 +45,7 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
disabled={disabled}
onPress={onPress}
style={styles.imageContainer}
background={Touchable.Ripple(colors.bannerBackground)}
background={Touchable.Ripple(colors.surfaceNeutral)}
>
{children}
</Touchable>
@ -57,7 +57,7 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
return (
<>
<FastImage
style={[styles.image, { borderColor: colors.borderColor }]}
style={[styles.image, { borderColor: colors.strokeLight }]}
source={{ uri: encodeURI(imgUri) }}
resizeMode={FastImage.resizeMode.cover}
/>

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

@ -36,11 +36,11 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
key='message-add-reaction'
testID='message-add-reaction'
style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
hitSlop={BUTTON_HIT_SLOP}
>
<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
<CustomIcon name='reaction-add' size={21} color={themes[theme].tintColor} />
<View style={[styles.reactionContainer, { borderColor: themes[theme].strokeLight }]}>
<CustomIcon name='reaction-add' size={21} color={themes[theme].badgeBackgroundLevel2} />
</View>
</Touchable>
);
@ -57,19 +57,19 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
testID={`message-reaction-${reaction.emoji}`}
style={[
styles.reactionButton,
{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].surfaceRoom }
{ backgroundColor: reacted ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom }
]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
hitSlop={BUTTON_HIT_SLOP}
>
<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>
<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].badgeBackgroundLevel2 : themes[theme].strokeLight }]}>
<Emoji
content={reaction.emoji}
standardEmojiStyle={styles.reactionEmoji}
customEmojiStyle={styles.reactionCustomEmoji}
getCustomEmoji={getCustomEmoji}
/>
<Text style={[styles.reactionCount, { color: themes[theme].tintColor }]}>{reaction.usernames.length}</Text>
<Text style={[styles.reactionCount, { color: themes[theme].badgeBackgroundLevel2 }]}>{reaction.usernames.length}</Text>
</View>
</Touchable>
);

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

@ -34,8 +34,8 @@ const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncry
return (
<View style={styles.repliedThread} testID={`message-thread-replied-on-${msg}`}>
<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} />
<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].badgeBackgroundLevel2} />
<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].badgeBackgroundLevel2 }]} />
<View style={styles.repliedThreadDisclosure}>
<CustomIcon name='chevron-right' color={themes[theme].fontSecondaryInfo} size={20} />
</View>

14
app/containers/message/Reply.tsx
View File

@ -101,12 +101,12 @@ const Title = React.memo(
return (
<View style={styles.authorContainer}>
{attachment.author_name ? (
<Text numberOfLines={1} style={[styles.author, { color: themes[theme].auxiliaryTintColor }]}>
<Text numberOfLines={1} style={[styles.author, { color: themes[theme].strokeHighlight }]}>
{attachment.author_name}
</Text>
) : null}
{time ? <Text style={[messageStyles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text> : null}
{attachment.title ? <Text style={[styles.title, { color: themes[theme].bodyText }]}>{attachment.title}</Text> : null}
{attachment.title ? <Text style={[styles.title, { color: themes[theme].fontDefault }]}>{attachment.title}</Text> : null}
</View>
);
}
@ -132,7 +132,7 @@ const Description = React.memo(
return (
<Markdown
msg={text}
style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14 }]}
style={[{ color: themes[theme].strokeHighlight, fontSize: 14 }]}
username={user.username}
getCustomEmoji={getCustomEmoji}
theme={theme}
@ -187,7 +187,7 @@ const Fields = React.memo(
<View style={styles.fieldsContainer}>
{attachment.fields.map(field => (
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
<Text style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>{field.title}</Text>
<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
</View>
))}
@ -242,7 +242,7 @@ const Reply = React.memo(
borderColor
}
]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
disabled={loading || attachment.message_link}
>
<View style={styles.attachmentContainer}>
@ -253,7 +253,7 @@ const Reply = React.memo(
attachments={attachment.attachments}
getCustomEmoji={getCustomEmoji}
timeFormat={timeFormat}
style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14, marginBottom: 8 }]}
style={[{ color: themes[theme].strokeHighlight, fontSize: 14, marginBottom: 8 }]}
isReply
showAttachment={showAttachment}
/>
@ -263,7 +263,7 @@ const Reply = React.memo(
<View
style={[
styles.backdrop,
{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
{ backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity }
]}
></View>
<RCActivityIndicator />

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

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

6
app/containers/message/Urls.tsx
View File

@ -66,7 +66,7 @@ const UrlContent = React.memo(
return (
<View style={styles.textContainer}>
{title ? (
<Text style={[styles.title, { color: colors.tintColor }]} numberOfLines={2}>
<Text style={[styles.title, { color: colors.badgeBackgroundLevel2 }]} numberOfLines={2}>
{title}
</Text>
) : null}
@ -124,11 +124,11 @@ const Url = React.memo(
styles.container,
{
backgroundColor: themes[theme].surfaceTint,
borderColor: themes[theme].borderColor
borderColor: themes[theme].strokeLight
},
imageLoadedState === 'loading' && styles.loading
]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
background={Touchable.Ripple(themes[theme].surfaceNeutral)}
>
<>
{image ? (

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

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

10
app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
View File

@ -21,19 +21,19 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
<List.Item
title='Omnichannel_queue'
heightContainer={50}
left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryTintColor} />}
color={themes[theme].bodyText}
left={() => <List.Icon name='queue' size={24} color={themes[theme].strokeHighlight} />}
color={themes[theme].fontDefault}
onPress={queueSize ? onPress : undefined}
styleTitle={styles.titleOmnichannelQueue}
right={() => (
<View style={styles.omnichannelRightContainer}>
{queueSize ? (
<>
<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].tintColor }]} unread={queueSize} />
<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].bodyText} size={24} />
<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]} unread={queueSize} />
<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].fontDefault} size={24} />
</>
) : (
<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{i18n.t('Empty')}</Text>
<Text style={[styles.emptyText, { color: themes[theme].strokeHighlight }]}>{i18n.t('Empty')}</Text>
)}
</View>
)}

2
app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
View File

@ -61,7 +61,7 @@ const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnich
<>
<List.Item
title='Omnichannel'
color={themes[theme].bodyText}
color={themes[theme].fontDefault}
onPress={toggleLivechat}
right={() => (
<View style={styles.omnichannelRightContainer}>

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

@ -1,8 +1,6 @@
const fixedColors = {
backdropColor: '#000000'
};
const backdropColor = '#000000';
const newColors = {
const light = {
surfaceLight: '#FFFFFF',
surfaceTint: '#F7F8FA',
surfaceRoom: '#FFFFFF',
@ -94,7 +92,7 @@ const newColors = {
buttonSuccessDisabled: '#FFFFFF'
};
const newColorsDark = {
const dark = {
surfaceLight: '#262931',
surfaceTint: '#1F2329',
surfaceRoom: '#1F2329',
@ -186,20 +184,20 @@ const newColorsDark = {
buttonSuccessDisabled: '#757575'
};
const newColorsBlack = {
const black = {
surfaceLight: '#0d0d0d',
surfaceTint: '#16181a',
surfaceRoom: '#000000',
surfaceNeutral: '#2F343D', //#0d0d0d
// surfaceDisabled: '#24272E',
surfaceNeutral: '#1f2329',
surfaceDisabled: '#24272E',
surfaceHover: '#080808',
// surfaceSelected: '#3C3F44',
surfaceSelected: '#3C3F44',
surfaceDark: '#E4E7EA',
// surfaceFeatured: '#5F1477',
// surfaceFeaturedHover: '#4A105D',
surfaceFeatured: '#5F1477',
surfaceFeaturedHover: '#4A105D',
strokeExtraLight: '#2F343D',
strokeLight: '#333842',
strokeLight: '#1f2329',
strokeMedium: '#404754',
strokeDark: '#9EA2A8',
strokeExtraDark: '#CBCED1',
@ -280,52 +278,23 @@ const newColorsBlack = {
export const colors = {
light: {
...newColors,
bannerBackground: '#f1f2f4',
bodyText: '#2f343d',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#e1e5e8',
controlText: '#54585e',
infoText: '#6d6d72',
tintColor: '#1d74f5',
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#6C727A',
actionTintColor: '#1d74f5',
...light,
backdropColor,
backdropOpacity: 0.3,
attachmentLoadingOpacity: 0.7,
attachmentLoadingOpacity: 0.7
},
dark: {
...newColorsDark,
bannerBackground: '#0e1f38',
bodyText: '#cbced1',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#0f213d',
controlText: '#dadde6',
infoText: '#6D6D72',
tintColor: '#1d74f5',
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1d74f5',
...dark,
backdropColor,
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
black: {
...newColorsDark,
bannerBackground: '#1f2329',
bodyText: '#cbced1',
dangerColor: '#f5455c',
successColor: '#2de0a5',
borderColor: '#1f2329',
controlText: '#dadde6',
infoText: '#6d6d72',
tintColor: '#1e9bfe',
tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1e9bfe',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
attachmentLoadingOpacity: 0.3
},
black: {
...black,
backdropColor,
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3
}
};
export const themes = colors;

2
app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
View File

@ -74,7 +74,7 @@ export default function StartACallActionSheet({
)}
</View>
<Button
backgroundColor={calling ? colors.buttonBackgroundSecondaryDisabled : colors.actionTintColor}
backgroundColor={calling ? colors.buttonBackgroundSecondaryDisabled : colors.strokeHighlight}
color={calling ? colors.strokeDark : colors.surfaceLight}
onPress={() => {
if (calling) {

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

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

2
app/views/AuthLoadingView.tsx
View File

@ -30,7 +30,7 @@ const AuthLoadingView = React.memo((): React.ReactElement => {
{text ? (
<>
<ActivityIndicator color={colors.fontSecondaryInfo} size='large' />
<Text style={[styles.text, { color: colors.bodyText }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
<Text style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
</>
) : null}
</View>

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

@ -101,7 +101,7 @@ const AutoTranslateView = (): React.ReactElement => {
testID={`auto-translate-view-${language}`}
right={() =>
selectedLanguage === language ? (
<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.tintColor} />
<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.badgeBackgroundLevel2} />
) : null
}
translateTitle={false}

4
app/views/CannedResponseDetail.tsx
View File

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

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

@ -32,7 +32,7 @@ const CannedResponseItem = ({
<View style={styles.cannedRow}>
<View style={styles.cannedWrapShortcutScope}>
<Text style={[styles.cannedShortcut, { color: themes[theme].fontTitlesLabels }]}>!{shortcut}</Text>
<Text style={[styles.cannedScope, { color: themes[theme].auxiliaryTintColor }]}>{scope}</Text>
<Text style={[styles.cannedScope, { color: themes[theme].strokeHighlight }]}>{scope}</Text>
</View>
<Button
@ -44,14 +44,14 @@ const CannedResponseItem = ({
/>
</View>
<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>
<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].strokeHighlight }]}>
“{text}”
</Text>
<View style={styles.cannedTagContainer}>
{tags?.length > 0
? tags.map(t => (
<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
<Text style={[styles.cannedTag, { color: themes[theme].strokeHighlight }]}>{t}</Text>
</View>
))
: null}

2
app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
View File

@ -31,7 +31,7 @@ const AvatarSuggestionItem = ({
const { colors } = useTheme();
return (
<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.borderColor }]}>
<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.strokeLight }]}>
<Avatar avatar={item?.url} text={text} size={64} onPress={() => onPress(item)} />
</View>
);

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

@ -239,7 +239,7 @@ const ChangeAvatarView = () => {
title={I18n.t('Delete_image')}
type='primary'
disabled={saving}
backgroundColor={colors.dangerColor}
backgroundColor={colors.buttonBackgroundDangerDefault}
onPress={() => dispatchAvatar({ type: AvatarStateActions.RESET_ROOM_AVATAR, payload: { data: null } })}
testID='change-avatar-view-delete-my-account'
/>

2
app/views/CloseLivechatView.tsx
View File

@ -110,7 +110,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
title={I18n.t('Close')}
onPress={submit}
disabled={!canSubmit()}
backgroundColor={colors.dangerColor}
backgroundColor={colors.buttonBackgroundDangerDefault}
type='primary'
style={styles.buttonMarginVertical}
/>

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

@ -25,7 +25,7 @@ const Item = ({ title, value, browser, changeDefaultBrowser }: IRenderItem) => {
title={I18n.t(title, { defaultValue: title })}
onPress={() => changeDefaultBrowser(value)}
testID={`default-browser-view-${title}`}
right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
translateTitle={false}
/>
);

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

@ -67,8 +67,8 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
return (
<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
<View style={styles.dropdownItemContainer}>
<CustomIcon name={icon} size={22} color={themes[theme].bodyText} style={styles.dropdownItemIcon} />
<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>
<CustomIcon name={icon} size={22} color={themes[theme].fontDefault} style={styles.dropdownItemIcon} />
<Text style={[styles.dropdownItemText, { color: themes[theme].fontDefault }]}>{I18n.t(text)}</Text>
{propType === itemType ? <Check /> : null}
</View>
</Touch>
@ -106,7 +106,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
style={[styles.dropdownItemIcon, styles.inverted]}
size={22}
name='chevron-down'
color={themes[theme].auxiliaryTintColor}
color={themes[theme].strokeHighlight}
/>
</View>
</Touch>
@ -118,10 +118,10 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
<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 }]}>
<Text style={[styles.dropdownItemText, { color: themes[theme].fontHint }]}>
{I18n.t('Search_global_users')}
</Text>
<Text style={[styles.dropdownItemDescription, { color: themes[theme].infoText }]}>
<Text style={[styles.dropdownItemDescription, { color: themes[theme].fontHint }]}>
{I18n.t('Search_global_users_description')}
</Text>
</View>

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

@ -222,12 +222,12 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
{ borderColor: themes[theme].strokeLight }
]}
>
<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
<CustomIcon name={icon} size={20} color={themes[theme].badgeBackgroundLevel2} style={styles.toggleDropdownIcon} />
<Text style={[styles.toggleDropdownText, { color: themes[theme].badgeBackgroundLevel2 }]}>{I18n.t(text)}</Text>
<CustomIcon
name='chevron-down'
size={20}
color={themes[theme].auxiliaryTintColor}
color={themes[theme].strokeHighlight}
style={styles.toggleDropdownArrow}
/>
</View>

4
app/views/DisplayPrefsView.tsx
View File

@ -87,7 +87,7 @@ const DisplayPrefsView = (): React.ReactElement => {
};
const renderCheckBox = (value: boolean) => (
<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.actionTintColor : null} />
<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.strokeHighlight : null} />
);
const renderAvatarSwitch = (value: boolean) => (
@ -95,7 +95,7 @@ const DisplayPrefsView = (): React.ReactElement => {
);
const renderRadio = (value: boolean) => (
<RadioButton selected={!!value} color={value ? colors.actionTintColor : colors.fontSecondaryInfo} size={ICON_SIZE} />
<RadioButton selected={!!value} color={value ? colors.strokeHighlight : colors.fontSecondaryInfo} size={ICON_SIZE} />
);
return (

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

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

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

@ -78,7 +78,7 @@ const E2EEncryptionSecurityView = () => {
<List.Section>
<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>
<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
<Button
onPress={resetOwnKey}
title={I18n.t('E2E_encryption_reset_button')}

4
app/views/E2EEnterYourPasswordView.tsx
View File

@ -61,8 +61,8 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
textContentType='password'
/>
<Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
</SafeAreaView>
</ScrollView>
</KeyboardView>

2
app/views/E2EHowItWorksView.tsx
View File

@ -32,7 +32,7 @@ const E2EHowItWorksView = (): React.ReactElement => {
});
}, []);
const infoStyle = [styles.info, { color: colors.bodyText }];
const infoStyle = [styles.info, { color: colors.fontDefault }];
return (
<SafeAreaView style={[styles.container, { backgroundColor: colors.surfaceRoom }]} testID='e2e-how-it-works-view'>

6
app/views/E2ESaveYourPasswordView.tsx
View File

@ -107,8 +107,8 @@ const E2ESaveYourPasswordView = () => {
<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>
<Text style={[styles.passwordText, { color: colors.fontDefault }]}>{I18n.t('Your_password_is')}</Text>
<Text style={[styles.password, { color: colors.fontDefault }]}>{password}</Text>
<Button
onPress={onCopy}
style={[styles.copyButton, { backgroundColor: colors.surfaceHover }]}
@ -117,7 +117,7 @@ const E2ESaveYourPasswordView = () => {
fontSize={14}
/>
</View>
<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
<Button
onPress={onHowItWorks}
style={{ backgroundColor: colors.surfaceHover }}

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

@ -56,7 +56,7 @@ const SelectPersonOrChannel = ({
return (
<View style={styles.inputContainer}>
<Text style={[styles.label, { color: colors.bodyText }]}>{I18n.t('Person_or_channel')}</Text>
<Text style={[styles.label, { color: colors.fontDefault }]}>{I18n.t('Person_or_channel')}</Text>
<MultiSelect
onSearch={getRooms}
onChange={onRoomSelect}

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

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

2
app/views/InviteUsersEditView/Picker.tsx
View File

@ -70,7 +70,7 @@ const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }):
dispatch(inviteLinksSetParams(params));
};
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.strokeHighlight } };
const firstEl = [
{
label: I18n.t(first),

Some files were not shown because too many files have changed in this diff Show More