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
RocketChat · Apr 25, 2024 · 3918b56 · 3918b56
1 parent 7c44822
commit 3918b56
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 19 deletions.
diff --git a/__tests__/containers/message/__snapshots__/Message.stories.storyshot b/__tests__/containers/message/__snapshots__/Message.stories.storyshot
diff --git a/app/containers/ImageViewer/ImageViewer.tsx b/app/containers/ImageViewer/ImageViewer.tsx
@@ -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

diff --git a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
@@ -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

diff --git a/app/containers/message/Components/OverlayComponent/index.tsx b/app/containers/message/Components/OverlayComponent/index.tsx
@@ -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>

diff --git a/app/containers/message/styles.ts b/app/containers/message/styles.ts
@@ -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%'

diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
@@ -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);

diff --git a/app/views/ShareView/Header.tsx b/app/views/ShareView/Header.tsx
@@ -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) {

diff --git a/app/views/ShareView/Preview.tsx b/app/views/ShareView/Preview.tsx
@@ -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} />

diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
@@ -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>