[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, 9 insertions, 5 deletions

diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index b3b1ab71..1ddf6e0a 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 
 import {RootStackParamList} from '../routes';
-import {Background, TaggInput} from '../components';
+import {Background, TaggInput, SubmitButton} from '../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../constants';
 
 type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
@@ -171,13 +171,14 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
    * Login screen login button.
    */
   const LoginButton = () => (
-    <TouchableOpacity
+    <SubmitButton
+      text="Let's Start!"
+      color="#fff"
+      style={styles.button}
       accessibilityLabel="Let's Start!"
       accessibilityHint="Select this after entering your tagg username and password"
       onPress={handleLogin}
-      style={styles.start}>
-      <Text style={styles.startText}>Let's Start!</Text>
-    </TouchableOpacity>
+    />
   );
 
   /**
@@ -308,6 +309,9 @@ const styles = StyleSheet.create({
     color: '#fff',
     textDecorationLine: 'underline',
   },
+  button: {
+    marginVertical: '10%'
+  }
 });
 
 export default Login;