Changed app style and changed header button to diferent file

.gitignore 2

@@ -1,5 +0,0 @@
-node_modules/
-public/
-ios/
-android/
-build/

build/asset-manifest.json

@@ -1,49 +1,50 @@
 {
   "files": {
-<<<<<<< HEAD
-    "main.css": "/static/css/main.30c9193e.css",
-    "main.js": "/static/js/main.a0b94822.js",
-    "static/js/738.aba3ba7d.chunk.js": "/static/js/738.aba3ba7d.chunk.js",
-=======
-    "main.css": "/static/css/main.3f863b78.css",
-    "main.js": "/static/js/main.05353c61.js",
+    "main.css": "/static/css/main.57f71c13.css",
+    "main.js": "/static/js/main.5c91e17d.js",
     "static/js/738.23d458d2.chunk.js": "/static/js/738.23d458d2.chunk.js",
->>>>>>> JantonyBranch
     "static/js/372.1940d375.chunk.js": "/static/js/372.1940d375.chunk.js",
     "static/js/856.c55f21fe.chunk.js": "/static/js/856.c55f21fe.chunk.js",
-    "static/js/851.7ada53df.chunk.js": "/static/js/851.7ada53df.chunk.js",
+    "static/js/851.b02dec88.chunk.js": "/static/js/851.b02dec88.chunk.js",
     "static/js/22.7ec1dda8.chunk.js": "/static/js/22.7ec1dda8.chunk.js",
     "static/js/272.fc222ae9.chunk.js": "/static/js/272.fc222ae9.chunk.js",
     "static/js/841.bef26980.chunk.js": "/static/js/841.bef26980.chunk.js",
-    "static/js/186.09c3ea27.chunk.js": "/static/js/186.09c3ea27.chunk.js",
+    "static/js/186.a076517b.chunk.js": "/static/js/186.a076517b.chunk.js",
     "static/js/377.31684c30.chunk.js": "/static/js/377.31684c30.chunk.js",
+    "static/media/9 2.png": "/static/media/9 2.3703b887cbdd492a6f66.png",
+    "static/media/9.png": "/static/media/9.3703b887cbdd492a6f66.png",
+    "static/media/8 2.png": "/static/media/8 2.3f6cd91d6ef70858b113.png",
+    "static/media/8.png": "/static/media/8.3f6cd91d6ef70858b113.png",
+    "static/media/7 2.png": "/static/media/7 2.e0245648655da2db113d.png",
+    "static/media/7.png": "/static/media/7.e0245648655da2db113d.png",
+    "static/media/5 2.png": "/static/media/5 2.0a70de4a6953fe2358b6.png",
+    "static/media/5.png": "/static/media/5.0a70de4a6953fe2358b6.png",
+    "static/media/6 2.png": "/static/media/6 2.7577bce6bb05b2b844a5.png",
+    "static/media/6.png": "/static/media/6.7577bce6bb05b2b844a5.png",
+    "static/media/3 2.png": "/static/media/3 2.f7991a06ad032687f02b.png",
+    "static/media/3.png": "/static/media/3.f7991a06ad032687f02b.png",
+    "static/media/4 2.png": "/static/media/4 2.17c13979ca7e0a0907dc.png",
+    "static/media/4.png": "/static/media/4.17c13979ca7e0a0907dc.png",
+    "static/media/2 2.png": "/static/media/2 2.fbbc9f16a9decddcee56.png",
+    "static/media/2.png": "/static/media/2.fbbc9f16a9decddcee56.png",
+    "static/media/1 2.png": "/static/media/1 2.a51ecd8ad682ea72b959.png",
+    "static/media/1.png": "/static/media/1.a51ecd8ad682ea72b959.png",
     "service-worker.js": "/service-worker.js",
     "index.html": "/index.html",
-<<<<<<< HEAD
-    "main.30c9193e.css.map": "/static/css/main.30c9193e.css.map",
-    "main.a0b94822.js.map": "/static/js/main.a0b94822.js.map",
-    "738.aba3ba7d.chunk.js.map": "/static/js/738.aba3ba7d.chunk.js.map",
-=======
-    "main.3f863b78.css.map": "/static/css/main.3f863b78.css.map",
-    "main.05353c61.js.map": "/static/js/main.05353c61.js.map",
+    "main.57f71c13.css.map": "/static/css/main.57f71c13.css.map",
+    "main.5c91e17d.js.map": "/static/js/main.5c91e17d.js.map",
     "738.23d458d2.chunk.js.map": "/static/js/738.23d458d2.chunk.js.map",
->>>>>>> JantonyBranch
     "372.1940d375.chunk.js.map": "/static/js/372.1940d375.chunk.js.map",
     "856.c55f21fe.chunk.js.map": "/static/js/856.c55f21fe.chunk.js.map",
-    "851.7ada53df.chunk.js.map": "/static/js/851.7ada53df.chunk.js.map",
+    "851.b02dec88.chunk.js.map": "/static/js/851.b02dec88.chunk.js.map",
     "22.7ec1dda8.chunk.js.map": "/static/js/22.7ec1dda8.chunk.js.map",
     "272.fc222ae9.chunk.js.map": "/static/js/272.fc222ae9.chunk.js.map",
     "841.bef26980.chunk.js.map": "/static/js/841.bef26980.chunk.js.map",
-    "186.09c3ea27.chunk.js.map": "/static/js/186.09c3ea27.chunk.js.map",
+    "186.a076517b.chunk.js.map": "/static/js/186.a076517b.chunk.js.map",
     "377.31684c30.chunk.js.map": "/static/js/377.31684c30.chunk.js.map"
   },
   "entrypoints": [
-<<<<<<< HEAD
-    "static/css/main.30c9193e.css",
-    "static/js/main.a0b94822.js"
-=======
-    "static/css/main.3f863b78.css",
-    "static/js/main.05353c61.js"
->>>>>>> JantonyBranch
+    "static/css/main.57f71c13.css",
+    "static/js/main.5c91e17d.js"
   ]
 }

build/index.html

@@ -1,5 +1 @@
-<<<<<<< HEAD
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.a0b94822.js"></script><link href="/static/css/main.30c9193e.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
-=======
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.05353c61.js"></script><link href="/static/css/main.3f863b78.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
->>>>>>> JantonyBranch
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.5c91e17d.js"></script><link href="/static/css/main.57f71c13.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

capacitor.config 2.ts

@@ -1,10 +0,0 @@
-import { CapacitorConfig } from '@capacitor/cli';
-
-const config: CapacitorConfig = {
-  appId: 'io.ionic.starter',
-  appName: 'TPCApp',
-  webDir: 'build',
-  bundledWebRuntime: false
-};
-
-export default config;

src/App.tsx

@@ -55,7 +55,7 @@ const App: React.FC = () => (
           </Route>
         </IonRouterOutlet>
         
-        <IonTabBar color="light" slot="bottom">
+        <IonTabBar slot="bottom">
           <IonTabButton tab="home" href="/home">
             <IonIcon color="primary" icon={home} />
             <IonLabel color="primary">Home</IonLabel>

src/pages/Flag.tsx

@@ -3,12 +3,11 @@ import {
   IonAccordionGroup,
   IonCard,
   IonContent,
-  IonHeader,
   IonItem,
   IonLabel,
   IonPage,
-  IonTitle,
-  IonToolbar} from '@ionic/react';
+} from '@ionic/react';
+import { HelpBtn } from './components/helpButton';
 
 import './styles/styles.css';
 
@@ -26,7 +25,7 @@ const AccordionItem = (title: string, content: string[]) => {
           content.map((text: string) =>{
             return (
               <IonCard>
-                <IonItem>
+                <IonItem color="light">
                   <IonLabel text-wrap class="ion-text-center">{text}</IonLabel>
                 </IonItem>
               </IonCard>
@@ -43,20 +42,12 @@ const Flag: React.FC = () => {
   let content = require("./Flag.json")
   return (
     <IonPage>
-      
-      {/* With the condense property, the app header will stay on screen after srcolling down the page */}
-      <IonHeader>
-        <IonToolbar class="app-toolbar">
-          <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Flag</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <IonAccordionGroup multiple={true}>
+      {/* This is the title with the button to ask for help */}
+      <HelpBtn />      
+
+      <IonContent>
+        {/* Changed the behavior so it has only one flag open at a time */}
+        <IonAccordionGroup multiple={false}>
           {
             // generate an accordion item for each object in Flag.json
             content.map((obj: any) => AccordionItem(obj.title, obj.content))

src/pages/Home.tsx

@@ -1,46 +1,30 @@
-import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon, IonText } from '@ionic/react';
-import { arrowDownCircle, heart } from 'ionicons/icons';
-import { isPlatform } from '@ionic/react';
+import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon } from '@ionic/react';
+import { arrowDownCircle } from 'ionicons/icons';
+import { HelpBtn } from "./components/helpButton"
 
 import './styles/styles.css';
 import * as math from 'mathjs';
 
-// This is the date that is going to appear on the
-// card with the Motivational message
+// These are the random numbers for selecting the images
 let value = math.randomInt(1,10);
 let num = value.toString();
 
-console.log(value);
+// This is the date that is going to appear on the
+// card with the Motivational message
 const current = new Date();
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
 
-// Determine which platform the app is running (ios or android)
-// Compose message that will be opened with the click of a button
-const separator = isPlatform('ios') === false ? '&' : '?'
-const phoneNumber = '7877101934'
-const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
-
-const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
-
-
 const Home: React.FC = () => {
 
   return (
     
     <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle class="ion-text-center screen-titles">
-            <IonText>TPC</IonText> 
-            <IonButton href={finalMessage}> <IonIcon slot="icon-only" icon={heart}class="moti-download"></IonIcon></IonButton> 
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
+      {/* This is the title with the button to ask for help */}
+      <HelpBtn/>
       <IonContent fullscreen>
         
-
         {/* Card 1 */}
-        <IonCard class="moti-card">
+        <IonCard class="moti-card" color="light">
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}
@@ -53,7 +37,7 @@ const Home: React.FC = () => {
         </IonCard>
 
         {/* Card 2 */}
-        <IonCard class="moti-card">
+        <IonCard class="moti-card" color="light">
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}

src/pages/Info.tsx

@@ -1,14 +1,13 @@
-import { IonCard, IonContent, IonHeader, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';
+import { IonCard, IonContent, IonPage, IonText } from '@ionic/react';
+import { HelpBtn } from './components/helpButton';
 import './styles/styles.css';
 
 const Info: React.FC = () => {
   return (
     <IonPage>
-      <IonHeader>
-        <IonToolbar>
-        <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
-        </IonToolbar>
-      </IonHeader>
+      {/* This is the title with the button to ask for help */}
+      <HelpBtn />
+
       <IonContent fullscreen>
 
         <IonCard class="info-card" color="light">

src/pages/components/helpButton.tsx

@@ -0,0 +1,38 @@
+
+import { IonButton, IonCol, IonGrid, IonHeader, IonIcon, IonRow, IonText, IonTitle, IonToolbar, isPlatform } from '@ionic/react';
+import { heart } from 'ionicons/icons';
+
+import '../styles/styles.css';
+
+// Determine which platform the app is running (ios or android)
+// Compose message that will be opened with the click of a button
+const separator = isPlatform('ios') === false ? '&' : '?'
+const phoneNumber = '7877101934'
+const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
+
+const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
+
+
+export function HelpBtn() {
+    return (
+        <IonHeader>
+            <IonToolbar>
+                <IonGrid>
+                    <IonRow>
+                        <IonCol class="title-col">
+                            <IonTitle class="screen-titles">
+                                <IonText>TPC</IonText>
+                            </IonTitle>
+                        </IonCol>
+                        <IonCol>
+                            <IonButton class="ion-btn-download" fill="clear" href={finalMessage}>
+                                <IonIcon slot="icon-only" icon={heart} class="msg-button"></IonIcon>
+                            </IonButton>
+                        </IonCol>
+                    </IonRow>
+                </IonGrid>
+            </IonToolbar>
+        </IonHeader>
+        
+    );
+}

src/pages/styles/styles.css

@@ -2,12 +2,19 @@
 /* As a good practice don't edit React Components, create classes and apply those classes to 
    the specific component you are trying to change */
 
-  
+ion-grid {
+    padding: 0;
+}
+
+.title-col {
+    display: flex;
+    align-content: center
+}
 .screen-titles{
     color: #ffffff;
     font-size: 30px;
-    display: flex;
-    align-items: center;
+    text-align: right;
+    padding-right: 0;
 }
 
 .screen-h2 {
@@ -31,6 +38,16 @@
     padding-right: 5px;
 }
 
+.ion-btn-download {
+    width:40px;
+}
+
+.msg-button {
+    position: absolute;
+    color: red;
+    font-size: 45px;
+}
+
 .moti-download {
     font-size: 40px;
 }
@@ -55,8 +72,4 @@
 
 /* Styles for the flag screen */
 
-.flag-item {
-    background-color: #fff !important;
-}
-
 

src/theme/variables.css

@@ -4,106 +4,16 @@ http://ionicframework.com/docs/theming/ */
 /** Ionic CSS Variables **/
 :root {
   /* Background-color */
-  --ion-background-color: #8f00ff;
-  
-  --ion-color-primary: #8f00ff;
-	--ion-color-primary-rgb: 143,0,255;
-	--ion-color-primary-contrast: #ffffff;
-	--ion-color-primary-contrast-rgb: 255,255,255;
-	--ion-color-primary-shade: #7e00e0;
-	--ion-color-primary-tint: #9a1aff;
-
-	--ion-color-secondary: #000766;
-	--ion-color-secondary-rgb: 0,7,102;
-	--ion-color-secondary-contrast: #ffffff;
-	--ion-color-secondary-contrast-rgb: 255,255,255;
-	--ion-color-secondary-shade: #00065a;
-	--ion-color-secondary-tint: #1a2075;
-
-	--ion-color-tertiary: #ff8800;
-	--ion-color-tertiary-rgb: 255,136,0;
-	--ion-color-tertiary-contrast: #000000;
-	--ion-color-tertiary-contrast-rgb: 0,0,0;
-	--ion-color-tertiary-shade: #e07800;
-	--ion-color-tertiary-tint: #ff941a;
-}
-
-@media (prefers-color-scheme: dark) {
+  	--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%);;
+	
 
-  body {
-      /* Background-color */
-  --ion-background-color: #8f00ff;
-  
-  --ion-color-primary: #8f00ff;
+	--ion-color-primary: #8f00ff;
 	--ion-color-primary-rgb: 143,0,255;
 	--ion-color-primary-contrast: #ffffff;
 	--ion-color-primary-contrast-rgb: 255,255,255;
 	--ion-color-primary-shade: #7e00e0;
 	--ion-color-primary-tint: #9a1aff;
 
-	--ion-color-secondary: #000766;
-	--ion-color-secondary-rgb: 0,7,102;
-	--ion-color-secondary-contrast: #ffffff;
-	--ion-color-secondary-contrast-rgb: 255,255,255;
-	--ion-color-secondary-shade: #00065a;
-	--ion-color-secondary-tint: #1a2075;
-
-	--ion-color-tertiary: #ff8800;
-	--ion-color-tertiary-rgb: 255,136,0;
-	--ion-color-tertiary-contrast: #000000;
-	--ion-color-tertiary-contrast-rgb: 0,0,0;
-	--ion-color-tertiary-shade: #e07800;
-	--ion-color-tertiary-tint: #ff941a;
-  }
-
-  .ios body {
-    --ion-background-color: #8f00ff;
-  
-  /** primary **/
-    --ion-color-primary: #8f00ff;
-    --ion-color-primary-rgb: 143,0,255;
-    --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
-    --ion-color-primary-shade: #7e00e0;
-    --ion-color-primary-tint: #9a1aff;
-
-    --ion-color-secondary: #000766;
-    --ion-color-secondary-rgb: 0,7,102;
-    --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
-    --ion-color-secondary-shade: #00065a;
-    --ion-color-secondary-tint: #1a2075;
-
-    --ion-color-tertiary: #ff8800;
-    --ion-color-tertiary-rgb: 255,136,0;
-    --ion-color-tertiary-contrast: #000000;
-    --ion-color-tertiary-contrast-rgb: 0,0,0;
-    --ion-color-tertiary-shade: #e07800;
-    --ion-color-tertiary-tint: #ff941a;
-  }
-
-  .md body {
-    --ion-background-color: #8f00ff;
-  
-    --ion-color-primary: #8f00ff;
-    --ion-color-primary-rgb: 143,0,255;
-    --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
-    --ion-color-primary-shade: #7e00e0;
-    --ion-color-primary-tint: #9a1aff;
-
-    --ion-color-secondary: #000766;
-    --ion-color-secondary-rgb: 0,7,102;
-    --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
-    --ion-color-secondary-shade: #00065a;
-    --ion-color-secondary-tint: #1a2075;
-
-    --ion-color-tertiary: #ff8800;
-    --ion-color-tertiary-rgb: 255,136,0;
-    --ion-color-tertiary-contrast: #000000;
-    --ion-color-tertiary-contrast-rgb: 0,0,0;
-    --ion-color-tertiary-shade: #e07800;
-    --ion-color-tertiary-tint: #ff941a;
-  }
-}
+}