Updated / redesign started

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>