Color Added

src/pages/AboutUs.css

@@ -11,4 +11,19 @@ ion-grid {
 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

@@ -21,7 +21,7 @@ const AboutUs: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
@@ -48,10 +48,12 @@ const AboutUs: React.FC = () => {
         }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Biography.css

@@ -11,4 +11,19 @@ ion-grid {
 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

@@ -35,7 +35,7 @@ const Biography: React.FC = () => {
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
@@ -67,10 +67,12 @@ const Biography: React.FC = () => {
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/home"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/home"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/Capsule.css

@@ -11,4 +11,19 @@ ion-grid {
 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

@@ -25,7 +25,7 @@ const Capsule: React.FC = () => {
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
@@ -58,10 +58,12 @@ const Capsule: React.FC = () => {
 
             </IonContent>
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/HomePage.css

@@ -16,4 +16,19 @@ ion-grid {
 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

@@ -26,7 +26,7 @@ const HomePage: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
@@ -40,31 +40,37 @@ const HomePage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonItem routerLink={`/ListBiographie`} detail={true}>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Biografías</IonCardTitle>
-              <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
-            </IonCardHeader>
-          </IonCard>
-        </IonItem>
-        <IonItem routerLink={`/ListCapsules`} detail={true}>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Cápsulas</IonCardTitle>
-              <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
-            </IonCardHeader>
-          </IonCard>
-        </IonItem>
+        <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>
-          <IonItem routerLink={`/About`} detail={true}>
-            <IonTabButton tab="AboutUs" href="/AboutUs">
-              <IonIcon icon={square} />
-              <IonLabel>Sobre nosotros</IonLabel>
-            </IonTabButton>
-          </IonItem>
+        <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

@@ -11,4 +11,19 @@ ion-grid {
 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

@@ -30,7 +30,7 @@ const ListBiographies: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
@@ -45,12 +45,11 @@ const ListBiographies: React.FC = () => {
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-
         {
           ListBio && ListBio.map(listbio => {
             return (
               <>
-                <IonItem routerLink={`/Biographie/${listbio.id}`} detail={true}>
+                <IonItem routerLink={`/Biographie/${listbio.id}`}>
                   <IonCard>
                     <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
                     <IonCardHeader>
@@ -70,10 +69,12 @@ const ListBiographies: React.FC = () => {
         }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListCapsules.css

@@ -11,4 +11,19 @@ ion-grid {
 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

@@ -23,7 +23,7 @@ const ListCapsules: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
@@ -51,10 +51,12 @@ const ListCapsules: React.FC = () => {
         </IonList>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Questions.css

@@ -11,4 +11,19 @@ ion-grid {
 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/Questions.tsx

@@ -31,7 +31,7 @@ const Questions: React.FC = () => {
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
@@ -176,10 +176,12 @@ const Questions: React.FC = () => {
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>