Cleanup onboarding page

GenerateNU · Apr 17, 2024 · c53c92a · c53c92a
1 parent 2fedac9
commit c53c92a
Show file tree

Hide file tree

Showing 17 changed files with 397 additions and 409 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
-        </>
     );
 }