diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index dab30e60ca55..8544de62eeb9 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -97,7 +97,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
}}
directionCoordinates={coordinates}
- style={styles.mapView}
+ style={[styles.mapView, styles.br4]}
waypoints={waypointMarkers}
styleURL={CONST.MAPBOX.STYLE_URL}
/>
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index b0f6e0410ad5..d8214774d2c1 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -118,15 +118,16 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
}}
directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
- style={styles.mapView}
+ style={[styles.mapView, styles.mapEditView]}
waypoints={waypointMarkers}
styleURL={CONST.MAPBOX.STYLE_URL}
- overlayStyle={styles.m4}
+ overlayStyle={styles.mapEditView}
/>
) : (
)}
diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js
index db0571cdcdaf..bd35678273ec 100644
--- a/src/components/DistanceRequest/index.js
+++ b/src/components/DistanceRequest/index.js
@@ -274,7 +274,4 @@ export default withOnyx({
transaction: {
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID || 0}`,
},
- mapboxAccessToken: {
- key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
- },
})(DistanceRequest);
diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx
index 9f180ba35b2e..e3b7558c1e21 100644
--- a/src/components/DraggableList/index.native.tsx
+++ b/src/components/DraggableList/index.native.tsx
@@ -2,11 +2,15 @@ import React from 'react';
import DraggableFlatList from 'react-native-draggable-flatlist';
import {FlatList} from 'react-native-gesture-handler';
import type {DraggableListProps} from './types';
+import styles from '../../styles/styles';
function DraggableList({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) {
return (
diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx
index 674a95179e5d..ea9ac548e850 100644
--- a/src/components/DraggableList/index.tsx
+++ b/src/components/DraggableList/index.tsx
@@ -73,6 +73,7 @@ function DraggableList(
;
};
// Initial state of the map
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index 6a35d2a9c369..d97d4aaee16f 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -8,11 +8,11 @@ import {PendingMapViewProps} from './MapViewTypes';
import BlockingView from '../BlockingViews/BlockingView';
import * as Expensicons from '../Icon/Expensicons';
-function PendingMapView({title = '', subtitle = ''}: PendingMapViewProps) {
+function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
return (
-
+
{hasTextContent ? (
({
// Add all of our utility and helper styles
...spacing,
+ ...borders,
...sizing,
...flex,
...display,
@@ -833,9 +835,9 @@ const styles = (theme: ThemeDefault) =>
cameraView: {
flex: 1,
overflow: 'hidden',
- borderRadius: 28,
+ borderRadius: variables.componentBorderRadiusXLarge,
borderStyle: 'solid',
- borderWidth: 8,
+ borderWidth: variables.componentBorderWidth,
backgroundColor: theme.highlightBG,
borderColor: theme.appBG,
display: 'flex',
@@ -3843,15 +3845,20 @@ const styles = (theme: ThemeDefault) =>
mapViewContainer: {
...flex.flex1,
- ...spacing.p4,
minHeight: 300,
maxHeight: 500,
},
mapView: {
- flex: 1,
- borderRadius: 16,
+ ...flex.flex1,
overflow: 'hidden',
+ backgroundColor: theme.highlightBG,
+ },
+
+ mapEditView: {
+ borderRadius: variables.componentBorderRadiusXLarge,
+ borderWidth: variables.componentBorderWidth,
+ borderColor: theme.appBG,
},
mapViewOverlay: {
diff --git a/src/styles/utilities/borders.ts b/src/styles/utilities/borders.ts
new file mode 100644
index 000000000000..5d5110f858e4
--- /dev/null
+++ b/src/styles/utilities/borders.ts
@@ -0,0 +1,18 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * All styles should be incremented by units of 4.
+ */
+export default {
+ br0: {
+ borderRadius: 0,
+ },
+
+ br2: {
+ borderRadius: 8,
+ },
+
+ br4: {
+ borderRadius: 16,
+ },
+} satisfies Record;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index b0d04ef68cc7..382ed3e032d1 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -23,8 +23,10 @@ export default {
componentBorderRadiusMedium: 6,
componentBorderRadiusNormal: 8,
componentBorderRadiusLarge: 16,
+ componentBorderRadiusXLarge: 28,
componentBorderRadiusCard: 20,
componentBorderRadiusRounded: 24,
+ componentBorderWidth: 8,
appModalAppIconSize: 48,
buttonBorderRadius: 100,
avatarSizeLargeBordered: 88,