Browse Source

Code refactor and fix close button

AngelRomero5 2 years ago
parent
commit
0c70ae556b

BIN
.DS_Store View File


+ 2
- 0
.gitignore View File

@@ -0,0 +1,2 @@
1
+node_modules/
2
+public/

+ 1
- 1
package-lock.json View File

@@ -16,7 +16,6 @@
16 16
         "@types/jest": "^26.0.20",
17 17
         "@types/node": "^12.19.15",
18 18
         "@types/react": "^18.0.17",
19
-        "@types/react-dom": "^18.0.6",
20 19
         "@types/react-router": "^5.1.11",
21 20
         "@types/react-router-dom": "^5.1.7",
22 21
         "history": "^4.9.0",
@@ -41,6 +40,7 @@
41 40
         "workbox-streams": "^5.1.4"
42 41
       },
43 42
       "devDependencies": {
43
+        "@types/react-dom": "^18.0.9",
44 44
         "react-scripts": "5.0.1"
45 45
       }
46 46
     },

+ 1
- 1
package.json View File

@@ -11,7 +11,6 @@
11 11
     "@types/jest": "^26.0.20",
12 12
     "@types/node": "^12.19.15",
13 13
     "@types/react": "^18.0.17",
14
-    "@types/react-dom": "^18.0.6",
15 14
     "@types/react-router": "^5.1.11",
16 15
     "@types/react-router-dom": "^5.1.7",
17 16
     "history": "^4.9.0",
@@ -61,6 +60,7 @@
61 60
   },
62 61
   "description": "An Ionic project",
63 62
   "devDependencies": {
63
+    "@types/react-dom": "^18.0.9",
64 64
     "react-scripts": "5.0.1"
65 65
   }
66 66
 }

BIN
src/.DS_Store View File


+ 2
- 4
src/App.tsx View File

@@ -10,10 +10,7 @@ import {
10 10
   setupIonicReact
11 11
 } from '@ionic/react';
12 12
 import { IonReactRouter } from '@ionic/react-router';
13
-import { atCircle, attach, ellipse, flag, home, people, peopleCircle, square, triangle } from 'ionicons/icons';
14
-import Tab1 from './pages/Info';
15
-import Tab2 from './pages/Home';
16
-import Tab3 from './pages/Flag';
13
+import { flag, home, peopleCircle } from 'ionicons/icons';
17 14
 
18 15
 /* Core CSS required for Ionic components to work properly */
19 16
 import '@ionic/react/css/core.css';
@@ -57,6 +54,7 @@ const App: React.FC = () => (
57 54
             <Redirect to="/home" />
58 55
           </Route>
59 56
         </IonRouterOutlet>
57
+        
60 58
         <IonTabBar color="light" slot="bottom">
61 59
           <IonTabButton tab="home" href="/home">
62 60
             <IonIcon color="primary" icon={home} />

+ 0
- 24
src/components/ExploreContainer.css View File

@@ -1,24 +0,0 @@
1
-.container {
2
-  text-align: center;
3
-  position: absolute;
4
-  left: 0;
5
-  right: 0;
6
-  top: 50%;
7
-  transform: translateY(-50%);
8
-}
9
-
10
-.container strong {
11
-  font-size: 20px;
12
-  line-height: 26px;
13
-}
14
-
15
-.container p {
16
-  font-size: 16px;
17
-  line-height: 22px;
18
-  color: #8c8c8c;
19
-  margin: 0;
20
-}
21
-
22
-.container a {
23
-  text-decoration: none;
24
-}

+ 0
- 16
src/components/ExploreContainer.tsx View File

@@ -1,16 +0,0 @@
1
-import './ExploreContainer.css';
2
-
3
-interface ContainerProps {
4
-  name: string;
5
-}
6
-
7
-const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
8
-  return (
9
-    <div className="container">
10
-      <strong>{name}</strong>
11
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
12
-    </div>
13
-  );
14
-};
15
-
16
-export default ExploreContainer;

+ 0
- 16
src/pages/Flag.css View File

@@ -1,16 +0,0 @@
1
-ion-title.title-large {
2
-    color: #ffffff;
3
-    font-size: 30px;
4
-}
5
-  
6
-ion-title {
7
-    --color: #ffffff;
8
-}
9
-  
10
-ion-toolbar {
11
-    --background: #8f00ff;
12
-}
13
-
14
-ion-button {
15
-    --color: #8f00ff;
16
-}

+ 236
- 217
src/pages/Flag.tsx View File

@@ -1,19 +1,30 @@
1
-import { IonCardHeader, IonCardTitle } from '@ionic/core/components';
2
-import React, { useState, useRef, useEffect } from 'react';
3
-import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
4
-import ExploreContainer from '../components/ExploreContainer';
5
-import './Flag.css';
1
+// Created by Cynthia 
2
+// Edited by Angel Romero 
6 3
 
4
+import React, { useRef } from 'react';
5
+import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
6
+import './styles/styles.css';
7
+
8
+
9
+// Create all the modal elements for each card element on the flag screen
7 10
 const Flag: React.FC = () => {
8
-  const modal = useRef<HTMLIonModalElement>(null);
11
+  const amenazas = useRef<HTMLIonModalElement>(null);
12
+  const intimidacion = useRef<HTMLIonModalElement>(null);
13
+  const abusoEmo = useRef<HTMLIonModalElement>(null);
14
+  const aislamiento = useRef<HTMLIonModalElement>(null);
15
+  const desvalorizar = useRef<HTMLIonModalElement>(null);
16
+  const manipulacion = useRef<HTMLIonModalElement>(null);
17
+  const abusoEco = useRef<HTMLIonModalElement>(null);
18
+  const privMasc = useRef<HTMLIonModalElement>(null);
9 19
 
10 20
   return (
11 21
     <IonPage>
12 22
       <IonHeader>
13 23
         <IonToolbar>
14
-        <IonTitle class="ion-text-center">TPC</IonTitle>
24
+          <IonTitle class="ion-text-center">TPC</IonTitle>
15 25
         </IonToolbar>
16 26
       </IonHeader>
27
+
17 28
       <IonContent fullscreen>
18 29
         <IonHeader collapse="condense">
19 30
           <IonToolbar>
@@ -24,240 +35,248 @@ const Flag: React.FC = () => {
24 35
         <IonTitle class="ion-text-center" color="light">Pendiente a...</IonTitle>
25 36
         <IonGrid>
26 37
           <IonRow>
38
+            {/* Amenazas card */}
27 39
             <IonCol>
28
-                <IonButton id="open-amenazas" color="light" expand="block">
29
-                  Amenazas
30
-                </IonButton>
31
-                <IonModal ref={modal} keepContentsMounted={true} trigger="open-amenazas">
32
-                  <IonHeader>
33
-                    <IonToolbar>
34
-                      <IonTitle>Amenazas</IonTitle>
35
-                      <IonButtons slot="end">
36
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
37
-                      </IonButtons>
38
-                   </IonToolbar>
39
-                  </IonHeader>
40
-                  <IonContent className="ion-padding">
41
-                    <IonCard color="light">
42
-                      <p>Asustarla con amenazas de hacerle mal.</p>
43
-                    </IonCard>
44
-                    <IonCard color="light">
45
-                      <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
46
-                    </IonCard>
47
-                    <IonCard color="light">
48
-                      <p>Obligarla a retirar los cargos presentados contra él.</p>
49
-                    </IonCard>
50
-                    <IonCard color="light">
51
-                      <p>Obligarla a cometer actos ilegales.</p>
52
-                    </IonCard>
53
-                  </IonContent>
54
-                </IonModal>
40
+              <IonButton id="open-amenazas" color="light" expand="block">
41
+                Amenazas
42
+              </IonButton>
43
+              <IonModal ref={amenazas} trigger="open-amenazas">
44
+                <IonHeader>
45
+                  <IonToolbar>
46
+                    <IonTitle>Amenazas</IonTitle>
47
+                    <IonButtons slot="end">
48
+                      <IonButton color="light" onClick={() => amenazas.current?.dismiss()}>Cerrar</IonButton>
49
+                    </IonButtons>
50
+                  </IonToolbar>
51
+                </IonHeader>
52
+                <IonContent className="ion-padding">
53
+                  <IonCard color="light">
54
+                    <p>Asustarla con amenazas de hacerle mal.</p>
55
+                  </IonCard>
56
+                  <IonCard color="light">
57
+                    <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
58
+                  </IonCard>
59
+                  <IonCard color="light">
60
+                    <p>Obligarla a retirar los cargos presentados contra él.</p>
61
+                  </IonCard>
62
+                  <IonCard color="light">
63
+                    <p>Obligarla a cometer actos ilegales.</p>
64
+                  </IonCard>
65
+                </IonContent>
66
+              </IonModal>
55 67
             </IonCol>
68
+            {/* Intimidacion card */}
56 69
             <IonCol>
57
-                <IonButton id="open-intimidacion" color="light" expand="block" >
58
-                  Intimidación
59
-                </IonButton>
60
-                <IonModal ref={modal} keepContentsMounted={true} trigger="open-intimidacion">
61
-                  <IonHeader>
62
-                    <IonToolbar>
63
-                      <IonTitle>Intimidación</IonTitle>
64
-                      <IonButtons slot="end">
65
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
66
-                      </IonButtons>
67
-                   </IonToolbar>
68
-                  </IonHeader>
69
-                  <IonContent className="ion-padding">
70
-                    <IonCard color="light">
71
-                      <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
72
-                    </IonCard>
73
-                    <IonCard color="light">
74
-                      <p>Destrozar objetos.</p>
75
-                    </IonCard>
76
-                    <IonCard color="light">
77
-                      <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
78
-                    </IonCard>
79
-                  </IonContent>
80
-                </IonModal>
70
+              <IonButton id="open-intimidacion" color="light" expand="block" >
71
+                Intimidación
72
+              </IonButton>
73
+              <IonModal ref={intimidacion} trigger="open-intimidacion">
74
+                <IonHeader>
75
+                  <IonToolbar>
76
+                    <IonTitle>Intimidación</IonTitle>
77
+                    <IonButtons slot="end">
78
+                      <IonButton color="light" onClick={() => intimidacion.current?.dismiss()}>Cerrar</IonButton>
79
+                    </IonButtons>
80
+                  </IonToolbar>
81
+                </IonHeader>
82
+                <IonContent className="ion-padding">
83
+                  <IonCard color="light">
84
+                    <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
85
+                  </IonCard>
86
+                  <IonCard color="light">
87
+                    <p>Destrozar objetos.</p>
88
+                  </IonCard>
89
+                  <IonCard color="light">
90
+                    <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
91
+                  </IonCard>
92
+                </IonContent>
93
+              </IonModal>
81 94
             </IonCol>
82 95
           </IonRow>
83 96
           <IonRow>
97
+            {/* Abuso emocional card */}
84 98
             <IonCol>
85 99
               <IonButton id="open-abuso-emocional" color="light" expand="block">
86
-                 Abuso Emocional
87
-                </IonButton>
88
-                <IonModal ref={modal} trigger="open-abuso-emocional">
89
-                  <IonHeader>
90
-                    <IonToolbar>
91
-                      <IonTitle>Abuso Emocional</IonTitle>
92
-                      <IonButtons slot="end">
93
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
94
-                      </IonButtons>
95
-                   </IonToolbar>
96
-                  </IonHeader>
97
-                  <IonContent className="ion-padding">
98
-                    <IonCard color="light">
99
-                      <p>Hacerla sentir inferior.</p>
100
-                    </IonCard>
101
-                    <IonCard color="light">
102
-                      <p>Hacerla sentir mal.</p>
103
-                    </IonCard>
104
-                    <IonCard color="light">
105
-                      <p>Insultarle con nombres ofensivos.</p>
106
-                    </IonCard>
107
-                    <IonCard color="light">
108
-                      <p>Hacerla pensar que está loca.</p>
109
-                    </IonCard>
110
-                    <IonCard color="light">
111
-                      <p>Confundirla a propósito.</p>
112
-                    </IonCard>
113
-                    <IonCard color="light">
114
-                      <p>Humillarla.</p>
115
-                    </IonCard>
116
-                    <IonCard color="light">
117
-                      <p>Hacerla sentir culpable.</p>
118
-                    </IonCard>
119
-                  </IonContent>
120
-                </IonModal>
100
+                Abuso Emocional
101
+              </IonButton>
102
+              <IonModal ref={abusoEmo} trigger="open-abuso-emocional">
103
+                <IonHeader>
104
+                  <IonToolbar>
105
+                    <IonTitle>Abuso Emocional</IonTitle>
106
+                    <IonButtons slot="end">
107
+                      <IonButton color="light" onClick={() => abusoEmo.current?.dismiss()}>Cerrar</IonButton>
108
+                    </IonButtons>
109
+                  </IonToolbar>
110
+                </IonHeader>
111
+                <IonContent className="ion-padding">
112
+                  <IonCard color="light">
113
+                    <p>Hacerla sentir inferior.</p>
114
+                  </IonCard>
115
+                  <IonCard color="light">
116
+                    <p>Hacerla sentir mal.</p>
117
+                  </IonCard>
118
+                  <IonCard color="light">
119
+                    <p>Insultarle con nombres ofensivos.</p>
120
+                  </IonCard>
121
+                  <IonCard color="light">
122
+                    <p>Hacerla pensar que está loca.</p>
123
+                  </IonCard>
124
+                  <IonCard color="light">
125
+                    <p>Confundirla a propósito.</p>
126
+                  </IonCard>
127
+                  <IonCard color="light">
128
+                    <p>Humillarla.</p>
129
+                  </IonCard>
130
+                  <IonCard color="light">
131
+                    <p>Hacerla sentir culpable.</p>
132
+                  </IonCard>
133
+                </IonContent>
134
+              </IonModal>
121 135
             </IonCol>
136
+            {/* Aislamiento card */}
122 137
             <IonCol>
123 138
               <IonButton id="open-aislamiento" color="light" expand="block">
124
-                 Aislamiento
125
-                </IonButton>
126
-                <IonModal ref={modal} trigger="open-aislamiento">
127
-                  <IonHeader>
128
-                    <IonToolbar>
129
-                      <IonTitle>Aislamiento</IonTitle>
130
-                      <IonButtons slot="end">
131
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
132
-                      </IonButtons>
133
-                   </IonToolbar>
134
-                  </IonHeader>
135
-                  <IonContent className="ion-padding">
136
-                    <IonCard color="light">
137
-                      <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
138
-                    </IonCard>
139
-                    <IonCard color="light">
140
-                      <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
141
-                    </IonCard>
142
-                  </IonContent>
143
-                </IonModal>
139
+                Aislamiento
140
+              </IonButton>
141
+              <IonModal ref={aislamiento} trigger="open-aislamiento">
142
+                <IonHeader>
143
+                  <IonToolbar>
144
+                    <IonTitle>Aislamiento</IonTitle>
145
+                    <IonButtons slot="end">
146
+                      <IonButton color="light" onClick={() => aislamiento.current?.dismiss()}>Cerrar</IonButton>
147
+                    </IonButtons>
148
+                  </IonToolbar>
149
+                </IonHeader>
150
+                <IonContent className="ion-padding">
151
+                  <IonCard color="light">
152
+                    <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
153
+                  </IonCard>
154
+                  <IonCard color="light">
155
+                    <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
156
+                  </IonCard>
157
+                </IonContent>
158
+              </IonModal>
144 159
             </IonCol>
145 160
           </IonRow>
146 161
           <IonRow>
162
+            {/* Desvalorizar card */}
147 163
             <IonCol>
148
-            <IonButton id="open-des-neg-cul" color="light" expand="block">
149
-                 Desvalorizar, Negar, Culpar
150
-                </IonButton>
151
-                <IonModal  ref={modal} trigger="open-des-neg-cul">
152
-                  <IonHeader>
153
-                    <IonToolbar>
154
-                      <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
155
-                      <IonButtons slot="end">
156
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
157
-                      </IonButtons>
158
-                   </IonToolbar>
159
-                  </IonHeader>
160
-                  <IonContent className="ion-padding">
161
-                    <IonCard color="light">
162
-                      <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
163
-                    </IonCard>
164
-                    <IonCard color="light">
165
-                      <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
166
-                    </IonCard>
167
-                    <IonCard color="light">
168
-                      <p>Decirle que ella lo provocó.</p>
169
-                    </IonCard>
170
-                  </IonContent>
171
-                </IonModal>
164
+              <IonButton id="open-des-neg-cul" color="light" expand="block">
165
+                Desvalorizar, Negar, Culpar
166
+              </IonButton>
167
+              <IonModal ref={desvalorizar} trigger="open-des-neg-cul">
168
+                <IonHeader>
169
+                  <IonToolbar>
170
+                    <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
171
+                    <IonButtons slot="end">
172
+                      <IonButton color="light" onClick={() => desvalorizar.current?.dismiss()}>Cerrar</IonButton>
173
+                    </IonButtons>
174
+                  </IonToolbar>
175
+                </IonHeader>
176
+                <IonContent className="ion-padding">
177
+                  <IonCard color="light">
178
+                    <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
179
+                  </IonCard>
180
+                  <IonCard color="light">
181
+                    <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
182
+                  </IonCard>
183
+                  <IonCard color="light">
184
+                    <p>Decirle que ella lo provocó.</p>
185
+                  </IonCard>
186
+                </IonContent>
187
+              </IonModal>
172 188
             </IonCol>
189
+            {/* Manipulacion card */}
173 190
             <IonCol>
174 191
               <IonButton id="open-manipulacion" color="light" expand="block">
175
-                 Manipulación de los Niño(a)s
176
-                </IonButton>
177
-                <IonModal ref={modal} trigger="open-manipulacion">
178
-                  <IonHeader>
179
-                    <IonToolbar>
180
-                      <IonTitle>Manipulación de los Niño(a)s</IonTitle>
181
-                      <IonButtons slot="end">
182
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
183
-                      </IonButtons>
184
-                   </IonToolbar>
185
-                  </IonHeader>
186
-                  <IonContent className="ion-padding">
187
-                    <IonCard color="light">
188
-                      <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
189
-                    </IonCard>
190
-                    <IonCard color="light">
191
-                      <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
192
-                    </IonCard>
193
-                    <IonCard color="light">
194
-                      <p>Amenazarla con quitarle los niño(a)s.</p>
195
-                    </IonCard>
196
-                  </IonContent>
197
-                </IonModal>
192
+                Manipulación de los Niño(a)s
193
+              </IonButton>
194
+              <IonModal ref={manipulacion} trigger="open-manipulacion">
195
+                <IonHeader>
196
+                  <IonToolbar>
197
+                    <IonTitle>Manipulación de los Niño(a)s</IonTitle>
198
+                    <IonButtons slot="end">
199
+                      <IonButton color="light" onClick={() => manipulacion.current?.dismiss()}>Cerrar</IonButton>
200
+                    </IonButtons>
201
+                  </IonToolbar>
202
+                </IonHeader>
203
+                <IonContent className="ion-padding">
204
+                  <IonCard color="light">
205
+                    <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
206
+                  </IonCard>
207
+                  <IonCard color="light">
208
+                    <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
209
+                  </IonCard>
210
+                  <IonCard color="light">
211
+                    <p>Amenazarla con quitarle los niño(a)s.</p>
212
+                  </IonCard>
213
+                </IonContent>
214
+              </IonModal>
198 215
             </IonCol>
199 216
           </IonRow>
200 217
           <IonRow>
218
+            {/* Abuso economico card */}
201 219
             <IonCol>
202
-            <IonButton id="open-abuso-economico" color="light" expand="block">
203
-                 Abuso Económico
204
-                </IonButton>
205
-                <IonModal ref={modal} trigger="open-abuso-economico">
206
-                  <IonHeader>
207
-                    <IonToolbar>
208
-                      <IonTitle>Abuso Económico</IonTitle>
209
-                      <IonButtons slot="end">
210
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
211
-                      </IonButtons>
212
-                   </IonToolbar>
213
-                  </IonHeader>
214
-                  <IonContent className="ion-padding">
215
-                    <IonCard color="light">
216
-                      <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
217
-                    </IonCard>
218
-                    <IonCard color="light">
219
-                      <p>Obligarala a que le pida dinero.</p>
220
-                    </IonCard>
221
-                    <IonCard color="light">
222
-                      <p>Darle una mensualidad.</p>
223
-                    </IonCard>
224
-                    <IonCard color="light">
225
-                      <p>Quitarle el dinero.</p>
226
-                    </IonCard>
227
-                    <IonCard color="light">
228
-                      <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
229
-                    </IonCard>
230
-                  </IonContent>
231
-                </IonModal>
220
+              <IonButton id="open-abuso-economico" color="light" expand="block">
221
+                Abuso Económico
222
+              </IonButton>
223
+              <IonModal ref={abusoEco} trigger="open-abuso-economico">
224
+                <IonHeader>
225
+                  <IonToolbar>
226
+                    <IonTitle>Abuso Económico</IonTitle>
227
+                    <IonButtons slot="end">
228
+                      <IonButton color="light" onClick={() => abusoEco.current?.dismiss()}>Cerrar</IonButton>
229
+                    </IonButtons>
230
+                  </IonToolbar>
231
+                </IonHeader>
232
+                <IonContent className="ion-padding">
233
+                  <IonCard color="light">
234
+                    <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
235
+                  </IonCard>
236
+                  <IonCard color="light">
237
+                    <p>Obligarala a que le pida dinero.</p>
238
+                  </IonCard>
239
+                  <IonCard color="light">
240
+                    <p>Darle una mensualidad.</p>
241
+                  </IonCard>
242
+                  <IonCard color="light">
243
+                    <p>Quitarle el dinero.</p>
244
+                  </IonCard>
245
+                  <IonCard color="light">
246
+                    <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
247
+                  </IonCard>
248
+                </IonContent>
249
+              </IonModal>
232 250
             </IonCol>
251
+            {/* Privilegio masculino card */}
233 252
             <IonCol>
234 253
               <IonButton id="open-priv-masculino" color="light" expand="block">
235
-                 Privilegio Masculino
236
-                </IonButton>
237
-                <IonModal ref={modal} trigger="open-priv-masculino">
238
-                  <IonHeader>
239
-                    <IonToolbar>
240
-                      <IonTitle>Privilegio Masculino</IonTitle>
241
-                      <IonButtons slot="end">
242
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
243
-                      </IonButtons>
244
-                   </IonToolbar>
245
-                  </IonHeader>
246
-                  <IonContent className="ion-padding">
247
-                    <IonCard color="light">
248
-                      <p>Tratarla como una sirvienta.</p>
249
-                    </IonCard>
250
-                    <IonCard color="light">
251
-                      <p>No dejarla tomar decisiones importantes.</p>
252
-                    </IonCard>
253
-                    <IonCard color="light">
254
-                      <p>Actuar como el rey de la casa.</p>
255
-                    </IonCard>
256
-                    <IonCard color="light">
257
-                      <p>Definir las partes del hombre y de la mujer.</p>
258
-                    </IonCard>
259
-                  </IonContent>
260
-                </IonModal>
254
+                Privilegio Masculino
255
+              </IonButton>
256
+              <IonModal ref={privMasc} trigger="open-priv-masculino">
257
+                <IonHeader>
258
+                  <IonToolbar>
259
+                    <IonTitle>Privilegio Masculino</IonTitle>
260
+                    <IonButtons slot="end">
261
+                      <IonButton color="light" onClick={() => privMasc.current?.dismiss()}>Cerrar</IonButton>
262
+                    </IonButtons>
263
+                  </IonToolbar>
264
+                </IonHeader>
265
+                <IonContent className="ion-padding">
266
+                  <IonCard color="light">
267
+                    <p>Tratarla como una sirvienta.</p>
268
+                  </IonCard>
269
+                  <IonCard color="light">
270
+                    <p>No dejarla tomar decisiones importantes.</p>
271
+                  </IonCard>
272
+                  <IonCard color="light">
273
+                    <p>Actuar como el rey de la casa.</p>
274
+                  </IonCard>
275
+                  <IonCard color="light">
276
+                    <p>Definir las partes del hombre y de la mujer.</p>
277
+                  </IonCard>
278
+                </IonContent>
279
+              </IonModal>
261 280
             </IonCol>
262 281
           </IonRow>
263 282
         </IonGrid>
@@ -266,4 +285,4 @@ const Flag: React.FC = () => {
266 285
   );
267 286
 };
268 287
 
269
-export default Flag;
288
+export default Flag;

+ 0
- 12
src/pages/Home.css View File

@@ -1,12 +0,0 @@
1
-ion-title.title-large {
2
-    color: #ffffff;
3
-    font-size: 30px;
4
-}
5
-  
6
-ion-title {
7
-    --color: #ffffff;
8
-}
9
-  
10
-ion-toolbar {
11
-    --background: #8f00ff;
12
-}

+ 1
- 3
src/pages/Home.tsx View File

@@ -1,6 +1,5 @@
1 1
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
2
-import ExploreContainer from '../components/ExploreContainer';
3
-import './Home.css';
2
+import './styles/styles.css';
4 3
 
5 4
 const Home: React.FC = () => {
6 5
   return (
@@ -16,7 +15,6 @@ const Home: React.FC = () => {
16 15
             <IonTitle size="large">Home</IonTitle>
17 16
           </IonToolbar>
18 17
         </IonHeader>
19
-        <ExploreContainer name="Home page" />
20 18
       </IonContent>
21 19
     </IonPage>
22 20
   );

+ 0
- 12
src/pages/Info.css View File

@@ -1,12 +0,0 @@
1
-ion-title.title-large {
2
-    color: #ffffff;
3
-    font-size: 30px;
4
-}
5
-  
6
-ion-title {
7
-    --color: #ffffff;
8
-}
9
-  
10
-ion-toolbar {
11
-    --background: #8f00ff;
12
-}

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

@@ -1,6 +1,5 @@
1 1
 import { IonCard, IonContent, IonHeader, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';
2
-import ExploreContainer from '../components/ExploreContainer';
3
-import './Info.css';
2
+import './styles/styles.css';
4 3
 
5 4
 const Info: React.FC = () => {
6 5
   return (

+ 19
- 0
src/pages/styles/styles.css View File

@@ -0,0 +1,19 @@
1
+
2
+/* As a good practice don't edit React Components, create classes and apply those classes to 
3
+   the specific component you are trying to change */
4
+
5
+ion-title.title-large {
6
+    font-size: 30px;
7
+}
8
+  
9
+ion-title {
10
+    --color: #ffffff;
11
+}
12
+
13
+ion-toolbar {
14
+    --background: #8f00ff;
15
+} 
16
+
17
+ion-button {
18
+    --color: #8f00ff; 
19
+} 

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

@@ -10,8 +10,8 @@ http://ionicframework.com/docs/theming/ */
10 10
   --ion-color-primary-rgb: 56, 128, 255;
11 11
   --ion-color-primary-contrast: #ffffff;
12 12
   --ion-color-primary-contrast-rgb: 255, 255, 255;
13
-  --ion-color-primary-shade: #3171e0;
14
-  --ion-color-primary-tint: #4c8dff;
13
+  /* --ion-color-primary-shade: #3171e0;
14
+  --ion-color-primary-tint: #4c8dff; */
15 15
 
16 16
   /** secondary **/
17 17
   --ion-color-secondary: #3dc2ff;
@@ -54,7 +54,7 @@ http://ionicframework.com/docs/theming/ */
54 54
   --ion-color-danger-tint: #ed576b;
55 55
 
56 56
   /** dark **/
57
-  --ion-color-dark: #222428;
57
+  --ion-color-dark: #1557d9;
58 58
   --ion-color-dark-rgb: 34, 36, 40;
59 59
   --ion-color-dark-contrast: #ffffff;
60 60
   --ion-color-dark-contrast-rgb: 255, 255, 255;
@@ -78,7 +78,7 @@ http://ionicframework.com/docs/theming/ */
78 78
   --ion-color-light-tint: #f5f6f9;
79 79
 }
80 80
 
81
-@media (prefers-color-scheme: dark) {
81
+@media (prefers-color-scheme: light) {
82 82
   /*
83 83
    * Dark Colors
84 84
    * -------------------------------------------