[TMA-95] Verification Page UI (#15)

* Removed header from view

* Setup basic layout of Verification page

Also created new SubmitButton component

* Some light code cleanup

* Implemented SubmitButton component on Login

* Added basic verification field

* Styled Verification CodeField

* Quick typo fix

* Some lint cleaning

* Removed header from view

* Setup basic layout of Verification page

Also created new SubmitButton component

* Some light code cleanup

* Implemented SubmitButton component on Login

* Added basic verification field

* Styled Verification CodeField

* Quick typo fix

* Some lint cleaning

* Verification isn't that exciting lol

* Removed header from view

* Setup basic layout of Verification page

Also created new SubmitButton component

* Some light code cleanup

* Implemented SubmitButton component on Login

* Added basic verification field

* Styled Verification CodeField

* Quick typo fix

* Some lint cleaning

* Light lint cleaning

* Still not that exciting lol

* Removed misplaced accessibility labels

* Added documentation to SubmitButton component

* Implemented KeyboardAvoidingView

* Fixed wizard position consistency

* Updated Verification CodeField to take 6 digits

* Removed marginVertical prop from SubmitButton

* Updated text to represent 6 digit code

🤦🏽‍♂️

* Made Background use centered prop

Also found another 4 that needed to be a 6 🤦🏽‍♂️

1 files changed, 50 insertions, 0 deletions

diff --git a/src/components/onboarding/SubmitButton.tsx b/src/components/onboarding/SubmitButton.tsx
new file mode 100644
index 00000000..f946d390
--- /dev/null
+++ b/src/components/onboarding/SubmitButton.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+interface SubmitButtonProps extends TouchableOpacityProps {
+  text: string;
+  color: string;
+}
+
+/*
+ * A button component that creates a TouchableOpacity in the style of our onboarding buttons. It takes in props to define the text in the TouchableOpacity as well as the background color.
+*/
+const SubmitButton: React.FC<SubmitButtonProps> = (
+  props: SubmitButtonProps,
+) => {
+  return (
+    <View {...props}>
+      <TouchableOpacity
+        style={[
+          styles.button,
+          {backgroundColor: props.color},
+        ]}
+      >
+        <Text style={styles.text}>{props.text}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 144,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 18,
+  },
+  text: {
+    fontSize: 16,
+    color: '#78a0ef',
+    fontWeight: 'bold',
+  },
+});
+
+export default SubmitButton;