Browse Source

Commented all files

Ángel G. Romero Rosario 2 years ago
parent
commit
cfde94f722
5 changed files with 41 additions and 8 deletions
  1. 5
    0
      src/pages/Flag.tsx
  2. 24
    2
      src/pages/Home.tsx
  3. 7
    2
      src/pages/Info.tsx
  4. 2
    1
      src/pages/components/helpButton.tsx
  5. 3
    3
      src/theme/variables.css

+ 5
- 0
src/pages/Flag.tsx View File

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

+ 24
- 2
src/pages/Home.tsx View File

1
-import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon } from '@ionic/react';
1
+/* Created by Angel Romero, Cynthia Rivera and Jantony
2
+   This is the Home screen. This screen contains all the motivational 
3
+   messages that the user will see. 
4
+*/
5
+
6
+import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon, useIonAlert} from '@ionic/react';
2
 import { arrowDownCircle } from 'ionicons/icons';
7
 import { arrowDownCircle } from 'ionicons/icons';
3
 import { HelpBtn } from "./components/helpButton"
8
 import { HelpBtn } from "./components/helpButton"
4
 
9
 
14
 const current = new Date();
19
 const current = new Date();
15
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
20
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
16
 
21
 
22
+
23
+
17
 const Home: React.FC = () => {
24
 const Home: React.FC = () => {
25
+  // This is to present an alert when pressing the download 
26
+  // button showing a confirmation message
27
+// const [presentAlert] = useIonAlert();
28
+
18
 
29
 
19
   return (
30
   return (
20
     
31
     
24
       <IonContent fullscreen>
35
       <IonContent fullscreen>
25
         
36
         
26
         {/* Card 1 */}
37
         {/* Card 1 */}
38
+        {/* This is card that contains the motivational message */}
27
         <IonCard class="moti-card" color="light">
39
         <IonCard class="moti-card" color="light">
28
           <IonCardHeader class="card-header">
40
           <IonCardHeader class="card-header">
29
             <IonCardTitle class="card-date">
41
             <IonCardTitle class="card-date">
30
               {date}
42
               {date}
31
-              <IonButton fill="clear"> 
43
+              {/* Alert message */}
44
+              <IonButton fill="clear" 
45
+                // onClick={() =>
46
+                //   presentAlert({
47
+                //     header: 'Alerta',
48
+                //     message: 'La imagen se guardó correctamente en la galería',
49
+                //     buttons: ['OK'],
50
+                //   })
51
+                // }> 
52
+                >
53
+                {/* Download message button */}
32
                 <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
54
                 <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
33
               </IonButton> 
55
               </IonButton> 
34
             </IonCardTitle>
56
             </IonCardTitle>

+ 7
- 2
src/pages/Info.tsx View File

1
+/* Created by Angel Romero, Cynthia Rivera and Jantony
2
+   This is the information screen. This screen contains
3
+   all the information related to tallersalud
4
+*/
5
+
1
 import { IonCard, IonContent, IonPage, IonText } from '@ionic/react';
6
 import { IonCard, IonContent, IonPage, IonText } from '@ionic/react';
2
 import { HelpBtn } from './components/helpButton';
7
 import { HelpBtn } from './components/helpButton';
3
 import './styles/styles.css';
8
 import './styles/styles.css';
9
       <HelpBtn />
14
       <HelpBtn />
10
 
15
 
11
       <IonContent fullscreen>
16
       <IonContent fullscreen>
12
-
17
+        {/* This card contins all the contact information */}
13
         <IonCard class="info-card" color="light">
18
         <IonCard class="info-card" color="light">
14
           <IonText color="primary">
19
           <IonText color="primary">
15
             <h2>Contáctanos</h2>
20
             <h2>Contáctanos</h2>
51
               esenciales para el desarrllo social de Puerto Rico y para rearfirmar una
56
               esenciales para el desarrllo social de Puerto Rico y para rearfirmar una
52
               nueva noción de lo que es bienestar</p>
57
               nueva noción de lo que es bienestar</p>
53
           </IonText>
58
           </IonText>
54
-
59
+          {/* Webpage link */}
55
           <IonText class="ion-text-right">
60
           <IonText class="ion-text-right">
56
             <p>Más información en: <a href="https://www.tallersalud.com">Taller Salud</a></p>
61
             <p>Más información en: <a href="https://www.tallersalud.com">Taller Salud</a></p>
57
           </IonText>
62
           </IonText>

+ 2
- 1
src/pages/components/helpButton.tsx View File

10
 const phoneNumber = '7877101934'
10
 const phoneNumber = '7877101934'
11
 const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
11
 const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
12
 
12
 
13
+// Message that SMS will receive 
13
 const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
14
 const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
14
 
15
 
15
-
16
+// This function receives a message and opens the SMS app with a given phone number
16
 export function HelpBtn() {
17
 export function HelpBtn() {
17
     return (
18
     return (
18
         <IonHeader>
19
         <IonHeader>

+ 3
- 3
src/theme/variables.css View File

5
 :root {
5
 :root {
6
   /* Background-color */
6
   /* Background-color */
7
   	--ion-tab-bar-background:#F7F7F7;
7
   	--ion-tab-bar-background:#F7F7F7;
8
-	--ion-toolbar-background:#8f00ff;
9
-	--ion-background-color: linear-gradient(180deg, rgba(142,45,226,1) 0%, rgba(74,0,224,1) 100%);;
8
+	--ion-toolbar-background:#ba59db;
9
+	--ion-background-color: linear-gradient(180deg, #ba59db 0%, rgba(74,0,224,1) 100%);;
10
 	
10
 	
11
 
11
 
12
-	--ion-color-primary: #8f00ff;
12
+	--ion-color-primary: #ba59db;
13
 	--ion-color-primary-rgb: 143,0,255;
13
 	--ion-color-primary-rgb: 143,0,255;
14
 	--ion-color-primary-contrast: #ffffff;
14
 	--ion-color-primary-contrast: #ffffff;
15
 	--ion-color-primary-contrast-rgb: 255,255,255;
15
 	--ion-color-primary-contrast-rgb: 255,255,255;