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 c96adfee9ba0..161bce058755 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.js +++ b/src/components/DistanceRequest/DistanceRequestFooter.js @@ -118,15 +118,16 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig location: 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 416fefc5af89..86287eebf7a3 100644 --- a/src/components/DistanceRequest/index.js +++ b/src/components/DistanceRequest/index.js @@ -276,7 +276,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', @@ -3832,15 +3834,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 b3a074234828..10a06e2bc975 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,