Merge pull request #19 from hngx-org/main

pull
hngx-org · Sep 21, 2023 · 030db07 · 030db07
2 parents 367c13c + 4bf7c72
commit 030db07
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo-google-fonts/open-sans": "^0.2.3",
     "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "^6.1.7",

diff --git a/src/components/AppButton.js b/src/components/AppButton.js
@@ -4,11 +4,12 @@ import TextOpen from "./TextOpen"
 
 const AppButton = ({
   onPress,
-  title
+  title,
+  style
 }) => {
   return (
     <Pressable
-      style = {styles.btn}
+      style = {{...styles.btn, ...style}}
       onPress = {onPress}
     >
       <TextOpen

diff --git a/src/components/AppTextInput.js b/src/components/AppTextInput.js
@@ -9,7 +9,7 @@ const AppTextInput = ({
     <View style = {{flex: 1}}>
       <TextInput
         style = {{
-          borderColor: colors.inputBorder,
+          borderColor: "rgba(244, 198, 255, 1)",
           borderWidth: 0.5,
           paddingVertical: 10,
           paddingHorizontal: 10,

diff --git a/src/components/CreateEventInputBox.js b/src/components/CreateEventInputBox.js
@@ -16,13 +16,13 @@ const CreateEventInputBox = ({
     <View style = {{
       flexDirection: "row", 
       flex: 1, 
-      backgroundColor: "#f0f0f0",
+      backgroundColor: "rgba(240, 232, 242, 1)",
       borderRadius: 10,
       ...style
     }}
     >
       <AppTextInput
-        onChangeText = {onChangeText}
+        onChangeText = {val => onChangeText(val)}
         style = {{borderTopRightRadius: button ? 0 : 10 , borderBottomRightRadius: button ? 0 : 10}}
 
         {...props}
@@ -35,10 +35,10 @@ const CreateEventInputBox = ({
           source = {iconSrc}
           style = {{width: 20, height: 20}}
         />
-        <TextOpen 
+        {btnText && <TextOpen 
           style = {styles.label}
           font = {"OpenSans_600SemiBold"}
-        >{btnText}</TextOpen>
+        >{btnText}</TextOpen>}
       </Pressable>}
     </View>
 
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 10,
     borderBottomRightRadius: 10,
     borderWidth: 0.5,
+    borderColor: "rgba(244, 198, 255, 1)",
 
   },
 })
diff --git a/src/components/EventItem.js b/src/components/EventItem.js
@@ -1,4 +1,7 @@
 import {View, Text, Image, StyleSheet} from "react-native";
+import colors from "../layouts/colors"
+import openSans from "../layouts/fonts"
+import TextOpen from "./TextOpen"
 import colors from "../layouts/colors";
 import openSans from "../layouts/fonts";
 
@@ -11,6 +14,23 @@ const EventItem = () => {
           style={{width: 50, height: 50}}
         />
       </View>
+      <View style = {{gap: 5, flex: 1}}>
+        <TextOpen 
+          style = {styles.title}
+          font = {"OpenSans_700Bold"}
+        >Football Game</TextOpen>
+        <TextOpen 
+          style = {styles.date}
+          font = {"OpenSans_600SemiBold"}
+        >May 20, 2023</TextOpen>
+        <TextOpen 
+          style = {styles.time}
+          font = {"OpenSans_600SemiBold"}
+        >Friday 4-6pm</TextOpen>
+        <TextOpen 
+          style = {styles.location}
+          font = {"OpenSans_700Bold"}
+        >Teslim Balogun Stadium</TextOpen>
       <View style={{gap: 2, flex: 1}}>
         <Text style={styles.title}>Football Game</Text>
         <Text style={styles.date}>May 20, 2023</Text>
@@ -67,7 +87,6 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 18,
-    fontWeight: "bold",
     color: "rgba(124, 20, 155, 1)",
   },
   date: {
@@ -76,11 +95,11 @@ const styles = StyleSheet.create({
   },
   time: {
     color: "#000",
-    fontSize: 12,
+    fontSize: 14,
   },
   location: {
     fontSize: 18,
     fontWeight: "bold",
-    color: "rgba(234, 186, 0, 1)",
+    color: "#f49400"
   },
 });
diff --git a/src/navigators/HomeStack.js b/src/navigators/HomeStack.js
@@ -9,7 +9,7 @@ const HomeStack = () => {
     <Stack.Navigator 
       screenOptions = {{headerShown: false}}
     >
-      <Stack.Screen name = {"Home"} component = {Home}/>
+      <Stack.Screen name = {"HomeScreen"} component = {Home}/>
       <Stack.Screen name = {"Create"} component = {CreateEvent}/>
     </Stack.Navigator>
   )

diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js
@@ -19,7 +19,7 @@ const AllEvents = () => {
       >
         <Image
           source = {require("../../assets/icons/plus-icon.png")}
-          style = {{width: 20, height: 20}}
+          style = {{width: 25, height: 25}}
         />
       </Pressable>
     </View>
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: 20,
     right: 20,
-    backgroundColor: "rgba(234, 186, 0, 1)",
+    backgroundColor: "#f49400",
     padding: 15,
     borderRadius: 50,
   }