Routing de quizzes dentro de la pagina de biografia arreglado. Color de header modifiacado

src/components/BiographySearchBar.tsx

   IonIcon,
 } from '@ionic/react';
 import biographies from '../data/Biograph.json'
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 
 function SearchBar() {
 
               </IonCardContent>
             </IonItem>
             <IonItem routerLink={`/Question/${result.id}`} detail={true}>
-              <IonIcon icon={square} />Tomar quiz
+              <IonIcon icon={clipboardOutline} />Tomar quiz
             </IonItem>
           </IonCard>
         </>

src/data/Quizzes.json

         "res4": ["New York Yankees","Houston Astros","Chicago Cubs","Pittsburgh Pirates"],
         "correcta4":"Pittsburgh Pirates"
 
-    },
+    }
+    ,
     {
         "id":2,
-        "title": "Rebekah Colberg Cabrera",
-        
-        "pregunta1": "¿En que año nació Rebekah Colberg Cabrera?",
+        "title": "German Rieckhoff Sampoyo",
+
+        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
         "res1": ["11","12","13","14"],
         "correcta1":"11",
 
-        "pregunta2": "¿En que año nació Rebekah Colberg Cabrera?",
+        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
         "res2": ["21","22","23","24"],
         "correcta2":"22",
 
-        "pregunta3": "¿En que año nació Rebekah Colberg Cabrera3",
+        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
         "res3": ["31","32","33","34"],
         "correcta3":"33",
 
-        "pregunta4": "¿En que año nació Rebekah Colberg Cabrera4",
+        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
         "res4": ["41","42","43","44"],
         "correcta4":"44"
-
     }
     ,
     {
         "id":3,
-        "title": "German Rieckhoff Sampoyo",
-
-        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
+        "title": "Rebekah Colberg Cabrera",
+        
+        "pregunta1": "¿En que año nació Rebekah Colberg Cabrera?",
         "res1": ["11","12","13","14"],
         "correcta1":"11",
 
-        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
+        "pregunta2": "¿En que año nació Rebekah Colberg Cabrera?",
         "res2": ["21","22","23","24"],
         "correcta2":"22",
 
-        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
+        "pregunta3": "¿En que año nació Rebekah Colberg Cabrera3",
         "res3": ["31","32","33","34"],
         "correcta3":"33",
 
-        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
+        "pregunta4": "¿En que año nació Rebekah Colberg Cabrera4",
         "res4": ["41","42","43","44"],
         "correcta4":"44"
+
     }
     ,
     {

src/pages/AboutUs.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Biography.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Biography.tsx

 import './Biography.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
     const [bioinfo, setMessage] = useState<BioInfo>();
                         <p>{bioinfo.Text10}</p>
                         <a href={bioinfo.url} target="_blank" rel="noreferrer">For more information press here</a>
                         <p> </p>
-                        <IonItem routerLink={`/Question`} detail={true}>
-                            <IonIcon icon={square} />Tomar quiz
+                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
+                            <IonIcon icon={clipboardOutline} />Tomar quiz
                         </IonItem>
                     </>
                 ) : (

src/pages/Capsule.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/HomePage.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/HomePage.tsx

   IonRow,
   IonItem
 } from '@ionic/react';
-import { square } from 'ionicons/icons';
+import { informationCircleOutline } from 'ionicons/icons';
 import './HomePage.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
           <div className='Item-Center'>
             <IonItem routerLink={`/About`} className="Footer-Color">
               <IonTabButton tab="AboutUs" href="/AboutUs">
-                <IonIcon icon={square} />
+                <IonIcon icon={informationCircleOutline} />
                 <IonLabel>Sobre nosotros</IonLabel>
               </IonTabButton>
             </IonItem>

src/pages/ListBiographies.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/ListBiographies.tsx

   IonBackButton,
 } from '@ionic/react';
 import './ListBiographies.css';
-import { clipboardOutline } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import SearchBar from '../components/BiographySearchBar';
 

src/pages/ListCapsules.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Questions.css

 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Questions.tsx

 
         }
 
-        // Para seleccionar si sale icono correccto o incorrecto en seleccion
+        // Para seleccionar si sale ícono correcto o incorrecto en selección
         // de radio.
 
-        // ======================= PREGUNTA 1 =========================================
+// =================================== PREGUNTA 1 =========================================
         // SI usuario seleccionio el primer radio en la pregunta 1
         if(selected1[0] && quizInfo?.res1[0] === quizInfo?.correcta1){
             setIcon11(<IonIcon icon={thumbsUp} />);
         else if (selected1[3] && quizInfo?.res1[3] !== quizInfo?.correcta1){
             setIcon14(<IonIcon icon={thumbsDown} />)
         }
-        // ======================= PREGUNTA 1 =========================================
+// =================================== PREGUNTA 1 =========================================
 
-        // ======================= PREGUNTA 2 =========================================
+// =================================== PREGUNTA 2 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 2
         if(selected2[0] && quizInfo?.res2[0] === quizInfo?.correcta2){
             setIcon24(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 2 =========================================
+// =================================== PREGUNTA 2 =========================================
 
-        // ======================= PREGUNTA 3 =========================================
+// =================================== PREGUNTA 3 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 3
         if(selected3[0] && quizInfo?.res3[0] === quizInfo?.correcta3){
             setIcon34(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 3 =========================================
+// =================================== PREGUNTA 3 =========================================
 
-        // ======================= PREGUNTA 4 =========================================
+// =================================== PREGUNTA 4 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 4
         if(selected4[0] && quizInfo?.res4[0] === quizInfo?.correcta4){
             setIcon44(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 4 =========================================
+// =================================== PREGUNTA 4 =========================================
 
         // Para saber cueantas resspuestas acertó el usuario
         setCountRes(count);