Commented all files

src/pages/Flag.tsx

@@ -1,3 +1,8 @@
+/* Created by Angel Romero, Cynthia Rivera and Jantony
+   This is the flag screen. This screen has the red flags 
+   that a person has to look in a relationship
+*/
+
 import {
   IonAccordion,
   IonAccordionGroup,

src/pages/Home.tsx

@@ -1,4 +1,9 @@
-import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon } from '@ionic/react';
+/* Created by Angel Romero, Cynthia Rivera and Jantony
+   This is the Home screen. This screen contains all the motivational 
+   messages that the user will see. 
+*/
+
+import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon, useIonAlert} from '@ionic/react';
 import { arrowDownCircle } from 'ionicons/icons';
 import { HelpBtn } from "./components/helpButton"
 
@@ -14,7 +19,13 @@ let num = value.toString();
 const current = new Date();
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
 
+
+
 const Home: React.FC = () => {
+  // This is to present an alert when pressing the download 
+  // button showing a confirmation message
+// const [presentAlert] = useIonAlert();
+
 
   return (
     
@@ -24,11 +35,22 @@ const Home: React.FC = () => {
       <IonContent fullscreen>
         
         {/* Card 1 */}
+        {/* This is card that contains the motivational message */}
         <IonCard class="moti-card" color="light">
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}
-              <IonButton fill="clear"> 
+              {/* Alert message */}
+              <IonButton fill="clear" 
+                // onClick={() =>
+                //   presentAlert({
+                //     header: 'Alerta',
+                //     message: 'La imagen se guardó correctamente en la galería',
+                //     buttons: ['OK'],
+                //   })
+                // }> 
+                >
+                {/* Download message button */}
                 <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
               </IonButton> 
             </IonCardTitle>

src/pages/Info.tsx

@@ -1,3 +1,8 @@
+/* Created by Angel Romero, Cynthia Rivera and Jantony
+   This is the information screen. This screen contains
+   all the information related to tallersalud
+*/
+
 import { IonCard, IonContent, IonPage, IonText } from '@ionic/react';
 import { HelpBtn } from './components/helpButton';
 import './styles/styles.css';
@@ -9,7 +14,7 @@ const Info: React.FC = () => {
       <HelpBtn />
 
       <IonContent fullscreen>
-
+        {/* This card contins all the contact information */}
         <IonCard class="info-card" color="light">
           <IonText color="primary">
             <h2>Contáctanos</h2>
@@ -51,7 +56,7 @@ const Info: React.FC = () => {
               esenciales para el desarrllo social de Puerto Rico y para rearfirmar una
               nueva noción de lo que es bienestar</p>
           </IonText>
-
+          {/* Webpage link */}
           <IonText class="ion-text-right">
             <p>Más información en: <a href="https://www.tallersalud.com">Taller Salud</a></p>
           </IonText>

src/pages/components/helpButton.tsx

@@ -10,9 +10,10 @@ const separator = isPlatform('ios') === false ? '&' : '?'
 const phoneNumber = '7877101934'
 const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
 
+// Message that SMS will receive 
 const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
 
-
+// This function receives a message and opens the SMS app with a given phone number
 export function HelpBtn() {
     return (
         <IonHeader>

src/theme/variables.css

@@ -5,11 +5,11 @@ http://ionicframework.com/docs/theming/ */
 :root {
   /* Background-color */
   	--ion-tab-bar-background:#F7F7F7;
-	--ion-toolbar-background:#8f00ff;
-	--ion-background-color: linear-gradient(180deg, rgba(142,45,226,1) 0%, rgba(74,0,224,1) 100%);;
+	--ion-toolbar-background:#ba59db;
+	--ion-background-color: linear-gradient(180deg, #ba59db 0%, rgba(74,0,224,1) 100%);;
 	
 
-	--ion-color-primary: #8f00ff;
+	--ion-color-primary: #ba59db;
 	--ion-color-primary-rgb: 143,0,255;
 	--ion-color-primary-contrast: #ffffff;
 	--ion-color-primary-contrast-rgb: 255,255,255;