[ADD] example modal

psicoadmin/src/Components/Actividades.js

@@ -1,14 +1,32 @@
-import * as React from 'react'
+import React, { useState } from 'react'
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
 import TextField from '@mui/material/TextField';
-import { Col, Row } from 'react-bootstrap';
+import { Col, Row, Modal } from 'react-bootstrap';
 
 import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 import DateFnsUtils from '@date-io/date-fns';
 import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
 
+function HelpModal (props) {
+    let { visible, handleClose } = props
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}> 
+            <Modal.Header>
+                <button type="button" class="close" onClick={handleClose}>&times;</button>
+                <h4 class="modal-title">Asistencia</h4>
+            </Modal.Header>
+            <Modal.Body class="modal-body">
+                <div class="data_notification">
+                    <p>La lista muestra un historial de las actividades que se han realizado en cada módulo del sistema a nivel Administradores y Asistentes, realice búsquedas avanzadas o simplemente actualice la lista para obtener los últimos registros.</p>
+                </div>
+            </Modal.Body>
+        </Modal>
+    )
+}
+
 function LastActivitys() {
+    
 
     let activitys = [{
         password : "rcardona2510",
@@ -59,6 +77,10 @@ function LastActivitys() {
 export default function Actividades() {
 
     const [value, setValue] = React.useState(new Date());
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
     const handleChange = (newValue) => {
         setValue(newValue);
     };
@@ -147,8 +169,9 @@ export default function Actividades() {
                     </div>
                     <LastActivitys/>
                     <div className="footer_history">
-                        <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
+                        <div className="text-color" onClick={handleShow}>Ayuda</div>
                     </div>
+                    <HelpModal visible={show} handleClose={handleClose}/>
                 </div>
             </div>
         </div>

psicoadmin/src/Css/all.css

@@ -904,6 +904,9 @@ table.dataTable tbody th, table.dataTable tbody td {
     color: #2ec5d3;
     transition: all 0.3s;
 }
+.text-color{
+    color: #ec5e69 !important;
+}
 .close {
     float: right;
     font-size: 1.5rem;
@@ -912,6 +915,8 @@ table.dataTable tbody th, table.dataTable tbody td {
     color: #ec5e69;
     text-shadow: 0 1px 0 #fff;
     opacity: 1;
+    border : none;
+    background : white;
 }
 .data_product input {
     width: 100%;

psicoadmin/src/Pages/Home.js

@@ -1,5 +1,6 @@
 import { Card } from '../Components/Card';
 import { Col, Row } from 'react-bootstrap'
+import React from 'react'
 
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';