.

frontend/src/component/memory/Header.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
         width: '100%',
         height: 90,
         paddingTop: 36,
-        backgroundColor: Colors.primary,
+        backgroundColor: '#5fcf93',
         justifyContent: 'center',
         alignItems: 'center'
     },

frontend/src/constants/Countdown.js

 export default {
-    elementry: 2,
+    elementry: 5,
     medium: 5,
-    advance: 2
+    advance: 3
 }
\ No newline at end of file

frontend/src/router/router.js

@@ -192,7 +192,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary}
+            headerStyle: {backgroundColor: '#5fcf93'}
           }}
         />
         <Stack.Screen
@@ -202,7 +202,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Start',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -272,7 +272,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Over',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -282,7 +282,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Results',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
            }}
         />
         <Stack.Screen
@@ -292,7 +292,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Levels',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
            }}
         />
         <Stack.Screen
@@ -302,7 +302,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Medium Level',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
            }}
         />
         <Stack.Screen
@@ -312,7 +312,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Advance Level',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
            }}
         />
         <Stack.Screen

frontend/src/screen/memory/GameLevel.js

@@ -19,19 +19,20 @@ const GameLevel = ({navigation}) => {
       >
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
-            <Text style={styles.modalText}>Please select matching images</Text>
+            <Text style={styles.modalText}>Select matching images, 5 seconds will be given for each!</Text>
+            <Text style={styles.modalTextBold}>Are you ready?</Text>
             <View style={{ flexDirection: 'row' }} >
             <Pressable
               style={[styles.button, styles.buttonClose]}
               onPress={() => {setModalVisible(!modalVisible); navigation.navigate('GameScreenOne'); }}
             >
-              <Text style={styles.textStyle}>Start</Text>
+              <Text style={styles.textStyle}>Yes</Text>
             </Pressable>
             <Pressable
               style={[styles.button, styles.buttonClose]}
               onPress={() => {setModalVisible(!modalVisible)}}
             >
-              <Text style={styles.textStyle}>Cancel</Text>
+              <Text style={styles.textStyle}>No</Text>
             </Pressable>
             </View>
           </View>
@@ -49,19 +50,20 @@ const GameLevel = ({navigation}) => {
       >
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
-            <Text style={styles.modalText}>Please select matching images</Text>
+          <Text style={styles.modalText}>Select matching images, 5 seconds will be given for each!</Text>
+            <Text style={styles.modalTextBold}>Are you ready?</Text>
             <View style={{ flexDirection: 'row' }} >
             <Pressable
               style={[styles.button, styles.buttonClose]}
               onPress={() => {setModalVisible(!mediumModalVisible); navigation.navigate('MediumGameScreenOne'); }}
             >
-              <Text style={styles.textStyle}>Start</Text>
+              <Text style={styles.textStyle}>Yes</Text>
             </Pressable>
             <Pressable
               style={[styles.button, styles.buttonClose]}
-              onPress={() => {setModalVisible(!mediumModalVisible)}}
+              onPress={() => {setMediumModalVisible(!mediumModalVisible)}}
             >
-              <Text style={styles.textStyle}>Cancel</Text>
+              <Text style={styles.textStyle}>No</Text>
             </Pressable>
             </View>
           </View>
@@ -122,13 +124,13 @@ const styles = StyleSheet.create({
         alignItems: 'center'
     },
     elementryBtn: {
-        backgroundColor: 'green'
+        backgroundColor: '#6dce99'
     },
     mediumBtn: {
-        backgroundColor: 'blue'
+        backgroundColor: '#4285F4'
     },
     advanceBtn: {
-        backgroundColor: 'red'
+        backgroundColor: '#DB4437'
     },
     image: {
         height: 250,
@@ -199,6 +201,12 @@ const styles = StyleSheet.create({
         marginBottom: 15,
         textAlign: "center",
         fontSize: 20
+      },
+      modalTextBold: {
+        marginBottom: 15,
+        textAlign: "center",
+        fontSize: 20,
+        fontWeight: 'bold'
       }
 });
 

frontend/src/screen/memory/GameOverScreen.js

@@ -108,12 +108,19 @@ const GameOverScreen = ({navigation}) => {
                     style={styles.image} 
                 />
             </View>
-            <Button title='Play Again' onPress={()=>{navigation.navigate('GameList'); setIsLoading(false); dispatch(memoryActions.clearData());}}/>
-            <Button title='Finish' onPress={()=>{sendData()}}/>
+
             <View style={styles.resultContainer}>
                 {/* <Text style={styles.resultText}>{!loading ? `Child's disorder level is ${disorderLevel}`  : ''}</Text> */}
                 {resultText}
             </View>
+            <View style={styles.buttonContainer}>
+                <View style={styles.button}>
+                    <Button color={'#4285F4'} title='Play Again' onPress={()=>{navigation.navigate('GameList'); setIsLoading(false); dispatch(memoryActions.clearData());}}/>
+                </View>
+                <View style={styles.button}>
+                    <Button color={'#DB4437'} title='Finish' onPress={()=>{sendData()}}/>
+                </View>
+            </View>
         </View>
     );
 }
@@ -155,7 +162,17 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         fontSize: 22,
         fontWeight: 'bold'
-    }
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        width: 300,
+        maxWidth: '80%',
+        justifyContent: 'space-between',
+        marginTop: 20
+    },
+    button: {
+        width: '40%'
+    },
 });
 
 export default GameOverScreen;
\ No newline at end of file