New favicon

src/components/Dialogs/NewRestaurant.js

@@ -16,6 +16,7 @@ import StepLabel from "@material-ui/core/StepLabel";
 import Paper from "@material-ui/core/Paper";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import InputAdornment from "@material-ui/core/InputAdornment";
+import validator from "validator";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -23,6 +24,9 @@ import PhoneIcon from "@material-ui/icons/Phone";
 import FacebookIcon from "@material-ui/icons/Facebook";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import LanguageIcon from "@material-ui/icons/Language";
+import ButtonPrimary from "../Input/ButtonPrimary";
+
+// SETUP
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -81,9 +85,15 @@ export default function NewRestaurant() {
   const initialState = {
     name: "",
     city: "",
+    adress: "",
     hoursFrom: "",
     hoursTo: "",
     description: "",
+    tags: [],
+    phone: "",
+    facebook: "",
+    twitter: "",
+    www: "",
   };
   const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
   const [state, setState] = useState(initialState);
@@ -101,6 +111,22 @@ export default function NewRestaurant() {
     "Dowozimy",
   ];
 
+  // HANDLERS
+
+  const handleNextButton = () => {
+    if (activeStep < 2) {
+      setActiveStep(activeStep + 1);
+      console.log(activeStep);
+    }
+  };
+
+  const handlePreviousButton = () => {
+    setActiveStep(activeStep - 1);
+    console.log(activeStep);
+  };
+
+  // COMPONENTS
+
   return (
     <div>
       <Dialog
@@ -125,16 +151,17 @@ export default function NewRestaurant() {
               </Step>
             ))}
           </Stepper>
+
+          {activeStep === 0 && (
             <Paper variant="outlined">
-            <div className="newRestaurant-content">
+              <div className="newRestaurant-content-fullwidth">
                 <TextField
-                className={styles.textInput}
+                  className={styles.textInputFullWidth}
+                  fullWidth
                   required
                   label="Nazwa lokalu"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.name = event.target.value)}
-                  (state.restaurantName = event.target.value)
-                }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -143,14 +170,28 @@ export default function NewRestaurant() {
                     ),
                   }}
                 />
+              </div>
+              <div className="newRestaurant-content">
                 <TextField
                   className={styles.textInput}
                   required
                   label="Miasto"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.city = event.target.value)}
-                  (state.restaurantName = event.target.value)
+                  InputProps={{
-                }
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <LocationCityIcon color="primary" />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  className={styles.textInput}
+                  required
+                  label="Adres"
+                  variant="outlined"
+                  onChange={(event) => (state.adress = event.target.value)}
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -192,6 +233,9 @@ export default function NewRestaurant() {
                     className={styles.textInputFullWidth}
                     fullWidth
                     label="Opis"
+                    onChange={(event) =>
+                      (state.description = event.target.value)
+                    }
                     multiline
                     rows={3}
                     variant="outlined"
@@ -199,6 +243,9 @@ export default function NewRestaurant() {
                   <Autocomplete
                     multiple
                     options={availableTags}
+                    onChange={(event, values) =>
+                      setState({ ...state, tags: values })
+                    }
                     renderInput={(params) => (
                       <TextField
                         {...params}
@@ -213,10 +260,9 @@ export default function NewRestaurant() {
                 <TextField
                   className={styles.textInput}
                   label="Telefon"
+                  type="tel"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.phone = event.target.value)}
-                  (state.restaurantName = event.target.value)
-                }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -229,9 +275,7 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Facebook"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.facebook = event.target.value)}
-                  (state.restaurantName = event.target.value)
-                }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -244,9 +288,7 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Twitter"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.twitter = event.target.value)}
-                  (state.restaurantName = event.target.value)
-                }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -259,9 +301,7 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="www"
                   variant="outlined"
-                onChange={(event) =>
+                  onChange={(event) => (state.www = event.target.value)}
-                  (state.restaurantName = event.target.value)
-                }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -272,7 +312,14 @@ export default function NewRestaurant() {
                 />
               </div>
             </Paper>
-          <ButtonSecondary text={activeStep === 2 ? "Dodaj lokal" : "Dalej"} />
+          )}
+          {activeStep !== 0 && (
+            <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
+          )}
+          <ButtonSecondary
+            onClick={handleNextButton}
+            text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
+          />
         </DialogContent>
       </Dialog>
     </div>

src/components/Input/ButtonPrimary.js

@@ -4,13 +4,12 @@ import Button from "@material-ui/core/Button";
 
 const StyledButton = withStyles({
   root: {
-    background: "none",
+    backgroundColor: "#696969",
-    color: "white",
+    color: "#262626",
-    border: "solid 1px white",
     margin: "16px 16px 16px 0px",
     padding: "8px 12px 8px 12px",
     "&:hover": {
-      color: "white",
+      backgroundColor: "#808080",
     },
   },
   label: {
@@ -19,5 +18,5 @@ const StyledButton = withStyles({
 })(Button);
 
 export default function ButtonPrimary(props) {
-  return <StyledButton>{props.text}</StyledButton>;
+  return <StyledButton onClick={props.onClick}>{props.text}</StyledButton>;
 }