set the blur as always dark and add the possibility to overlay

app/containers/message/Components/BlurComponent/index.tsx

@@ -11,24 +11,22 @@ const BlurComponent = ({
 	loading = false,
 	style = {},
 	iconName,
-	blurAmount = 2
+	showOverlay = false
 }: {
 	loading: boolean;
 	style: StyleProp<ViewStyle>;
 	iconName: TIconsName;
-	blurAmount?: number;
+	showOverlay?: boolean;
 }) => {
 	const { colors } = useTheme();
-	// const { theme, colors } = useTheme();
 
 	return (
 		<>
-			<BlurView
-				style={[style, styles.blurView]}
-				blurType={'dark'}
-				// blurType={theme === 'light' ? 'light' : 'dark'}
-				blurAmount={blurAmount}
-			/>
+			{!showOverlay ? (
+				<BlurView style={[style, styles.blurView]} blurType={'dark'} blurAmount={2} />
+			) : (
+				<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
+			)}
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
 			</View>

app/containers/message/Image.tsx

@@ -54,7 +54,9 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
 				source={{ uri: encodeURI(imgUri) }}
 				resizeMode={FastImage.resizeMode.cover}
 			/>
-			{!cached ? <BlurComponent loading={loading} style={styles.image} iconName='arrow-down-circle' /> : null}
+			{!cached ? (
+				<BlurComponent loading={loading} style={[styles.image, styles.imageBlurContainer]} iconName='arrow-down-circle' />
+			) : null}
 		</>
 	);
 });

app/containers/message/Video.tsx

@@ -88,7 +88,12 @@ const Thumbnail = ({ loading, video, cached }: { loading: boolean; video: string
 	return (
 		<>
 			{thumbnailImage ? <FastImage style={styles.thumbnailImage} source={{ uri: thumbnailImage }} /> : null}
-			<BlurComponent iconName={cached ? 'play-filled' : 'arrow-down-circle'} loading={loading} style={styles.button} />
+			<BlurComponent
+				iconName={cached ? 'play-filled' : 'arrow-down-circle'}
+				loading={loading}
+				style={styles.button}
+				showOverlay={cached}
+			/>
 			{loading ? <CancelIndicator /> : null}
 		</>
 	);

app/containers/message/styles.ts

@@ -105,6 +105,9 @@ export default StyleSheet.create({
 		borderWidth: 1,
 		overflow: 'hidden'
 	},
+	imageBlurContainer: {
+		height: '100%'
+	},
 	imagePressed: {
 		opacity: 0.5
 	},

app/lib/constants/colors.ts

@@ -89,6 +89,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#E4E7EA',
+		overlayColor: '#1F2329B2',
 		...mentions
 	},
 	dark: {
@@ -159,6 +160,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#030b1b', // backgroundColor
+		overlayColor: '#1F2329B2',
 		...mentions
 	},
 	black: {
@@ -229,6 +231,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#000000', // backgroundColor
+		overlayColor: '#1F2329B2',
 		...mentions
 	}
 };