Multiple prices (unfinished)

src/components/Input/Checkboxes.js

@@ -10,10 +10,11 @@ import FormHelperText from "@material-ui/core/FormHelperText";
 const useStyles = makeStyles((theme) => ({
   root: {
     "& .MuiFormLabel-root": {
-      color: "#e99800",
+      color: "#d68000",
       marginBottom: theme.spacing(2),
       marginLeft: "auto",
       marginRight: "auto",
+      fontWeight: "500"
     },
     "& .MuiFormHelperText-root": {
       color: "#7e7e7e",
@@ -141,9 +142,6 @@ export default function Checkboxes(props) {
             label="Sezam"
           />
         </FormGroup>
-        <FormHelperText>
-          Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :)
-        </FormHelperText>
       </FormControl>
       <FormControl component="fieldset" className={classes.formControl}>
         <FormLabel component="legend">Inne</FormLabel>

src/components/Input/InputPrices.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& > *': {
+        margin: theme.spacing(0),
+        backgroundColor: "#262626",
+        padding: theme.spacing(1)
+        },
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    },
+    header: {
+        color: "#d68000",
+        fontSize: "16px"
+    },
+    paragraph: {
+        color: "#bbbbbb",
+        fontSize: "12px"
+    },
+    option: {
+        color: "#d68000",
+        minWidth: "60px",
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    paper: {
+        '& > *': {
+            margin: theme.spacing(1),
+            backgroundColor: "#262626",
+            padding: theme.spacing(1)
+        },
+    },
+    textField: {
+        margin: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    subOption: {
+        margin: "0px",
+        color: "#bbbbbb",
+        fontSize: "11px"
+    },
+    optionContainer: {
+        display: "flex",
+        alignItems: "center",
+        margin: theme.spacing(1)
+    }
+}));
+
+export default function InputPrices(props) {
+    const classes = useStyles();
+    const [multi, setMulti] = useState("initial");
+
+    return <div className={classes.root}>
+        <Paper variant="outlined">
+            <h3 className={classes.header}>Podaj ceny</h3>
+            <p className={classes.paragraph}>Jeżeli ta pozycja w menu ma kilka opcji cenowych (np. Mała/Średnia/Duża porcja) - możesz dodać do trzech cen wraz z nazwami poszczególnych opcji.</p>
+            <div className={classes.paper} style={{ display: multi }}>
+                <div className={classes.optionContainer}>
+                    <h4 className={classes.option}>Cena 1</h4>
+                    <TextField error={props.error} value={props.prices.price1.priceName} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: event.target.value,
+                                price: props.prices.price1.price
+                        }})
+                    }} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała"/>
+                    <TextField error={props.error} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: props.prices.price1.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price1.price} className={classes.textField} label="Cena" variant="outlined" required placeholder="np. 14zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 2</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: event.target.value,
+                                price: props.prices.price2.price
+                        }})
+                    }} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: props.prices.price2.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price2.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 18zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 3</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: event.target.value,
+                                price: props.prices.price3.price
+                        }})
+                    }} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: props.prices.price3.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price3.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 22zł"/>
+                </div>
+            </div>
+        </Paper>
+    </div>
+}