From e50ee2c6061eb70896722375305a09bcbd9d0e7d Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Fri, 15 Mar 2024 19:38:23 -0400 Subject: [PATCH 01/12] matched material and length pages --- frontend/src/enums.tsx | 6 ++-- frontend/src/pages/InputForm.tsx | 49 +++++++++++++++++++++++++------- frontend/tailwind.config.js | 1 + 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/frontend/src/enums.tsx b/frontend/src/enums.tsx index 661e013..30f156c 100644 --- a/frontend/src/enums.tsx +++ b/frontend/src/enums.tsx @@ -10,8 +10,10 @@ export enum MeasurementUnit { } export enum BendFields { + straightTubeBefore = 'straightTubeBefore', + direction = 'direction', radius = 'radius', arcLength = 'arcLength', extrusion = 'extrusion', - straightTube = 'straightTube', -} \ No newline at end of file + straightTubeAfter = 'straightTubeAfter', +} diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx index 8281fa9..6ca9010 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 { MenuItem, Select, TextField} from '@mui/material'; import { Divider } from '@mui/material'; import StepWrapper from '../components/StepWrapper'; import { Link } from 'react-router-dom'; @@ -42,6 +42,7 @@ function InputForm() { } } + const customInputStyle = { backgroundColor: 'white', borderRadius: '16px', @@ -56,7 +57,6 @@ function InputForm() { }, }; - const pages = [ + renderValue={(value) => ( + + {value ? String(value) : "Select Material"} + + )} + > {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => ( - {materialValue} + {materialValue} ))} )} @@ -91,7 +99,7 @@ function InputForm() { min: 0, }} render={({ field }) => ( - ( + + {value ? String(value) : "Inches"} + + )} + > {Object.entries(MeasurementUnit).map(([materialKey, materialValue]) => ( {materialValue} @@ -188,10 +203,12 @@ function InputForm() { const bendIndex = pageNumber - pages.length const fields: { key: BendFields, label: string }[] = [ - { key: BendFields.radius, label: 'Bend Radius' }, - { key: BendFields.arcLength, label: 'Arc Length' }, - { key: BendFields.extrusion, label: 'Extrusion Length' }, - { key: BendFields.straightTube, label: 'Straight Tube' }, + { 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: 'Arc length' }, + { key: BendFields.extrusion, label: 'Extrusion length' }, + { key: BendFields.straightTubeAfter, label: 'Amount of straight tube after a bend' }, ] return @@ -250,7 +267,17 @@ function InputForm() { {pageNumber !== 0 && Back} {pageNumber < pages.length + getValues('bendCount') && ( ); + } + + const bendSideBar = () => { + if (pageNumber >= 3 && pageNumber <= pages.length + getValues('bendCount')) { + console.log("bend sidebar") + const bendButtons = []; + for (let index = 0; index < getValues('bendCount'); index++) { + bendButtons.push( + + setPageNumber(3 + index)} + /> + ); + } + return ( +
+

Bends

+ {bendButtons} +
+ ); + } + } + + return ( <> -
+
+ {bendSideBar()} +
+ {pageManager()}
{pageNumber !== 0 && (pageNumber <= 3 || pageNumber != pages.length + getValues('bendCount') - 1) && diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 4904fc1..3ab5eb3 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -5,6 +5,7 @@ module.exports = { extend: { colors: { 'off': { 'white': '#ecf1f6' }, + 'dark-white': '#DBE4EF', 'brand': { 'blue': { 'light': '#778DA9', From b248c9bb31590881945b0f2b44352869ffd4c182 Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Tue, 19 Mar 2024 20:14:10 -0400 Subject: [PATCH 05/12] sidebar --- frontend/src/pages/InputForm.tsx | 86 ++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx index 37b9d49..22fc838 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, Autocomplete} from '@mui/material'; import { Divider } from '@mui/material'; import StepWrapper from '../components/StepWrapper'; import { Link } from 'react-router-dom'; @@ -65,25 +65,26 @@ function InputForm() { rules={{ required: true }} render={({ field }) => ( + {...field} + error={errors.material !== undefined} + displayEmpty + fullWidth + style={customInputStyle} + renderValue={(value) => ( + + {value ? String(value) : "Select Material"} + + )} + > + {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => ( + {materialValue} + ))} + )} + /> , @@ -211,9 +212,14 @@ function InputForm() { { key: BendFields.straightTubeAfter, label: 'Amount of straight tube after a bend' }, ] - return -
- + return
+
+ {bendSideBar()} +
+
+
+ +
{fields.map(value =>
@@ -244,9 +250,12 @@ function InputForm() { />
)} -
+
+
+
+ } const pageManager = () => { @@ -258,6 +267,7 @@ function InputForm() { } + //TODO: move to separate component function BendButton(props: { bendNum: number, label: string, handleClick: () => void }) { const colors = pageNumber === props.bendNum + 3 ? 'text-brand-blue-dark bg-dark-white' : 'text-brand-light-grey bg-off-white' @@ -274,6 +284,19 @@ function InputForm() { ); } + const addBendButton = + + const bendSideBar = () => { if (pageNumber >= 3 && pageNumber <= pages.length + getValues('bendCount')) { console.log("bend sidebar") @@ -291,8 +314,8 @@ function InputForm() { } return (
-

Bends

- {bendButtons} + {bendButtons} + {addBendButton}
); } @@ -302,13 +325,11 @@ function InputForm() { return ( <> -
- {bendSideBar()} -
+
{pageManager()}
- {pageNumber !== 0 && (pageNumber <= 3 || pageNumber != pages.length + getValues('bendCount') - 1) && + {pageNumber !== 0 && Back to {pageNumber === 1 ? " materials" @@ -316,10 +337,10 @@ function InputForm() { ? " length" : pageNumber === 3 ? " number of bends" - : pageNumber != pages.length + getValues('bendCount') + : pageNumber < pages.length + getValues('bendCount') ? ` bend ${pageNumber - 2}` : " bends"} } -
+
{pageNumber < pages.length + getValues('bendCount') && (
+
); From 2a26be8d55d33406d424e78a6c507438ec3c69a6 Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Tue, 19 Mar 2024 20:40:36 -0400 Subject: [PATCH 06/12] font --- frontend/src/pages/InputForm.tsx | 5 +++-- frontend/tailwind.config.js | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx index 22fc838..97910f5 100644 --- a/frontend/src/pages/InputForm.tsx +++ b/frontend/src/pages/InputForm.tsx @@ -45,6 +45,7 @@ function InputForm() { const customInputStyle = { backgroundColor: 'white', + font: 'inter', borderRadius: '16px', '& .MuiOutlinedInput-notchedOutline': { borderColor: 'white', @@ -71,7 +72,7 @@ function InputForm() { fullWidth style={customInputStyle} renderValue={(value) => ( - + {value ? String(value) : "Select Material"} )} @@ -326,7 +327,7 @@ function InputForm() { <>
-
+ {pageManager()}
{pageNumber !== 0 && diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 3ab5eb3..80cc8d3 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -19,7 +19,10 @@ module.exports = { 'error': { 'red': '#CA0707' } - } + }, + fontFamily: { + 'inter': ['Inter', 'sans-serif'], + }, }, }, plugins: [], From 8887b7a0c9791d6f9b25d332f85a972990027fce Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Thu, 21 Mar 2024 11:59:09 -0400 Subject: [PATCH 07/12] new sidebar and positioning --- frontend/src/components/BendSidebar.tsx | 38 +++++++ frontend/src/pages/InputForm.tsx | 128 +++++++++--------------- 2 files changed, 87 insertions(+), 79 deletions(-) create mode 100644 frontend/src/components/BendSidebar.tsx diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx new file mode 100644 index 0000000..c43b191 --- /dev/null +++ b/frontend/src/components/BendSidebar.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +interface BendSidebarProps { + currentBendIndex: number; + bendCount: number; + onSelectBend: (index: number) => void; + onAddBend: () => void; +} +const BendSidebar: React.FC = ({ + currentBendIndex, + bendCount, + onSelectBend, + onAddBend, +}) => { + return ( +
{/* Increased base font size for all child components */} +
    + {[...Array(bendCount)].map((_, index) => ( +
  • onSelectBend(index)} + > + {`Bend ${index + 1}`} +
    • + ))} +
+ +
+ ); +}; +export default BendSidebar; diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx index 97910f5..725e093 100644 --- a/frontend/src/pages/InputForm.tsx +++ b/frontend/src/pages/InputForm.tsx @@ -1,16 +1,30 @@ import React, { useState } from 'react'; import Button from '../components/Button'; import { useForm, Controller, SubmitHandler} from "react-hook-form" -import { MenuItem, Select, TextField, Autocomplete} from '@mui/material'; +import { MenuItem, Select, TextField} from '@mui/material'; import { Divider } from '@mui/material'; import StepWrapper from '../components/StepWrapper'; import { Link } from 'react-router-dom'; import { MaterialEnum, MeasurementUnit, BendFields } from '../enums'; import { FormValues } from '../types'; import Navbar from '../components/Navbar'; +import BendSidebar from '../components/BendSidebar'; import ProgressStepOne from '../images/ProgressStepOne'; import ProgressStepTwo from '../images/ProgressStepTwo'; import ProgressStepThree from '../images/ProgressStepThree'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +// Define your custom theme +const theme = createTheme({ + typography: { + fontFamily: 'Inter, sans-serif', // Set Inter font as default + }, + palette: { + text: { + primary: '#778DA9', // regular menu item + }, + }, +}); function InputForm() { const [pageNumber, setPageNumber] = useState(0); @@ -45,7 +59,6 @@ function InputForm() { const customInputStyle = { backgroundColor: 'white', - font: 'inter', borderRadius: '16px', '& .MuiOutlinedInput-notchedOutline': { borderColor: 'white', @@ -72,7 +85,7 @@ function InputForm() { fullWidth style={customInputStyle} renderValue={(value) => ( - + {value ? String(value) : "Select Material"} )} @@ -80,8 +93,9 @@ function InputForm() { {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => ( {materialValue} + value={materialValue}> + {materialValue} + ))} )} @@ -101,7 +115,7 @@ function InputForm() { min: 0, }} render={({ field }) => ( - )} /> @@ -135,8 +150,8 @@ function InputForm() { fullWidth style={customInputStyle} renderValue={(value) => ( - - {value ? String(value) : "Inches"} + + {value ? String(value) : "Select Unit"} )} @@ -166,7 +181,7 @@ function InputForm() { }} render={({ field }) => ( { const bendIndex = pageNumber - pages.length - const fields: { key: BendFields, label: string }[] = [ { key: BendFields.straightTubeBefore, label: 'Amount of straight tube before a bend'}, { key: BendFields.direction, label: 'Bend direction' }, @@ -213,19 +227,28 @@ function InputForm() { { key: BendFields.straightTubeAfter, label: 'Amount of straight tube after a bend' }, ] - return
-
- {bendSideBar()} -
-
-
- -
+ return
+
+ setPageNumber(pages.length + index)} + onAddBend={() => { + const newBendCount = getValues('bendCount') + 1; + setValue('bendCount', newBendCount); + setPageNumber(pages.length + newBendCount - 1); // Navigate to the new bend + }} + /> +
+
+
+ +
{fields.map(value =>
-

{value.label}

+

{value.label}

)} - +
@@ -268,72 +291,18 @@ function InputForm() { } - //TODO: move to separate component - function BendButton(props: { bendNum: number, label: string, handleClick: () => void }) { - const colors = pageNumber === props.bendNum + 3 ? 'text-brand-blue-dark bg-dark-white' : 'text-brand-light-grey bg-off-white' - - return ( - ); - } - - const addBendButton = - - - const bendSideBar = () => { - if (pageNumber >= 3 && pageNumber <= pages.length + getValues('bendCount')) { - console.log("bend sidebar") - const bendButtons = []; - for (let index = 0; index < getValues('bendCount'); index++) { - bendButtons.push( - - setPageNumber(3 + index)} - /> - ); - } - return ( -
- {bendButtons} - {addBendButton} -
- ); - } - } - - return ( <> +
{pageManager()} -
- {pageNumber !== 0 && +
+ {pageNumber !== 0 && Back to {pageNumber === 1 - ? " materials" + ? " material" : pageNumber === 2 ? " length" : pageNumber === 3 @@ -359,11 +328,12 @@ function InputForm() { disabled={!isValid || pageNumber >= pages.length + getValues('bendCount')} /> )} - {pageNumber === pages.length + getValues('bendCount') && Back to Home} + {pageNumber === pages.length + getValues('bendCount') && Back to Home}
+ ); From f675ea93a8cd563cf7f1b97044fe2a6b02a30709 Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Thu, 21 Mar 2024 17:59:13 -0400 Subject: [PATCH 08/12] new wordmark --- frontend/src/components/BendSidebar.tsx | 4 ++-- frontend/src/components/Navbar.tsx | 9 +++++---- frontend/src/images/LogoSVG.tsx | 11 +++++++++++ frontend/src/images/Wordmark.tsx | 8 ++++++++ frontend/tailwind.config.js | 3 ++- 5 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 frontend/src/images/LogoSVG.tsx create mode 100644 frontend/src/images/Wordmark.tsx diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx index c43b191..39a54e7 100644 --- a/frontend/src/components/BendSidebar.tsx +++ b/frontend/src/components/BendSidebar.tsx @@ -17,7 +17,7 @@ const BendSidebar: React.FC = ({ {[...Array(bendCount)].map((_, index) => (
  • onSelectBend(index)} @@ -27,7 +27,7 @@ const BendSidebar: React.FC = ({ ))} ); } -export default Button; \ No newline at end of file +export default Button; diff --git a/frontend/src/components/FileUploader.tsx b/frontend/src/components/FileUploader.tsx index 705ae9e..c8b41fc 100644 --- a/frontend/src/components/FileUploader.tsx +++ b/frontend/src/components/FileUploader.tsx @@ -32,7 +32,9 @@ const FileUploader: React.FC = () => { return (
    -
    ); }; diff --git a/frontend/src/pages/CreateDesign.tsx b/frontend/src/pages/CreateDesign.tsx index c21a142..2543221 100644 --- a/frontend/src/pages/CreateDesign.tsx +++ b/frontend/src/pages/CreateDesign.tsx @@ -12,7 +12,9 @@ function CreateDesign() {
    - - + + } @@ -328,7 +332,11 @@ function InputForm() { disabled={!isValid || pageNumber >= pages.length + getValues('bendCount')} /> )} - {pageNumber === pages.length + getValues('bendCount') && Back to Home} + {pageNumber === pages.length + getValues('bendCount') + && +
    • diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 08f06c8..461acca 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -15,6 +15,7 @@ module.exports = { 'orange': '#EB5E28', 'white': '#FFFFFF', 'light-grey': '#C4C4C4', + 'temp-teal': '#00ADB5', }, 'error': { 'red': '#CA0707' @@ -22,7 +23,6 @@ module.exports = { }, fontFamily: { 'inter': ['Inter', 'sans-serif'], - 'gothic': ['All Round Gothic', 'sans-serif'], }, }, }, From 18181803c1af07e932937e3e401be4fc358eeee6 Mon Sep 17 00:00:00 2001 From: michelleli04 Date: Thu, 21 Mar 2024 19:42:02 -0400 Subject: [PATCH 11/12] sidebar teal button add --- frontend/src/components/BendSidebar.tsx | 2 +- frontend/src/pages/InputForm.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx index 39a54e7..5e5c0c8 100644 --- a/frontend/src/components/BendSidebar.tsx +++ b/frontend/src/components/BendSidebar.tsx @@ -27,7 +27,7 @@ const BendSidebar: React.FC = ({ ))}