ModalAbout.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Modal from '@material-ui/core/Modal';

import Formulario from "./ContactForm";

import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';

import styled from 'styled-components'


/*Importação de imagens para o componente*/




const useStyles = makeStyles(theme => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  paper: {
    border: '2px solid #000',
    boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
  },
  carousel: {
    width: "750px",
    height:"370px",

  }
}));

const Button = styled.button`

background-color: #00bcd4;
color: #fff;
font-family: Roboto,sans-serif;
font-size: 14px;
font-weight: 700;
height: 36px;
border-radius: 3px;
padding-left: 16px;
padding-right: 16px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
display: inline-block;
position: relative;
cursor: pointer;
min-height: 36px;
min-width: 88px;
line-height: 36px;
vertical-align: middle;
-webkit-box-align: center;
outline: none;
text-align: center;
border: 0;
padding: 0 16px !important;
hite-space: nowrap;
text-decoration: none;

`

const Formulário = styled.div `
  background-color: #fff;
  padding: 40px;

  border-radius: 4px;


  color: #666 !important;

  h2 {
    font-size: 26px;
    font-weight: lighter;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  form .inputBlock {
    margin-block: 22px;

  }

  form .inputBlock label {
    font-size: 14px;
    font-weight: bold;
    display: block;

  }

  form .inputBlock input {
    width: 100%;
    height: 32px;
    font-size: 14px;
    border: 0;
    border-bottom: 1px solid #eee;

  }

  form .inputBlock.Message input {
    height: 131px;
  }

  form buttom[type=submit] {
    width: 100%;
    border: 0;
    margin-top: 30px;
    background: #7d40e7
    border-radius: 2px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background 0.5s;

  }

  form buttom[type=submit]:hover {
    background: #6931ac
  }


  h2 {
    font-size: 24px;
    font-weight: lighter;
    margin-bottom: 50px;
    margin-top: 20px;
    text-align: center;

  }
`




export default function TransitionsModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (


    <div style={{display:"flex", justifyContent: "center"}}>
      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>

      <Button    type="button" onClick={handleOpen}>
        SUGERIR OUTRO SITE
      </Button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>

          <div>
            <Formulário>
              <h2>Sugerir site de Recursos Educacionais Digitais</h2>
              <Formulario/>
            </Formulário>

          </div>

        </Fade>
      </Modal>
    </div>
  );
}