From e54e1881d42d2e08ba44e943811411287aee33f9 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Fri, 22 May 2020 13:32:53 -0300
Subject: [PATCH] done
---
src/Components/ModalExcluirComentario.js | 103 +++++++++++++++++++++++
1 file changed, 103 insertions(+)
create mode 100644 src/Components/ModalExcluirComentario.js
diff --git a/src/Components/ModalExcluirComentario.js b/src/Components/ModalExcluirComentario.js
new file mode 100644
index 00000000..17e402a6
--- /dev/null
+++ b/src/Components/ModalExcluirComentario.js
@@ -0,0 +1,103 @@
+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>
+ )
+
+}
--
GitLab