Merge volunteer form screens (#41)

AudacityMusic · Jul 12, 2024 · 7f0d92d · 7f0d92d
1 parent 84848e4
commit 7f0d92d
Show file tree

Hide file tree

Showing 9 changed files with 475 additions and 336 deletions.
diff --git a/App.js b/App.js
@@ -3,21 +3,23 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import HomeScreen from "./src/screens/HomeScreen";
-import SignInScreen from "./src/screens/SignInScreen";
+// import SignInScreen from "./src/screens/SignInScreen";
 import DonateScreen from "./src/screens/DonateScreen";
 import WebsitesScreen from "./src/screens/WebsitesScreen";
+import VolunteerFormScreen from "./src/screens/VolunteerFormScreen";
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Sign In" component={SignInScreen} />
-        <Stack.Screen name="Donate" component={DonateScreen} />
-        <Stack.Screen name="Websites" component={WebsitesScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    // <NavigationContainer>
+    //   <Stack.Navigator initialRouteName="Home">
+    //     <Stack.Screen name="Home" component={HomeScreen} />
+    //     <Stack.Screen name="Sign In" component={SignInScreen} />
+    //     <Stack.Screen name="Donate" component={DonateScreen} />
+    //     <Stack.Screen name="Websites" component={WebsitesScreen} />
+    //   </Stack.Navigator>
+    // </NavigationContainer>
+    <VolunteerFormScreen></VolunteerFormScreen>
   );
 }
diff --git a/src/components/BackButton.js b/src/components/BackButton.js
@@ -2,20 +2,21 @@ import { StyleSheet, Text, View, Image } from "react-native";
 
 export default function BackButton(props) {
   return (
-    <View
-      style={[
-        styles.back,
-        props.opaque ? { backgroundColor: "rgba(0,0,0,0.8)" } : {},
-      ]}
-    >
-      <Text>{"\n\n\n"}</Text>
-      <Image
-        source={require("./../assets/caret-left.png")}
-        style={props.opaque ? { tintColor: "white" } : {}}
-      />
-      <Text style={[styles.backText, props.opaque ? { color: "white" } : {}]}>
-        Back
-      </Text>
+    <View>
+      <View
+        style={[
+          styles.back,
+          props.opaque ? { backgroundColor: "rgba(0,0,0,0.8)" } : {},
+        ]}
+      >
+        <Image
+          source={require("./../assets/caret-left.png")}
+          style={props.opaque ? { tintColor: "white" } : {}}
+        />
+        <Text style={[styles.backText, props.opaque ? { color: "white" } : {}]}>
+          Back
+        </Text>
+      </View>
     </View>
   );
 }
@@ -24,11 +25,6 @@ const styles = StyleSheet.create({
   back: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "flex-start",
-    paddingRight: "13%",
-    borderRadius: 30,
-    marginVertical: "-10%",
   },
 
   backText: {

diff --git a/src/components/MultipleChoice.js b/src/components/MultipleChoice.js
@@ -2,10 +2,19 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 
-const MultipleChoice = ({ options, selectedOption, onSelect }) => {
+const MultipleChoice = ({
+  title,
+  options,
+  selectedOption,
+  onSelect,
+  color = "black",
+}) => {
   return (
-    <View>
-      <Text style={styles.label}>Performance Type *</Text>
+    <View style={{ marginBottom: 20 }}>
+      <Text style={styles.label}>
+        <Text style={{ color: color }}>{title}</Text>
+        <Text style={{ color: "red" }}> *</Text>
+      </Text>
       {options.map((option) => (
         <TouchableOpacity
           key={option.value}
@@ -33,9 +42,8 @@ const MultipleChoice = ({ options, selectedOption, onSelect }) => {
 
 const styles = StyleSheet.create({
   label: {
-    fontSize: 16,
+    fontSize: 25,
     marginVertical: 10,
-    fontWeight: "bold",
   },
   option: {
     flexDirection: "row",
@@ -59,11 +67,12 @@ const styles = StyleSheet.create({
   },
   optionText: {
     marginLeft: 10,
-    fontSize: 14,
+    fontSize: 20,
+    flexWrap: "wrap",
   },
   selectedText: {
     color: "#1E90FF",
-    fontWeight: "bold",
+    fontWeight: "condensedBold",
   },
 });
 

diff --git a/src/components/NextButton.js b/src/components/NextButton.js
@@ -3,8 +3,7 @@ import { StyleSheet, Text, View, Image } from "react-native";
 export default function NextButton() {
   return (
     <View style={styles.back}>
-      <Text>{"\n\n\n"}</Text>
-      <Text style={styles.backText}>Next</Text>
+      <Text style={styles.backText}>{"Next"}</Text>
       <Image
         source={require("./../assets/caret-left.png")}
         style={styles.caret}
@@ -17,11 +16,10 @@ const styles = StyleSheet.create({
   back: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    paddingLeft: "5%",
+    justifyContent: "flex-end",
     borderRadius: 15,
-    height: 59,
-    width: 114,
+    height: 60,
+    width: 120,
     backgroundColor: "black",
   },
 

diff --git a/src/components/TextField.js b/src/components/TextField.js
@@ -1,29 +1,38 @@
 import { StyleSheet, Text, TextInput, View } from "react-native";
 
-export default function TextField(props) {
+export default function TextField({
+  title,
+  subtitle = "",
+  setText,
+  keyboardType,
+  borderColor = "black",
+}) {
   return (
     // TODO
-    <View style={styles.container}>
-      <Text>
-        {props.title}
-        <Text style={styles.red}>*</Text>
+    <View>
+      <Text style={{ fontSize: 25 }}>
+        <Text>{title}</Text>
+        <Text style={{ color: "red" }}> *</Text>
       </Text>
-      <TextInput style={styles.inputField}></TextInput>
+      <Text style={{ fontSize: 1 }}>{"\n"}</Text>
+      <Text style={{ fontSize: 20, color: "#707070" }}>{subtitle}</Text>
+      <TextInput
+        style={[styles.inputField, { borderColor: borderColor }]}
+        onChangeText={(text) => setText(text)}
+        keyboardType={keyboardType}
+      ></TextInput>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   inputField: {
+    height: 50,
     borderRadius: 15,
     borderWidth: 3,
-    flexGrow: 0.5,
-    textAlignVertical: "top",
-  },
-  red: {
-    color: "red",
-  },
-  container: {
-    flexGrow: 1,
+    fontSize: 30,
+    textAlign: "center",
+    marginBottom: 20,
+    paddingHorizontal: "10%",
   },
 });
diff --git a/src/screens/ContactInfoScreen.js b/src/screens/ContactInfoScreen.js
diff --git a/src/screens/PerformanceDetailsScreen.js b/src/screens/PerformanceDetailsScreen.js