(BSR): remove Spacer

pass-culture · Dec 27, 2024 · 1b2330c · 1b2330c
1 parent e1aad51
commit 1b2330c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 48 deletions.
diff --git a/...bs/location/geolocation/components/GeolocationActivationModal.native.test.tsx.native-snap b/...bs/location/geolocation/components/GeolocationActivationModal.native.test.tsx.native-snap
@@ -254,16 +254,6 @@ exports[`GeolocationActivationModal should render properly 1`] = `
           BicolorLocationPointer-SVG-Mock
         </Text>
       </View>
-      <View
-        numberOfSpaces={10}
-        style={
-          [
-            {
-              "height": 40,
-            },
-          ]
-        }
-      />
       <Text
         style={
           [
@@ -272,23 +262,14 @@ exports[`GeolocationActivationModal should render properly 1`] = `
               "fontFamily": "Montserrat-Regular",
               "fontSize": 15,
               "lineHeight": 20,
+              "marginTop": 16,
               "textAlign": "center",
             },
           ]
         }
       >
         Retrouve toutes les offres autour de chez toi en activant les données de localisation.
       </Text>
-      <View
-        numberOfSpaces={4}
-        style={
-          [
-            {
-              "height": 16,
-            },
-          ]
-        }
-      />
       <Text
         style={
           [
@@ -297,23 +278,14 @@ exports[`GeolocationActivationModal should render properly 1`] = `
               "fontFamily": "Montserrat-Regular",
               "fontSize": 15,
               "lineHeight": 20,
+              "marginTop": 16,
               "textAlign": "center",
             },
           ]
         }
       >
         Tu peux activer ou désactiver cette fonctionnalité dans les paramètres de localisation de ton téléphone.
       </Text>
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "height": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Activer la géolocalisation"
         accessibilityState={
@@ -362,7 +334,9 @@ exports[`GeolocationActivationModal should render properly 1`] = `
                 "paddingTop": 2,
                 "width": "100%",
               },
-              {},
+              {
+                "marginTop": 24,
+              },
             ],
             {
               "opacity": 1,

diff --git a/src/features/search/components/SearchSuggestions/SearchSuggestions.tsx b/src/features/search/components/SearchSuggestions/SearchSuggestions.tsx
@@ -16,7 +16,7 @@ import { buildSearchVenuePosition } from 'libs/algolia/fetchAlgolia/fetchSearchR
 import { getCurrentVenuesIndex } from 'libs/algolia/fetchAlgolia/helpers/getCurrentVenuesIndex'
 import { analytics } from 'libs/analytics'
 import { useLocation } from 'libs/location'
-import { Spacer, getSpacing } from 'ui/theme'
+import { getSpacing } from 'ui/theme'
 
 type SearchSuggestionsParams = {
   queryHistory: string
@@ -100,7 +100,6 @@ export const SearchSuggestions = ({
       keyboardShouldPersistTaps="handled"
       onScroll={Keyboard.dismiss}
       scrollEventThrottle={16}>
-      <Spacer.Column numberOfSpaces={4} />
       <SearchHistory
         history={filteredHistory}
         queryHistory={queryHistory}
@@ -117,12 +116,13 @@ export const SearchSuggestions = ({
         />
         <AutocompleteVenue onItemPress={onVenuePress} />
       </Index>
-      <Spacer.Column numberOfSpaces={3} />
     </StyledScrollView>
   )
 }
 
 const StyledScrollView = styled.ScrollView(({ theme }) => ({
+  paddingTop: getSpacing(4),
+  paddingBottom: getSpacing(3),
   flex: 1,
   paddingLeft: getSpacing(6),
   paddingRight: getSpacing(6),

diff --git a/src/libs/location/geolocation/components/GeolocationActivationModal.tsx b/src/libs/location/geolocation/components/GeolocationActivationModal.tsx
@@ -8,7 +8,7 @@ import { useLocation } from 'libs/location/LocationWrapper'
 import { ButtonPrimary } from 'ui/components/buttons/ButtonPrimary'
 import { AppInformationModal } from 'ui/components/modals/AppInformationModal'
 import { BicolorLocationPointer } from 'ui/svg/icons/BicolorLocationPointer'
-import { Spacer, Typo } from 'ui/theme'
+import { getSpacing, Typo } from 'ui/theme'
 
 type Props = {
   hideGeolocPermissionModal: () => void
@@ -41,17 +41,14 @@ export const GeolocationActivationModal: React.FC<Props> = ({
       testIdSuffix="geoloc-permission-modal">
       <React.Fragment>
         {/** Special case where theme.icons.sizes is not used */}
-        <BicolorLocationPointer size={85} />
-        <Spacer.Column numberOfSpaces={10} />
+        <StyledBicolorLocationPointer size={85} />
         <InformationText>
           Retrouve toutes les offres autour de chez toi en activant les données de localisation.
         </InformationText>
-        <Spacer.Column numberOfSpaces={4} />
         <InformationText>{informationText}</InformationText>
         {isNative ? (
           <React.Fragment>
-            <Spacer.Column numberOfSpaces={6} />
-            <ButtonPrimary
+            <StyledButtonPrimary
               wording={callToActionMessage}
               onPress={() => {
                 analytics.logOpenLocationSettings()
@@ -64,7 +61,14 @@ export const GeolocationActivationModal: React.FC<Props> = ({
     </AppInformationModal>
   )
 }
-
+const StyledBicolorLocationPointer = styled(BicolorLocationPointer)({
+  marginBottom: getSpacing(6),
+})
 const InformationText = styled(Typo.Body)({
   textAlign: 'center',
+  marginTop: getSpacing(4),
+})
+
+const StyledButtonPrimary = styled(ButtonPrimary)({
+  marginTop: getSpacing(6),
 })
diff --git a/src/shared/location/LocationSearchInput.tsx b/src/shared/location/LocationSearchInput.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { View } from 'react-native'
 import styled from 'styled-components/native'
 
 import { LOCATION_PLACEHOLDER } from 'features/location/constants'
@@ -8,7 +9,7 @@ import { theme } from 'theme'
 import { SearchInput } from 'ui/components/inputs/SearchInput'
 import { useDebounceValue } from 'ui/hooks/useDebounceValue'
 import { MagnifyingGlass } from 'ui/svg/icons/MagnifyingGlass'
-import { Spacer } from 'ui/theme'
+import { getSpacing } from 'ui/theme'
 
 interface LocationSearchInputProps {
   selectedPlace: SuggestedPlace | null
@@ -38,8 +39,7 @@ export const LocationSearchInput = ({
   const shouldShowSuggestedPlaces = isQueryProvided && !selectedPlace
 
   return (
-    <React.Fragment>
-      <Spacer.Column numberOfSpaces={4} />
+    <StyledView>
       <SearchInput
         autoFocus
         LeftIcon={StyledMagnifyingGlass}
@@ -53,15 +53,16 @@ export const LocationSearchInput = ({
         }
       />
       {shouldShowSuggestedPlaces ? (
-        <React.Fragment>
-          <Spacer.Column numberOfSpaces={4} />
+        <StyledView>
           <SuggestedPlaces query={debouncedPlaceQuery} setSelectedPlace={onSetSelectedPlace} />
-        </React.Fragment>
+        </StyledView>
       ) : null}
-    </React.Fragment>
+    </StyledView>
   )
 }
 
 const StyledMagnifyingGlass = styled(MagnifyingGlass).attrs(({ theme }) => ({
   size: theme.icons.sizes.small,
 }))``
+
+const StyledView = styled(View)({ paddingTop: getSpacing(4) })