added the tutorial modal, still working on changes

src/components/FaixaComponent.js

@@ -26,6 +26,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import TrainingModalComponent from './TrainingModalComponent.js';
 import OfferModalComponent from './OfferModalComponent.js';
 import DemandModalComponent from './DemandModalComponent.js';
+import TutorialModalComponent from './TutorialModalComponent.js';
 import Dropdown from './DropdownHeaderComponent.js';
 import { routes } from '../data/routes';
 import '../css/FaixaComponent.scss';
@@ -48,9 +49,11 @@ function FaixaComponent() {
     const [visible, setVisible] = useState(false);
     const [dropdown, setDropdown] = useState(false);
 
+    const [isOpen0, setIsOpen0] = React.useState(false);
     const [isOpen1, setIsOpen1] = React.useState(false);
     const [isOpen2, setIsOpen2] = React.useState(false);
     const [isOpen3, setIsOpen3] = React.useState(false);
+    const [proxModal, setProxModal] = React.useState(1);
 
     const storeState = useSelector(state => state);
     const dispatch = useDispatch();
@@ -60,15 +63,16 @@ function FaixaComponent() {
     }
 
     function dropdownOpenModal(modalNum) {
+        setIsOpen0(true);
         switch (modalNum) {
             case 1:
-                setIsOpen1(true);
+                setProxModal(1);
                 break;
             case 2:
-                setIsOpen2(true);
+                setProxModal(2);
                 break;
             case 3:
-                setIsOpen3(true);
+                setProxModal(3);
                 break;
             default:
                 break;
@@ -88,7 +92,13 @@ function FaixaComponent() {
 
     return (
         <Grid container className={`faixa-container ${contrastSet ? "high-contrast-header" : ""}`}>
-
+            <TutorialModalComponent
+                open={isOpen0}
+                openFunction={setIsOpen0}
+                closeModal={closeModal}
+                contrast={contrastSet}
+                next={proxModal}
+            />
             <TrainingModalComponent
                 open={isOpen1}
                 openFunction={setIsOpen1}

src/components/TutorialModalComponent.js

+import React from 'react';
+import Modal from 'react-modal';
+import { Grid } from '@material-ui/core';
+import TrainingModalComponent from './TrainingModalComponent.js';
+import OfferModalComponent from './OfferModalComponent.js';
+
+import icon from '../img/icon-formation.svg';
+import iconClose from '../img/close.svg';
+
+import routes from '../data/routes';
+import '../css/ModalComponents.scss';
+
+function TutorialModalComponent(props) {
+    function closeModal(openFunction){
+        openFunction(false);
+    }
+
+    const [isOpen1, setIsOpen1] = React.useState(false);
+    const [isOpen2, setIsOpen2] = React.useState(false);
+    function prox(mod) {
+        console.log(mod);
+        if(mod===1){
+            setIsOpen1(true);
+        }
+        else if(mod===2){
+            setIsOpen2(true);
+        }
+    }
+
+
+    Modal.setAppElement('#root');
+    const contrastSet = props.contrast;
+
+    return (
+        <Modal 
+            className={`modal ${contrastSet ? "high-contrast" : ""}`}
+            overlayClassName='modal-overlay'
+            isOpen={props.open}
+            onRequestClose={() => props.closeModal(props.openFunction)}
+        >
+            <div className="modal-header-container">
+                <button onClick={() => {
+                    props.closeModal(props.openFunction);
+                    prox(props.next);
+                    }} >
+                    <img alt="Fechar" src={iconClose} />
+                </button>
+                <img className="icon" alt="Formação" src={icon} />
+            </div>
+            <h1 className='title'>Tutorial MapFOR</h1>
+            <h2 className='subtitle'>tutorial do site</h2>
+            <h2 className='subtitle'>{props.next}</h2>
+
+            <TrainingModalComponent
+                open={isOpen1}
+                openFunction={setIsOpen1}
+                closeModal={closeModal}
+                contrast={contrastSet}
+            />
+            <OfferModalComponent
+                open={isOpen2}
+                openFunction={setIsOpen2}
+                closeModal={closeModal}
+                contrast={contrastSet}
+            />
+        </Modal>
+    )
+}
+
+export default TutorialModalComponent;
\ No newline at end of file