IllegalContentModal.js

import React, {useContext} from 'react';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
import { Store } from '../Store.js';

const StyledModal = styled(Modal)`
    margin : 0 !important;
    margin-left : 0 !important;
    display : flex;
    align-items: center;
    justify-content : center;
    text-align : center;
    padding : 10px !important;
    border-radius : 4px;
    max-width : none;
    max-height : none;
    min-width: 240px;
    min-height: 150px !important;
`
const StyledH2 = styled.h2`
    color : rgb(102,102,102);
    fontSize : 20px;
    fontWeight: 500;
    line-height : 22px;
    margin-bottom : 10px;
    margin-top : 0px;
    letter-spacing : .005em;
`
const StyledParagraph = styled.p`
    margin : 0 0 10px;
    color : rgb(102, 102, 102);
    font-size : 14px;
`

const StyledButton = styled(Button)`
    background-color : rgba(158,158,158,0.2);
    text-decoration : none;
    cursor : pointer;
    border: 0;
    padding : 0 6px;
    min-height: 36px;
    min-width: 88px;
    background: transparent;
    font-size : 14px;
    font-weight : 500px;
    letter-spacing : .01em;
    text-align : center;
`
const StyledSpan = styled.span`
    color : rgb(0,188,212);
`

const StyledDivContent = styled.div`
    padding : 24px;
    padding-left : 25px;
    padding-right:25px;
    padding-bottom:10px;
    text-align: start;
`

const StyledDivAction = styled.div`
    min-height : 52px;
    margin-bottom : 0;
    display: flex;
    justify-content: right;
    padding-right: 8px;
    padding-left: 16px;
`

const StyledDivContainer = styled.div`
    box-sizing : border-box;
    background-color : white;
    max-width : none;
    align : center;
    border-radius : 4px;
`

export default function IllegalContentModal (props) {
    const {state} = useContext(Store)

    return (
        <StyledModal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={props.open}

        centered="true"
        onClose={props.handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
            timeout: 500,
        }}
        >
            <Fade in={props.open}>
                <StyledDivContainer >
                    <StyledDivContent>
                        <StyledH2>{state.currentUser.name}!</StyledH2>
                        <div>
                            <StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph>
                            </div>
                            </StyledDivContent>
                            <StyledDivAction>
                            <StyledButton onClick={props.handleClose}><StyledSpan>TERMOS</StyledSpan></StyledButton>
                            </StyledDivAction>
                </StyledDivContainer>
            </Fade>

        </StyledModal>
    )

}