Adjust navigation buttons on mobile

Author: masiulis

src/ReactSpreadsheetImport.tsx

@@ -14,6 +14,7 @@ export const defaultRSIProps: Partial<RsiProps<any>> = {
   autoMapSelectValues: false,
   allowInvalidSubmit: true,
   autoMapDistance: 2,
+  isNavigationEnabled: false,
   translations: translations,
   uploadStepHook: async (value) => value,
   selectHeaderStepHook: async (headerValues, data) => ({ headerValues, data }),

src/components/ContinueButton.tsx

@@ -11,14 +11,21 @@ type ContinueButtonProps = {
 
 export const ContinueButton = ({ onContinue, onBack, title, backTitle, isLoading }: ContinueButtonProps) => {
   const styles = useStyleConfig("Modal") as (typeof themeOverrides)["components"]["Modal"]["baseStyle"]
+  const nextButtonMobileWidth = onBack ? "8rem" : "100%"
   return (
     <ModalFooter>
       {onBack && (
         <Button size="md" sx={styles.backButton} onClick={onBack} isLoading={isLoading} variant="link">
           {backTitle}
         </Button>
       )}
-      <Button size="lg" w="21rem" sx={styles.continueButton} onClick={onContinue} isLoading={isLoading}>
+      <Button
+        size="lg"
+        w={{ base: nextButtonMobileWidth, md: "21rem" }}
+        sx={styles.continueButton}
+        onClick={onContinue}
+        isLoading={isLoading}
+      >
         {title}
       </Button>
     </ModalFooter>

src/stories/Default.stories.tsx

@@ -22,13 +22,7 @@ export const Basic = () => {
       <Link href="./exampleFile.csv" border="2px solid #718096" p="8px" borderRadius="8px" download="exampleCSV">
         Download example file
       </Link>
-      <ReactSpreadsheetImport
-        {...mockRsiValues}
-        isOpen={isOpen}
-        onClose={onClose}
-        onSubmit={setData}
-        isNavigationEnabled={true}
-      />
+      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} onSubmit={setData} />
       {!!data && (
         <Box pt={64} display="flex" gap="8px" flexDirection="column">
           <b>Returned data (showing first 100 rows):</b>

src/theme.ts

@@ -316,17 +316,17 @@ export const themeOverrides = {
           fontSize: "lg",
           color: "textColor",
         },
-        footer: {
-          position: "relative",
-        },
         closeModalButton: {},
         backButton: {
-          position: "absolute",
-          left: "2rem",
-          top: "0",
-          bottom: "0",
+          gridColumn: "1",
+          gridRow: "1",
+          justifySelf: "start",
+        },
+        continueButton: {
+          gridColumn: "1 / 3",
+          gridRow: "1",
+          justifySelf: "center",
         },
-        continueButton: {},
       },
       variants: {
         rsi: {
@@ -348,7 +348,12 @@ export const themeOverrides = {
           footer: {
             bg: "secondaryBackground",
             py: "1.5rem",
+            px: "2rem",
             justifyContent: "center",
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gridTemplateRows: "1fr",
+            gap: "1rem",
           },
           dialog: {
             outline: "unset",