HomeWork1/React/CodePen/src/pages/cabinet.js

import React                from "react";
import { connect }          from "react-redux";
import { Link }             from "react-router-dom";
import CNickName            from "../components/nick";
import ImgProfile           from "../components/profile";
import { actionAuthLogout } from "../actions/actionAuthLogout";
import ConUpload            from "./upload";


const Cabinet = ({onLogOut}) => {
  return (
    <>
      <Link to="/">
          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
              <span>&#8617;</span> Back to Main Page
          </button>
      </Link>
      <br/>
      <br/>
      <div className="container d-flex justify-content-center align-items-center mt-2 mb-2" style={{border: '1px olid black'}}>
        <div className="card" style = {{boxShadow:'7px 5px 10px 2px rgba(34, 60, 80, 0.8)', width: "400px", height: '500px'}}>
             <h4 id="myStyle"><CNickName/></h4>
            
            <div className="upper" style={{paddingBottom: "35px"}}>
                <div className="user text-center">
                    <div className="profile mt-3">
                        <ConUpload/>
                    </div>
                </div>
            </div>

            <div className="user text-center mt-2" >
                <a href="/projects" >
                    <button type="button" className="btn btn-warning btn-sm">My Projects</button>
                </a>
                <div style={{marginTop:"10px"}}>
                  <Link to="/search"> 
                      <button className="btn btn-info btn-sm">Search</button> 
                  </Link>
                </div>
                <div style={{marginTop:"10px"}}>
                    <Link to= "/changePass">
                      <button className="btn btn-info btn-sm">Change pass</button>
                    </Link>
                </div>
            </div>

            <div className="d-flex justify-content-around" style={{marginTop: '70px'}}>
                <a href="/">
                    <button className="btn btn-success btn-sm">Main Page</button>
                </a>
                <button className="btn btn-danger btn-sm" 
                        onClick={() => onLogOut()}>
                    Log out
                </button>
            </div>

            <span className="text-center" style={{paddingTop: "13%"}}>⚠click on your avatar to change it⚠</span>
        </div>
      </div>
      
    </>
  );
};

const ConnectCabinet = connect(null, {onLogOut: actionAuthLogout})(Cabinet);

export default ConnectCabinet;