Info Page Update

src/App.tsx

@@ -57,18 +57,18 @@ const App: React.FC = () => (
             <Redirect to="/home" />
           </Route>
         </IonRouterOutlet>
-        <IonTabBar slot="bottom">
+        <IonTabBar color="light" slot="bottom">
           <IonTabButton tab="home" href="/home">
-            <IonIcon icon={home} />
-            <IonLabel>Home</IonLabel>
+            <IonIcon color="primary" icon={home} />
+            <IonLabel color="primary">Home</IonLabel>
           </IonTabButton>
           <IonTabButton tab="flag" href="/flag">
-            <IonIcon icon={flag} />
-            <IonLabel>Flag</IonLabel>
+            <IonIcon color="primary" icon={flag} />
+            <IonLabel color="primary">Flag</IonLabel>
           </IonTabButton>
           <IonTabButton tab="info" href="/info">
-            <IonIcon icon={peopleCircle} />
-            <IonLabel>Info</IonLabel>
+            <IonIcon color="primary" icon={peopleCircle} />
+            <IonLabel color="primary">Info</IonLabel>
           </IonTabButton>
         </IonTabBar>
       </IonTabs>

src/pages/Info.tsx

@@ -1,4 +1,4 @@
-import { IonContent, IonHeader, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';
+import { IonCard, IonContent, IonHeader, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Info.css';
 
@@ -16,11 +16,25 @@ const Info: React.FC = () => {
             <IonTitle size="large">Info</IonTitle>
           </IonToolbar>
         </IonHeader>
+        <IonCard color="light">
         <IonText color="primary">
           <h2>Contáctanos</h2>
         </IonText>
-        <p>Teléfonos: (787)876-3440 / (787)256-7568</p>
-        <p>Email: info@tallersaludpr.org</p>
+        <p>Teléfonos: <a href="tel:(787)876-3440">(787)876-3440</a> / <a href="tel:(787)256-7568">(787)256-7568</a></p>
+        <p>Email: <a href="mailto:info@tallersaludpr.org">info@tallersaludpr.org</a></p>
+        <IonText color="primary">
+          <h2>Visión</h2>
+        </IonText>
+        <p>Una sociedad inclusiva con comunidades organizadas y libres de opresión que ejercen su derecho a la salud integral y a una vida digna, e impulsan su desarrollo colectivo y sostenible</p>
+        <IonText color="primary">
+          <h2>Misión</h2>
+        </IonText>
+        <p>Elevar el liderato de las mujeres para así co-crear bienestar, salud integral y oportunidades de desarrllo individual y colectivo.</p>
+        <IonText color="primary">
+          <h2>Valores</h2>
+        </IonText>
+        <p>En Taller Salud vivimos estos valores en el diseño de nuestro trabajo y en nuestro quehacer cotidiano, bajo la convicción firme de que son esenciales para el desarrllo social de Puerto Rico y para rearfirmar una nueva noción de lo que es bienestar</p>
+        </IonCard>
       </IonContent>
     </IonPage>
   );

src/theme/variables.css

@@ -3,6 +3,8 @@ http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
 :root {
+  --ion-background-color: #8f00ff;
+  
   /** primary **/
   --ion-color-primary: #8f00ff;
   --ion-color-primary-rgb: 56, 128, 255;