Merge pull request #217 from IvanIFChen/tma597-update-login-button

[TMA-597] Update Login Button Styles

1 files changed, 15 insertions, 81 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 63296ede..2db039c1 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -11,16 +11,11 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  View,
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
 import {useDispatch} from 'react-redux';
-import {Background, SubmitButton, TaggInput} from '../../components';
-import {
-  LOGIN_ENDPOINT,
-  TAGG_LIGHT_PURPLE,
-  usernameRegex,
-} from '../../constants';
+import {Background, TaggInput, TaggSquareButton} from '../../components';
+import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_FAILED_LOGIN_INFO,
@@ -215,45 +210,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     </TouchableOpacity>
   );
 
-  /**
-   * Login screen login button.
-   */
-  const LoginButton = () => (
-    <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}
-    />
-  );
-
-  /**
-   * Login screen registration prompt.
-   */
-  const RegistrationPrompt = () => (
-    <View style={styles.newUserContainer}>
-      <Text
-        accessible={true}
-        accessibilityLabel="New to tagg?"
-        style={styles.newUser}>
-        New to tagg?{' '}
-      </Text>
-      <TouchableOpacity
-        accessibilityLabel="Get started."
-        accessibilityHint="Select this if you do not have a tagg account">
-        <Text
-          accessible={true}
-          accessibilityLabel="Get started"
-          style={styles.getStarted}
-          onPress={startRegistrationProcess}>
-          Get started!
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-
   return (
     <Background
       centered
@@ -300,9 +256,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           ref={inputRef}
         />
         <ForgotPassword />
-        <LoginButton />
+        <TaggSquareButton
+          onPress={handleLogin}
+          title={'Login'}
+          mode={'normal'}
+          color={'white'}
+        />
+        <TaggSquareButton
+          onPress={startRegistrationProcess}
+          title={'Sign up'}
+          mode={'normal'}
+          color={'purple'}
+        />
       </KeyboardAvoidingView>
-      <RegistrationPrompt />
     </Background>
   );
 };
@@ -328,44 +294,12 @@ const styles = StyleSheet.create({
     paddingBottom: '1%',
     left: '3%',
     borderBottomColor: 'white',
+    marginBottom: '8%',
   },
   forgotPasswordText: {
     fontSize: normalize(14),
     color: '#fff',
   },
-  start: {
-    width: 144,
-    height: 36,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 18,
-    marginBottom: '15%',
-  },
-  startDisabled: {
-    backgroundColor: '#ddd',
-  },
-  startText: {
-    fontSize: 16,
-    color: '#78a0ef',
-    fontWeight: 'bold',
-  },
-  newUserContainer: {
-    flexDirection: 'row',
-    color: '#fff',
-  },
-  newUser: {
-    fontSize: 14,
-    color: TAGG_LIGHT_PURPLE,
-  },
-  getStarted: {
-    fontSize: 14,
-    color: '#fff',
-    textDecorationLine: 'underline',
-  },
-  button: {
-    marginVertical: '10%',
-  },
 });
 
 export default Login;