[signup] demographic input screens

src/Components/PressableRequirement/PressableRequirement.tsx

@@ -15,7 +15,7 @@ export default function PressableRequirement({
   requirement,
   checkCount,
   setCheckCount,
-}: requirementProps): ReactNode {
+}: requirementProps) {
   const [isChecked, setIsChecked] = useState(false);
 
   const onCheck = () => {

src/app/(Authentication)/SignUp/DemographicInput/Age/index.tsx

@@ -0,0 +1,89 @@
+import Checkbox from 'expo-checkbox';
+import { router } from 'expo-router';
+import { useState } from 'react';
+import { View, Text } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import styles from './styles';
+import BackButton from '../../../../../../assets/back-button-in-grey-circle.svg';
+import ContinueArrow from '../../../../../../assets/right-arrow-white.svg';
+import { colors } from '../../../../../styles/colors';
+
+export default function Age() {
+  const [isHe, setHe] = useState(false);
+  const [isShe, setShe] = useState(false);
+  const [isThey, setThey] = useState(false);
+  const [isOther, setOther] = useState(false);
+  const [isPreferNot, setPreferNot] = useState(false);
+
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.innerContainer}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => router.back()}
+        >
+          <BackButton />
+        </TouchableOpacity>
+        <Text style={styles.titleText}>Optional questions:</Text>
+        <Text style={styles.titleText}>What is your age cohort?</Text>
+        <View style={styles.instructionTextContainer}>
+          <Text style={styles.instructionText}>
+            While not always necessary, it may be relevant in certain class
+            actions.
+          </Text>
+        </View>
+        <View style={styles.pronounsContainer}>
+          <TouchableOpacity
+            onPress={() => setHe(!isHe)}
+            style={styles.pronounSelectButton}
+          >
+            <Checkbox value={isHe} color={colors.darkGrey} />
+            <Text style={styles.selectText}>he/him</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setShe(!isShe)}
+            style={styles.pronounSelectButton}
+          >
+            <Checkbox value={isShe} color={colors.darkGrey} />
+            <Text style={styles.selectText}>she/her</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setThey(!isThey)}
+            style={styles.pronounSelectButton}
+          >
+            <Checkbox value={isThey} color={colors.darkGrey} />
+            <Text style={styles.selectText}>they/them</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setOther(!isOther)}
+            style={styles.pronounSelectButton}
+          >
+            <Checkbox value={isOther} color={colors.darkGrey} />
+            <Text style={styles.selectText}>Other: ____________________</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setPreferNot(!isPreferNot)}
+            style={styles.pronounSelectButton}
+          >
+            <Checkbox value={isPreferNot} color={colors.darkGrey} />
+            <Text style={styles.selectText}>Prefer not to say</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          style={styles.continueButton}
+          onPress={() =>
+            router.push('(Authentication)/SignUp/DemographicInput/Age')
+          }
+        >
+          <Text style={styles.buttonText}>Continue</Text>
+          <ContinueArrow />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

src/app/(Authentication)/SignUp/DemographicInput/Age/styles.ts

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../../../../styles/colors';
+
+export default StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    display: 'flex',
+    backgroundColor: colors.white,
+    alignItems: 'center',
+  },
+  innerContainer: {
+    width: '84%',
+    paddingTop: 110,
+  },
+  backButton: {
+    marginBottom: 65,
+  },
+  titleText: {
+    fontSize: 24,
+    fontWeight: '800',
+    color: colors.black,
+  },
+  instructionTextContainer: {
+    marginTop: 16,
+    marginBottom: 22,
+  },
+  instructionText: {
+    fontSize: 16,
+    fontWeight: '300',
+    color: colors.darkGrey,
+  },
+  pronounsContainer: {
+    height: 365,
+    width: 320,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: colors.offWhite,
+
+    shadowColor: colors.offWhite,
+    shadowOffset: { width: 0.05, height: 0.75 },
+    shadowOpacity: 1.25,
+    shadowRadius: 0.05,
+    elevation: 1,
+    padding: 30,
+    marginBottom: 100,
+  },
+  continueButton: {
+    width: '100%',
+    height: 45,
+    borderWidth: 1,
+    backgroundColor: colors.black,
+    borderRadius: 5,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.white,
+  },
+  pronounSelectButton: {
+    flexDirection: 'row',
+    width: '100%',
+    columnGap: 20,
+    //solely to delete space between buttons, don't want unclickable space in between
+    paddingBottom: 20,
+  },
+  selectText: {
+    fontSize: 16,
+    fontWeight: '300',
+  },
+});

src/app/(Authentication)/SignUp/DemographicInput/Consent/index.tsx

@@ -0,0 +1,59 @@
+import { router } from 'expo-router';
+import { View, Text } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import styles from './styles';
+import BackButton from '../../../../../../assets/back-button-in-grey-circle.svg';
+import Check from '../../../../../../assets/circle-check-white.svg';
+import Exclamation from '../../../../../../assets/exclamation-grey.svg';
+import Nah from '../../../../../../assets/x.svg';
+export default function Consent() {
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.contentContainer}>
+        <View style={styles.smallerContentContainer}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => router.back()}
+          >
+            <BackButton />
+          </TouchableOpacity>
+          <View style={styles.titleTextContainer}>
+            <Text style={styles.titleText}>Consent for Communication</Text>
+          </View>
+          <View style={styles.instructionContainer}>
+            <Exclamation />
+            <Text style={styles.instructionText}>
+              Do we have your consent to allow this app and any associated law
+              firms to contact you regarding class actions, updates and related
+              information?
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View style={styles.buttonContainer}>
+        <View style={styles.smallerButtonContainer}>
+          <TouchableOpacity style={styles.button} onPress={() => router.back()}>
+            <Nah />
+            <Text style={[styles.buttonText, styles.declineButtonText]}>
+              Decline
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.smallerButtonContainer}>
+          <TouchableOpacity
+            style={[styles.button, styles.acceptButton]}
+            onPress={() =>
+              router.push('(Authentication)/SignUp/DemographicInput/Pronouns')
+            }
+          >
+            <Check />
+            <Text style={[styles.buttonText, styles.acceptButtonText]}>
+              Accept
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}

src/app/(Authentication)/SignUp/DemographicInput/Consent/styles.ts

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../../../../styles/colors';
+
+export default StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    display: 'flex',
+    backgroundColor: colors.white,
+  },
+  contentContainer: {
+    flex: 0.87,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    flex: 0.13,
+    borderTopWidth: 0.5,
+    borderColor: colors.black,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+  },
+  smallerButtonContainer: {
+    flex: 0.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: 20,
+  },
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: 50,
+    width: 162,
+    borderWidth: 1,
+    borderColor: colors.black,
+    borderRadius: 5,
+    paddingHorizontal: 35,
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  acceptButton: {
+    backgroundColor: colors.black,
+  },
+  acceptButtonText: {
+    color: colors.white,
+  },
+  declineButtonText: {
+    color: colors.black,
+  },
+  smallerContentContainer: {
+    paddingTop: 110,
+    width: '84%',
+  },
+  backButton: {
+    marginBottom: 65,
+  },
+  titleTextContainer: {
+    marginBottom: 34,
+  },
+  titleText: {
+    fontSize: 35,
+    fontWeight: '800',
+    color: colors.black,
+    lineHeight: 33,
+  },
+  instructionContainer: {
+    flexDirection: 'row',
+    columnGap: 24,
+  },
+  instructionText: {
+    fontSize: 16,
+    fontWeight: '300',
+    color: colors.darkGrey,
+    flex: 1,
+  },
+});