[CHORE] BackdropOpacity based on themes (#2863)

* Added backdropOpacity based on theme

* Updated ActionSheet, ReactionsModal, ReactionPicker and Sidebar

* Updated MultiSelect

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/constants/colors.js

@@ -63,6 +63,7 @@ export const themes = {
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#1F2329',
 		previewTintColor: '#ffffff',
+		backdropOpacity: 0.3,
 		...mentions
 	},
 	dark: {
@@ -109,6 +110,7 @@ export const themes = {
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#030b1b',
 		previewTintColor: '#ffffff',
+		backdropOpacity: 0.9,
 		...mentions
 	},
 	black: {
@@ -155,6 +157,7 @@ export const themes = {
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#000000',
 		previewTintColor: '#ffffff',
+		backdropOpacity: 0.9,
 		...mentions
 	}
 };

app/containers/ActionSheet/ActionSheet.js

@@ -147,7 +147,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
 	const animatedPosition = React.useRef(new Value(0));
 	const opacity = interpolate(animatedPosition.current, {
 		inputRange: [0, 1],
-		outputRange: [0, 0.7],
+		outputRange: [0, themes[theme].backdropOpacity],
 		extrapolate: Extrapolate.CLAMP
 	});
 

app/containers/ReactionsModal.js

@@ -129,7 +129,7 @@ const ReactionsModal = React.memo(({
 		isVisible={isVisible}
 		onBackdropPress={onClose}
 		onBackButtonPress={onClose}
-		backdropOpacity={0.8}
+		backdropOpacity={themes[theme].backdropOpacity}
 		onSwipeComplete={onClose}
 		swipeDirection={['up', 'left', 'right', 'down']}
 	>

app/containers/UIKit/MultiSelect/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import {
-	View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing
+	View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing, StyleSheet
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
@@ -172,7 +172,7 @@ export const MultiSelect = React.memo(({
 			>
 				<TouchableWithoutFeedback onPress={onHide}>
 					<View style={styles.container}>
-						<View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor }]} />
+						<View style={{ ...StyleSheet.absoluteFill, opacity: themes[theme].backdropOpacity, backgroundColor: themes[theme].backdropColor }} />
 						<KeyboardAvoidingView style={styles.keyboardView} behavior={behavior}>
 							<Animated.View style={[styles.animatedContent, { transform: [{ translateY }] }]}>
 								{showContent ? renderContent() : null}

app/containers/UIKit/MultiSelect/styles.js

@@ -8,10 +8,6 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'flex-end'
 	},
-	backdrop: {
-		...StyleSheet.absoluteFill,
-		opacity: 0.3
-	},
 	modal: {
 		height: 300,
 		width: '100%',

app/stacks/InsideStack.js

@@ -31,6 +31,7 @@ import PickerView from '../views/PickerView';
 import ThreadMessagesView from '../views/ThreadMessagesView';
 import MarkdownTableView from '../views/MarkdownTableView';
 import ReadReceiptsView from '../views/ReadReceiptView';
+import { themes } from '../constants/colors';
 
 // Profile Stack
 import ProfileView from '../views/ProfileView';
@@ -280,19 +281,24 @@ const AdminPanelStackNavigator = () => {
 
 // DrawerNavigator
 const Drawer = createDrawerNavigator();
-const DrawerNavigator = () => (
+const DrawerNavigator = () => {
-	<Drawer.Navigator
+	const { theme } = React.useContext(ThemeContext);
-		drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
+
-		drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
+	return (
-		screenOptions={{ swipeEnabled: false }}
+		<Drawer.Navigator
-		drawerType='back'
+			drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
-	>
+			drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
-		<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
+			screenOptions={{ swipeEnabled: false }}
-		<Drawer.Screen name='ProfileStackNavigator' component={ProfileStackNavigator} />
+			drawerType='back'
-		<Drawer.Screen name='SettingsStackNavigator' component={SettingsStackNavigator} />
+			overlayColor={`rgba(0,0,0,${ themes[theme].backdropOpacity })`}
-		<Drawer.Screen name='AdminPanelStackNavigator' component={AdminPanelStackNavigator} />
+		>
-	</Drawer.Navigator>
+			<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
-);
+			<Drawer.Screen name='ProfileStackNavigator' component={ProfileStackNavigator} />
+			<Drawer.Screen name='SettingsStackNavigator' component={SettingsStackNavigator} />
+			<Drawer.Screen name='AdminPanelStackNavigator' component={AdminPanelStackNavigator} />
+		</Drawer.Navigator>
+	);
+};
 
 // NewMessageStackNavigator
 const NewMessageStack = createStackNavigator();

app/views/DirectoryView/Options.js

@@ -84,13 +84,13 @@ export default class DirectoryOptions extends PureComponent {
 			inputRange: [0, 1],
 			outputRange: [-326, 0]
 		});
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, 0.3]
-		});
 		const {
 			globalUsers, toggleWorkspace, isFederationEnabled, theme
 		} = this.props;
+		const backdropOpacity = this.animatedValue.interpolate({
+			inputRange: [0, 1],
+			outputRange: [0, themes[theme].backdropOpacity]
+		});
 		return (
 			<>
 				<TouchableWithoutFeedback onPress={this.close}>

app/views/RoomView/ReactionPicker.js

@@ -7,6 +7,8 @@ import Modal from 'react-native-modal';
 import EmojiPicker from '../../containers/EmojiPicker';
 import styles from './styles';
 import { isAndroid } from '../../utils/deviceInfo';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
 
 const margin = isAndroid ? 40 : 20;
 const maxSize = 400;
@@ -20,7 +22,8 @@ class ReactionPicker extends React.Component {
 		reactionClose: PropTypes.func,
 		onEmojiSelected: PropTypes.func,
 		width: PropTypes.number,
-		height: PropTypes.number
+		height: PropTypes.number,
+		theme: PropTypes.string
 	};
 
 	shouldComponentUpdate(nextProps) {
@@ -38,7 +41,7 @@ class ReactionPicker extends React.Component {
 
 	render() {
 		const {
-			width, height, show, baseUrl, reactionClose, isMasterDetail
+			width, height, show, baseUrl, reactionClose, isMasterDetail, theme
 		} = this.props;
 
 		let widthStyle = width - margin;
@@ -58,6 +61,7 @@ class ReactionPicker extends React.Component {
 					onBackButtonPress={reactionClose}
 					animationIn='fadeIn'
 					animationOut='fadeOut'
+					backdropOpacity={themes[theme].backdropOpacity}
 				>
 					<View
 						style={[
@@ -87,4 +91,4 @@ const mapStateToProps = state => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 
-export default connect(mapStateToProps)(ReactionPicker);
+export default connect(mapStateToProps)(withTheme(ReactionPicker));

app/views/RoomView/index.js

@@ -1084,6 +1084,7 @@ class RoomView extends React.Component {
 					reactionClose={this.onReactionClose}
 					width={width}
 					height={height}
+					theme={theme}
 				/>
 				<UploadProgress rid={this.rid} user={user} baseUrl={baseUrl} width={width} />
 				<ReactionsModal

app/views/RoomsListView/ServerDropdown.js

@@ -225,7 +225,7 @@ class ServerDropdown extends Component {
 		});
 		const backdropOpacity = this.animatedValue.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, 0.6]
+			outputRange: [0, themes[theme].backdropOpacity]
 		});
 		return (
 			<>

app/views/RoomsListView/SortDropdown/index.js

@@ -124,13 +124,13 @@ class Sort extends PureComponent {
 			inputRange: [0, 1],
 			outputRange: [-326, heightDestination]
 		});
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, 0.3]
-		});
 		const {
 			sortBy, groupByType, showFavorites, showUnread, theme
 		} = this.props;
+		const backdropOpacity = this.animatedValue.interpolate({
+			inputRange: [0, 1],
+			outputRange: [0, themes[theme].backdropOpacity]
+		});
 
 		return (
 			<>

app/views/ThreadMessagesView/Dropdown/index.js

@@ -68,7 +68,7 @@ class Dropdown extends React.Component {
 		});
 		const backdropOpacity = this.animatedValue.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, 0.3]
+			outputRange: [0, themes[theme].backdropOpacity]
 		});
 		return (
 			<>