Updated / redesign started

2021-01-14 18:20:09 +01:00
parent 02511370a0
commit 1dd5f89c8b
29 changed files with 130 additions and 83 deletions
--- a/src/components/Dialogs/Cookies.js
+++ b/src/components/Dialogs/Cookies.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ButtonPrimary from '../Input/ButtonPrimary';
+import ButtonSecondary from '../Input/ButtonSecondary';
 import UniversalCookies from "universal-cookie";

 export default function Cookies(props){
@@ -24,7 +24,7 @@ export default function Cookies(props){
        return(
            <div className="cookies-container">
                <h5 className="cookies-text">Menui korzysta z ciasteczek (cookies). Dalsze korzystanie z serwisu oznacza zgodę na ich użycie.</h5>
-                <ButtonPrimary text="W porządku" onClick={setCookiesConsent}/>
+                <ButtonSecondary text="W porządku" onClick={setCookiesConsent}/>
            </div>
        )
    } else {
--- a/src/components/Dialogs/EditDish.js
+++ b/src/components/Dialogs/EditDish.js
@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
      backgroundColor: "#262626",
      color: "#bbbbbb",
      overflow: "visible",
+      borderRadius: "24px"
    },
  },
  closeButton: {
@@ -50,6 +51,7 @@ const useStyles = makeStyles((theme) => ({
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -61,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
    color: "#bbbbbb",
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -74,6 +77,7 @@ const useStyles = makeStyles((theme) => ({
    minWidth: 100,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "$ .MuiSelect-root": {
      color: "#bbbbbb",
--- a/src/components/Dialogs/ForgotPassword.js
+++ b/src/components/Dialogs/ForgotPassword.js
@@ -34,6 +34,7 @@ export default function ForgotPassword(props) {
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
+        borderRadius: "24px"
      },
    },
    closeButton: {
@@ -48,6 +49,7 @@ export default function ForgotPassword(props) {
      width: "90%",
      "& .MuiInputBase-root": {
        color: "#01c3a9",
+        borderRadius: "14px"
      },
      "& .MuiInputLabel-root": {
        color: "#bbbbbb",
--- a/src/components/Dialogs/LoginDialog.js
+++ b/src/components/Dialogs/LoginDialog.js
@@ -37,6 +37,7 @@ export default function LoginDialog(props) {
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
+        borderRadius: "24px"
      },
    },
    closeButton: {
@@ -51,6 +52,7 @@ export default function LoginDialog(props) {
      width: "90%",
      "& .MuiInputBase-root": {
        color: "#01c3a9",
+        borderRadius: "14px"
      },
      "& .MuiInputLabel-root": {
        color: "#bbbbbb",
--- a/src/components/Dialogs/NewDish.js
+++ b/src/components/Dialogs/NewDish.js
@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
      backgroundColor: "#262626",
      color: "#bbbbbb",
      overflow: "visible",
+      borderRadius: "24px"
    },
  },
  h4: {
@@ -61,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -72,6 +74,7 @@ const useStyles = makeStyles((theme) => ({
    color: "#bbbbbb",
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -85,6 +88,7 @@ const useStyles = makeStyles((theme) => ({
    minWidth: 100,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "$ .MuiSelect-root": {
      color: "#bbbbbb",
--- a/src/components/Dialogs/NewRestaurant.js
+++ b/src/components/Dialogs/NewRestaurant.js
@@ -50,6 +50,7 @@ const useStyles = makeStyles((theme) => ({
      width: "auto",
      backgroundColor: "#262626",
      color: "#bbbbbb",
+      borderRadius: "24px"
    },
  },
  closeButton: {
@@ -62,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -72,6 +74,7 @@ const useStyles = makeStyles((theme) => ({
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -95,6 +98,7 @@ const useStyles = makeStyles((theme) => ({
    maxHeight: 400,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "$ .MuiSelect-root": {
      color: "#bbbbbb",
--- a/src/components/Dialogs/RegisterDialog.js
+++ b/src/components/Dialogs/RegisterDialog.js
@@ -54,6 +54,7 @@ export default function RegisterDialog(props) {
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
+        borderRadius: "24px"
      },
      "& .MuiFormHelperText-root": {
        color: "#606060",
@@ -72,6 +73,7 @@ export default function RegisterDialog(props) {
      width: "90%",
      "& .MuiInputBase-root": {
        color: "#01c3a9",
+        borderRadius: "14px"
      },
      "& .MuiInputLabel-root": {
        color: "#bbbbbb",
--- a/src/components/Dialogs/RegulaminDialog.js
+++ b/src/components/Dialogs/RegulaminDialog.js
@@ -21,6 +21,7 @@ export default function RegulaminDialog(props) {
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
+        borderRadius: "24px"
      },
      "& .MuiFormHelperText-root": {
        color: "#606060",
--- a/src/components/Dialogs/Settings.js
+++ b/src/components/Dialogs/Settings.js
@@ -9,8 +9,14 @@ import ButtonPrimary from "../Input/ButtonPrimary";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
+import PersonIcon from '@material-ui/icons/Person';
 import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
+import BusinessIcon from '@material-ui/icons/Business';
+import FingerprintIcon from '@material-ui/icons/Fingerprint';
+import RoomIcon from '@material-ui/icons/Room';

 const useStyles = makeStyles((theme) => ({
  root: {
@@ -19,6 +25,7 @@ const useStyles = makeStyles((theme) => ({
      minWidth: "30%",
      backgroundColor: "#262626",
      color: "#bbbbbb",
+      borderRadius: "24px"
    },
  },
  closeButton: {
@@ -31,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -89,7 +97,7 @@ export default function Settings() {
      <DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
      <IconButton
        className={style.closeButton}
-        onClick={() => {}}
+        onClick={() => history.goBack()}
        aria-label="close"
      >
        <CloseIcon />
@@ -104,6 +112,13 @@ export default function Settings() {
          }
          label="Imię"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
        <TextField
          className={style.textInput}
@@ -113,6 +128,13 @@ export default function Settings() {
          }
          label="Nazwisko"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
        <TextField
          className={style.textInput}
@@ -122,6 +144,13 @@ export default function Settings() {
          }
          label="Email"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AlternateEmailIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
        <TextField
          className={style.textInput}
@@ -131,6 +160,13 @@ export default function Settings() {
          }
          label="Nazwa firmy"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <BusinessIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
        <TextField
          className={style.textInput}
@@ -138,6 +174,13 @@ export default function Settings() {
          onChange={(event) => setState({ ...state, NIP: event.target.value })}
          label="NIP"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FingerprintIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
        <TextField
          className={style.textInput}
@@ -147,8 +190,16 @@ export default function Settings() {
          }
          label="Adres firmy"
          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <RoomIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
        />
-        <ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
+        <Divider />
+        <ButtonPrimary onClick={() => history.goBack()} text="Anuluj" />
        <ButtonSecondary text="Zapisz" />
      </DialogContent>
    </Dialog>
--- a/src/components/EditRestaurant/EditRestaurantInfo.js
+++ b/src/components/EditRestaurant/EditRestaurantInfo.js
@@ -35,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -45,6 +46,7 @@ const useStyles = makeStyles((theme) => ({
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -63,6 +65,7 @@ const useStyles = makeStyles((theme) => ({
    maxHeight: 400,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "$ .MuiSelect-root": {
      color: "#bbbbbb",
--- a/src/components/EditRestaurant/EditRestaurantMenu.js
+++ b/src/components/EditRestaurant/EditRestaurantMenu.js
@@ -22,6 +22,9 @@ const useStyles = makeStyles((theme) => ({
    backgroundColor: "#262626",
    color: "#bbbbbb",
    width: "100%",
+    maxWidth: "800px",
+    marginTop: "24px",
+    borderRadius: "24px"
  },
  expandIcon: {
    color: "#bbbbbb",
@@ -33,6 +36,7 @@ const useStyles = makeStyles((theme) => ({
    flexGrow: 5,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
--- a/src/components/EditRestaurant/LunchMenu.js
+++ b/src/components/EditRestaurant/LunchMenu.js
@@ -26,7 +26,8 @@ const useStyles = makeStyles((theme) => ({
    backgroundColor: "#262626",
    color: "#bbbbbb",
    width: "100%",
-    marginBottom: "24px",
+    maxWidth: "800px",
+    borderRadius: "24px"
  },
  expandIcon: {
    color: "#bbbbbb",
@@ -36,6 +37,7 @@ const useStyles = makeStyles((theme) => ({
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -52,6 +54,7 @@ const useStyles = makeStyles((theme) => ({
    flexGrow: 5,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -174,7 +177,7 @@ export default function EditCategoriesList(props) {
  // COMPONENT

  return (
-    <div style={{ width: "100%" }}>
+    <div style={{ width: "100%", display: "flex", flexFlow: "column", alignItems: "center"  }}>
      <YesNo open={open} cancel={onCancel} accept={onAccept} />
      {props.lunchMenu.length === 0 ? <p>Lunch menu puste</p> : SetList}
      <Accordion className={classes.root}>
--- a/src/components/Input/ButtonPrimary.js
+++ b/src/components/Input/ButtonPrimary.js
@@ -4,7 +4,8 @@ import Button from "@material-ui/core/Button";

 const StyledButton = withStyles({
  root: {
-    backgroundColor: "#696969",
+    backgroundColor: "#9e9e9e",
+    borderRadius: "14px",
    color: "#262626",
    margin: "16px 16px 16px 16px",
    padding: "8px 12px 8px 12px",
--- a/src/components/Input/ButtonSecondary.js
+++ b/src/components/Input/ButtonSecondary.js
@@ -5,6 +5,7 @@ import Button from "@material-ui/core/Button";
 const StylizedButton = withStyles({
  root: {
    background: "#d68000",
+    borderRadius: "14px",
    color: "#262626",
    margin: "16px 16px 16px 16px",
    padding: "8px 16px 8px 16px",
--- a/src/components/Input/Checkboxes.js
+++ b/src/components/Input/Checkboxes.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
      display: "inline",
    },
    border: "1px solid #1c1c1c",
-    borderRadius: "6px",
+    borderRadius: "24px",
    marginBottom: theme.spacing(2),
  },
  formControl: {
--- a/src/components/Input/InputLunchMenuHours.js
+++ b/src/components/Input/InputLunchMenuHours.js
@@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({
  timePicker: {
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
--- a/src/components/Input/InputPrices.js
+++ b/src/components/Input/InputPrices.js
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
        },
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
--- a/src/components/Input/InputWorkingHoursSingle.js
+++ b/src/components/Input/InputWorkingHoursSingle.js
@@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({
  timePicker: {
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
--- a/src/components/Input/SearchPanel.js
+++ b/src/components/Input/SearchPanel.js
@@ -15,6 +15,7 @@ const useStyles = makeStyles((theme) => ({
    },
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "16px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
--- a/src/components/Output/Contact.js
+++ b/src/components/Output/Contact.js
@@ -26,7 +26,7 @@ export default function Contact() {
  });
  const style = useStyles();
  return (
-    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb" }}>
+    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb", borderRadius: "24px" }}>
      <List className={style.root}>
        <ListItem>
          <LogoMain />
@@ -43,18 +43,10 @@ export default function Contact() {
        <ListItem>
          <ListItemText
            className={style.secondary}
-            primary="Biuro"
+            primary="Email"
            secondary="menui@menui.pl"
          />
        </ListItem>
-        <Divider />
-        <ListItem>
-          <ListItemText
-            className={style.secondary}
-            primary="Wsparcie techniczne"
-            secondary="support@menui.pl"
-          />
-        </ListItem>
      </List>
    </Paper>
  );
--- a/src/components/Output/EditCategoriesList.js
+++ b/src/components/Output/EditCategoriesList.js
@@ -16,6 +16,8 @@ const useStyles = makeStyles((theme) => ({
    backgroundColor: "#262626",
    color: "#bbbbbb",
    width: "100%",
+    maxWidth: "800px",
+    borderRadius: "24px"
  },
  expandIcon: {
    color: "#bbbbbb",
@@ -25,6 +27,7 @@ const useStyles = makeStyles((theme) => ({
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
+      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
@@ -97,7 +100,7 @@ export default function EditCategoriesList(props) {
  });

  return (
-    <div style={{ width: "100%" }}>
+    <div style={{ width: "100%", display: "flex", flexFlow: "column", alignItems: "center" }}>
      <YesNo open={open} cancel={onCancel} accept={onAccept} />
      {CategoriesList}
    </div>