added modal and iframe to render the presentation video

src/Components/ModalVideoApresentacao.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 Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components';
+
+export default function ModalVideoApresentacao (props) {
+
+    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}>
+                <VideoContainer>
+                    <iframe
+                        src="https://www.youtube.com/embed/gejBqyfJr9A" width="560" height="315"
+                        frameBorder="0" allowFullScreen className="video"
+                    />
+                </VideoContainer>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const VideoContainer = styled.div`
+    position : relative;
+    width : 100%;
+    height : 0;
+    padding-bottom : 56.25%;
+
+    .video {
+        width : 100%;
+        height : 100%;
+        position : absolute;
+        top : 0;
+        left : 0;
+    }
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`

src/Components/SearchSection.js

@@ -23,6 +23,7 @@ import banner from '../img/bannerBusca.jpg';
 import {Row} from 'react-grid-system';
 import {MdInfoOutline} from "react-icons/md"
 import { FaRegPlayCircle} from "react-icons/fa";
+import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
 
 const bannerStyle={
   width: "100%",
@@ -55,12 +56,18 @@ class SearchSection extends Component{
   constructor(props){
     super(props);
     this.state={
-      color: "#ff7f00"
+      color: "#ff7f00",
+      modalOpen : false
     };}
 
+    toggleModal = () => {
+        this.setState({modalOpen : !this.state.modalOpen})
+    }
 
   render(){
     return(
+    <React.Fragment>
+    <ModalVideoApresentacao open={this.state.modalOpen} handleClose={this.toggleModal}/>
     <div style={bannerStyle}>
       <div style={titleStyle}>
         <h2>Plataforma MEC de Recursos Educacionais Digitais</h2>
@@ -72,8 +79,10 @@ class SearchSection extends Component{
           <SearchBar/>
       </Container> */}
           <div style={{paddingBottom: "100px", color: "white"}}>
-            <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle"}} />SOBRE A PLATAFORMA</a>
-            <a href="#apresentacao" style={{color:"#fff",textDecoration: "none"}}> <FaRegPlayCircle  size="20px" style={{verticalAlign: "middle"}}  />VÍDEO DE APRESENTAÇÃO</a>
+            <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none", paddingRight : "10px"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}} />SOBRE A PLATAFORMA</a>
+            <span onClick={this.toggleModal} style={{cursor : "pointer"}}>
+            <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>VÍDEO DE APRESENTAÇÃO
+            </span>
           </div>
       <Row justify="center">
       <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
@@ -81,6 +90,7 @@ class SearchSection extends Component{
       <button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
       </Row>
     </div>
+    </React.Fragment>
   );
   }
 }