chore: auxiliaryBackground

This commit is contained in:
GleidsonDaniel 2024-03-18 13:56:01 -03:00
parent a36bb292cf
commit 013332593b
38 changed files with 49 additions and 55 deletions

View File

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

View File

@ -49,7 +49,7 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
style={({ pressed }) => [
styles.pressable,
{
backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground
backgroundColor: pressed ? colors.bannerBackground : colors.surfaceHover
},
style
]}

View File

@ -84,7 +84,7 @@ export const ServiceList = () => (
<ButtonService
key={service._id}
onPress={() => {}}
backgroundColor={colors[theme].chatComponentBackground}
backgroundColor={colors[theme].surfaceTint}
buttonText={buttonText}
icon={icon}
name={service.name}

View File

@ -86,7 +86,7 @@ const Service = React.memo(
);
}
const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.chatComponentBackground;
const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.surfaceTint;
return (
<ButtonService

View File

@ -65,7 +65,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
<Touch
testID={`message-actions-emoji-${item}`}
onPress={() => onReaction({ emoji: item })}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
>
{typeof item === 'string' ? (
<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
@ -79,7 +79,7 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
<Touch
testID='add-reaction'
onPress={(param: any) => onReaction(param)}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
>
<CustomIcon name='reaction-add' size={24} />
</Touch>

View File

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

View File

@ -23,7 +23,7 @@ const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }:
const { theme } = useTheme();
return (
<SafeAreaContext
style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
style={[styles.view, { backgroundColor: themes[theme].surfaceHover }, style]}
edges={vertical ? ['right', 'left'] : undefined}
{...props}
>

View File

@ -58,7 +58,7 @@ export const SupportedVersionsExpired = () => {
<Button
title={I18n.t('Learn_more')}
type='secondary'
backgroundColor={colors.chatComponentBackground}
backgroundColor={colors.surfaceTint}
onPress={() => Linking.openURL(LEARN_MORE_URL)}
/>
</View>

View File

@ -54,7 +54,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
testID='sv-warn-button'
title='Learn more'
type='secondary'
backgroundColor={colors.chatComponentBackground}
backgroundColor={colors.surfaceTint}
onPress={() => Linking.openURL(message.link || LEARN_MORE_URL)}
/>
</View>

View File

@ -136,7 +136,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
<Button
title={I18n.t('Cancel')}
type='secondary'
backgroundColor={themes[theme].chatComponentBackground}
backgroundColor={themes[theme].surfaceTint}
style={styles.button}
onPress={onCancel}
/>

View File

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

View File

@ -123,7 +123,7 @@ const Url = React.memo(
index > 0 && styles.marginTop,
styles.container,
{
backgroundColor: themes[theme].chatComponentBackground,
backgroundColor: themes[theme].surfaceTint,
borderColor: themes[theme].borderColor
},
imageLoadedState === 'loading' && styles.loading

View File

@ -189,11 +189,11 @@ const newColorsDark = {
const newColorsBlack = {
surfaceLight: '#0d0d0d',
// surfaceTint: '#1F2329',
surfaceRoom: '#000000'
surfaceTint: '#16181a',
surfaceRoom: '#000000',
// surfaceNeutral: '#2D3039',
// surfaceDisabled: '#24272E',
// surfaceHover: '#1A1E23',
surfaceHover: '#080808',
// surfaceSelected: '#3C3F44',
// surfaceDark: '#E4E7EA',
// surfaceFeatured: '#5F1477',
@ -282,8 +282,6 @@ const newColorsBlack = {
export const colors = {
light: {
...newColors,
chatComponentBackground: '#f3f4f5',
auxiliaryBackground: '#efeff4',
bannerBackground: '#f1f2f4',
bodyText: '#2f343d',
dangerColor: '#f5455c',
@ -344,8 +342,6 @@ export const colors = {
},
dark: {
...newColorsDark,
chatComponentBackground: '#192132',
auxiliaryBackground: '#07101e',
bannerBackground: '#0e1f38',
bodyText: '#cbced1',
dangerColor: '#f5455c',
@ -406,8 +402,6 @@ export const colors = {
},
black: {
...newColorsDark,
chatComponentBackground: '#16181a',
auxiliaryBackground: '#080808',
bannerBackground: '#1f2329',
bodyText: '#cbced1',
dangerColor: '#f5455c',

View File

@ -39,7 +39,7 @@ const CannedResponseItem = ({
title={I18n.t('Use')}
fontSize={12}
color={themes[theme].fontTitlesLabels}
style={[styles.cannedUseButton, { backgroundColor: themes[theme].chatComponentBackground }]}
style={[styles.cannedUseButton, { backgroundColor: themes[theme].surfaceTint }]}
onPress={onPressUse}
/>
</View>

View File

@ -158,7 +158,7 @@ const ChangeAvatarView = () => {
return (
<KeyboardView
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>

View File

@ -73,7 +73,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
return (
<KeyboardView
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>

View File

@ -146,7 +146,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
const { server, user, blockUnauthenticatedAccess, theme, serverVersion } = this.props;
return (
<KeyboardView
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
style={{ backgroundColor: themes[theme].surfaceHover }}
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}
>

View File

@ -83,7 +83,7 @@ const E2EEncryptionSecurityView = () => {
onPress={resetOwnKey}
title={I18n.t('E2E_encryption_reset_button')}
type='secondary'
backgroundColor={colors.chatComponentBackground}
backgroundColor={colors.surfaceTint}
testID='e2e-encryption-security-view-reset-key'
/>
</List.Section>

View File

@ -111,7 +111,7 @@ const E2ESaveYourPasswordView = () => {
<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
<Button
onPress={onCopy}
style={[styles.copyButton, { backgroundColor: colors.auxiliaryBackground }]}
style={[styles.copyButton, { backgroundColor: colors.surfaceHover }]}
title={I18n.t('Copy')}
type='secondary'
fontSize={14}
@ -120,7 +120,7 @@ const E2ESaveYourPasswordView = () => {
<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
<Button
onPress={onHowItWorks}
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
title={I18n.t('How_It_Works')}
type='secondary'
testID='e2e-save-password-view-how-it-works'

View File

@ -145,7 +145,7 @@ const ForwardLivechatView = (): React.ReactElement => {
};
return (
<View style={[styles.container, { backgroundColor: colors.auxiliaryBackground }]}>
<View style={[styles.container, { backgroundColor: colors.surfaceHover }]}>
<Input onPress={onPressDepartment} placeholder={I18n.t('Select_a_Department')} />
<OrSeparator theme={theme} />
<Input onPress={onPressUser} placeholder={I18n.t('Select_a_User')} />

View File

@ -77,7 +77,7 @@ const ForwardMessageView = () => {
return (
<KeyboardView
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}
>

View File

@ -88,7 +88,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }}>
<ScrollView
{...scrollPersistTaps}
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
showsVerticalScrollIndicator={false}
>
<StatusBar />

View File

@ -183,7 +183,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
return (
<KeyboardView
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
style={{ backgroundColor: themes[theme].surfaceHover }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>

View File

@ -256,7 +256,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
return (
<KeyboardAwareScrollView
style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
style={[styles.container, { backgroundColor: themes[theme].surfaceHover }]}
keyboardShouldPersistTaps='always'
>
<View style={styles.content}>

View File

@ -68,7 +68,7 @@ const HeaderNewMessage = ({ maxUsers, onChangeText }: { maxUsers: number; onChan
return (
<>
<View style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}>
<View style={[styles.container, { backgroundColor: themes[theme].surfaceHover }]}>
<View style={styles.buttonContainer}>
{createPublicChannelPermission || createPrivateChannelPermission ? (
<ButtonCreate

View File

@ -436,7 +436,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
return (
<KeyboardView
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
style={{ backgroundColor: themes[theme].surfaceHover }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>
@ -546,7 +546,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
<Button
title={I18n.t('Logout_from_other_logged_in_locations')}
type='secondary'
backgroundColor={themes[theme].chatComponentBackground}
backgroundColor={themes[theme].surfaceTint}
onPress={this.logoutOtherLocations}
testID='profile-view-logout-other-locations'
/>

View File

@ -106,7 +106,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
}
return (
<View
style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceTint }]}
testID='read-receipt-view'
>
<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
@ -157,7 +157,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
style={[
styles.list,
{
backgroundColor: themes[theme].chatComponentBackground,
backgroundColor: themes[theme].surfaceTint,
borderColor: themes[theme].separatorColor
}
]}

View File

@ -78,12 +78,12 @@ const ReportUserView = () => {
return (
<KeyboardView
style={{ backgroundColor: colors.auxiliaryBackground }}
style={{ backgroundColor: colors.surfaceHover }}
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}
>
<SafeAreaView style={[styles.containerView, { backgroundColor: colors.auxiliaryBackground }]} testID='report-user-view'>
<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: colors.auxiliaryBackground }]}>
<SafeAreaView style={[styles.containerView, { backgroundColor: colors.surfaceHover }]} testID='report-user-view'>
<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: colors.surfaceHover }]}>
<StatusBar />
<UserInfo username={username} name={name} />
<ControlledFormTextInput

View File

@ -19,7 +19,7 @@ const Roles = ({ roles }: { roles?: string[] }) => {
{roles.map(role =>
role ? (
<View
style={[styles.roleBadge, { backgroundColor: colors.chatComponentBackground }]}
style={[styles.roleBadge, { backgroundColor: colors.surfaceTint }]}
key={role}
testID={`user-role-${role.replace(/ /g, '-')}`}
>

View File

@ -36,7 +36,7 @@ const RoomInfoViewAvatar = ({
handleEdit={showAvatarEdit ? handleEditAvatar : undefined}
>
{type === SubscriptionType.DIRECT && userId ? (
<View style={[sharedStyles.status, { backgroundColor: colors.auxiliaryBackground }]}>
<View style={[sharedStyles.status, { backgroundColor: colors.surfaceHover }]}>
<Status size={20} id={userId} />
</View>
) : null}

View File

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

View File

@ -105,7 +105,7 @@ const JoinCode = React.memo(
title={I18n.t('Cancel')}
type='secondary'
style={styles.button}
backgroundColor={themes[theme].chatComponentBackground}
backgroundColor={themes[theme].surfaceTint}
testID='join-code-cancel'
onPress={hide}
/>

View File

@ -214,7 +214,7 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
styles.item,
index !== 0 ? { marginTop: 4 } : {},
{
backgroundColor: themes[theme!].chatComponentBackground,
backgroundColor: themes[theme!].surfaceTint,
borderColor: themes[theme!].borderColor
}
]}

View File

@ -82,7 +82,7 @@ const SetUsernameView = () => {
};
return (
<KeyboardView style={{ backgroundColor: colors.auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
<KeyboardView style={{ backgroundColor: colors.surfaceHover }} contentContainerStyle={sharedStyles.container}>
<StatusBar />
<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
<SafeAreaView testID='set-username-view'>

View File

@ -342,7 +342,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
return (
<>
<View style={[styles.headerContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
<View style={[styles.headerContainer, { backgroundColor: themes[theme].surfaceHover }]}>
<Text style={[styles.headerText, { color: themes[theme].fontTitlesLabels }]}>{I18n.t(header)}</Text>
</View>
<List.Separator />
@ -395,7 +395,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
renderEmptyComponent = () => {
const { theme } = this.props;
return (
<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].surfaceHover }]}>
<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
</View>
);
@ -449,7 +449,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
<FlatList
data={searching ? searchResults : chats}
keyExtractor={keyExtractor}
style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
style={[styles.flatlist, { backgroundColor: themes[theme].surfaceHover }]}
contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
renderItem={this.renderItem}
getItemLayout={getItemLayout}

View File

@ -48,7 +48,7 @@ interface IIconPreview {
const IconPreview = React.memo(({ iconName, title, description, theme, width, height, danger }: IIconPreview) => (
<ScrollView
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
style={{ backgroundColor: themes[theme].surfaceHover }}
contentContainerStyle={[styles.fileContainer, { width, height }]}
>
<CustomIcon name={iconName} size={56} color={danger ? themes[theme].dangerColor : themes[theme].tintColor} />

View File

@ -120,12 +120,12 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
<ThumbContent item={item} theme={theme} isShareExtension={isShareExtension} />
<RectButton
hitSlop={BUTTON_HIT_SLOP}
style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].auxiliaryBackground }]}
style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].surfaceHover }]}
activeOpacity={1}
rippleColor={themes[theme].bannerBackground}
onPress={() => onRemove(item)}
>
<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
<View style={[styles.removeView, { borderColor: themes[theme].surfaceHover }]}>
<CustomIcon name='close' color={themes[theme].surfaceRoom} size={14} />
</View>
</RectButton>

View File

@ -85,7 +85,7 @@ const WorkspaceView = () => {
<Button
title={I18n.t('Create_account')}
type='secondary'
backgroundColor={colors.chatComponentBackground}
backgroundColor={colors.surfaceTint}
onPress={register}
testID='workspace-view-register'
/>