Home page button updates (#54)

* Homepage Button Fix * Formatting Fix * Fix Upload Design Styling * Extra Minor Styling
GenerateNU · Dec 8, 2023 · 835a964 · 835a964
1 parent 1e20e6f
commit 835a964
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 64 deletions.
diff --git 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 (
-    <Box className="flex flex-row justify-center gap-x-6 mt-6 mb-8">
-      {step !== 8 ? (
-        <>
-          <StyledButton color={"primary"} size={"md"} onClick={cancel}>
-            Cancel
-          </StyledButton>
-          <StyledButton
-            color={"primary"}
-            size={"md"}
-            onClick={nextPage}
-            disabled={!enabled}
-          >
-            Continue
-          </StyledButton>
-        </>
-      ) : (
-        <StyledButton color={"primary"} size={"lg"} onClick={nextPage}>
-          Return to Home
-        </StyledButton>
-      )}
-    </Box>
-  );
+    if (step === 6 || step === 7) return null;
+
+    const returnHome = () => {
+        router.navigate({ to: '/jobs' })
+    }
+
+    return (
+        <Box className='flex flex-row justify-center gap-x-6 mt-6 mb-8'>
+            {step !== 8 ?
+                <>
+                    <StyledButton
+                        color={'primary'}
+                        size={'md'}
+                        onClick={step === 1 ? returnHome : cancel}
+                    >
+                        Cancel
+                    </StyledButton>
+                    <StyledButton
+                        color={'primary'}
+                        size={'md'}
+                        onClick={nextPage}
+                        disabled={!enabled}
+                    >
+                        Continue
+                    </StyledButton>
+                </>
+                :
+                    <StyledButton
+                        color={'primary'}
+                        size={'lg'}
+                        onClick={nextPage}
+                    >
+                    Return to Home
+                </StyledButton>
+            }
+        </Box>
+    )
 }
diff --git 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 (
-    <Stepper
-      alternativeLabel
-      activeStep={currentStep}
-      connector={<VoxetiConnector />}
-      className="mb-16"
-    >
-      {steps.map((label) => (
-        <Step key={label}>
-          <StepLabel StepIconComponent={emptyIcon}></StepLabel>
-        </Step>
-      ))}
-    </Stepper>
-  );
+    return(
+        <Stepper
+            alternativeLabel
+            activeStep={currentStep}
+            connector={<VoxetiConnector />}
+            className='mb-16 !mt-10'
+        >
+            {steps.map((label) => (
+                <Step key={label}>
+                    <StepLabel StepIconComponent={emptyIcon}></StepLabel>
+                </Step>
+            ))}
+        </Stepper>
+    );
 }
diff --git 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.
           </p>
-          <button className="bg-primary/90 mt-4 p-4 rounded-md text-background font-bold font-display mx-auto">
+          <button
+            className="bg-primary/90 mt-4 p-4 rounded-md text-background font-bold font-display mx-auto"
+            onClick={() => router.navigate({ to: '/register' })}
+          >
             Sign Up Now
           </button>
         </div>