login page update

private/Notes.txt

@@ -0,0 +1,3 @@
+In gridul de retea, pe fiecare linie va fi un buton care va deschide un log.
+Log-ul va fi popup iar continutul lui poate fi ultima componenta de aici https://material-ui.com/components/app-bar/
+**************************************************************************************************************************

src/components/App.js

@@ -28,7 +28,7 @@ const App = () => {
         </ApplicationDispatchContext.Provider>
       </ApplicationStateContext.Provider>
       <ToastContainer
-        position="top-right"
+        position="bottom-right"
         transition={Slide}
         autoClose={3000}
         hideProgressBar={false}

src/features/login/components/LoginComponent.js

@@ -1,7 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import { TextField, InputAdornment, Button } from "@material-ui/core";
+import {
+  TextField,
+  InputAdornment,
+  Button,
+  Card,
+  CardActions,
+  CardContent
+} from "@material-ui/core";
 import { AccountCircleOutlined } from "@material-ui/icons";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";
@@ -18,34 +25,37 @@ const LoginComponent = ({ credentials, onChange, onLogin }) => {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <TextField
-        className={classes.field}
-        id="username"
-        label={t("Login.Username")}
-        onChange={onChange("userName")}
-        value={credentials.userName}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <AccountCircleOutlined />
-            </InputAdornment>
-          )
-        }}
-      />
-      <br />
-      <PasswordField
-        id="password"
-        label={t("Login.Password")}
-        className={classes.field}
-        onChange={onChange("password")}
-        value={credentials.password}
-      />
-      <br />
-      <Button variant="contained" color="primary" onClick={onLogin}>
-        {t("Login.Label")}
-      </Button>
-    </div>
+    <Card variant="outlined">
+      <CardContent>
+        <TextField
+          className={classes.field}
+          id="username"
+          label={t("Login.Username")}
+          onChange={onChange("userName")}
+          value={credentials.userName}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircleOutlined />
+              </InputAdornment>
+            )
+          }}
+        />
+        <br />
+        <PasswordField
+          id="password"
+          label={t("Login.Password")}
+          className={classes.field}
+          onChange={onChange("password")}
+          value={credentials.password}
+        />
+      </CardContent>
+      <CardActions>
+        <Button variant="contained" color="primary" onClick={onLogin}>
+          {t("Login.Label")}
+        </Button>
+      </CardActions>
+    </Card>
   );
 };