Merge pull request #26720 from Pujan92/fix/24447

Fix: Waypoint Fade-out shade looks different on iOS
Expensify · Sep 6, 2023 · 54214ea · 54214ea
2 parents c9dc4ba + 4b45471
commit 54214ea
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
@@ -37,6 +37,7 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import {iouPropTypes} from '../pages/iou/propTypes';
 import reportPropTypes from '../pages/reportPropTypes';
 import * as IOU from '../libs/actions/IOU';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
@@ -131,8 +132,8 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     );
 
     // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
-    const halfMenuItemHeight = Math.floor(variables.baseMenuItemHeight / 2);
-    const scrollContainerMaxHeight = variables.baseMenuItemHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
+    const halfMenuItemHeight = Math.floor(variables.optionRowHeight / 2);
+    const scrollContainerMaxHeight = variables.optionRowHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
 
     useEffect(() => {
         MapboxToken.init();
@@ -176,7 +177,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                         setScrollContentHeight(height);
                     }}
                     onScroll={updateGradientVisibility}
-                    scrollEventThrottle={16}
+                    scrollEventThrottle={variables.distanceScrollEventThrottle}
                     ref={scrollViewRef}
                 >
                     {_.map(waypoints, (waypoint, key) => {
@@ -212,7 +213,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 {shouldShowGradient && (
                     <LinearGradient
                         style={[styles.pAbsolute, styles.b0, styles.l0, styles.r0, {height: halfMenuItemHeight}]}
-                        colors={[theme.transparent, theme.modalBackground]}
+                        colors={[StyleUtils.getTransparentColor(theme.modalBackground), theme.modalBackground]}
                     />
                 )}
                 {hasRouteError && (

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1180,6 +1180,13 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle | CSSPr
     };
 }
 
+/**
+ * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code
+ */
+function getTransparentColor(color: string) {
+    return `${color}00`;
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1256,4 +1263,5 @@ export {
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
+    getTransparentColor,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3871,7 +3871,7 @@ const styles = {
 
     distanceRequestContainer: (maxHeight) => ({
         ...flex.flexShrink2,
-        minHeight: variables.baseMenuItemHeight * 2,
+        minHeight: variables.optionRowHeight * 2,
         maxHeight,
     }),
 

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -151,7 +151,7 @@ export default {
     pressDimValue: 0.8,
     qrShareHorizontalPadding: 32,
 
-    baseMenuItemHeight: 64,
-
     moneyRequestSkeletonHeight: 107,
+
+    distanceScrollEventThrottle: 16,
 } as const;