diff --git a/frontend/src/components/Upload/BottomNavOptions.tsx b/frontend/src/components/Upload/BottomNavOptions.tsx index 3e8882c..2bd6407 100644 --- a/frontend/src/components/Upload/BottomNavOptions.tsx +++ b/frontend/src/components/Upload/BottomNavOptions.tsx @@ -1,5 +1,6 @@ -import { Box } from "@mui/material"; -import StyledButton from "../Button/Button"; +import { Box } from '@mui/material'; +import StyledButton from '../Button/Button'; +import router from '../../router'; export type BottomNavProps = { cancel: () => void; @@ -14,28 +15,41 @@ export default function BottomNavOptions({ step, enabled, }: BottomNavProps) { - if (step === 6 || step === 7) return null; - return ( - - {step !== 8 ? ( - <> - - Cancel - - - Continue - - - ) : ( - - Return to Home - - )} - - ); + if (step === 6 || step === 7) return null; + + const returnHome = () => { + router.navigate({ to: '/jobs' }) + } + + return ( + + {step !== 8 ? + <> + + Cancel + + + Continue + + + : + + Return to Home + + } + + ) } diff --git a/frontend/src/components/Upload/VoxetiStepper.tsx b/frontend/src/components/Upload/VoxetiStepper.tsx index 8cdd2e6..612b8f7 100644 --- a/frontend/src/components/Upload/VoxetiStepper.tsx +++ b/frontend/src/components/Upload/VoxetiStepper.tsx @@ -24,42 +24,41 @@ export default function VoxetiStepper({ currentStep }: StepperProps) { "confirmation", ]; - const VoxetiConnector = styled(StepConnector)(({ theme }) => ({ - [`&.${stepConnectorClasses.alternativeLabel}`]: { - top: 10, - left: "calc(-50% + 10px)", - right: "calc(50% + 10px)", - }, - [`&.${stepConnectorClasses.active}`]: { - [`& .${stepConnectorClasses.line}`]: { - borderColor: "#EFAF00", - }, - }, - [`&.${stepConnectorClasses.completed}`]: { - [`& .${stepConnectorClasses.line}`]: { - borderColor: "#EFAF00", - }, - }, - [`& .${stepConnectorClasses.line}`]: { - borderColor: - theme.palette.mode === "dark" ? theme.palette.grey[800] : "#eaeaf0", - borderTopWidth: 3, - borderRadius: 1, - }, - })); + const VoxetiConnector = styled(StepConnector)(({ theme }) => ({ + [`&.${stepConnectorClasses.alternativeLabel}`]: { + top: 10, + left: 'calc(-50% + 10px)', + right: 'calc(50% + 10px)', + }, + [`&.${stepConnectorClasses.active}`]: { + [`& .${stepConnectorClasses.line}`]: { + borderColor: '#EFAF00', + }, + }, + [`&.${stepConnectorClasses.completed}`]: { + [`& .${stepConnectorClasses.line}`]: { + borderColor: '#EFAF00', + }, + }, + [`& .${stepConnectorClasses.line}`]: { + borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + borderTopWidth: 3, + borderRadius: 1, + }, + })); - return ( - } - className="mb-16" - > - {steps.map((label) => ( - - - - ))} - - ); + return( + } + className='mb-16 !mt-10' + > + {steps.map((label) => ( + + + + ))} + + ); } diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx index aea2620..8cb279f 100644 --- a/frontend/src/pages/Index.tsx +++ b/frontend/src/pages/Index.tsx @@ -1,3 +1,5 @@ +import router from "../router"; + export default function Index() { return ( <> @@ -185,7 +187,10 @@ export default function Index() { about bringing your designs to life. You can choose from a variety of printers, each with its own unique capabilities and specialties.

-