UI Mechanics / New Look (orange - gray)

src/components/Dialogs.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+import Divider from "@material-ui/core/Divider";
+import ButtonSecondary from "./ButtonSecondary";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import { useSelector, useDispatch } from "react-redux";
+import { hideLoginDialog } from "../actions/toggles";
+import { tryLogin } from "../actions";
+
+export default function (props) {
+  var loginDialog = useSelector((state) => state.data.dialogs.logIn);
+  const dispatch = useDispatch();
+
+  const loginStyles = makeStyles((theme) => ({
+    root: {
+      textAlign: "center",
+      "& .MuiPaper-root": {
+        backgroundColor: "#262626",
+        color: "#bbbbbb",
+      },
+    },
+    closeButton: {
+      color: "#bbbbbb",
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+    textInput: {
+      marginTop: "20px",
+      marginBottom: "10px",
+      width: "90%",
+      "& .MuiInputBase-root": {
+        color: "#01c3a9",
+      },
+      "& .MuiInputLabel-root": {
+        color: "#bbbbbb",
+      },
+    },
+  }));
+
+  const loginClass = loginStyles();
+
+  return (
+    <div>
+      <Dialog
+        className={loginClass.root}
+        onClose={() => dispatch(hideLoginDialog())}
+        open={loginDialog}
+        aria-labelledby="login-title"
+      >
+        <DialogTitle id="login-title">Logowanie</DialogTitle>
+        <IconButton
+          className={loginClass.closeButton}
+          onClick={() => dispatch(hideLoginDialog())}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="email"
+            label="Email"
+            type="email"
+            variant="outlined"
+          />
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="password"
+            label="Hasło"
+            type="password"
+            variant="outlined"
+          />
+          <div className="login-dialog-buttons">
+            <ButtonSecondary
+              onClick={() => dispatch(tryLogin("jonasz@bankai.pl"))}
+              text="Zaloguj"
+            />
+          </div>
+          <p>
+            Nie masz konta?
+            <span>
+              <p>Zarejestruj się.</p>
+            </span>
+          </p>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}