lowks goated at styling

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,77 @@
+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',
+  },
+  smallerButtonContainer: {
+    flex: 0.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: 50,
+    width: 150,
+    borderWidth: 1,
+    borderColor: colors.black,
+    borderRadius: 5,
+    paddingHorizontal: 32,
+  },
+  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: 36,
+    fontWeight: '800',
+    color: colors.black,
+  },
+  instructionContainer: {
+    flexDirection: 'row',
+    columnGap: 24,
+  },
+  instructionText: {
+    fontSize: 16,
+    fontWeight: '300',
+    color: colors.black,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,9 @@
+import { View, Text } from 'react-native';
+
+export default function Pronouns() {
+  return (
+    <View>
+      <Text>HELO</Text>
+    </View>
+  );
+}

src/app/(Authentication)/SignUp/Email/index.tsx

@@ -108,6 +108,11 @@ export default function SignUpScreen() {
           <Arrow />
         </View>
       </TouchableOpacity>
+      <TouchableOpacity
+        onPress={() => router.push('SignUp/DemographicInput/Consent')}
+      >
+        <Text>Hello</Text>
+      </TouchableOpacity>
     </View>
   );
 }