diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx new file mode 100644 index 0000000..5e5c0c8 --- /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 */} + + +
+ ); +}; +export default BendSidebar; diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx index e931801..5f5e122 100644 --- a/frontend/src/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -1,10 +1,10 @@ import React from "react"; -function Button(props: { label: string, handleClick: () => void, disabled?: boolean, alt?: boolean }) { - const colors = props.alt ? ' disabled:bg-error-red text-brand-blue hover:bg-brand-white' : 'bg-brand-blue disabled:bg-error-red text-brand-white hover:bg-brand-blue-light' +function Button(props: { label: string, handleClick: () => void, disabled?: boolean, alt?: boolean, customColors?:string }) { + const colors = props.customColors || (props.alt ? ' disabled:bg-error-red text-brand-blue hover:bg-brand-white' : 'bg-brand-blue disabled:bg-error-red text-brand-white hover:bg-brand-blue-light') return ( ); } -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/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index f2d243b..5c17240 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,14 +1,15 @@ import React from 'react'; -import GrayBoxImage from '../images/box'; import { Link } from 'react-router-dom'; +import LogoSVG from '../images/LogoSVG'; +import Wordmark from '../images/Wordmark'; const Navbar = () => { return (
- - - tubender + + +
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/images/LogoSVG.tsx b/frontend/src/images/LogoSVG.tsx new file mode 100644 index 0000000..36a9b7f --- /dev/null +++ b/frontend/src/images/LogoSVG.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +const LogoSVG = () => ( + + + + + + +); + +export default LogoSVG; diff --git a/frontend/src/images/Wordmark.tsx b/frontend/src/images/Wordmark.tsx new file mode 100644 index 0000000..7f530c6 --- /dev/null +++ b/frontend/src/images/Wordmark.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +const Wordmark = () => ( + + + +); + +export default Wordmark; diff --git a/frontend/src/pages/CreateDesign.tsx b/frontend/src/pages/CreateDesign.tsx index 505b4d6..2543221 100644 --- a/frontend/src/pages/CreateDesign.tsx +++ b/frontend/src/pages/CreateDesign.tsx @@ -3,18 +3,24 @@ import { Link } from "react-router-dom"; import Button from "../components/Button"; import FileUploader from "../components/FileUploader"; import StepWrapper from "../components/StepWrapper"; +import Navbar from "../components/Navbar"; function CreateDesign() { return ( + <> +
-
+ ); } -export default CreateDesign; \ No newline at end of file +export default CreateDesign; diff --git a/frontend/src/pages/InputForm.tsx b/frontend/src/pages/InputForm.tsx index 8281fa9..7601049 100644 --- a/frontend/src/pages/InputForm.tsx +++ b/frontend/src/pages/InputForm.tsx @@ -1,16 +1,31 @@ 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'; 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); @@ -42,6 +57,7 @@ function InputForm() { } } + const customInputStyle = { backgroundColor: 'white', borderRadius: '16px', @@ -56,7 +72,6 @@ function InputForm() { }, }; - const pages = [ ( + {Object.entries(MaterialEnum).map(([materialKey, materialValue]) => ( + + {materialValue} + + ))} + )} + /> , @@ -91,7 +116,7 @@ function InputForm() { min: 0, }} render={({ field }) => ( - ( + + {value ? String(value) : "Select Unit"} + + )} + > {Object.entries(MeasurementUnit).map(([materialKey, materialValue]) => ( {materialValue} @@ -149,7 +181,7 @@ function InputForm() { }} render={({ field }) => ( { 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 -
- + 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}

field.onChange(+event.target.value)} InputProps={{ - style: customInputStyle + style: customInputStyle, }} > )} />
)} +
- +
+
+
} const pageManager = () => { if (pageNumber < pages.length) return pages[pageNumber] else if (pageNumber < pages.length + getValues('bendCount')) return bendConfig() else return - - + + } return ( <> -
+ +
+ {pageManager()} -
- {pageNumber !== 0 && Back} +
+ {pageNumber !== 0 && + Back to + {pageNumber === 1 + ? " material" + : pageNumber === 2 + ? " length" + : pageNumber === 3 + ? " number of bends" + : pageNumber < pages.length + getValues('bendCount') + ? ` bend ${pageNumber - 2}` + : " bends"} } +
{pageNumber < pages.length + getValues('bendCount') && (
+
+
+ ); } -export default InputForm; \ No newline at end of file +export default InputForm; diff --git a/frontend/src/types.tsx b/frontend/src/types.tsx index 8413107..2c2602b 100644 --- a/frontend/src/types.tsx +++ b/frontend/src/types.tsx @@ -10,10 +10,12 @@ export type FormValues = { length: Measurement; bendCount: number; bends: { + straightTubeBefore: Measurement; + direction: Measurement, radius: Measurement; arcLength: Measurement; extrusion: Measurement; - straightTube: Measurement; + straightTubeAfter: Measurement; }[]; } \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 09fc53d..461acca 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -5,6 +5,7 @@ module.exports = { extend: { colors: { 'off': { 'white': '#ecf1f6' }, + 'white-hover': '#DBE4EF', 'brand': { 'blue': { 'light': '#778DA9', @@ -13,11 +14,16 @@ module.exports = { }, 'orange': '#EB5E28', 'white': '#FFFFFF', + 'light-grey': '#C4C4C4', + 'temp-teal': '#00ADB5', }, 'error': { 'red': '#CA0707' } - } + }, + fontFamily: { + 'inter': ['Inter', 'sans-serif'], + }, }, }, plugins: [],