fix overlay background color for right hand modal

adnenre · Sep 21, 2023 · c5cc5be · c5cc5be
1 parent 04215cb
commit c5cc5be
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -123,7 +123,7 @@ const CONST = {
         },
     },
 
-    RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.4,
+    RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.72,
 
     NEW_EXPENSIFY_URL: ACTIVE_EXPENSIFY_URL,
     APP_DOWNLOAD_LINKS: {

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -23,6 +23,7 @@ export default {
     darkDefaultButton: '#184E3D',
     darkDefaultButtonHover: '#2C6755',
     darkDefaultButtonPressed: '#467164',
+    darkRightHandSideOverlay: '#1A3D32',
 
     // Light Mode Theme Colors
     lightAppBackground: '#FCFBF9',
@@ -35,6 +36,7 @@ export default {
     lightDefaultButton: '#EEEBE7',
     lightDefaultButtonHover: '#E3DFD9',
     lightDefaultButtonPressed: '#D2CCC3',
+    lightRightHandSideOverlay: '#EBE6DF',
 
     // Brand Colors from Figma
     blue100: '#B0D9FF',

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1554,10 +1554,10 @@ const styles = (theme) => ({
         top: 0,
         bottom: 0,
         right: 0,
-        backgroundColor: theme.shadow,
+        backgroundColor: theme.overlayBG,
         opacity: current.progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [0, variables.overlayOpacity],
+            outputRange: [0, CONST.RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY],
             extrapolate: 'clamp',
         }),
     }),

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
@@ -82,6 +82,7 @@ const darkTheme = {
     skeletonLHNOut: colors.darkDefaultButton,
     QRLogo: colors.green400,
     starDefaultBG: 'rgb(254, 228, 94)',
+    overlayBG: colors.darkRightHandSideOverlay,
     loungeAccessOverlay: colors.blue800,
 };
 

diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js
@@ -80,6 +80,7 @@ const lightTheme = {
     skeletonLHNOut: colors.lightDefaultButtonPressed,
     QRLogo: colors.green400,
     starDefaultBG: 'rgb(254, 228, 94)',
+    overlayBG: colors.lightRightHandSideOverlay,
     loungeAccessOverlay: colors.blue800,
 };