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

// .user-profile .profile-avatar-upload img {
//   border-radius: 50%;
//   width: 150px;
//   height: 150px;
// }

// .user-profile .profile-avatar-upload .photo-input {
//   display: flex;
//   flex-direction: column;
// }

// .user-profile .profile-avatar-upload .photo-input button {
//   cursor: pointer;
//   margin: 0px auto;
//   width: 150px;
//   height: 40px;
//   background-color: rgba(0, 149, 246, 1);
//   border: 1px solid #dfdfdf;
//   border-radius: 2px;
//   color: #fff;
//   text-align: center;
//   text-transform: capitalize;
// }

export const PostInput = styled(Box)`
  margin: 100px auto;
  width: 50%;
  display: flex;
  flex-direction: column;
`;

export const PostInputForm = styled(Box)`
  justify-content: center;
  width: 500px;
  display: flex;
  margin: auto;
  flex-direction: column;
  & .MuiFormControl-root {
    padding: 0;
    margin: 0px auto;
    width: 400px;
    height: 30px;
    background: #fafafa;
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.5);

    text-transform: capitalize;
  }

  & input {
    text-align: center;
    padding: 0;
    border: none;
    outline: none;
  }

  & button {
    cursor: pointer;
    margin: 5px auto;
    width: 400px;
    height: 40px;
    background-color: rgba(0, 149, 246, 1);
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
  }
`;

// .post-input-form {
//   justify-content: center;
//   width: 500px;
//   display: flex;
//   margin: auto;
//   flex-direction: column;
// }

// .post-input-form input {
//   margin: 5px auto;
//   width: 400px;
//   height: 30px;
//   background: #fafafa;
//   border: 1px solid #dfdfdf;
//   border-radius: 2px;
//   color: rgba(0, 0, 0, 0.5);
//   text-align: center;
//   text-transform: capitalize;
// }

// .post-input-form button {
//   cursor: pointer;
//   margin: 5px auto;
//   width: 400px;
//   height: 40px;
//   background-color: rgba(0, 149, 246, 1);
//   border: 1px solid #dfdfdf;
//   border-radius: 2px;
//   color: #fff;
//   text-align: center;
//   text-transform: capitalize;
// }
