From 80b57e64cdf66343e9a2e6a92f1a3f1a26e6b541 Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 5 Sep 2023 01:31:01 +0530 Subject: [PATCH 1/4] transparent color for linear gradient distance req --- src/components/DistanceRequest.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js index f3b1dcd94cf9..759fcc02b091 100644 --- a/src/components/DistanceRequest.js +++ b/src/components/DistanceRequest.js @@ -212,7 +212,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {shouldShowGradient && ( )} {hasRouteError && ( From 4984b39545e49b5780602e17e4adc41f8e1678fb Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 5 Sep 2023 02:01:16 +0530 Subject: [PATCH 2/4] minor cleanups --- src/components/DistanceRequest.js | 6 +++--- src/styles/styles.js | 2 +- src/styles/variables.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js index 759fcc02b091..68bda3936e10 100644 --- a/src/components/DistanceRequest.js +++ b/src/components/DistanceRequest.js @@ -131,8 +131,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 +176,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) setScrollContentHeight(height); }} onScroll={updateGradientVisibility} - scrollEventThrottle={16} + scrollEventThrottle={variables.distanceScrollEventThrottle} ref={scrollViewRef} > {_.map(waypoints, (waypoint, key) => { diff --git a/src/styles/styles.js b/src/styles/styles.js index 9d7e14a51fc1..3a41e94adb91 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3868,7 +3868,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 index 3b6dbf47970e..eb182ab1eca0 100644 --- 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; From ca83280e74a26d6d6e489ec35ee8d07bc15385d0 Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 5 Sep 2023 02:15:02 +0530 Subject: [PATCH 3/4] added getTransparentColor --- src/components/DistanceRequest.js | 3 ++- src/styles/StyleUtils.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js index 68bda3936e10..47a6958b733d 100644 --- 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; @@ -212,7 +213,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {shouldShowGradient && ( )} {hasRouteError && ( diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index d4e4239fc7dd..0e0d3b34098c 100644 --- 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 color + */ +function getTransparentColor(color: string) { + return `${color}00`; +} + export { getAvatarSize, getAvatarWidthStyle, @@ -1256,4 +1263,5 @@ export { getDisabledLinkStyles, getCheckboxContainerStyle, getDropDownButtonHeight, + getTransparentColor, }; From 4b4547195a74cecf8fefb455986d0f1a445c90aa Mon Sep 17 00:00:00 2001 From: Pujan Date: Wed, 6 Sep 2023 22:35:43 +0530 Subject: [PATCH 4/4] comment updated --- src/styles/StyleUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 0e0d3b34098c..1def6de70819 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -1181,7 +1181,7 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle | CSSPr } /** - * Get transparent color by setting alpha value 0 of the passed color + * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code */ function getTransparentColor(color: string) { return `${color}00`;