Some fixes

1/src/App.js

@@ -9,7 +9,15 @@ import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { Button } from "react-bootstrap";
 import { Router, Route, Link, Switch, withRouter } from "react-router-dom";
 import { createBrowserHistory } from "history";
-import { Navbar, NavDropdown, Container, Nav } from "react-bootstrap";
+import {
+  Navbar,
+  NavDropdown,
+  Container,
+  Nav,
+  Form,
+  Row,
+  Col,
+} from "react-bootstrap";
 
 const jwtDecode = (token) => {
   try {
@@ -442,37 +450,53 @@ const LoginForm = ({ onLogin, onRegister }) => {
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
   return (
-    <div className="LoginForm">
-      <input
-        style={{ borderColor: login.length < 1 ? "red" : "" }}
-        type="text"
-        onChange={(e) => setLogin(e.target.value)}
-        placeholder="Login"
-      />
-      <input
-        style={{ borderColor: password.length < 1 ? "red" : "" }}
-        type="password"
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Password"
-      />
-      {
-        <Button
-          variant="success"
-          disabled={login.length < 1 || password.length < 1 ? true : false}
-          onClick={() => onLogin(login, password)}
-        >
-          Login
-        </Button>
-      }
-      {
-        <Button
-          variant="secondary"
-          disabled={login.length < 1 || password.length < 1 ? true : false}
-          onClick={() => onRegister(login, password)}
-        >
-          Register
-        </Button>
-      }
+    <div className="LoginForm mx-auto mt-5">
+      <Form>
+        <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+          <Form.Label column sm={2}>
+            Login
+          </Form.Label>
+          <Col sm={10}>
+            <Form.Control
+              type="text"
+              placeholder="Your login"
+              style={{ borderColor: login.length < 1 ? "red" : "" }}
+              onChange={(e) => setLogin(e.target.value)}
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+          <Form.Label column sm={2}>
+            Password
+          </Form.Label>
+          <Col sm={10}>
+            <Form.Control
+              type="password"
+              placeholder="Your password"
+              style={{ borderColor: password.length < 1 ? "red" : "" }}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group as={Row} className="mb-3">
+          <Col sm={{ span: 10, offset: 2 }}>
+            <Button
+              variant="success"
+              disabled={login.length < 1 || password.length < 1 ? true : false}
+              onClick={() => onLogin(login, password)}
+            >
+              Login
+            </Button>{" "}
+            <Button
+              variant="secondary"
+              disabled={login.length < 1 || password.length < 1 ? true : false}
+              onClick={() => onRegister(login, password)}
+            >
+              Register
+            </Button>
+          </Col>
+        </Form.Group>
+      </Form>
     </div>
   );
 };
@@ -512,10 +536,7 @@ const Good = ({
       <p>
         <strong>Описание:</strong> {description}
       </p>
-      <p>
-        <strong>ID:</strong> {_id}
-      </p>
-      <strong>Цена: {price} USD</strong>
+      <strong>Цена: {price} грн.</strong>
       <br />
       <Button
         variant="success"
@@ -547,7 +568,7 @@ const Authorizations = ({ auth, actionLogOut }) => {
   if (auth.payload) {
     return (
       <div>
-        <strong>Привет, {auth.payload.sub.login}</strong>
+        <strong>Добро пожаловать, {auth.payload.sub.login}</strong>
         <Button variant="danger" onClick={() => actionLogOut()}>
           Выйти
         </Button>
@@ -556,7 +577,7 @@ const Authorizations = ({ auth, actionLogOut }) => {
   } else {
     return (
       <Link className="nav-link" to={`/authorizations`}>
-        Войти/Зарегистрироваться
+        Авторизоваться
       </Link>
     );
   }

1/src/App.scss

@@ -19,16 +19,7 @@ App {
     }
   }
   main {
-    display: flex;
     .Content {
-      justify-content: center;
-      align-items: center;
-      .LoginForm {
-        min-height: 100%;
-        font-family: "lato", sans-serif;
-        color: #fff;
-        background: #222222;
-      }
     }
   }
 
@@ -64,6 +55,11 @@ App {
   }
 }
 
+.LoginForm {
+  text-align: center;
+  width: 50%;
+}
+
 .error-container {
   text-align: center;
   font-size: 106px;