From c53c92a811d22ce50f470548aa44565c1d302d19 Mon Sep 17 00:00:00 2001
From: Nate Sawant <natesawant@gmail.com>
Date: Tue, 16 Apr 2024 23:07:07 -0400
Subject: [PATCH] Cleanup onboarding page

---
 frontend/src/components/BendSidebar.tsx       |   2 +-
 frontend/src/components/FileUploader.tsx      |   4 +-
 frontend/src/components/Onboarding/Button.tsx |   2 +-
 .../src/components/Onboarding/PrepareTube.tsx |  48 +-
 .../Onboarding/QuickStartEndScreen.tsx        |   4 +-
 .../Onboarding/QuickStartTitleScreen.tsx      |   2 +-
 .../components/Onboarding/SplashScreen.tsx    |   2 +-
 .../components/Onboarding/StartMachine.tsx    |  14 +-
 frontend/src/images/HifiLogo.tsx              |  16 +-
 frontend/src/pages/CreateDesign.tsx           |  32 +-
 frontend/src/pages/InputForm.tsx              | 438 +++++++++---------
 frontend/src/pages/Onboarding.tsx             |  12 +-
 frontend/tailwind.config.js                   |   2 +-
 website/src/App.css                           |  54 +--
 website/src/Button.tsx                        |   6 +-
 website/src/PersonalInfoForm.tsx              | 166 +++----
 website/tailwind.config.js                    |   2 +-
 17 files changed, 397 insertions(+), 409 deletions(-)

diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx
index 5e5c0c8..ff99003 100644
--- a/frontend/src/components/BendSidebar.tsx
+++ b/frontend/src/components/BendSidebar.tsx
@@ -27,7 +27,7 @@ const BendSidebar: React.FC<BendSidebarProps> = ({
         ))}
       </ul>
       <button
-        className="mt-auto py-3 px-2 bg-transparent text-brand-blue-dark rounded-2xl cursor-pointer hover:bg-brand-temp-teal hover:text-brand-white" // Increased padding (py-3) and reaffirmed text size
+        className="mt-auto py-3 px-2 bg-transparent text-brand-blue-dark rounded-2xl cursor-pointer hover:bg-brand-teal hover:text-brand-white" // Increased padding (py-3) and reaffirmed text size
         onClick={onAddBend}
       >
         Add Bend
diff --git a/frontend/src/components/FileUploader.tsx b/frontend/src/components/FileUploader.tsx
index c8b41fc..d07c17b 100644
--- a/frontend/src/components/FileUploader.tsx
+++ b/frontend/src/components/FileUploader.tsx
@@ -33,8 +33,8 @@ const FileUploader: React.FC = () => {
   return (
     <div>
       <Button label='Upload CAD File'
-       handleClick={handleOpenFileDialog}
-       customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75' />
+        handleClick={handleOpenFileDialog}
+        customColors='bg-brand-teal text-brand-white hover:bg-opacity-75' />
     </div>
   );
 };
diff --git a/frontend/src/components/Onboarding/Button.tsx b/frontend/src/components/Onboarding/Button.tsx
index 91c0e5a..678ab51 100644
--- a/frontend/src/components/Onboarding/Button.tsx
+++ b/frontend/src/components/Onboarding/Button.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import RightArrow from "../../images/Arrow";
 
 const OnboardingButton = (props: { handleClick: () => void, label?: string }) =>
-    <div onClick={props.handleClick} className=' relative bg-brand-orange rounded-3xl z-50 opacity-100' >
+    <div onClick={props.handleClick} className=' relative bg-brand-teal rounded-3xl z-50 opacity-100' >
         <div className=" w-fit py-5 px-10 flex flex-row items-center justify-center gap-4 place-items-center">
             {props.label && <p className=" text-brand-white text-xl font-bold">{props.label}</p>}
             <RightArrow />
diff --git a/frontend/src/components/Onboarding/PrepareTube.tsx b/frontend/src/components/Onboarding/PrepareTube.tsx
index b470372..a61f39d 100644
--- a/frontend/src/components/Onboarding/PrepareTube.tsx
+++ b/frontend/src/components/Onboarding/PrepareTube.tsx
@@ -2,42 +2,38 @@ import React from 'react';
 import BigCircle from '../../images/BigCircle';
 import OnboardingButton from './Button';
 import MediumCircle from '../../images/MediumCircle';
+import Navbar from '../Navbar';
 
 function PrepareTube(props: { stateChanger: () => void }) {
     return (
-        <div className=' w-full h-full flex items-end justify-start bg-off-white'>
-            <div className=' flex flex-col gap-4 text-left pb-32 pl-32 z-50'>
+        <div className=' w-full lg:w-auto h-full flex flex-col lg:flex-row items-end justify-start bg-off-white'>
+            <Navbar />
+            <div className=' flex flex-col gap-4 text-left lg:pb-32 pl-8 pt-16 lg:pl-32 z-50 w-full lg:w-1/2'>
                 <h1 className=' text-brand-blue-dark text-5xl pb-4'>Preparing the tubing</h1>
                 <h2 className=' text-2xl text-brand-blue-light'>Straightening and Cutting the Tube</h2>
-                <div>
-                    <h3 className=' text-brand-orange text-lg'>**Your tube will need to have an ending straight section of at least 10 inches</h3>
-                    <h3 className=' text-brand-orange text-lg'>to allow enough length to disengage and pull out the tube once all the bending</h3>
-                    <h3 className=' text-brand-orange text-lg'>is complete. Make sure to account for this prior to cutting your tube.</h3>
-                    <h3 className=' text-brand-orange text-lg'>**If you already have your desired length of tube, you may skip this step:</h3>
+                <div className=' text-brand-teal text-lg text-balance'>
+                    <h3>**Your tube will need to have an ending straight section of at least 10 inches to allow enough length to disengage and pull out the tube once all the bending is complete. Make sure to account for this prior to cutting your tube.</h3>
+                    <h3>**If you already have your desired length of tube, you may skip this step:</h3>
                 </div>
-                <ul>
-                    <li className=' text-brand-blue-light text-2xl'>1. If in a coil, unroll the desired length of tube</li>
-                    <li className=' text-brand-blue-light text-2xl'>2. Use a tube straightener to straighten the tube</li>
-                    <li className=' text-brand-blue-light text-2xl'>3. Mark where you will cut the tube at desired length</li>
-                    <li className=' text-brand-blue-light text-2xl'>4. Use tube cutter to cut the tube at marking</li>
-                    <li className=' text-brand-blue-light text-2xl'>To use a tube cutter, start by gently tightening</li>
-                    <li className=' text-brand-blue-light text-2xl'>the cutter until it makes contact with the tube and</li>
-                    <li className=' text-brand-blue-light text-2xl'>then make a couple rotations. Repeat this process until</li>
-                    <li className=' text-brand-blue-light text-2xl'>tube is cut.</li>
-                    <li className=' text-brand-blue-light text-2xl'>5. Once straightened tube is cut to desired length, proceed to</li>
-                    <li className=' text-brand-blue-light text-2xl'>next steps:</li>
-                    <li className=' text-brand-blue-light text-2xl'>6. Cleaning the Tube</li>
-                    <li className=' text-brand-blue-light text-2xl'>7. Spray some Isopropyl Alcohol onto a paper towel and wipe</li>
-                    <li className=' text-brand-blue-light text-2xl'>along the full exterior of the tube to clean it. This may take a</li>
-                    <li className=' text-brand-blue-light text-2xl'>couple passes to fully clean.</li>
+                <ul className=' text-brand-blue-light text-2xl text-balance'>
+                    <li>1. If in a coil, unroll the desired length of tube</li>
+                    <li>2. Use a tube straightener to straighten the tube</li>
+                    <li>3. Mark where you will cut the tube at desired length</li>
+                    <li>4. Use tube cutter to cut the tube at marking</li>
+                    <li className=' pl-8'>To use a tube cutter, start by gently tightening the cutter until it makes contact with the tube and then make a couple rotations. Repeat this process until tube is cut.</li>
+                    <li>5. Once straightened tube is cut to desired length, proceed to next steps:</li>
+                    <li>6. Cleaning the Tube</li>
+                    <li>7. Spray some Isopropyl Alcohol onto a paper towel and wipealong the full exterior of the tube to clean it. This may take a couple passes to fully clean.</li>
                 </ul>
             </div>
-            <div className=' overflow-clip w-full h-full absolute top-0 bottom-0 flex justify-end items-center'>
-                <div className=' pr-32'>
+            <div className=' w-full h-full lg:absolute top-0 bottom-0 flex justify-end items-end lg:items-center'>
+                <div className=' pr-32 py-16 lg:py-0'>
                     <OnboardingButton handleClick={props.stateChanger} />
                 </div>
-                <div className=' overflow-clip h-full flex justify-center absolute z-10 -bottom-36 -left-10'><BigCircle /></div>
-                <div className=' overflow-clip h-full flex justify-center absolute z-10 -top-20 -right-8'><MediumCircle /></div>
+            </div>
+            <div className=' overflow-clip w-full h-full absolute'>
+                <div className='flex justify-center absolute z-10 -bottom-36 -left-10'><BigCircle /></div>
+                <div className='flex justify-center absolute z-10 -top-20 -right-8'><MediumCircle /></div>
             </div>
         </div>
     );
diff --git a/frontend/src/components/Onboarding/QuickStartEndScreen.tsx b/frontend/src/components/Onboarding/QuickStartEndScreen.tsx
index 0871d24..c272187 100644
--- a/frontend/src/components/Onboarding/QuickStartEndScreen.tsx
+++ b/frontend/src/components/Onboarding/QuickStartEndScreen.tsx
@@ -14,14 +14,14 @@ function QuickStartEndScreen(props: { stateChanger: () => void }) {
         <div className=' w-full h-full'>
             <div className=' w-full h-screen flex flex-col lg:flex-row justify-between items-center p-32'>
                 <div className=' flex flex-col justify-center items-start gap-2'>
-                    <h1 className=' text-7xl'><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-orange'>bender</span></h1>
+                    <h1 className=' text-7xl'><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-teal'>bender</span></h1>
                     <h2 className=' text-2xl text-brand-blue-light'>end of quickstart guide</h2>
                 </div>
                 <Link className=' flex items-center justify-center' to="/create">
                     <OnboardingButton handleClick={() => console.log("to create page")} label='open tubender' />
                 </Link>
             </div>
-            <div className=' absolute bottom-32 left-32 text-xl text-brand-blue'>
+            <div className=' absolute bottom-72 lg:bottom-32 left-0 right-0 lg:right-auto lg:left-32 text-center lg:text-left text-xl text-brand-blue'>
                 <p>Access the Quickstart Guide at</p>
                 <p>anytime from your profile page.</p>
             </div>
diff --git a/frontend/src/components/Onboarding/QuickStartTitleScreen.tsx b/frontend/src/components/Onboarding/QuickStartTitleScreen.tsx
index d13d331..a6cc0e6 100644
--- a/frontend/src/components/Onboarding/QuickStartTitleScreen.tsx
+++ b/frontend/src/components/Onboarding/QuickStartTitleScreen.tsx
@@ -13,7 +13,7 @@ function QuickStartTitleScreen(props: { stateChanger: () => void }) {
         <div className=' w-full h-full'>
             <div className=' w-full h-full flex flex-col lg:flex-row justify-between items-center p-32'>
                 <div className=' flex flex-col justify-center items-start gap-2'>
-                    <h1 className=' text-7xl'><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-orange'>bender</span></h1>
+                    <h1 className=' text-7xl'><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-teal'>bender</span></h1>
                     <h2 className=' text-2xl text-brand-blue-light'>quickstart guide</h2>
                 </div>
                 <div className=' flex items-center justify-center'>
diff --git a/frontend/src/components/Onboarding/SplashScreen.tsx b/frontend/src/components/Onboarding/SplashScreen.tsx
index 6a54b59..94ccc26 100644
--- a/frontend/src/components/Onboarding/SplashScreen.tsx
+++ b/frontend/src/components/Onboarding/SplashScreen.tsx
@@ -11,7 +11,7 @@ function SplashScreen(props: { stateChanger: () => void }) {
     return (
         <div onClick={props.stateChanger} className=' w-full h-full flex flex-col items-center justify-center gap-8'>
             <HifiLogo></HifiLogo>
-            <h1 className={` text-7xl  duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-orange'>bender</span></h1>
+            <h1 className={` text-7xl  duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}><span className=' text-brand-blue-dark'>tu</span><span className=' text-brand-teal'>bender</span></h1>
         </div>
     );
 }
diff --git a/frontend/src/components/Onboarding/StartMachine.tsx b/frontend/src/components/Onboarding/StartMachine.tsx
index 674666c..f74851c 100644
--- a/frontend/src/components/Onboarding/StartMachine.tsx
+++ b/frontend/src/components/Onboarding/StartMachine.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import DoubleCircle from '../../images/DoubleCircle';
 import OnboardingButton from './Button';
+import Navbar from '../Navbar';
 
 function StartMachine(props: { stateChanger: () => void }) {
     return (
         <div className=' w-full h-full flex items-end justify-center bg-off-white'>
-            <div className=' flex flex-col gap-4 text-left pb-32 z-50'>
+            <Navbar />
+            <div className=' flex flex-col gap-4 text-left pb-64 lg:pb-32 z-50'>
                 <h1 className=' text-brand-blue-dark text-5xl'>1 Powering on the machine</h1>
                 <div>
-                    <h3 className=' text-brand-orange text-lg'>**Make sure to hit "Park" before powering off the machine.</h3>
-                    <h3 className=' text-brand-orange text-lg'>**Make sure everything is powerered off before proceeding.</h3>
+                    <h3 className=' text-brand-teal text-lg'>**Make sure to hit "Park" before powering off the machine.</h3>
+                    <h3 className=' text-brand-teal text-lg'>**Make sure everything is powerered off before proceeding.</h3>
                 </div>
                 <ul>
                     <li className=' text-brand-blue-light text-2xl'><span className=' text-brand-blue-dark'>1</span> Plug your machine into an outlet.</li>
@@ -20,12 +22,12 @@ function StartMachine(props: { stateChanger: () => void }) {
                     <li className=' text-brand-blue-light text-2xl'><span className=' text-brand-blue-dark'>5</span> Hit the "Park" button to reset the machine to home.</li>
                 </ul>
             </div>
-            <div className=' overflow-clip w-full h-full absolute top-0 bottom-0 flex justify-end items-center'>
-                <div className=' pr-32'>
+            <div className=' w-full h-full absolute top-0 bottom-0 flex justify-end items-end lg:items-center'>
+                <div className=' pr-32 pb-16 lg:pb-0'>
                     <OnboardingButton handleClick={props.stateChanger} />
                 </div>
-                <div className=' h-full flex justify-center absolute z-10 top-32 left-0 right-0 bottom-0'><DoubleCircle /></div>
             </div>
+            <div className='overflow-clip flex justify-center absolute z-10 top-32 left-0 right-0 bottom-0'><DoubleCircle /></div>
         </div>
     );
 }
diff --git a/frontend/src/images/HifiLogo.tsx b/frontend/src/images/HifiLogo.tsx
index d288eef..4751257 100644
--- a/frontend/src/images/HifiLogo.tsx
+++ b/frontend/src/images/HifiLogo.tsx
@@ -1,17 +1,11 @@
 import React from 'react'
 
 const HifiLogo = () =>
-    <svg width="246" height="255" viewBox="0 0 246 255" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_2796_1681)">
-            <path d="M135.697 0H73.2441V113.031H135.697V0Z" fill="#2D3243" />
-            <path d="M192.616 254.962H128.49V192.459H172.344C178.526 192.459 183.535 187.447 183.535 181.259V154.508C183.535 148.32 178.526 143.307 172.344 143.307H0V80.804H192.616C222.093 80.804 246 104.718 246 134.232V201.56C246 231.061 222.106 254.987 192.616 254.987V254.962Z" fill="#E95E28" />
-            <path d="M134.847 255H123.868C95.4395 255 72.3945 231.936 72.3945 203.485V143.307H134.847V255Z" fill="#2D3243" />
-        </g>
-        <defs>
-            <clipPath id="clip0_2796_1681">
-                <rect width="246" height="255" fill="white" />
-            </clipPath>
-        </defs>
+    <svg width="248" height="255" viewBox="0 0 248 255" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M136.177 24.5473C107.364 24.6101 104.937 3.50125 80.4755 0.0625999C76.7025 -0.464493 73.332 2.48472 73.332 6.28732V112.471H136.215V24.5473C136.215 24.5473 136.19 24.5473 136.177 24.5473Z" fill="#2D3243" />
+        <path d="M93.3418 80.1055H193.54C223.22 80.1055 247.292 104.113 247.292 133.743V201.337C247.292 230.954 223.233 254.975 193.54 254.975H128.971V192.226H173.128C179.353 192.226 184.396 187.193 184.396 180.981V154.124C184.396 147.912 179.353 142.88 173.128 142.88H94.3983" fill="#00ADB5" />
+        <path d="M135.36 255H124.305C95.6809 255 72.4771 231.845 72.4771 203.282V142.867H135.36V255Z" fill="#2D3243" />
+        <path d="M24.5982 80.1431C24.6611 108.895 3.50725 111.317 0.0612656 135.726C-0.466951 139.491 2.48854 142.855 6.29924 142.855H112.71V80.1055H24.5982C24.5982 80.1055 24.5982 80.1306 24.5982 80.1431Z" fill="#00ADB5" />
     </svg>
 
 export default HifiLogo
diff --git a/frontend/src/pages/CreateDesign.tsx b/frontend/src/pages/CreateDesign.tsx
index ff27460..24fc7f9 100644
--- a/frontend/src/pages/CreateDesign.tsx
+++ b/frontend/src/pages/CreateDesign.tsx
@@ -7,24 +7,24 @@ import Navbar from "../components/Navbar";
 
 function CreateDesign() {
     return (
-        <>
-        <Navbar/>
-        <div className='w-full h-screen bg-off-white flex flex-col justify-center items-center gap-4'>
-            <StepWrapper title="Welcome">
-                <Link to="/create/custom">
-                    <Button label='Create Custom Bend'
-                     handleClick={() => console.log('button')}
-                     customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75' />
-                </Link>
+        <div>
+            <Navbar />
+            <div className='w-full h-screen bg-off-white flex flex-col justify-center items-center gap-4'>
+                <StepWrapper title="Welcome">
+                    <Link to="/create/custom">
+                        <Button label='Create Custom Bend'
+                            handleClick={() => console.log('button')}
+                            customColors='bg-brand-teal text-brand-white hover:bg-opacity-75' />
+                    </Link>
                     <FileUploader />
-                <Link to="/onboarding">
-                    <Button label='Help'
-                        handleClick={() => console.log('button')}
-                        customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75' />
-                </Link>
-            </StepWrapper>
+                    <Link to="/onboarding">
+                        <Button label='Help'
+                            handleClick={() => console.log('button')}
+                            customColors='bg-brand-teal text-brand-white hover:bg-opacity-75' />
+                    </Link>
+                </StepWrapper>
+            </div>
         </div>
-        </>
     );
 }
 
diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx
index fc73724..bfae7f2 100644
--- a/frontend/src/pages/InputForm.tsx
+++ b/frontend/src/pages/InputForm.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Button from '../components/Button';
-import { useForm, Controller, SubmitHandler} from "react-hook-form"
-import { MenuItem, Select, TextField} from '@mui/material';
+import { useForm, Controller, SubmitHandler } from "react-hook-form"
+import { MenuItem, Select, TextField } from '@mui/material';
 import { Divider } from '@mui/material';
 import StepWrapper from '../components/StepWrapper';
 import { Link } from 'react-router-dom';
@@ -59,150 +59,150 @@ function InputForm() {
     }
   }
 
-  
+
   const customInputStyle = {
     backgroundColor: 'white',
     borderRadius: '16px',
     '& .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'white', 
+      borderColor: 'white',
     },
     '&:hover .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'white', 
+      borderColor: 'white',
     },
     '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'white', 
+      borderColor: 'white',
     },
   };
 
   const pages = [
     <StepWrapper title='What material is the tube?'>
-    <Controller
-      control={control}
-      name="material"
-      rules={{ required: true }}
-      render={({ field }) => (
-        <Select
-        {...field}
-        error={errors.material !== undefined}
-        displayEmpty
-        fullWidth
-        style={customInputStyle}
-        renderValue={(value) => (
-          <span>
-            {value ? String(value) : "Select Material"}
-          </span>
+      <Controller
+        control={control}
+        name="material"
+        rules={{ required: true }}
+        render={({ field }) => (
+          <Select
+            {...field}
+            error={errors.material !== undefined}
+            displayEmpty
+            fullWidth
+            style={customInputStyle}
+            renderValue={(value) => (
+              <span>
+                {value ? String(value) : "Select Material"}
+              </span>
+            )}
+          >
+            {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => (
+              <MenuItem
+                key={materialKey}
+                value={materialValue}>
+                {materialValue}
+              </MenuItem>
+            ))}
+          </Select>
         )}
-        >
-        {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => (
-          <MenuItem
-           key={materialKey}
-           value={materialValue}>
-          {materialValue}
-            </MenuItem>
-        ))}
-      </Select>
-      )}
-      
-    />
-    <ProgressStepOne/>
-  </StepWrapper>,
+
+      />
+      <ProgressStepOne />
+    </StepWrapper>,
     <StepWrapper title='What length is the tube?'>
-    <div className='flex flex-row gap-4 w-full'>
-      <div className='w-3/5'>
-        <Controller
-          key='length-value'
-          control={control}
-          name="length.value"
-          rules={{
-            required: true,
-            min: 0,
-          }}
-          render={({ field }) => (
-            <TextField placeholder="0"
-              key='length-value'
-              type='number'
-              {...field}
-              error={errors.length?.value !== undefined}
-              label={errors.length?.value ? 'Please enter a positive number' : ''}
-              onChange={(event) => field.onChange(+event.target.value)}
-              fullWidth
-              variant='outlined'
-              InputProps={{
-                style: customInputStyle
-              }}
-            ></TextField>
-          )}
-        />
-      </div>
-      <div className='w-2/5'>
-        <Controller
-          key='length-unit'
-          control={control}
-          name="length.unit"
-          rules={{
-            required: true,
-          }}
-          render={({ field }) => (
-            <Select
-              key='length-unit'
-              {...field}
-              error={errors.length?.unit !== undefined}
-              label={errors.length?.unit ? 'Please select a valid option' : ''}
-              displayEmpty
-              fullWidth
-              style={customInputStyle}
-              renderValue={(value) => (
-                <span>
-                  {value ? String(value) : "Select Unit"}
-                </span>
-              )}
-              
-            >
-              {Object.entries(MeasurementUnit).map(([materialKey, materialValue]) => (
-              <MenuItem key={materialKey} value={materialValue}>{materialValue}</MenuItem>
-            ))}
-            </Select>
-          )}
-        />
+      <div className='flex flex-row gap-4 w-full'>
+        <div className='w-3/5'>
+          <Controller
+            key='length-value'
+            control={control}
+            name="length.value"
+            rules={{
+              required: true,
+              min: 0,
+            }}
+            render={({ field }) => (
+              <TextField placeholder="0"
+                key='length-value'
+                type='number'
+                {...field}
+                error={errors.length?.value !== undefined}
+                label={errors.length?.value ? 'Please enter a positive number' : ''}
+                onChange={(event) => field.onChange(+event.target.value)}
+                fullWidth
+                variant='outlined'
+                InputProps={{
+                  style: customInputStyle
+                }}
+              ></TextField>
+            )}
+          />
+        </div>
+        <div className='w-2/5'>
+          <Controller
+            key='length-unit'
+            control={control}
+            name="length.unit"
+            rules={{
+              required: true,
+            }}
+            render={({ field }) => (
+              <Select
+                key='length-unit'
+                {...field}
+                error={errors.length?.unit !== undefined}
+                label={errors.length?.unit ? 'Please select a valid option' : ''}
+                displayEmpty
+                fullWidth
+                style={customInputStyle}
+                renderValue={(value) => (
+                  <span>
+                    {value ? String(value) : "Select Unit"}
+                  </span>
+                )}
+
+              >
+                {Object.entries(MeasurementUnit).map(([materialKey, materialValue]) => (
+                  <MenuItem key={materialKey} value={materialValue}>{materialValue}</MenuItem>
+                ))}
+              </Select>
+            )}
+          />
+        </div>
       </div>
-    </div>
-    <ProgressStepTwo/>
-  </StepWrapper>,  
-  <StepWrapper title='How many bends does the tube have?'>
-    <div style={{ width: '100%'}}></div>
-  <Controller
-    key='bend-count'
-    control={control}
-    name="bendCount"
-    rules={{
-      required: true,
-      min: 1,
-      validate: {
-        integer: v => Number.isInteger(v),
-      }
-    }}
-    render={({ field }) => (
-      <TextField 
-        placeholder="0"
+      <ProgressStepTwo />
+    </StepWrapper>,
+    <StepWrapper title='How many bends does the tube have?'>
+      <div style={{ width: '100%' }}></div>
+      <Controller
         key='bend-count'
-        type='number'
-        error={errors.bendCount !== undefined}
-        label={errors.bendCount ? 'Please enter a positive integer' : ''}
-        {...field}
-        onChange={(event) => field.onChange(+event.target.value)}
-  
-        InputProps={{
-          style: {
-            backgroundColor: 'white',
-            borderRadius: '16px', 
-          },
+        control={control}
+        name="bendCount"
+        rules={{
+          required: true,
+          min: 1,
+          validate: {
+            integer: v => Number.isInteger(v),
+          }
         }}
-        style={customInputStyle}
+        render={({ field }) => (
+          <TextField
+            placeholder="0"
+            key='bend-count'
+            type='number'
+            error={errors.bendCount !== undefined}
+            label={errors.bendCount ? 'Please enter a positive integer' : ''}
+            {...field}
+            onChange={(event) => field.onChange(+event.target.value)}
+
+            InputProps={{
+              style: {
+                backgroundColor: 'white',
+                borderRadius: '16px',
+              },
+            }}
+            style={customInputStyle}
+          />
+        )}
       />
-    )}
-  />
-  <ProgressStepThree/>
-</StepWrapper>,
+      <ProgressStepThree />
+    </StepWrapper>,
   ]
 
   const deleteBend = () => {
@@ -221,15 +221,15 @@ function InputForm() {
   const bendConfig = () => {
     const bendIndex = pageNumber - pages.length
     const fields: { key: BendFields, label: string }[] = [
-      { key: BendFields.straightTubeBefore, label: 'Amount of straight tube before a bend'},
+      { key: BendFields.straightTubeBefore, label: 'Amount of straight tube before a bend' },
       { key: BendFields.direction, label: 'Bend direction' },
       { key: BendFields.radius, label: 'Bend radius' },
       { key: BendFields.arcLength, label: 'Bend arc length' },
       { key: BendFields.straightTubeAfter, label: 'Amount of straight tube after a bend' },
     ]
 
-    return <div className='w-full h-full flex justify-center relative'> 
-    <div className="sidebar absolute top-5 left-10 p-4 w-1/8">
+    return <div className='w-full h-full flex justify-center relative'>
+      <div className="sidebar absolute top-5 left-10 p-4 w-1/8">
         <BendSidebar
           currentBendIndex={pageNumber - pages.length}
           bendCount={getValues('bendCount')}
@@ -240,49 +240,49 @@ function InputForm() {
             setPageNumber(pages.length + newBendCount - 1); // Navigate to the new bend
           }}
         />
+      </div>
+      <div className="w-full h-full flex flex-col flex-grow items-center">
+        <div className='flex flex-row gap-4 w-full justify-center flex-grow'>
+          <StepWrapper>
+            <div className='w-full flex flex-col gap-2 items-center'>
+              {fields.map(value =>
+                <div key={value.key}>
+                  <Divider sx={{ opacity: 0.6 }} />
+                  <div className=' pt-2 flex flex-row w-96 justify-between items-center'>
+                    <h3 className=' text-brand-blue-dark text-xl w-1/2'>{value.label}</h3>
+                    <div className=' w-1/3'>
+                      <Controller
+                        key={`bends-${bendIndex}-${value.key}`}
+                        control={control}
+                        name={`bends.${bendIndex}.${value.key}.value`}
+                        rules={{
+                          required: true,
+                          ...(value.key !== BendFields.direction && { min: 0 }), // Exclude the min rule for 'direction'
+                        }}
+                        render={({ field }) => (
+                          <TextField placeholder={value.key === BendFields.direction ? '' : '0'}
+                            key={`bends-${bendIndex}-${value.key}`}
+                            fullWidth
+                            type={value.key === BendFields.direction ? 'text' : 'number'}
+                            error={errors.bends?.[bendIndex]?.[value.key] !== undefined}
+                            {...field}
+                            onChange={(event) => {
+                              const newValue = value.key === BendFields.direction ? event.target.value : +event.target.value;
+                              field.onChange(newValue);
+                            }}
+                            InputProps={{
+                              style: customInputStyle,
+                            }}
+                          ></TextField>
+                        )}
+                      /></div></div>
+                </div>
+              )}
+              <button onClick={deleteBend} className='w-52 h-12 font-semibold text-error-red underline'>Delete bend {bendIndex + 1}</button>
+            </div>
+          </StepWrapper>
         </div>
-    <div className="w-full h-full flex flex-col flex-grow items-center">
-    <div className='flex flex-row gap-4 w-full justify-center flex-grow'>
-    <StepWrapper>
-      <div className='w-full flex flex-col gap-2 items-center'>
-        {fields.map(value =>
-          <div key={value.key}>
-            <Divider sx={{ opacity: 0.6 }} />
-            <div className=' pt-2 flex flex-row w-96 justify-between items-center'>
-              <h3 className=' text-brand-blue-dark text-xl w-1/2'>{value.label}</h3>
-              <div className=' w-1/3'>
-                <Controller
-                  key={`bends-${bendIndex}-${value.key}`}
-                  control={control}
-                  name={`bends.${bendIndex}.${value.key}.value`}
-                  rules={{
-                    required: true,
-                    ...(value.key !== BendFields.direction && { min: 0 }), // Exclude the min rule for 'direction'
-                  }}
-                  render={({ field }) => (
-                    <TextField placeholder={value.key === BendFields.direction ? '' : '0'}
-                      key={`bends-${bendIndex}-${value.key}`}
-                      fullWidth
-                      type={value.key === BendFields.direction ? 'text' : 'number'}
-                      error={errors.bends?.[bendIndex]?.[value.key] !== undefined}
-                      {...field}
-                      onChange={(event) => {
-                        const newValue = value.key === BendFields.direction ? event.target.value : +event.target.value;
-                        field.onChange(newValue);
-                      }}                      
-                      InputProps={{
-                        style: customInputStyle,
-                      }}
-                    ></TextField>
-                  )}
-                /></div></div>
-          </div>
-        )}
-      <button onClick={deleteBend} className='w-52 h-12 font-semibold text-error-red underline'>Delete bend {bendIndex + 1}</button>
       </div>
-    </StepWrapper>
-    </div>
-    </div>
     </div>
   }
 
@@ -291,65 +291,65 @@ function InputForm() {
     else if (pageNumber < pages.length + getValues('bendCount')) return bendConfig()
     else return <StepWrapper title='Download GCode'>
       <Button label='Download File'
-       type='submit'
-       handleClick={() => console.log('button')}
-       customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75'></Button>
+        type='submit'
+        handleClick={() => console.log('button')}
+        customColors='bg-brand-teal text-brand-white hover:bg-opacity-75'></Button>
       <Button label='Upload To Machine'
-       handleClick={() => console.log('button')}
-       customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75'></Button>
+        handleClick={() => console.log('button')}
+        customColors='bg-brand-teal text-brand-white hover:bg-opacity-75'></Button>
     </StepWrapper>
   }
 
   return (
     <>
-      <Navbar/>
+      <Navbar />
       <ThemeProvider theme={theme}>
-      <div className="flex flex-row justify-center items-center bg-off-white">
-      <form onSubmit={handleSubmit(onSubmit)} className='w-full h-screen flex flex-col bg-off-white justify-center items-center pt-16 font-inter'>
-        {pageManager()}
-        <div className={`pb-32 w-1/2 flex flex-row items-center ${pageNumber !== 0 ? 'justify-between' : 'justify-end'} place-content-end place-items-end`}>
-          {pageNumber !== 0 && <Link to="#" onClick={decrementPage} className="text-sm font-semibold text-current no-underline">
-            Back to
-            {pageNumber === 1
-              ? " material"
-              : pageNumber === 2
-                ? " length"
-                : pageNumber === 3
-                 ? " number of bends"
-                 : pageNumber < pages.length + getValues('bendCount')
-                  ? ` bend ${pageNumber - 2}`
-                  : " bends"} </Link>}
-        <div className={'ml-auto'}>
-          {pageNumber < pages.length + getValues('bendCount') && (
-            <Button 
-              label={"Next, " + (
-                pageNumber === 0 
-                  ? "length"
-                  : pageNumber === 1
-                    ? "number of bends"
-                    : pageNumber === 2
-                      ? "bend 1"
-                      : pageNumber < 2 + getValues('bendCount')
-                        ? `bend ${pageNumber - 1}`
-                          : "download")
-              }
-              handleClick={() => incrementPage()} 
-              disabled={!isValid || pageNumber >= pages.length + getValues('bendCount')}
-            />
-          )}
-          {pageNumber === pages.length + getValues('bendCount')
-           && <Link to="/">
-            <Button label='Back to home'
-                     handleClick={() => console.log('button')}/>
-                     </Link>}
+        <div className="flex flex-row justify-center items-center bg-off-white">
+          <form onSubmit={handleSubmit(onSubmit)} className='w-full h-screen flex flex-col bg-off-white justify-center items-center pt-16 font-inter'>
+            {pageManager()}
+            <div className={`pb-32 w-1/2 flex flex-row items-center ${pageNumber !== 0 ? 'justify-between' : 'justify-end'} place-content-end place-items-end`}>
+              {pageNumber !== 0 && <Link to="#" onClick={decrementPage} className="text-sm font-semibold text-current no-underline">
+                Back to
+                {pageNumber === 1
+                  ? " material"
+                  : pageNumber === 2
+                    ? " length"
+                    : pageNumber === 3
+                      ? " number of bends"
+                      : pageNumber < pages.length + getValues('bendCount')
+                        ? ` bend ${pageNumber - 2}`
+                        : " bends"} </Link>}
+              <div className={'ml-auto'}>
+                {pageNumber < pages.length + getValues('bendCount') && (
+                  <Button
+                    label={"Next, " + (
+                      pageNumber === 0
+                        ? "length"
+                        : pageNumber === 1
+                          ? "number of bends"
+                          : pageNumber === 2
+                            ? "bend 1"
+                            : pageNumber < 2 + getValues('bendCount')
+                              ? `bend ${pageNumber - 1}`
+                              : "download")
+                    }
+                    handleClick={() => incrementPage()}
+                    disabled={!isValid || pageNumber >= pages.length + getValues('bendCount')}
+                  />
+                )}
+                {pageNumber === pages.length + getValues('bendCount')
+                  && <Link to="/">
+                    <Button label='Back to home'
+                      handleClick={() => console.log('button')} />
+                  </Link>}
+              </div>
+            </div>
+          </form>
         </div>
-       </div>
-      </form>
-      </div>
       </ThemeProvider>
     </>
   );
-  
+
 }
 
 export default InputForm; 
diff --git a/frontend/src/pages/Onboarding.tsx b/frontend/src/pages/Onboarding.tsx
index e3201b9..38bc5b1 100644
--- a/frontend/src/pages/Onboarding.tsx
+++ b/frontend/src/pages/Onboarding.tsx
@@ -9,12 +9,14 @@ import PrepareTube from '../components/Onboarding/PrepareTube';
 function Onboarding() {
     const [currentPage, setCurrentPage] = useState(0)
 
+    const incrementPage = () => setCurrentPage(currentPage + 1)
+
     const pages = [
-        <SplashScreen stateChanger={() => setCurrentPage(currentPage + 1)} />,
-        <QuickStartTitleScreen stateChanger={() => setCurrentPage(currentPage + 1)} />,
-        <StartMachine stateChanger={() => setCurrentPage(currentPage + 1)} />,
-        <PrepareTube stateChanger={() => setCurrentPage(currentPage + 1)} />,
-        <QuickStartEndScreen stateChanger={() => setCurrentPage(currentPage + 1)} />,
+        <SplashScreen stateChanger={incrementPage} />,
+        <QuickStartTitleScreen stateChanger={incrementPage} />,
+        <StartMachine stateChanger={incrementPage} />,
+        <PrepareTube stateChanger={incrementPage} />,
+        <QuickStartEndScreen stateChanger={incrementPage} />,
     ]
 
     return (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 461acca..3530e26 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
           'orange': '#EB5E28',
           'white': '#FFFFFF',
           'light-grey': '#C4C4C4',
-          'temp-teal': '#00ADB5',
+          'teal': '#00ADB5',
         },
         'error': {
           'red': '#CA0707'
diff --git a/website/src/App.css b/website/src/App.css
index 6551596..575e2d9 100644
--- a/website/src/App.css
+++ b/website/src/App.css
@@ -1,6 +1,6 @@
 .App {
   text-align: center;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .App-logo {
@@ -30,23 +30,21 @@
 }
 
 :root {
-  --brand-temp-teal: #00ADB5;
-  --white-hover: #DBE4EF;
+  --brand-teal: #00adb5;
+  --white-hover: #dbe4ef;
 }
 
-
 .bgAnvil {
   position: relative;
   width: 100%;
   height: 100%;
   background-color: var(--white-hover);
-  background-image: url('AnvilClose3Flipped.png');
+  background-image: url("AnvilClose3Flipped.png");
   background-size: contain;
-  background-position:100% 50px;
+  background-position: 100% 50px;
   background-repeat: no-repeat;
 }
 
-
 .bigWordmark {
   margin-bottom: 10%;
 }
@@ -64,7 +62,6 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-
 }
 .textbox-col {
   display: flex;
@@ -72,19 +69,18 @@
   align-items: flex-start;
   width: 100%;
   padding-top: 2%;
-  padding-bottom: 5%; 
-  padding-left: 5%; 
-  padding-right: 5%; 
+  padding-bottom: 5%;
+  padding-left: 5%;
+  padding-right: 5%;
   box-sizing: border-box; /* Include padding in the width calculation */
-
 }
 .formContainer {
-    display: flex;
-    flex-direction: column;
-    max-width: 30%;
-    align-items: center;
-    justify-content: center;
-    padding-left: 5%;
+  display: flex;
+  flex-direction: column;
+  max-width: 30%;
+  align-items: center;
+  justify-content: center;
+  padding-left: 5%;
 }
 .text-left-align {
   text-align: left;
@@ -93,7 +89,6 @@
   font-size: 48px;
   font-weight: 400;
   margin-bottom: 5%;
-
 }
 .text-par {
   font-size: 32px;
@@ -103,9 +98,9 @@
   background-color: var(--white-hover);
   border-radius: 20px;
   padding-top: 2%;
-  padding-bottom: 5%; 
-  padding-left: 5%; 
-  padding-right: 5%; 
+  padding-bottom: 5%;
+  padding-left: 5%;
+  padding-right: 5%;
   margin: 2%;
   flex: 1;
 }
@@ -115,26 +110,23 @@
   width: 100%;
   height: 100%;
 }
-.button-brand-temp-teal {
-  background-color: var(--brand-temp-teal);
-  color: white; 
-  border-radius: 16px; 
+.button-brand-teal {
+  background-color: var(--brand-teal);
+  color: white;
+  border-radius: 16px;
   width: 100%;
   border: none;
-  padding: 16px 24px; 
-  font-size: 20px; 
+  padding: 16px 24px;
+  font-size: 20px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.3s ease;
-
-
 }
 
 .button:hover {
   opacity: 0.75;
 }
 
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/website/src/Button.tsx b/website/src/Button.tsx
index a13ab54..1ed1b67 100644
--- a/website/src/Button.tsx
+++ b/website/src/Button.tsx
@@ -1,9 +1,11 @@
-function Button(props: { label: string, handleClick: () => void, customClassName?:string }) {
+import React from 'react'
+
+function Button(props: { label: string, handleClick: () => void, customClassName?: string }) {
     const className = props.customClassName || '';
     return (
         <button onClick={props.handleClick} className={`button ${className}`}>
             {props.label}
         </button>
     );
-  }
+}
 export default Button;
diff --git a/website/src/PersonalInfoForm.tsx b/website/src/PersonalInfoForm.tsx
index 7420f82..45e9903 100644
--- a/website/src/PersonalInfoForm.tsx
+++ b/website/src/PersonalInfoForm.tsx
@@ -3,96 +3,96 @@ import TextField from '@mui/material/TextField';
 import Grid from '@mui/material/Grid';
 import Button from './Button';
 
-function PersonalInfoForm(){
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-    });
+function PersonalInfoForm() {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+  });
 
-    const handleChange = (e:  React.ChangeEvent<HTMLInputElement>) => {
-        const { name, value } = e.target;
-        setFormData({
-            ...formData,
-            [name]: value
-        });
-    }
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+  }
 
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        console.log(formData);
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    console.log(formData);
+  }
+  const customInputStyle = {
+    backgroundColor: 'white',
+    borderRadius: '16px',
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent',
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent',
+    },
+    '&.MuiFocused .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent',
+    },
+    '& .MuiInputLabel-root': {
+      color: '#C4C4C4',
     }
-    const customInputStyle = {
-      backgroundColor: 'white',
-      borderRadius: '16px',
-      '& .MuiOutlinedInput-notchedOutline': {
-        borderColor: 'transparent', 
-      },
-      '&:hover .MuiOutlinedInput-notchedOutline': {
-        borderColor: 'transparent', 
-      },
-      '&.MuiFocused .MuiOutlinedInput-notchedOutline': {
-        borderColor: 'transparent', 
-      },
-      '& .MuiInputLabel-root': {
-        color:'#C4C4C4',
-      }
-    };
+  };
 
-    return (
-        <form onSubmit={handleSubmit}>
-          <Grid container spacing={2}>
-            <Grid item xs={6}>
-              <TextField
-                fullWidth
-                label="First name"
-                name="firstName"
-                value={formData.firstName}
-                onChange={handleChange}
-                sx={customInputStyle}
-              />
-            </Grid>
-            <Grid item xs={6}>
-              <TextField
-                fullWidth
-                label="Last name"
-                name="lastName"
-                value={formData.lastName}
-                onChange={handleChange}
-                sx={customInputStyle}
+  return (
+    <form onSubmit={handleSubmit}>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="First name"
+            name="firstName"
+            value={formData.firstName}
+            onChange={handleChange}
+            sx={customInputStyle}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="Last name"
+            name="lastName"
+            value={formData.lastName}
+            onChange={handleChange}
+            sx={customInputStyle}
 
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label="Email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                sx={customInputStyle}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            fullWidth
+            label="Email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            sx={customInputStyle}
 
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label="Phone number"
-                name="phone"
-                value={formData.phone}
-                onChange={handleChange}
-                sx={customInputStyle}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            fullWidth
+            label="Phone number"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            sx={customInputStyle}
 
-              />
-            </Grid>
-            <Grid item xs={12}>
-            <Button label='Request demo'
-                handleClick={() => console.log('button')}
-                customClassName='button-brand-temp-teal hover'></Button>
-            </Grid>
-          </Grid>
-        </form>
-    );
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Button label='Request demo'
+            handleClick={() => console.log('button')}
+            customClassName='button-brand-teal hover'></Button>
+        </Grid>
+      </Grid>
+    </form>
+  );
 }
 
 export default PersonalInfoForm;
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 48d29f6..117a4e6 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
             'hover': '#DBE4EF'
           },
           'light-grey': '#C4C4C4',
-          'temp-teal': '#00ADB5',
+          'teal': '#00ADB5',
         },
         'error': {
           'red': '#CA0707'