(BSR) : remove Spacer

pass-culture · Dec 27, 2024 · dfa060f · dfa060f
1 parent 1ff7dcb
commit dfa060f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 29 deletions.
diff --git a/__snapshots__/features/bookOffer/pages/BookingConfirmation.native.test.tsx.native-snap b/__snapshots__/features/bookOffer/pages/BookingConfirmation.native.test.tsx.native-snap
@@ -122,6 +122,7 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
     style={
       [
         {
+          "gap": 16,
           "paddingBottom": 40,
         },
       ]
@@ -213,16 +214,6 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      numberOfSpaces={4}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       accessibilityLabel="Partager l’offre"
       accessibilityState={
@@ -313,16 +304,6 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      numberOfSpaces={4}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       accessibilityLabel="Retourner à l’accueil"
       accessibilityState={

diff --git a/src/features/bookOffer/components/BookDateChoice.tsx b/src/features/bookOffer/components/BookDateChoice.tsx
@@ -1,4 +1,6 @@
 import React, { useMemo } from 'react'
+import { View } from 'react-native'
+import styled from 'styled-components/native'
 
 import { OfferStockResponse } from 'api/gen'
 import { Calendar } from 'features/bookOffer/components/Calendar/Calendar'
@@ -7,7 +9,7 @@ import { useBookingContext } from 'features/bookOffer/context/useBookingContext'
 import { getDistinctPricesFromAllStock } from 'features/bookOffer/helpers/bookingHelpers/bookingHelpers'
 import { formatToCompleteFrenchDate } from 'libs/parsers/formatDates'
 import { TouchableOpacity } from 'ui/components/TouchableOpacity'
-import { Spacer, Typo, TypoDS } from 'ui/theme'
+import { Spacer, Typo, TypoDS, getSpacing } from 'ui/theme'
 import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs'
 
 interface Props {
@@ -31,8 +33,7 @@ export const BookDateChoice = ({ stocks, userRemainingCredit }: Props) => {
   const buttonTitle = bookingState.date ? formatToCompleteFrenchDate(bookingState.date) : ''
 
   return (
-    <React.Fragment>
-      <Spacer.Column numberOfSpaces={6} />
+    <StyledView>
       <TypoDS.Title3 {...getHeadingAttrs(3)} testID="DateStep">
         Date
       </TypoDS.Title3>
@@ -50,6 +51,10 @@ export const BookDateChoice = ({ stocks, userRemainingCredit }: Props) => {
           <Typo.ButtonText>{buttonTitle}</Typo.ButtonText>
         </TouchableOpacity>
       )}
-    </React.Fragment>
+    </StyledView>
   )
 }
+
+const StyledView = styled(View)({
+  marginTop: getSpacing(6),
+})
diff --git a/src/features/bookOffer/pages/BookingConfirmation.tsx b/src/features/bookOffer/pages/BookingConfirmation.tsx
@@ -91,9 +91,7 @@ export function BookingConfirmation() {
         <Spacer.Flex />
         <ButtonContainer>
           <ButtonPrimary key={1} wording="Voir ma réservation" onPress={displayBookingDetails} />
-          <Spacer.Column numberOfSpaces={4} />
           <ButtonSecondary wording="Partager l’offre" onPress={pressShareOffer} />
-          <Spacer.Column numberOfSpaces={4} />
           <InternalTouchableLink
             key={2}
             as={ButtonTertiaryPrimary}
@@ -122,4 +120,5 @@ const StyledBody = styled(Typo.Body)({
 
 const ButtonContainer = styled.View({
   paddingBottom: getSpacing(10),
+  gap: getSpacing(4),
 })
diff --git a/src/features/bookings/components/OnGoingBookingItem.tsx b/src/features/bookings/components/OnGoingBookingItem.tsx
@@ -81,15 +81,13 @@ export const OnGoingBookingItem = ({ booking, eligibleBookingsForArchive }: Prop
               {stock.offer.withdrawalType === WithdrawalTypeEnum.on_site ? (
                 <WithdrawContainer testID="on-site-withdrawal-container">
                   <OfferEvent />
-                  <Spacer.Row numberOfSpaces={1} />
                   <OnSiteWithdrawalCaption numberOfLines={2}>
                     {withdrawLabel}
                   </OnSiteWithdrawalCaption>
                 </WithdrawContainer>
               ) : (
                 <WithdrawContainer testID="withdraw-container">
                   <Clock />
-                  <Spacer.Row numberOfSpaces={1} />
                   <WithdrawCaption numberOfLines={2}>{withdrawLabel}</WithdrawCaption>
                 </WithdrawContainer>
               )}
@@ -98,7 +96,6 @@ export const OnGoingBookingItem = ({ booking, eligibleBookingsForArchive }: Prop
           {canDisplayExpirationMessage ? (
             <ExpirationBookingContainer testID="expiration-booking-container">
               <Clock />
-              <Spacer.Row numberOfSpaces={1} />
               <ExpirationBookingLabel>{correctExpirationMessages}</ExpirationBookingLabel>
             </ExpirationBookingContainer>
           ) : null}
@@ -147,11 +144,13 @@ const DateLabel = styled(Typo.Body)(({ theme }) => ({
 }))
 
 const WithdrawCaption = styled(Typo.Caption)({
+  marginTop: getSpacing(1),
   marginRight: getSpacing(4),
 })
 
 const OnSiteWithdrawalCaption = styled(WithdrawCaption)(({ theme }) => ({
   color: theme.colors.primary,
+  marginTop: getSpacing(1),
 }))
 
 const Clock = styled(DefaultClock).attrs(({ theme }) => ({
@@ -172,6 +171,7 @@ const ExpirationBookingContainer = styled.View(({ theme }) => ({
 }))
 
 const ExpirationBookingLabel = styled(Typo.CaptionPrimary)({
+  marginTop: getSpacing(1),
   marginRight: getSpacing(4),
 })