Switched Flag.tsx to use Flag.json as it's source for content.
UI for red flags was changed to accordions as there were difficulties creating a dynamic
amount of modal dialogs.

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 public/
 ios/
 android/
-build/
+build/
+.vscode/

.gitignore 2

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

android/.gitignore

@@ -1,101 +0,0 @@
-# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
-
-# Built application files
-*.apk
-*.aar
-*.ap_
-*.aab
-
-# Files for the ART/Dalvik VM
-*.dex
-
-# Java class files
-*.class
-
-# Generated files
-bin/
-gen/
-out/
-#  Uncomment the following line in case you need and you don't have the release build type files in your app
-# release/
-
-# Gradle files
-.gradle/
-build/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Proguard folder generated by Eclipse
-proguard/
-
-# Log Files
-*.log
-
-# Android Studio Navigation editor temp files
-.navigation/
-
-# Android Studio captures folder
-captures/
-
-# IntelliJ
-*.iml
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/gradle.xml
-.idea/assetWizardSettings.xml
-.idea/dictionaries
-.idea/libraries
-# Android Studio 3 in .gitignore file.
-.idea/caches
-.idea/modules.xml
-# Comment next line if keeping position of elements in Navigation Editor is relevant for you
-.idea/navEditor.xml
-
-# Keystore files
-# Uncomment the following lines if you do not want to check your keystore files in.
-#*.jks
-#*.keystore
-
-# External native build folder generated in Android Studio 2.2 and later
-.externalNativeBuild
-.cxx/
-
-# Google Services (e.g. APIs or Firebase)
-# google-services.json
-
-# Freeline
-freeline.py
-freeline/
-freeline_project_description.json
-
-# fastlane
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
-fastlane/test_output
-fastlane/readme.md
-
-# Version control
-vcs.xml
-
-# lint
-lint/intermediates/
-lint/generated/
-lint/outputs/
-lint/tmp/
-# lint/reports/
-
-# Android Profiling
-*.hprof
-
-# Cordova plugins for Capacitor
-capacitor-cordova-android-plugins
-
-# Copied web assets
-app/src/main/assets/public
-
-# Generated Config files
-app/src/main/assets/capacitor.config.json
-app/src/main/assets/capacitor.plugins.json
-app/src/main/res/xml/config.xml

android/.idea/jarRepositories.xml

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="RemoteRepositoriesConfiguration">
-    <remote-repository>
-      <option name="id" value="central" />
-      <option name="name" value="Maven Central repository" />
-      <option name="url" value="https://repo1.maven.org/maven2" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="jboss.community" />
-      <option name="name" value="JBoss Community repository" />
-      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="MavenRepo" />
-      <option name="name" value="MavenRepo" />
-      <option name="url" value="https://repo.maven.apache.org/maven2/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="Google" />
-      <option name="name" value="Google" />
-      <option name="url" value="https://dl.google.com/dl/android/maven2/" />
-    </remote-repository>
-  </component>
-</project>

android/app/build.gradle

@@ -1,53 +0,0 @@
-apply plugin: 'com.android.application'
-
-android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
-    defaultConfig {
-        applicationId "io.ionic.starter"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
-        aaptOptions {
-             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
-             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
-            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-repositories {
-    flatDir{
-        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
-    }
-}
-
-dependencies {
-    implementation fileTree(include: ['*.jar'], dir: 'libs')
-    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
-    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
-    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
-    implementation project(':capacitor-android')
-    testImplementation "junit:junit:$junitVersion"
-    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
-    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
-    implementation project(':capacitor-cordova-android-plugins')
-}
-
-apply from: 'capacitor.build.gradle'
-
-try {
-    def servicesJSON = file('google-services.json')
-    if (servicesJSON.text) {
-        apply plugin: 'com.google.gms.google-services'
-    }
-} catch(Exception e) {
-    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
-}

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-camera')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')

android/app/proguard-rules.pro

@@ -1,21 +0,0 @@
-# Add project specific ProGuard rules here.
-# You can control the set of applied configuration files using the
-# proguardFiles setting in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
-
-# Uncomment this to preserve the line number information for
-# debugging stack traces.
-#-keepattributes SourceFile,LineNumberTable
-
-# If you keep the line number information, uncomment this to
-# hide the original source file name.
-#-renamesourcefileattribute SourceFile

android/app/src/main/AndroidManifest.xml

@@ -1,42 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="io.ionic.starter">
-
-    <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/AppTheme">
-
-        <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name="io.ionic.starter.MainActivity"
-            android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask"
-            android:exported="true">
-
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-
-        </activity>
-
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.fileprovider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
-        </provider>
-    </application>
-
-    <!-- Permissions -->
-
-    <uses-permission android:name="android.permission.INTERNET" />
-</manifest>

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-camera'
+project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

android/gradle.properties

@@ -1,24 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-org.gradle.jvmargs=-Xmx1536m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=true

android/gradlew.bat

@@ -1,89 +0,0 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto execute
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega

build/asset-manifest.json

@@ -1,32 +1,50 @@
 {
   "files": {
-    "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.57f71c13.css",
+    "main.js": "/static/js/main.5c91e17d.js",
+    "static/js/738.23d458d2.chunk.js": "/static/js/738.23d458d2.chunk.js",
     "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",
-    "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.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",
     "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": [
-    "static/css/main.30c9193e.css",
-    "static/js/main.a0b94822.js"
+    "static/css/main.57f71c13.css",
+    "static/js/main.5c91e17d.js"
   ]
 }

build/index.html

@@ -1 +1 @@
-<!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.5c91e17d.js"></script><link href="/static/css/main.57f71c13.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

ios/App/App/Info.plist

@@ -45,5 +45,11 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>To capture images</string>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+	<string>To add images</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>To store images</string>
 </dict>
 </plist>

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'

package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "@capacitor/android": "4.5.0",
         "@capacitor/app": "4.1.1",
+        "@capacitor/camera": "^4.1.4",
         "@capacitor/core": "4.5.0",
+        "@capacitor/filesystem": "^4.1.4",
         "@capacitor/haptics": "4.1.0",
         "@capacitor/ios": "4.5.0",
         "@capacitor/keyboard": "4.1.0",
@@ -2098,6 +2100,14 @@
         "@capacitor/core": "^4.0.0"
       }
     },
+    "node_modules/@capacitor/camera": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/camera/-/camera-4.1.4.tgz",
+      "integrity": "sha512-7f4n7PlnstYsdGyxc0Kc4hIyS6csFLOjXvffm7pJsuy9pSo+kfdOPdYgGg360QwbUAmA+Yv+J1ZW1eFIwgvWrQ==",
+      "peerDependencies": {
+        "@capacitor/core": "^4.0.0"
+      }
+    },
     "node_modules/@capacitor/cli": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.5.0.tgz",
@@ -2156,6 +2166,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@capacitor/filesystem": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/filesystem/-/filesystem-4.1.4.tgz",
+      "integrity": "sha512-ivko1RNK4hq63xhMacq8D6D97N5/SAafTsrmY/pghYrG6Cl2SEY0+IgRu7V9/VWeN3FSplyUPucjUTAFQxXN5g==",
+      "peerDependencies": {
+        "@capacitor/core": "^4.0.0"
+      }
+    },
     "node_modules/@capacitor/haptics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-4.1.0.tgz",
@@ -18922,6 +18940,12 @@
       "integrity": "sha512-SJcJA1rhFQyeH6eLfUEbdKkHzAwzahJNVPNXmU88fdmXpMgM2dJGzZj1vrm6e21aQq+Z4aBVLJ2RCdj92zD7wg==",
       "requires": {}
     },
+    "@capacitor/camera": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/camera/-/camera-4.1.4.tgz",
+      "integrity": "sha512-7f4n7PlnstYsdGyxc0Kc4hIyS6csFLOjXvffm7pJsuy9pSo+kfdOPdYgGg360QwbUAmA+Yv+J1ZW1eFIwgvWrQ==",
+      "requires": {}
+    },
     "@capacitor/cli": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.5.0.tgz",
@@ -18969,6 +18993,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "@capacitor/filesystem": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/filesystem/-/filesystem-4.1.4.tgz",
+      "integrity": "sha512-ivko1RNK4hq63xhMacq8D6D97N5/SAafTsrmY/pghYrG6Cl2SEY0+IgRu7V9/VWeN3FSplyUPucjUTAFQxXN5g==",
+      "requires": {}
+    },
     "@capacitor/haptics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-4.1.0.tgz",

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "@capacitor/android": "4.5.0",
     "@capacitor/app": "4.1.1",
+    "@capacitor/camera": "^4.1.4",
     "@capacitor/core": "4.5.0",
+    "@capacitor/filesystem": "^4.1.4",
     "@capacitor/haptics": "4.1.0",
     "@capacitor/ios": "4.5.0",
     "@capacitor/keyboard": "4.1.0",

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.json

@@ -0,0 +1,39 @@
+ [{"title" : "Amenazas",
+  "content" : ["Asustarla con amenazas de hacerle mal.",
+              "Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.",
+              "Obligarla a retirar los cargos presentados contra él.",
+               "Obligarla a cometer actos ilegales."]},
+ {"title" : "Intimidación",
+  "content" : ["Provocándole miedo a través de sus miradas, acciones y gestos.",
+               "Destrozar objetos.",
+               "Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas."]},
+  {"title" : "Abuso Emocional",
+   "content" : ["Hacerla sentir inferior.",
+                "Hacerla sentir mal.",
+                "Insultarle con nombres ofensivos.",
+                "Hacerla pensar que está loca.",
+                "Confundirla a propósito.",
+                "Humillarla.",
+                "Hacerla sentir culpable."]},
+  {"title": "Aislamiento",
+   "content" : ["Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.",
+                "Limitarle su vida social utilizando los celos para justificar sus actos"]},
+  {"title" : "Desvalorizar, Negar, Culpar",
+   "content" : ["No tomar seriamente preocupación que ella tiene sobre el abuso.",
+                "Negar que uso hacerla sentir responsable de la conducta abusiva.",
+                "Decirle que ella lo provocó."]},
+  {"title" : "Manipulación de los Niño(a)s",
+   "content" : ["Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.",
+                "Usar las visitas con los niño(a)s para molestarla o amenazarla.",
+                "Amenazarla con quitarle los niño(a)s."]},
+  {"title" : "Abuso Económico",
+   "content" : ["No dejarla trabajar o impedirle que mantenga su empleo.",
+                "Obligarala a que le pida dinero.",
+                "Darle una mensualidad.",
+                "Quitarle el dinero.",
+                "No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos."]},
+  {"title" : "Privilegio Masculino",
+   "content": ["Tratarla como una sirvienta.",
+               "No dejarla tomar decisiones importantes.",
+               "Actuar como el rey de la casa.",
+               "Definir las partes del hombre y de la mujer."]}]

src/pages/Flag.tsx

@@ -1,286 +1,61 @@
-// Created by Cynthia 
-// Edited by Angel Romero 
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonCard,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonPage,
+} from '@ionic/react';
+import { HelpBtn } from './components/helpButton';
 
-import React, { useRef } from 'react';
-import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
 import './styles/styles.css';
 
+// generate single accordion item given a title and points of info
+const AccordionItem = (title: string, content: string[]) => {
+  return (
+    <IonAccordion value={title}>
+      <IonItem slot="header" color="light">
+        <IonLabel class="ion-text-center">{title}</IonLabel>
+      </IonItem>
+      <div slot="content">
+        {
+          // generate each point in content
+          // We need to add some color to the cards, preferably white
+          content.map((text: string) =>{
+            return (
+              <IonCard>
+                <IonItem color="light">
+                  <IonLabel text-wrap class="ion-text-center">{text}</IonLabel>
+                </IonItem>
+              </IonCard>
+            );
+          })
+        }
+      </div>
+    </IonAccordion>)
+}
 
-// Create all the modal elements for each card element on the flag screen
 const Flag: React.FC = () => {
-  const amenazas = useRef<HTMLIonModalElement>(null);
-  const intimidacion = useRef<HTMLIonModalElement>(null);
-  const abusoEmo = useRef<HTMLIonModalElement>(null);
-  const aislamiento = useRef<HTMLIonModalElement>(null);
-  const desvalorizar = useRef<HTMLIonModalElement>(null);
-  const manipulacion = useRef<HTMLIonModalElement>(null);
-  const abusoEco = useRef<HTMLIonModalElement>(null);
-  const privMasc = useRef<HTMLIonModalElement>(null);
-
+  // Load Flag.json which has format of Object[],
+  // where each object has a title and content field.
+  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>
-        <IonTitle class="ion-text-center screen-h2" color="light">Pendiente a...</IonTitle>
+      {/* This is the title with the button to ask for help */}
+      <HelpBtn />      
 
-        {/* Here goes the body containing the cards */}
-        <IonGrid>
-          <IonRow>
-            {/* Amenazas card */}
-            <IonCol>
-              <IonButton id="open-amenazas" color="light" expand="block">
-                Amenazas
-              </IonButton>
-              <IonModal ref={amenazas} trigger="open-amenazas">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Amenazas</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => amenazas.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Asustarla con amenazas de hacerle mal.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarla a retirar los cargos presentados contra él.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarla a cometer actos ilegales.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Intimidacion card */}
-            <IonCol>
-              <IonButton id="open-intimidacion" color="light" expand="block" >
-                Intimidación
-              </IonButton>
-              <IonModal ref={intimidacion} trigger="open-intimidacion">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Intimidación</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => intimidacion.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Destrozar objetos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Abuso emocional card */}
-            <IonCol>
-              <IonButton id="open-abuso-emocional" color="light" expand="block">
-                Abuso Emocional
-              </IonButton>
-              <IonModal ref={abusoEmo} trigger="open-abuso-emocional">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Abuso Emocional</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => abusoEmo.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Hacerla sentir inferior.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla sentir mal.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Insultarle con nombres ofensivos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla pensar que está loca.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Confundirla a propósito.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Humillarla.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla sentir culpable.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Aislamiento card */}
-            <IonCol>
-              <IonButton id="open-aislamiento" color="light" expand="block">
-                Aislamiento
-              </IonButton>
-              <IonModal ref={aislamiento} trigger="open-aislamiento">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Aislamiento</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => aislamiento.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Desvalorizar card */}
-            <IonCol>
-              <IonButton id="open-des-neg-cul" color="light" expand="block">
-                Desvalorizar, Negar, Culpar
-              </IonButton>
-              <IonModal ref={desvalorizar} trigger="open-des-neg-cul">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => desvalorizar.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Decirle que ella lo provocó.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Manipulacion card */}
-            <IonCol>
-              <IonButton id="open-manipulacion" color="light" expand="block">
-                Manipulación de los Niño(a)s
-              </IonButton>
-              <IonModal ref={manipulacion} trigger="open-manipulacion">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Manipulación de los Niño(a)s</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => manipulacion.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Amenazarla con quitarle los niño(a)s.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Abuso economico card */}
-            <IonCol>
-              <IonButton id="open-abuso-economico" color="light" expand="block">
-                Abuso Económico
-              </IonButton>
-              <IonModal ref={abusoEco} trigger="open-abuso-economico">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Abuso Económico</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => abusoEco.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarala a que le pida dinero.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Darle una mensualidad.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Quitarle el dinero.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Privilegio masculino card */}
-            <IonCol>
-              <IonButton id="open-priv-masculino" color="light" expand="block">
-                Privilegio Masculino
-              </IonButton>
-              <IonModal ref={privMasc} trigger="open-priv-masculino">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Privilegio Masculino</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => privMasc.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Tratarla como una sirvienta.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>No dejarla tomar decisiones importantes.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Actuar como el rey de la casa.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Definir las partes del hombre y de la mujer.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
+      <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))
+          }
+        </IonAccordionGroup>
       </IonContent>
     </IonPage>
   );
-};
+}
 
 export default Flag;

src/pages/Home.tsx

@@ -1,65 +1,53 @@
-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}
-              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton> 
+              <IonButton fill="clear"> 
+                <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
+              </IonButton> 
             </IonCardTitle>
           </IonCardHeader>
-          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./images/frases_motivavionales/"+num+".png")}></IonImg>
+          <IonImg class="moti-img" alt="Motivational message" src={require("./images/frases_motivavionales/"+num+".png")}></IonImg>
         </IonCard>
 
-        {/* Card 2
-        <IonCard class="moti-card">
+        {/* Card 2 */}
+        <IonCard class="moti-card" color="light">
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}
-              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton>
+              <IonButton fill="clear">
+                <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
+              </IonButton>
             </IonCardTitle>
           </IonCardHeader>
-          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./images/frases_motivavionales/2.png")}></IonImg> 
-        </IonCard> */}
+          <IonImg class="moti-img" alt="Motivational message" src={require("./images/frases_motivavionales/" + num + ".png")}></IonImg>
+        </IonCard>
       </IonContent>
     </IonPage>
   );

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/components/saveMoti.tsx

@@ -0,0 +1,14 @@
+import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+
+
+import '../styles/styles.css';
+
+const Image_Dir = 'stored-images';
+
+
+export class saveMoti {
+    
+    async selectImage(){
+        const image = await Camera.getPhoto()
+    }
+}

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;
 }
@@ -53,5 +70,6 @@
     align-items: center;
 }
 
+/* Styles for the flag screen */
 
 

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: light) {
+  	--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;
-  }
-}
+}