(PC-32410) feat(identityCheck): fix quit button size in Stepper (#7055)

pass-culture · Oct 18, 2024 · d617309 · d617309
1 parent 587aaa9
commit d617309
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 86 deletions.
diff --git a/__snapshots__/features/identityCheck/pages/Stepper.native.test.tsx.native-snap b/__snapshots__/features/identityCheck/pages/Stepper.native.test.tsx.native-snap
@@ -1158,121 +1158,132 @@ exports[`Stepper navigation should render correctly 1`] = `
       }
     />
     <View
-      accessibilityLabel="Abandonner"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         [
-          [
-            {
-              "userSelect": "auto",
-            },
-            {
-              "alignItems": "center",
-              "borderRadius": 24,
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "maxWidth": 500,
-              "minHeight": 40,
-              "paddingBottom": 2,
-              "paddingLeft": 2,
-              "paddingRight": 2,
-              "paddingTop": 2,
-              "width": "100%",
-            },
-            {
-              "backgroundColor": "transparent",
-            },
-          ],
           {
-            "opacity": 1,
+            "justifyContent": "center",
+            "minHeight": 60,
           },
         ]
       }
-      testID="Abandonner"
     >
       <View
+        accessibilityLabel="Abandonner"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
+            [
+              {
+                "userSelect": "auto",
+              },
+              {
+                "alignItems": "center",
+                "borderRadius": 24,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "maxWidth": 500,
+                "minHeight": 40,
+                "paddingBottom": 2,
+                "paddingLeft": 2,
+                "paddingRight": 2,
+                "paddingTop": 2,
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
             {
-              "alignItems": "center",
-              "flexDirection": "row",
+              "opacity": 1,
             },
           ]
         }
+        testID="Abandonner"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "flexDirection": "row",
-                "flexShrink": 0,
               },
             ]
           }
         >
           <View
-            fill="#161617"
-            height={20}
-            testID="button-icon-left"
-            width={20}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                  "flexShrink": 0,
+                },
+              ]
+            }
           >
-            <Text>
-              button-icon-left-SVG-Mock
-            </Text>
+            <View
+              fill="#161617"
+              height={20}
+              testID="button-icon-left"
+              width={20}
+            >
+              <Text>
+                button-icon-left-SVG-Mock
+              </Text>
+            </View>
+            <View
+              numberOfSpaces={2}
+              style={
+                [
+                  {
+                    "width": 8,
+                  },
+                ]
+              }
+            />
           </View>
-          <View
-            numberOfSpaces={2}
+          <Text
+            adjustsFontSizeToFit={false}
+            numberOfLines={1}
             style={
               [
                 {
-                  "width": 8,
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Bold",
+                  "fontSize": 15,
+                  "lineHeight": 20,
+                  "maxWidth": "100%",
                 },
               ]
             }
-          />
+          >
+            Abandonner
+          </Text>
         </View>
-        <Text
-          adjustsFontSizeToFit={false}
-          numberOfLines={1}
-          style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Bold",
-                "fontSize": 15,
-                "lineHeight": 20,
-                "maxWidth": "100%",
-              },
-            ]
-          }
-        >
-          Abandonner
-        </Text>
       </View>
     </View>
   </View>

diff --git a/src/features/identityCheck/pages/Stepper.tsx b/src/features/identityCheck/pages/Stepper.tsx
@@ -119,11 +119,13 @@ export const Stepper = () => {
         {stepList}
         <Spacer.Flex flex={1} />
 
-        <ButtonTertiaryBlack
-          icon={Invalidate}
-          wording="Abandonner"
-          onPress={showQuitIdentityCheckModal}
-        />
+        <QuitButtonContainer>
+          <ButtonTertiaryBlack
+            icon={Invalidate}
+            wording="Abandonner"
+            onPress={showQuitIdentityCheckModal}
+          />
+        </QuitButtonContainer>
       </Container>
       <QuitIdentityCheckModal
         visible={visible}
@@ -151,6 +153,11 @@ const StepButtonContainer = styled.View({
   alignItems: 'center',
 })
 
+const QuitButtonContainer = styled.View({
+  justifyContent: 'center',
+  minHeight: getSpacing(15),
+})
+
 const StyledSubtitle = ({ subtitle }: { subtitle: string }) => (
   <React.Fragment>
     <Spacer.Column numberOfSpaces={2} />