Merge branch 'ui-deco' into 'master'

ui colors

See merge request !48

emma-frontend/components/patientscreens/consent.js

@@ -31,22 +31,23 @@ export default function PatientConsentForm({ navigation, route }) {
   };
 
   return (
-    <ScrollView style={{ padding: 10 }}>
+    <ScrollView style={{ padding: 10, marginTop: 30 }}>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>
         Consent Form for EMMA Health Application
+        {"\n"}
       </Text>
       <Text>
         Please read this consent form carefully before using the EMMA health
         application.
       </Text>
-      <Text>{"\n"}Introduction:</Text>
+      <Text style={{ textDecorationLine: "underline" }}>{"\n"}Introduction:</Text>
       <Text>
         The EMMA (Emotional Mental Health Assistant) application is designed to
         track and manage personal details, emotional status, and mental health
         via chat. By using this application, you consent to the collection and
         secure storage of your data as described below.
       </Text>
-      <Text>{"\n"}Data Collection:</Text>
+      <Text style={{ textDecorationLine: "underline" }}>{"\n"}Data Collection:</Text>
       <Text>
         {"\n"}Personal Details: The EMMA app collects personal information such
         as your name, age, gender, and contact details. This information is used
@@ -64,7 +65,7 @@ export default function PatientConsentForm({ navigation, route }) {
         identifying patterns, identifying triggers, and providing insights for
         mental health management.
       </Text>
-      <Text>{"\n"}Data Storage and Security:</Text>
+      <Text style={{ textDecorationLine: "underline" }}>{"\n"}Data Storage and Security:</Text>
       <Text>
         {"\n"}Data Encryption: All collected data will be properly encrypted to
         ensure its security and confidentiality.
@@ -79,7 +80,7 @@ export default function PatientConsentForm({ navigation, route }) {
         individuals involved in the maintenance of the EMMA application. Strict
         access controls will be implemented to prevent unauthorized access.
       </Text>
-      <Text>{"\n"}Purpose of Data Collection:</Text>
+      <Text style={{ textDecorationLine: "underline" }}>{"\n"}Purpose of Data Collection:</Text>
       <Text>
         {"\n"}User Control: The primary purpose of data collection is to empower
         you with control over your own health data. You will have the ability to
@@ -92,8 +93,16 @@ export default function PatientConsentForm({ navigation, route }) {
         trends, improving diagnostic accuracy, and developing personalized
         treatment plans.
       </Text>
-      <Button title="Agree" onPress={handleAgree} />
-      <Button title="Cancel" onPress={handleCancel} />
+      {/* <Button title="Agree" onPress={handleAgree}/>
+      <Button title="Cancel" onPress={handleCancel} /> */}
+
+      <View style={{ marginTop: 10 }}>
+        <Button title="Agree" onPress={handleAgree} />
+      </View>
+      <View style={{ marginTop: 10, marginBottom: 10 }}>
+        <Button title="Cancel" onPress={handleCancel} color="red" />
+      </View>
+
     </ScrollView>
   );
 }

emma-frontend/components/patientscreens/registration/regOne.js

 import React, { useState } from "react";
-import { View, TextInput, Button, StyleSheet } from "react-native";
+import { View, TextInput, Button, StyleSheet,TouchableHighlight,Text } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 
 export default function PatientRegOne() {
@@ -38,7 +38,13 @@ export default function PatientRegOne() {
         onChangeText={(text) => setPassword(text)}
         secureTextEntry={true}
       />
-      <Button title="Next" onPress={handleNext} />
+      {/* <Button title="Next" onPress={handleNext} color="#703BE7"/> */}
+      <TouchableHighlight
+        style={styles.button}
+        onPress={handleNext}
+      >
+        <Text style={styles.buttonText}>Next</Text>
+      </TouchableHighlight>
     </View>
   );
 }
@@ -58,4 +64,18 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
   },
+  button: {
+    width: "80%",
+    height: 60, // Adjust the height value to make the button taller
+    backgroundColor: "#560CCE",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 30, // Adjust the border radius value to make the edges rounder
+    marginTop: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
 });

emma-frontend/components/shared/mainview.js

 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text, Button,TouchableHighlight } from "react-native";
 
 export default function MainScreen({ navigation }) {
   return (
     <View style={styles.container}>
       <View style={styles.buttonContainer}>
-        <Button
-          title="Login"
+      <TouchableHighlight
+          style={[styles.button, { backgroundColor: "#703BE7" }]}
+          underlayColor="#5E29B7"
           onPress={() => {
             console.log("Login");
             navigation.navigate("SharedLogin");
           }}
-        />
+        >
+          <Text style={styles.buttonText}>Login</Text>
+        </TouchableHighlight>
+
         <View style={styles.separator} />
-        <Button
-          title="Register"
+
+        <TouchableHighlight
+          style={[styles.button, { backgroundColor: "#703BE7" }]}
+          underlayColor="#5E29B7"
           onPress={() => {
             console.log("Register");
             navigation.navigate("SharedRegisterScreen");
           }}
-        />
+        >
+          <Text style={styles.buttonText}>Register</Text>
+        </TouchableHighlight>
+
       </View>
     </View>
   );
@@ -28,14 +37,30 @@ export default function MainScreen({ navigation }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+    //alignItems: "center",
     justifyContent: "center",
+    paddingLeft:75
   },
-  buttonContainer: {
-    flexDirection: "row",
-    marginVertical: 20,
-  },
+  // buttonContainer: {
+  //   flexDirection: "row",
+  //   marginVertical: 20,
+  // },
   separator: {
     width: 10,
+    height:20
+  },
+  button: {
+    height: 60, // Adjust the height value to make the button taller
+    width: "80%", // Adjust the width value to change the button's width
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#703BE7",
+    borderRadius: 30, // Adjust the border radius value to make the edges rounder
+    
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
   },
 });

emma-frontend/package.json

@@ -23,8 +23,10 @@
     "react-native-base64": "^0.2.1",
     "react-native-crypto-js": "^1.0.0",
     "react-native-datepicker": "^1.7.2",
+    "react-native-gesture-handler": "^2.10.0",
     "react-native-render-html": "^6.3.4",
     "react-native-rsa-native": "^2.0.5",
+    "react-native-safe-area-context": "^4.5.3",
     "react-native-simple-radio-button": "^2.7.4",
     "react-native-toast-message": "^2.1.6",
     "react-native-webview": "11.26.0"