Merge branch 'master' into UserStory6

package.json

   "devDependencies": {
     "@capacitor/cli": "4.5.0",
     "@ionic/lab": "3.2.15",
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "description": "An Ionic project"
 }

src/App.tsx

-import { IonNav, setupIonicReact } from '@ionic/react';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { Redirect, Route } from 'react-router-dom';
+import { IonReactRouter } from '@ionic/react-router';
 import HomePage from './pages/HomePage';
+import ListBiographies from './pages/ListBiographies';
+import Biography from './pages/Biography';
+import ListCapsules from './pages/ListCapsules';
+import Capsule from './pages/Capsule';
+import Questions from './pages/Questions';
+import AboutUs from './pages/AboutUs';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
 
 setupIonicReact();
 
+//<IonNav root={() => <HomePage />}></IonNav>
+
 const App: React.FC = () => (
-  <IonNav root={() => <HomePage />}></IonNav>
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/" exact={true}>
+          <Redirect to="/home" />
+        </Route>
+        <Route path="/home" exact={true}>
+          <HomePage />
+        </Route>
+        <Route path="/ListBiographie">
+          <ListBiographies />
+        </Route>
+        <Route path="/Biographie/:id">
+          <Biography />
+        </Route>
+        <Route path="/ListCapsules">
+          <ListCapsules />
+        </Route>
+        <Route path="/Capsule">
+          <Capsule />
+        </Route>
+        <Route path="/Question">
+          <Questions />
+        </Route>
+        <Route path="/About">
+          <AboutUs />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
 );
 
 export default App;

src/data/About.json

+[
+    {
+        "title": "Enciclopedia PR",
+        "title2": "Más sobre nosotros:",
+        "content": "Para más información sobre EnciclopediaPR, visite la página ",
+        "url": "https://enciclopediapr.org/"
+    }
+]

src/data/BioInfo.ts

+import ListBio from '../data/Biograph.json';
+
+export interface BioInfo {
+    id: number;
+    title: string;
+    content: string;
+    Text1: string;
+    Text2: string;
+    tags: string;
+    photo: string;
+}
+
+export const getMessages = () => ListBio;
+
+export const getMessage = (id: number) => ListBio.find(m => m.id === id);

src/data/Biograph.json

         "id": 1,
         "title": "Roberto Clemente",
         "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
+        "Text1": "Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.",
+        "Text2": "Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.",
         "tags": "Deportista, Puertorriqueño",
         "photo": "require('../assets/RobertoClemente.jpg')"
     },
         "id": 2,
         "title": "Marian Villaronga Toro",
         "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
+        "Text1": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio y televisión educativa, la Escuela Libre de Música y se adoptó el español como lengua oficial de la enseñanza en todos los niveles del sistema de educación pública en Puerto Rico.",
+        "Text2": "Mariano Villaronga Toro nació el 9 de noviembre de 1906 en el pueblo sureño de Ponce. Realizó sus estudios universitarios en la Universidad de Puerto Rico en Río Piedras, donde en 1929 completó un bachillerato en ciencias. Luego, se desempeñó como maestro en el sistema público del país y más adelante, como principal de escuela.",
         "tags": "Educador, Funcionario público, Puertorriqueño",
         "photo": "require('../assets/MarianoVillaronga.jpg')"
     },
     {
         "id": 3,
-        "title": "German Rieckhoff Sampoyo",
+        "title": "German Rieckhoff Sampayo",
         "content": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR)....",
+        "Text1": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR) de 1977 a 1989 y fue el primer puertorriqueño en ser miembro del Comité Olímpico Internacional. Durante su incumbencia, fundó el Albergue Olímpico ubicado en el pueblo de Salinas.",
+        "Text2": "Nació el 15 de febrero de 1915 en Vieques, hijo de la maestra Angelita Sampayo y del contador Germán Rieckehoff Morales, descendiente de emigrantes alemanes que fue electo a la Cámara de Representantes por el partido Alianza Puertorriqueña en el distrito electoral de Vieques, Fajardo y Culebra (1925-1928). Su educación primaria la realizó en su pueblo natal, en el Instituto Politécnico en San Germán y en la escuela Hawthorne en Río Piedras. Es para esta época que comienza su interés por los deportes; practicaba baloncesto, béisbol y formó parte de los niños escucha (boy scouts). Comenzó la escuela superior de la Universidad de Puerto Rico (UHS), en Río Piedras, pero abandonó los estudios en 1931.",
         "tags": "Líder deportivo, Abogado, Puertorriqueño",
         "photo": "require('../assets/DonGermán.jpg')"
     }

src/pages/AboutUs.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/AboutUs.tsx

   IonPage,
   IonToolbar,
   IonFooter,
-  IonNavLink,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './AboutUs.css';
-import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+import About from '../data/About.json'
 
 const AboutUs: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen className="ion-padding">
-        <h1>Enciclopedia PR</h1>
-        <h2>Más sobre nosotros:</h2>
-        <p>Para más información sobre EnciclopediaPR, visite la página href='https://enciclopediapr.org/'</p>
+        {
+          About && About.map(infoAb => {
+            return (
+              <>
+                <h1>{infoAb.title}</h1>
+                <h2>{infoAb.title2}</h2>
+                <p>{infoAb.content} {infoAb.url}</p>
+              </>
+            )
+          })
+        }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Biography.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Biography.tsx

     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonButton,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButtons,
+    IonBackButton,
+    useIonViewWillEnter,
+    IonItem,
+    IonIcon
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
-import React from 'react';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
+import { BioInfo, getMessage } from '../data/BioInfo';
 import './Biography.css';
-import ListBiographies from './ListBiographies';
-import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import { square } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
+    const [bioinfo, setMessage] = useState<BioInfo>();
+    const params = useParams<{ id: string }>();
+
+    useIonViewWillEnter(() => {
+        const msg = getMessage(parseInt(params.id, 10));
+        setMessage(msg);
+    });
+
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                <h1>Roberto Clemente</h1>
-
-                <p>Pelotero, Filántropo</p>
-                <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
-                <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
+                {bioinfo ? (
+                    <>
+                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <h1>{bioinfo.title}</h1>
 
-                <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                </IonNavLink>
+                        <p>{bioinfo.tags}</p>
+                        <p>{bioinfo.Text1}</p>
+                        <p>{bioinfo.Text2}</p>
+                        <IonItem routerLink={`/Question`} detail={true}>
+                            <IonIcon icon={square} />Tomar quiz
+                        </IonItem>
+                    </>
+                ) : (
+                    <div>Message not found</div>
+                )}
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-                        <IonTabButton tab="ListBiographies" href="/ListBiographies">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/home"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/Capsule.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Capsule.tsx

     IonToolbar,
     IonFooter,
     IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButton,
+    IonButtons,
+    IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Capsule.css';
-import ListCapsules from './ListCapsules';
+import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import Bomba from '../assets/BombaPuertorriquena.jpg';
+import RobertoClemente from '../assets/RobertoClemente.jpg';
 
 const Capsule: React.FC = () => {
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
                 <p>Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.</p>
                 <p>Se ejecutaba en hileras, con los participantes cogidos de las manos, de los brazos o, según Bartolomé de las Casas, “los brazos de los unos puestos sobre los hombros de los otros”. Según Pedro Mártir de Anglería, los participantes llevaban caracoles en los brazos y piernas, con los que producían “un ruido agradable”. Narraban una historia y el guía indicaba qué pasos y cantos se repetirían hasta que ésta culminara.</p>
                 <p>Aunque la llegada de los conquistadores españoles produjo una rápida desaparición de la población indígena y de cualquier expresión autóctona que las autoridades consideraran pagana, Fray Iñigo Abbad y Lasierra afirmaba en 1789 que “la diversión más apreciable para estos isleños son los bailes; los tienen sin más motivo que el de pasar el tiempo y rara vez faltan en una cosa u otra”.</p>
+
+                <h2>Information about important figures</h2>
+                <IonGrid fixed={true}>
+                    <IonRow>
+                        <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <IonNavLink routerDirection="forward" component={() => <Biography />} >
+                            <IonButton color="light">Roberto Clemente</IonButton>
+                        </IonNavLink>
+                    </IonRow>
+                </IonGrid>
+
             </IonContent>
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-                        <IonTabButton tab="ListCapsules" href="/ListCapsules">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/HomePage.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/pages/HomePage.tsx

 import {
   IonContent,
-  IonButton,
   IonHeader,
   IonPage,
   IonTitle,
   IonCardHeader,
   IonCardSubtitle,
   IonCardTitle,
-  IonNavLink,
   IonFooter,
   IonTabButton,
   IonIcon,
   IonImg,
   IonCol,
   IonGrid,
-  IonRow
+  IonRow,
+  IonItem
 } from '@ionic/react';
 import { square } from 'ionicons/icons';
 import './HomePage.css';
-import ListBiographies from './ListBiographies';
-import ListCapsules from './ListCapsules';
-import AboutUs from './AboutUs';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const HomePage: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Biografías</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Cápsulas</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListBiographie`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Biografías</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListCapsules`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Cápsulas</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
-            <IonTabButton tab="AboutUs" href="/AboutUs">
-              <IonIcon icon={square} />
-              <IonLabel>Sobre nosotros</IonLabel>
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonItem routerLink={`/About`}>
+              <IonTabButton tab="AboutUs" href="/AboutUs">
+                <IonIcon icon={square} />
+                <IonLabel>Sobre nosotros</IonLabel>
+              </IonTabButton>
+            </IonItem>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListBiographies.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListBiographies.tsx

   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton,
+  IonItem,
+  IonIcon
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
-import Biography from './Biography';
-import Questions from './Questions';
-import HomePage from './HomePage';
+import { square } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 import ListBio from '../data/Biograph.json';
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-
         {
           ListBio && ListBio.map(listbio => {
             return (
               <>
                 <IonCard>
-                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                  <IonCardHeader>
-                    <IonCardTitle>{listbio.title}</IonCardTitle>
-                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
-                  </IonCardHeader><IonCardContent>
-                    {listbio.content}
-                  </IonCardContent>
-                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                    <IonButton>Go to</IonButton>
-                  </IonNavLink>
-
-                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                  </IonNavLink>
-
+                  <IonItem routerLink={`/Biographie/${listbio.id}`}>
+                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                    <IonCardHeader>
+                      <IonCardTitle>{listbio.title}</IonCardTitle>
+                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                    </IonCardHeader><IonCardContent>
+                      {listbio.content}
+                    </IonCardContent>
+                  </IonItem>
+                  <IonItem routerLink={`/Question`} detail={true}>
+                    <IonIcon icon={square} />Tomar quiz
+                  </IonItem>
                 </IonCard>
               </>
             )
           })
         }
-
-
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListCapsules.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListCapsules.tsx

   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListCapsules.css';
-import HomePage from './HomePage';
-import Capsule from './Capsule'
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const ListCapsules: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
         <IonList inset={true}>
-          <IonItem>
+          <IonItem routerLink={`/Capsule`} detail={true}>
             <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-              <IonButton>Visitar</IonButton>
-            </IonNavLink>
           </IonItem>
           <IonItem>
             <IonLabel>Cápsula#2</IonLabel>
         </IonList>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Questions.css

     align-items: center;
 }
 
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
+}
+
 ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;

src/pages/Questions.tsx

     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonItem,
     IonLabel,
     IonGrid,
     IonRow,
     IonCol,
-    IonRadioGroup,
-    IonRadio
+    IonButtons,
+    IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React, {useState} from 'react';
 //import { Form } from 'react-bootstrap';
 import './Questions.css';
-import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 //import RobertoClemente from '../assets/RobertoClemente.jpg';
 //import Quizzes from '../data/Quizzes.json';
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
             {QuizForm(1)}
 
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                        <IonTabButton tab="Biography" href="/Biography">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>