home screen changes (info button, appstore and google play buttons)

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -13,7 +13,6 @@ import InstagramIcon from "@material-ui/icons/Instagram";
 import LanguageIcon from "@material-ui/icons/Language";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
-import InputWorkingHoursSingle from "../Input/InputWorkingHoursSingle";
 import Divider from "@material-ui/core/Divider";
 import Link from "@material-ui/core/Link";
 import { decodeTags } from "../../Services";
@@ -24,8 +23,12 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import PasswordConfirmation from "../Dialogs/PasswordConfirmation";
-import { backend } from "../../config";
+import { backend, restaurantTypes } from "../../config";
 import InputLunchMenuHours from "../Input/InputLunchMenuHours";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
 
 const useStyles = makeStyles((theme) => ({
   textInput: {
@@ -53,6 +56,24 @@ const useStyles = makeStyles((theme) => ({
   link: {
     cursor: "pointer",
   },
+  formControl: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    minWidth: 100,
+    maxHeight: 400,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
 }));
 
 const calculateCharLeft = (from) => {
@@ -130,6 +151,10 @@ export default function EditRestaurantInfo(props) {
     );
   };
 
+  const availableTypes = restaurantTypes.map((type) => {
+    return <MenuItem key={type} value={type}>{type}</MenuItem>
+  });
+
   const cancelChanges = () => {
     setState(initialState);
   };
@@ -243,28 +268,24 @@ export default function EditRestaurantInfo(props) {
           />
         </div>
         <div className="editRestaurant-fullWidth">
-          <TextField
-            className={styles.textInputFullWidth}
-            fullWidth
-            value={state.type}
-            error={state.typeError}
-            onChange={(event) =>
-              setState({ ...state, type: event.target.value })
-            }
-            InputLabelProps={{ shrink: true }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <FastfoodIcon color="primary" />
-                </InputAdornment>
-              ),
-            }}
-            label="Kuchnia"
-            placeholder="np. Meksykańska"
-            variant="outlined"
-          />
+        <FormControl
+                variant="outlined"
+                required
+                fullWidth
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kuchnia</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
+                  value={state.type}
+                  required
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
+                >
+                  {availableTypes}
+                </Select>
+              </FormControl>
         </div>
-
         <TextField
           className={styles.textInput}
           value={state.city}
@@ -341,10 +362,6 @@ export default function EditRestaurantInfo(props) {
           setHours={(hours) => setState({ ...state, workingHours: hours })}
           hours={state.workingHours}
         />
-        <div className="newRestaurant-content-fullwidth">
-                 <div className="workingHours-container" style={{ marginTop: 14 }}>
-                <InputWorkingHoursSingle nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)} day="Lunch hours" /></div>
-              </div>
         <div className="editRestaurant-sectiontitle">
           <h4>Dane kontaktowe</h4>
           <Divider />
@@ -427,9 +444,9 @@ export default function EditRestaurantInfo(props) {
           <h4>Lunch menu</h4>
           <Divider />
           <InputLunchMenuHours
-            off={!state.lunchHours}
+            nieczynne={!state.lunchHours}
             hours={state.lunchHours}
-            changeValue={(value) => setState({ ...state, lunchHours: value })}
+            changeValue={setLunchHours}
           />
         </div>
         <div className="editRestaurant-sectiontitle">