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.
-