[Dark Mode] Standardize Overlay Colors

ios/Podfile.lock

@@ -472,7 +472,7 @@ PODS:
     - React-Core
   - react-native-image-manipulator (1.0.5):
     - React
-  - react-native-image-picker (4.10.1):
+  - react-native-image-picker (4.10.2):
     - React-Core
   - react-native-netinfo (8.3.1):
     - React-Core
@@ -980,7 +980,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4
   react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
-  react-native-image-picker: f2ab1215d17bcfe27b0eb6417cc236fd1f4775e7
+  react-native-image-picker: bf34f3f516d139ed3e24c5f5a381a91819e349ea
   react-native-netinfo: 1a6035d3b9780221d407c277ebfb5722ace00658
   react-native-pdf: 33c622cbdf776a649929e8b9d1ce2d313347c4fa
   react-native-plaid-link-sdk: 77052f329310ff5a36ddda276793f40d27c02bc4

src/components/Modal/BaseModal.js

@@ -100,8 +100,8 @@ class BaseModal extends PureComponent {
                 onSwipeComplete={this.props.onClose}
                 swipeDirection={swipeDirection}
                 isVisible={this.props.isVisible}
-                backdropColor={themeColors.modalBackdrop}
-                backdropOpacity={hideBackdrop ? 0 : 0.5}
+                backdropColor={themeColors.overlay}
+                backdropOpacity={hideBackdrop ? 0 : 0.6}
                 backdropTransitionOutTiming={0}
                 hasBackdrop={this.props.fullscreen}
                 coverScreen={this.props.fullscreen}

src/components/RoomHeaderAvatars.js

@@ -73,7 +73,7 @@ const RoomHeaderAvatars = (props) => {
                                 <View
                                     style={[
                                         styles.roomHeaderAvatar,
-                                        styles.screenBlur,
+                                        styles.roomHeaderAvatarOverlay,
                                     ]}
                                 />
                                 <Text style={styles.avatarInnerTextChat}>

src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js

@@ -1,6 +1,7 @@
 import {Animated} from 'react-native';
 import variables from '../../../styles/variables';
 import getCardStyles from '../../../styles/cardStyles';
+import themeColors from '../../../styles/themes/default';
 
 export default (
     isSmallScreenWidth,
@@ -34,9 +35,10 @@ export default (
         },
         cardStyle,
         overlayStyle: {
+            backgroundColor: themeColors.overlay,
             opacity: progress.interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, 0.3],
+                outputRange: [0, 0.6],
                 extrapolate: 'clamp',
             }),
         },

src/styles/styles.js

@@ -1734,7 +1734,8 @@ const styles = {
         width: 28,
         borderWidth: 2,
         borderStyle: 'solid',
-        backgroundColor: themeColors.opaqueAvatar,
+        backgroundColor: themeColors.overlay,
+        opacity: variables.overlayOpacity,
         borderRadius: 24,
         zIndex: 6,
     },
@@ -1972,14 +1973,14 @@ const styles = {
         marginLeft: -16,
     },
 
-    screenBlur: {
+    roomHeaderAvatarOverlay: {
         position: 'absolute',
         top: 0,
         right: 0,
         bottom: 0,
         left: 0,
-        backgroundColor: themeColors.inverse,
-        opacity: 0.5,
+        backgroundColor: themeColors.overlay,
+        opacity: variables.overlayOpacity,
     },
 
     avatarInnerTextChat: {
@@ -2496,13 +2497,13 @@ const styles = {
     },
 
     cardOverlay: {
-        backgroundColor: themeColors.modalBackdrop,
+        backgroundColor: themeColors.overlay,
         position: 'absolute',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
-        opacity: 0.5,
+        opacity: variables.overlayOpacity,
     },
 
     communicationsLinkIcon: {

src/styles/themes/default.js

@@ -31,6 +31,7 @@ const darkTheme = {
     transparent: colors.transparent,
 
     // Additional keys
+    overlay: colors.greenHighlightBackground,
     inverse: colors.white,
     shadow: colors.black,
     componentBG: colors.greenAppBackground,
@@ -46,8 +47,7 @@ const darkTheme = {
     textMutedReversed: colors.greenIcons,
     textError: colors.red,
     offline: colors.greenIcons,
-    opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
-    modalBackdrop: colors.greenIcons,
+    modalBackdrop: colors.greenHighlightBackground,
     modalBackground: colors.greenAppBackground,
     cardBG: colors.greenHighlightBackground,
     cardBorder: colors.greenHighlightBackground,
@@ -87,8 +87,6 @@ const oldTheme = {
     textMutedReversed: colors.gray3,
     buttonDefaultBG: colors.gray2,
     offline: colors.gray3,
-    sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
-    opaqueAvatar: 'rgba(011, 027, 052, 0.64)',
     modalBackdrop: colors.gray3,
     modalBackground: colors.gray2,
     buttonDisabledBG: colors.gray2,
@@ -104,6 +102,7 @@ const oldTheme = {
     cardBG: colors.gray1,
     cardBorder: colors.gray1,
     checkBox: colors.blue,
+    overlay: colors.gray1,
 
     // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
     highlightBG: colors.gray1,

src/styles/variables.js

@@ -70,6 +70,7 @@ export default {
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
     optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60),
+    overlayOpacity: 0.6,
     lineHeightSmall: getValueUsingPixelRatio(14, 16),
     lineHeightNormal: getValueUsingPixelRatio(16, 21),
     lineHeightLarge: getValueUsingPixelRatio(18, 24),