From 0bd6809aa1aab0ca2e81aac85474aa3d2f45ef6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriela=20G=C3=B3mez=20Hern=C3=A1ndez?=
 <ada_hack430@hackademy.mx>
Date: Fri, 29 Apr 2022 18:08:41 -0500
Subject: [PATCH] =?UTF-8?q?Alerta=20c=C3=B3digo=20QR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/operador/qr.js                     |  21 +++-
 components/profesores_registro/invitado.js    |  83 +++++++++++++--
 components/profesores_registro/profesores.js  |  12 ++-
 components/profesores_registro/useInvitado.js |  29 +++++
 package-lock.json                             | 100 +++++++++++++++++-
 package.json                                  |   5 +-
 pages/admin.js                                |   7 +-
 pages/operador.js                             |   2 +-
 styles/admin.module.css                       |  15 ++-
 styles/default.module.css                     |   2 +-
 styles/exito.module.css                       |   4 +-
 styles/globals.css                            |   4 +-
 styles/invitado.module.css                    |   3 +
 styles/login.module.css                       |   4 +-
 styles/profesores.module.css                  |  11 +-
 15 files changed, 267 insertions(+), 35 deletions(-)
 create mode 100644 components/profesores_registro/useInvitado.js

diff --git a/components/operador/qr.js b/components/operador/qr.js
index 0e8a395..8f5e25b 100644
--- a/components/operador/qr.js
+++ b/components/operador/qr.js
@@ -1,23 +1,40 @@
 import React, { useState } from 'react';
 import { QrReader } from 'react-qr-reader';
+import swal from 'sweetalert';
 
 function Qr(props){
     const [data, setData] = useState('No result');
+    const alerta = () =>{
+      swal({
+        title: "Invitado registrado",
+        button: "Aceptar",
+        timer:10000
+      }).then(() => {
+        window.location.reload(false);
+      });
+    }
+
   return (
     <>
       <QrReader
         onResult={(result, error) => {
           if (!!result) {
             setData(result?.text);
+            data;
           }
-
           if (!!error) {
             console.info(error);
           }
+            
         }}
         style={{ width: '100%' }}
       />
+      {(() => {
+            if(data!='No result'){
+              return alerta();
+            }
+        })()}
     </>
   );
-}
+};
 export default Qr;
\ No newline at end of file
diff --git a/components/profesores_registro/invitado.js b/components/profesores_registro/invitado.js
index 5872d38..570ea2a 100644
--- a/components/profesores_registro/invitado.js
+++ b/components/profesores_registro/invitado.js
@@ -1,12 +1,47 @@
 import styles from "../../styles/invitado.module.css";
-import { Container, Row, Col,InputGroup,FormControl} from "react-bootstrap";
+import { Container, Row, Col,InputGroup,FormControl,Button} from "react-bootstrap";
+import { useInvitado } from "./useInvitado";
+
+const initialForm= {
+    nombre:"",
+    apellidos:"",
+    edad:18
+}
+const validationsForm=(form) =>{
+    let errors={};
+
+    if(!form.nombre.trim()){
+        errors.nombre="El campo 'Nombre' es requerido"
+    }
+    if(!form.apellidos.trim()){
+        errors.apellidos="El campo 'Apellidos' es requerido"
+    }
+
+    return errors
+}
+
+
 function Invitado(props){
+
+    const {
+        form,
+        errors,
+        loading,
+        response,
+        handleChange,
+        handleBlur,
+        handleSubmit} 
+        = useInvitado (initialForm,validationsForm);
+
+
     return(
         <Container>
+            <form onSubmit={handleSubmit} >
             <div className={`${styles.container}`}>
-                <Row>
-                <p class="text-center">INVITADO {props.numero}</p>
-                </Row>
+                <Row className="justify-content-md-center">
+                    <Col xs={3}>
+                <p className="text-center">INVITADO {props.numero}</p>
+                </Col></Row>
                 <Row>
                     <Col xs={5}>
                         <p className="text-end">Nombre(s):</p>
@@ -14,12 +49,16 @@ function Invitado(props){
                         <p className="text-end">Edad:</p>
                     </Col>
                     <Col xs={4}>
-                        <form>
                         <InputGroup className="mb-3">
                             <FormControl
                                 placeholder="Nombre"
                                 aria-label="nombre"
                                 aria-describedby="basic-addon2"
+                                name="nombre"
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                value={form.nombre}
+                                required
                             />
                         </InputGroup>
                         <InputGroup className="mb-3">
@@ -27,16 +66,26 @@ function Invitado(props){
                                 placeholder="Apellidos"
                                 aria-label="apellidos"
                                 aria-describedby="basic-addon2"
+                                name="apellidos"
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                value={form.apellidos}
+                                required
                             />
                         </InputGroup>
                         <InputGroup className="mb-3">
-                            <Container>
+                            <Container 
+                            name="edad"
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            value={form.edad}
+                            required
+                            >
                                 <div className="row justify-content-start">
                                     <div className="col-4">
                                         <div className="input-group mb-3 ">
                                             <select class="form-select" id="inputGroupSelect02">
-                                                <option selected>...</option>
-                                                <option value="18">18</option>
+                                                <option selected value="18">18</option>
                                                 <option value="19">19</option>
                                                 <option value="20">20</option>
                                                 <option value="21">21</option>
@@ -125,11 +174,25 @@ function Invitado(props){
                                 </div>        
                             </Container>
                         </InputGroup>
-                        </form>
+                        
+                {errors.nombre && <p style={styles}>{errors.nombre}</p>}
+                {errors.apellidos && <p style={styles}>{errors.apellidos}</p>}       
                     </Col>
                 </Row>
+                
             </div>
+            </form>
         </Container>
     )
 }
-export default Invitado;
\ No newline at end of file
+export default Invitado;
+
+/*
+<Row className="justify-content-md-center">
+                <Col xs={1}>
+                    <Button variant="primary" type="submit" className={`${styles.boton}`}>
+                        Registrar
+                    </Button>
+                </Col>
+                </Row>*/
+
diff --git a/components/profesores_registro/profesores.js b/components/profesores_registro/profesores.js
index 5289c52..eb3c586 100644
--- a/components/profesores_registro/profesores.js
+++ b/components/profesores_registro/profesores.js
@@ -6,7 +6,9 @@ function Registro(){
     const[select,setSelect]=useState("0");
     return(
         <Container>
+            <Row className="justify-content-md-center"><Col>
             <div className={`${styles.titulo}`}>REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLAS</div>
+            </Col></Row>
         <Container className={`${styles.container}`}>
             <Row>
                 <Col className={`${styles.texto1}`}>
@@ -39,9 +41,10 @@ function Registro(){
             </Row>
 
         </Container>
+        <form>
         {(() => {
             switch(select){
-                case "1": return <Invitado numero="1" ></Invitado>;
+                case "1": return (<><Invitado numero="1" ></Invitado></>);
                 case "2": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado></>
                 );
                 case "3": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado><Invitado numero="3"></Invitado></>
@@ -52,11 +55,14 @@ function Registro(){
         <Row className="justify-content-md-center">
             <Col xs={1}>
                 <a href="./registro-exitoso">
-                <Button className={`${styles.boton1}`} size="lg">Registrar</Button>
+                <Button className={`${styles.boton1}`}>Siguiente</Button>
                 </a>
             </Col>
         </Row>
+        
+        </form>
     </Container>        
     );
 }
-export default Registro;
\ No newline at end of file
+export default Registro;
+//tiene que ser un boton de tipo submit?
\ No newline at end of file
diff --git a/components/profesores_registro/useInvitado.js b/components/profesores_registro/useInvitado.js
new file mode 100644
index 0000000..5172f5f
--- /dev/null
+++ b/components/profesores_registro/useInvitado.js
@@ -0,0 +1,29 @@
+import {useState} from 'react';
+
+
+export const useInvitado = (initialForm,validateForm) => {
+    const [form, setForm] = useState(initialForm);
+    const [errors, setErrors] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+
+    const handleChange = (e) =>{
+        const {name,value}=e.target;
+        setForm({
+           ...form,
+           [name]:value 
+        });
+    }
+     const handleBlur = (e) =>{
+        handleChange(e);
+        setErrors(validateForm(form));
+    }
+    const handleSubmit = (e) =>{
+        e.preventDefault();
+        setErrors(validateForm(form));
+    }
+
+    return{
+        form,errors,loading,response,handleChange,handleBlur,handleSubmit
+    }
+};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index bf0a017..110aa6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,11 +12,14 @@
         "bootstrap": "^5.1.3",
         "moment": "^2.29.2",
         "next": "12.1.4",
+        "prop-types": "^15.8.1",
         "react": "18.0.0",
         "react-bootstrap": "^2.2.3",
         "react-dom": "18.0.0",
         "react-qr-reader": "^3.0.0-beta-1",
-        "reactstrap": "^9.0.2"
+        "react-router-dom": "^6.3.0",
+        "reactstrap": "^9.0.2",
+        "sweetalert": "^2.1.2"
       },
       "devDependencies": {
         "eslint": "8.12.0",
@@ -1011,6 +1014,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1767,6 +1775,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -2541,6 +2557,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2671,6 +2692,30 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -3033,6 +3078,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3899,6 +3953,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4476,6 +4535,14 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -5025,6 +5092,11 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
     "prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5121,6 +5193,23 @@
         "rollup": "^2.67.2"
       }
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -5358,6 +5447,15 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index e36d949..511efd0 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,14 @@
     "bootstrap": "^5.1.3",
     "moment": "^2.29.2",
     "next": "12.1.4",
+    "prop-types": "^15.8.1",
     "react": "18.0.0",
     "react-bootstrap": "^2.2.3",
     "react-dom": "18.0.0",
     "react-qr-reader": "^3.0.0-beta-1",
-    "reactstrap": "^9.0.2"
+    "react-router-dom": "^6.3.0",
+    "reactstrap": "^9.0.2",
+    "sweetalert": "^2.1.2"
   },
   "devDependencies": {
     "eslint": "8.12.0",
diff --git a/pages/admin.js b/pages/admin.js
index cb6266e..bebda68 100644
--- a/pages/admin.js
+++ b/pages/admin.js
@@ -6,9 +6,14 @@ import Head from 'next/head';
 import { Container, Row, Col,Button} from "react-bootstrap";
 import SubirArchivo from "../components/administrador/admin";
 import React, { useState } from 'react';
+import axios from "axios";
 export default function Admin(){
     const [archive, setArchive] = useState('');//este se
     const [archive2, setArchive2] = useState('Subir base de datos de profesores');
+   
+    const handleFile = () => {
+   //     axios.get()
+    }
     const setArchiveOn = () => {
         if(archive==""){
             setArchive(<SubirArchivo></SubirArchivo>);
@@ -35,7 +40,7 @@ export default function Admin(){
                             {archive2}
                         </Button>
                         {archive}
-                        <Button  size="lg" className={`${styles.boton}`}>
+                        <Button  size="lg" className={`${styles.boton}`} onClick={handleFile}>
                             Descargar base de datos de invitados
                         </Button>
                         </div>
diff --git a/pages/operador.js b/pages/operador.js
index 9829d50..1de1403 100644
--- a/pages/operador.js
+++ b/pages/operador.js
@@ -32,7 +32,7 @@ export default function Register(){
                     <Col><p>Operador</p></Col>
                 </Row>
             </Container>
-            <Container className={`${styles.contenido}`}>
+            <Container className={`${styles.operador}`}>
                 <Row className="justify-content-md-center">
                     <Col  lg="4" sm="10" xs="12">
                             <h2>{data}</h2>
diff --git a/styles/admin.module.css b/styles/admin.module.css
index 56b6efd..7b33232 100644
--- a/styles/admin.module.css
+++ b/styles/admin.module.css
@@ -1,10 +1,17 @@
 .contenido{
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     min-height: 350px;
     margin-top: 130px;
 }
+.operador{
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    min-height: 350px;
+    margin-top: 3%;
+    margin-bottom:3%
+
+}
 .subtitulo{
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     color:#1B3D70;
     font-weight: bold;
     font-size: x-large;
@@ -24,7 +31,7 @@
     margin-top: 15px;
     color:white;
     background-color: #1B3D70;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size: x-large;
     font-weight: bold;
     border:0;
@@ -32,7 +39,7 @@
 .salir{
     color:white;
     background-color: #1B3D70;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size: x-large;
     font-weight: bold;
     border:0;
diff --git a/styles/default.module.css b/styles/default.module.css
index 68ee24f..8b2f4a0 100644
--- a/styles/default.module.css
+++ b/styles/default.module.css
@@ -34,7 +34,7 @@
 .boton{
   color:white;
   background-color: #2c56a0;
-  font-family: 'Vollkorn', serif;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
   font-size: x-large;
   font-weight: bold;
   border:0px;
diff --git a/styles/exito.module.css b/styles/exito.module.css
index 0fb869f..91ac17b 100644
--- a/styles/exito.module.css
+++ b/styles/exito.module.css
@@ -2,7 +2,7 @@
     min-height: 500px;
     margin-bottom: 30px; 
     color:#644F0C;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size:xx-large;
     font-weight: bold;
     padding: 8%;
@@ -12,7 +12,7 @@
 .salir{
     color:white;
     background-color: #1B3D70;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size: x-large;
     font-weight: bold;
     border:0;
diff --git a/styles/globals.css b/styles/globals.css
index 642158c..97472f6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -24,7 +24,7 @@ a {
   margin-left: 7%;
   margin-right: 7%;
   padding-top: 30px;
-  font-family: 'Vollkorn', serif;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
   border-width: 0px;
   font-size: large;
 }
@@ -32,7 +32,7 @@ a {
 
 #subtitulo{
   color:#1B3D70;
-  font-family: 'Vollkorn', serif;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
   font-size:X-large;
   text-align: center;
   font-weight: bold;
diff --git a/styles/invitado.module.css b/styles/invitado.module.css
index 715e622..612344f 100644
--- a/styles/invitado.module.css
+++ b/styles/invitado.module.css
@@ -10,4 +10,7 @@
     border-width: 1px;
     border-color: black;
     border-style: solid;
+}
+.boton{
+    margin-bottom: 15px;
 }
\ No newline at end of file
diff --git a/styles/login.module.css b/styles/login.module.css
index f709301..910dd39 100644
--- a/styles/login.module.css
+++ b/styles/login.module.css
@@ -11,7 +11,7 @@
     font-weight: normal;
 }
 .contenido{
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     min-height: 500px;
     margin-top: 30px;
     color:#1B3D70;
@@ -23,7 +23,7 @@
     margin-top: 15px;
     color:white;
     background-color: #1B3D70;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size: x-large;
     font-weight: bold;
     border:0;
diff --git a/styles/profesores.module.css b/styles/profesores.module.css
index 804a494..6a2e7eb 100644
--- a/styles/profesores.module.css
+++ b/styles/profesores.module.css
@@ -4,7 +4,7 @@
     min-height: 400px;
     margin-bottom: 30px; 
     color:#644F0C;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size:xx-large;
     font-weight: bold;
     padding: 5%;
@@ -14,7 +14,7 @@
 }
 .titulo{
   color:#644F0C;
-  font-family: 'Vollkorn', serif;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
   text-align: center;
   font-size:xx-large;
   font-weight: bolder;
@@ -30,11 +30,12 @@
 }
 .boton1{
     color:white;
-    font-family: 'Vollkorn', serif;
-    font-size: x-large;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: large;
     font-weight: bold;
     background-color: rgb(100,79,12,76%);
     border:0;
+    margin-bottom: 15px;
 }
 .boton1:hover{
     background-color: rgb(100,79,12,50%);
@@ -42,7 +43,7 @@
 .boton2{
     color:white;
     background-color: #1B3D70;
-    font-family: 'Vollkorn', serif;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
     font-size: x-large;
     font-weight: bold;
     border:0;