feat: Make Sell flow bottom navigation transparent (#14350)

artsy · Aug 16, 2024 · f33f232 · f33f232
1 parent a43328b
commit f33f232
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/Apps/Sell/Components/BottomFormNavigation.tsx b/src/Apps/Sell/Components/BottomFormNavigation.tsx
@@ -1,5 +1,7 @@
 import { ContextModule, Intent } from "@artsy/cohesion"
 import { Box, Button, Flex } from "@artsy/palette"
+import { AppContainer } from "Apps/Components/AppContainer"
+import { Z } from "Apps/Components/constants"
 import { useSubmissionTracking } from "Apps/Sell/Hooks/useSubmissionTracking"
 import { useAssociateSubmission } from "Apps/Sell/Mutations/useAssociateSubmission"
 import {
@@ -15,20 +17,35 @@ import { useCallback, useEffect, useState } from "react"
 
 const logger = createLogger("BottomFormNavigation.tsx")
 
+export const BOTTOM_FORM_NAVIGATION_SAVE_AREA = 140
+
 export const BottomFormNavigation = () => {
   return (
     <Flex
+      position="absolute"
+      bottom={0}
+      left={0}
       width="100%"
-      p={[2, 4]}
-      pt={[2, 2]}
-      flexDirection="row"
-      justifyContent="space-between"
+      maxWidth="100vw"
+      background="rgba(255, 255, 255, 0.8)"
       alignItems="center"
-      borderTop="1px solid"
-      borderColor="black5"
+      zIndex={Z.globalNav}
     >
-      <BottomFormBackButton />
-      <BottomFormNextButton />
+      <AppContainer>
+        <Flex
+          width="100%"
+          p={[2, 4]}
+          pt={[2, 2]}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          borderTop="1px solid"
+          borderColor="black5"
+        >
+          <BottomFormBackButton />
+          <BottomFormNextButton />
+        </Flex>
+      </AppContainer>
     </Flex>
   )
 }

diff --git a/src/Apps/Sell/Components/SubmissionLayout.tsx b/src/Apps/Sell/Components/SubmissionLayout.tsx
@@ -1,5 +1,8 @@
 import { Box, Column, Flex, GridColumns } from "@artsy/palette"
-import { BottomFormNavigation } from "Apps/Sell/Components/BottomFormNavigation"
+import {
+  BOTTOM_FORM_NAVIGATION_SAVE_AREA,
+  BottomFormNavigation,
+} from "Apps/Sell/Components/BottomFormNavigation"
 import { StepsNavigation } from "Apps/Sell/Components/StepsNavigation"
 import { SubmissionHeader } from "Apps/Sell/Components/SubmissionHeader"
 import { SubmissionProgressBar } from "Apps/Sell/Components/SubmissionProgressBar"
@@ -42,12 +45,15 @@ export const SubmissionLayout: React.FC<SubmissionLayoutProps> = ({
           </FadeInBox>
         ) : (
           <FadeInBox width={CONTENT_WIDTH} p={2} pt={[2, 4]} mx="auto">
-            {children}
+            <Box
+              style={{ paddingBottom: `${BOTTOM_FORM_NAVIGATION_SAVE_AREA}px` }}
+            >
+              {children}
+            </Box>
           </FadeInBox>
         )}
+        {!hideNavigation && <BottomFormNavigation />}
       </Flex>
-
-      {!hideNavigation && <BottomFormNavigation />}
     </Flex>
   )
 }