Merge branch 'it18218640' into 'master'

Add color activity component

See merge request !28

frontend/src/screen/Color.js

 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground } from 'react-native';
+import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing } from 'react-native';
+import ImageButton from "../component/ImageButton";
+import ColorActivity from "../component/colorActivity";
+
+// const {width,height} = Dimensions.get('screen');
 
 export default function Color(){
+    
 
     const navigation = useNavigation();
-
     return (
+
         <SafeAreaView>
             <ScrollView>
+
                 <View>
-                    <Image style={styles.imagebackground} source={require('../assets/color/background.png')} resizeMode="contain">
+                    <View>
+                        <ImageBackground source={require("../assets/color/background.png")} 
+                        style={styles.image}>
+                            <Text style={styles.title}>Color Activity</Text>
+                        </ImageBackground>
+                    </View>
+                </View>
+
+                <ColorActivity>
                     
-                    </Image>
+                </ColorActivity>
+
+                <ColorActivity>
                     
-                </View>
+                </ColorActivity>
+
+                <ColorActivity>
+                    
+                </ColorActivity>
+
+                <ColorActivity>
+                    
+                </ColorActivity>
+
+                <ColorActivity>
+                    
+                </ColorActivity>
             </ScrollView>
         </SafeAreaView>
-    )
-
-    
+    ) 
 
 }
 
 const styles = StyleSheet.create({
-    imagebackground:{
-        
+    imageContainer:{
+        flexDirection: "row",
+        marginTop: 70,
+    },
+    imageView: {
+        flex: 1,
+        width: "90%",
+        height: 200,
+        // borderWidth:1,
+        // borderColor: "#000",
+        marginHorizontal: 15,
+        borderRadius: 50
+    },
+    image: {
+        width: "100%",
+        height: 250,
+    },
+    title: {
+        color: "white",
+        fontSize: 40,
+        position: "absolute",
+        left: 50,
+        bottom: 50
     }
 
 })
\ No newline at end of file