done

src/Components/ModalExcluirComentario.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';
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+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}
+        animation={true}
+        centered={true}
+        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>
+    )
+
+}