feat: move right/arrows buttons to bottom of page

We still need buttons up top, probably.
nuonco · Jul 8, 2024 · 6ff4605 · 6ff4605
1 parent 5a8e34b
commit 6ff4605
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/components/InstallStepper/NavArrows.tsx b/components/InstallStepper/NavArrows.tsx
@@ -1,14 +1,14 @@
-import { IconButton } from "@material-tailwind/react";
+import { Button } from "@material-tailwind/react";
 
 export const NavArrows = ({
   handlePrev = () => {},
   isFirstStep = false,
   handleNext = () => {},
   isLastStep = false,
 }) => (
-  <div className="absolute -left-8 -right-8 top-1/2 flex justify-between">
-    <IconButton
-      className="rounded-full bg-black dark:bg-white text-white dark:text-black"
+  <div className="flex justify-between">
+    <Button
+      className="rounded-md flex items-center gap-4 pl-3 pr-7 bg-black dark:bg-white text-white dark:text-black"
       onClick={handlePrev}
       disabled={isFirstStep}
     >
@@ -26,12 +26,14 @@ export const NavArrows = ({
           d="M15.75 19.5 8.25 12l7.5-7.5"
         />
       </svg>
-    </IconButton>
-    <IconButton
-      className="rounded-full bg-black dark:bg-white text-white dark:text-black"
+      Previous
+    </Button>
+    <Button
+      className="rounded-md flex items-center gap-4 pl-7 pr-3 bg-black dark:bg-white text-white dark:text-black"
       onClick={handleNext}
       disabled={isLastStep}
     >
+      Next
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -46,6 +48,6 @@ export const NavArrows = ({
           d="m8.25 4.5 7.5 7.5-7.5 7.5"
         />
       </svg>
-    </IconButton>
+    </Button>
   </div>
 );
diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
@@ -207,13 +207,6 @@ const InstallStepper = ({
         </Step>
       </Stepper>
 
-      <NavArrows
-        handlePrev={handlePrev}
-        isFirstStep={isFirstStep}
-        handleNext={handleNext}
-        isLastStep={isLastStep}
-      />
-
       <form className="mt-4" onSubmit={formAction}>
         <CompanyContent
           open={activeStep === 0}
@@ -238,6 +231,15 @@ const InstallStepper = ({
         />
       </form>
 
+      <div className="mt-6">
+        <NavArrows
+          handlePrev={handlePrev}
+          isFirstStep={isFirstStep}
+          handleNext={handleNext}
+          isLastStep={isLastStep}
+        />
+      </div>
+
       {errorAlert}
     </div>
   );