Merge branch 'eliam-final' of sergio.mattei/RenacerSocial into main

src/components/ListComponent.css

   width: 100%;
 }
 
-ion-list-header {
-  /* color: "primary"; */
+ion-list {
+  background-color: aqua;
 }

src/pages/Home.tsx

 import {
   IonContent,
   IonHeader,
+  IonIcon,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 
+
+
 const Home: React.FC = () => {
   return (
     <IonPage>

src/pages/services/ApoyoPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent"
 
 const ApoyoPage: React.FC = () => {
+  let body= "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Seguridad y Apoyo. También me gustaría saber donde están actualmente ubicados."
   return (
     <IonPage>
       <IonHeader>
             durante su espera. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/CasitaPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent"
 
 const CasitaPage: React.FC = () => {
+  let body= "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Casita. También me gustaría saber donde están actualmente ubicados."
   return (
     <IonPage>
       <IonHeader>
             llame a nuestras oficinas para más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/ConsejosPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const ConsejosPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Consejería. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             cómodo. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/EducacionPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const EducacionPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Educación. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             familia y en la sociedad. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/LazosPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const LazosPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Lazos. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/SupervisadasPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const SupervisadasPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Visitas Supervisadas. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             envueltos. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TalleresPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const TalleresPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Talleres Educativos. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             profesionales para fortalecer nuestra comunidad.
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TerapeuticasPage.tsx

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const TerapeuticasPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Visitas Supervisadas Terapéuticas. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
             virtual. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/theme/global.css

 .notion-title,
 .notion-header {
   display: none !important;
+  background-color: #d6f8df;
 }
 
 .notion-page {
   width: 100% !important;
   padding: 0px 0px 0px 0px !important;
+  background-color: #d6f8df;
 }
 
 main.notion-page-no-cover {
   padding-top: 0px !important;
   margin-top: 0px !important;
+  background-color: #d6f8df;
 }
 
 .notion-blank {
   display: none !important;
+  background-color: #d6f8df;
+  
 }
 
 .video {
   right: 0;
   width: 100%;
   height: 100%;
-}
+}

src/theme/variables.css

   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  /** Color styling for the app **/
+
+  /* --ion-background-color: #bcf5a7;
+  --ion-tab-bar-background:#FFE001;
+  --ion-toolbar-color:#000000;
+  --ion-tab-bar-color:#ee3c2c;
+  --ion-tab-bar-color-selected:#39c6e3;
+  --ion-border-color:#000000;
+  --ion-toolbar-background:#39c6e3; */
+  --ion-background-color:#d6f8df;
+--ion-background-color-rgb:rgb(255, 255, 255);
+--ion-text-color:#000000;	 
+--ion-text-color-rgb:rgb(0, 0, 0);	
+--ion-tab-bar-background:#51c16b;
+--ion-tab-bar-border-color:#727272;
+--ion-tab-bar-color:#defbe3;
+--ion-tab-bar-color-selected:#165cf3;
+--ion-toolbar-background:#6e99f5;
+--ion-toolbar-border-color:#727272; 
+--ion-toolbar-color:#000000;
+--ion-toolbar-segment-color:#ffffff; 
+--ion-toolbar-segment-color-checked:#ffffff;
+--ion-toolbar-segment-background:#ffffff; 
+--ion-toolbar-segment-background-checked:#ffffff;
+--ion-toolbar-segment-indicator-color:#614848; 
+--ion-item-background:#defbe3; 
+--ion-item-border-color:#ff9a9a87;
+--ion-item-color:#000000; 
+--ion-placeholder-color:#ffffff;
+  
 }
 
 /*