import { Box } from "@mui/material";
import styled from "styled-components";

export const LoginPage = styled((props) => <Box {...props} />)`
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
`;

export const StyledLoginForm = styled(Box)`
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 45px 45px 35px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
`;
{
  /* <div className="login-form">
  <input
    class="login"
    type="login"
    placeholder="Enter login"
    value={props.login}
    onChange={(e) => props.setLogin(e.target.value)}
  />
  <input
    class="password"
    type="password"
    placeholder="Password"
    value={props.password}
    onChange={(e) => props.setPassword(e.target.value)}
  />
  <button
    class="btn"
    disabled={!login || !password}
    onClick={() => props.onLogin(login, password)}
  >
    Submit
  </button>
  <p>
    У вас ещё нет аккаунта?<a href="/reg">Зарегистрироваться</a>
  </p>
</div>; */
}

// .login-page input {
//   font-family: "Roboto", sans-serif;
//   outline: 0;
//   background: #f2f2f2;
//   width: 100%;
//   border: 0;
//   margin: 0 0 15px;
//   padding: 15px;
//   box-sizing: border-box;
//   font-size: 14px;
// }
// .login-page button {
//   font-family: "Roboto", sans-serif;
//   text-transform: uppercase;
//   outline: 0;
//   background: #a8bfdd;
//   width: 100%;
//   border: 0;
//   padding: 15px;
//   color: #ffffff;
//   font-size: 14px;
//   cursor: pointer;
// }
// .login-page button:hover,
// .form button:active,
// .form button:focus {
//   background: #97abc4;
// }

// .login-form p {
//   margin: 20px;
// }

// .login-form a {
//   padding-top: 10px;
//   color: rgba(0, 149, 246, 1);
// }
