Newer
Older
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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';
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: 150px;
min-height: 150px !important;
`
const HeaderDiv = styled.div`
width : 100%;
max-width : 100%;
display : flex;
align-items : center;
align-content : center;
`
const ContentContainer = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
min-wdith : 240px;
align : center;
border-radius : 4px;
font-family : 'Roboto', sans serif;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
background-color : rgba(158,158,158,0.2) !important;
color : #666 !important;
text-decoration : none !important;
outline : none !important;
text-align : center !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
const ButtonConfirmar = styled(Button)`
background-color : #ff7f00 !important;
color : #fff !important;
border-radius : 3px !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
export default function ModalExcluir (props) {
const text = {
header : "Tem certeza que deseja excluir este comentário?",
explanation : "A exclusão de um comentário é permanente. Não é possível desfazer."
}
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open}>
<ContentContainer>
<HeaderDiv>
<h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
{text.header}
</h3>
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
<span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
<ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
<ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
</Fade>
</StyledModal>
)
}
