[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 🤦🏽‍♂️

3 files changed, 53 insertions, 2 deletions

diff --git a/src/components/onboarding/Background.tsx b/src/components/onboarding/Background.tsx
index 85675b0d..054eeff6 100644
--- a/src/components/onboarding/Background.tsx
+++ b/src/components/onboarding/Background.tsx
@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
   ViewProps,
-  View,
+  SafeAreaView,
 } from 'react-native';
 import {CenteredView} from '../common';
 
@@ -24,7 +24,7 @@ const Background: React.FC<BackgroundProps> = (props) => {
         {props.centered ? (
           <CenteredView {...props}>{props.children}</CenteredView>
         ) : (
-          <View {...props}>{props.children}</View>
+          <SafeAreaView {...props}>{props.children}</SafeAreaView>
         )}
       </TouchableWithoutFeedback>
     </LinearGradient>
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;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index 01255c01..ef972194 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -2,3 +2,4 @@ export {default as ArrowButton} from './ArrowButton';
 export {default as Background} from './Background';
 export {default as RegistrationWizard} from './RegistrationWizard';
 export {default as TermsConditions} from './TermsConditions';
+export {default as SubmitButton} from './SubmitButton';