fix: ShareView and loading of image/videos colors (#5664)

* chore: change shareview and loading image/videos colors

* test: update snapshot

* fix: change header color

* chore: improve videoconf base color
This commit is contained in:
Gleidson Daniel Silva 2024-04-25 17:19:02 -03:00 committed by GitHub
parent 7c448222e1
commit 3918b56a82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 20 additions and 19 deletions

File diff suppressed because one or more lines are too long

View File

@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
const { colors } = useTheme();
return (
<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceRoom }]}>
<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceNeutral }]}>
<GestureDetector gesture={gesture}>
<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
<Component

View File

@ -6,7 +6,7 @@ import sharedStyles from '../../../../views/Styles';
export default function useStyle() {
const { colors } = useTheme();
const style = StyleSheet.create({
container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceHover },
container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceNeutral },
callInfoContainer: { flex: 1, alignItems: 'center', paddingLeft: 16, flexDirection: 'row' },
infoContainerText: {
fontSize: 12,
@ -23,7 +23,7 @@ export default function useStyle() {
},
callToActionContainer: {
height: 48,
backgroundColor: colors.surfaceHover,
backgroundColor: colors.surfaceNeutral,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 16

View File

@ -19,7 +19,7 @@ const OverlayComponent = ({
return (
<>
<View style={[style, styles.blurView, { backgroundColor: colors.surfaceDark }]} />
<View style={[style, styles.blurView, { backgroundColor: colors.surfaceNeutral }]} />
<View style={[style, styles.blurIndicator]}>
{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
</View>

View File

@ -103,7 +103,8 @@ export default StyleSheet.create({
minHeight: isTablet ? 300 : 200,
borderRadius: 4,
borderWidth: 1,
overflow: 'hidden'
overflow: 'hidden',
borderColor: 'rgba(0, 0, 0, 0.1)'
},
imageBlurContainer: {
height: '100%'

View File

@ -121,20 +121,20 @@ const AttachmentView = (): React.ReactElement => {
const options: StackNavigationOptions = {
title: title || '',
headerTitleAlign: 'center',
headerTitleStyle: { color: colors.surfaceTint },
headerTitleStyle: { color: colors.fontDefault },
headerTintColor: colors.surfaceTint,
headerTitleContainerStyle: { flex: 1, maxWidth: undefined },
headerLeftContainerStyle: { flexGrow: undefined, flexBasis: undefined },
headerRightContainerStyle: { flexGrow: undefined, flexBasis: undefined },
headerLeft: () => (
<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.surfaceTint} />
<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.fontDefault} />
),
headerRight: () =>
Allow_Save_Media_to_Gallery && !isImageBase64(attachment.image_url) ? (
<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.surfaceTint} />
<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.fontDefault} />
) : null,
headerBackground: () => (
<HeaderBackground style={{ backgroundColor: colors.surfaceDark, shadowOpacity: 0, elevation: 0 }} />
<HeaderBackground style={{ backgroundColor: colors.surfaceNeutral, shadowOpacity: 0, elevation: 0 }} />
)
};
navigation.setOptions(options);

View File

@ -68,7 +68,7 @@ const Header = React.memo(({ room, thread }: IHeader) => {
icon = 'channel-private';
}
const textColor = themes[theme].surfaceTint;
const textColor = themes[theme].fontDefault;
let title;
if (thread?.id) {

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].surfaceRoom }}
style={{ backgroundColor: themes[theme].surfaceNeutral }}
contentContainerStyle={[styles.fileContainer, { width, height }]}
>
<CustomIcon name={iconName} size={56} color={danger ? themes[theme].buttonBackgroundDangerDefault : themes[theme].badgeBackgroundLevel2} />

View File

@ -121,25 +121,25 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
const options: StackNavigationOptions = {
headerTitle: () => <Header room={room} thread={thread} />,
headerTitleAlign: 'left',
headerTintColor: themes[theme].surfaceTint
headerTintColor: themes[theme].backdropColor
};
// if is share extension show default back button
if (!this.isShareExtension) {
options.headerLeft = () => (
<HeaderButton.CloseModal navigation={navigation} color={themes[theme].surfaceTint} testID='share-view-close' />
<HeaderButton.CloseModal navigation={navigation} color={themes[theme].fontDefault} testID='share-view-close' />
);
}
if (!attachments.length && !readOnly) {
options.headerRight = () => (
<HeaderButton.Container>
<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].surfaceTint} />
<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].fontDefault} />
</HeaderButton.Container>
);
}
options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceDark }]} />;
options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceNeutral }]} />;
navigation.setOptions(options);
};
@ -405,7 +405,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
);
}
return (
<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
<SafeAreaView style={{ backgroundColor: themes[theme].backdropColor, flex: 1 }}>
<StatusBar barStyle='light-content' backgroundColor={themes[theme].surfaceDark} />
{this.renderContent()}
</SafeAreaView>