2 files changed, 33 insertions, 46 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 63296ede..833e36cb 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
 import {useDispatch} from 'react-redux';
-import {Background, SubmitButton, TaggInput} from '../../components';
+import {Background, TaggInput, TaggSquareButton} from '../../components';
 import {
   LOGIN_ENDPOINT,
   TAGG_LIGHT_PURPLE,
@@ -216,20 +216,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   );
 
   /**
-   * 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 = () => (
@@ -300,7 +286,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           ref={inputRef}
         />
         <ForgotPassword />
-        <LoginButton />
+        <TaggSquareButton
+          onPress={handleLogin}
+          title={'Login'}
+          mode={'normal'}
+          color={'purple'}
+        />
+        <TaggSquareButton
+          onPress={handleLogin}
+          title={'Login'}
+          mode={'normal'}
+          color={'white'}
+        />
+        {/* <LoginButton /> */}
       </KeyboardAvoidingView>
       <RegistrationPrompt />
     </Background>
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 7e18cb99..541ca512 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -1,10 +1,10 @@
+import {StackNavigationProp} from '@react-navigation/stack';
 import * as React from 'react';
-import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import {Background} from '../../components';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {Background, TaggSquareButton} from '../../components';
 import {OnboardingStackParams} from '../../routes';
-import {StackNavigationProp} from '@react-navigation/stack';
 import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
 
 type WelcomeScreenNavigationProps = StackNavigationProp<
   OnboardingStackParams,
@@ -29,16 +29,20 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       />
 
       <View>
-        <Text style={styles.header}>Welcome to Tagg!</Text>
+        <Text style={styles.header}>Welcome to TAGG!</Text>
         <Text style={styles.subtext}>
           Tagg is the new social networking platform for you! It will help you
           create your own personalized digital space where you can express who
           you are, along with all the moments that comprehensively define you!
         </Text>
       </View>
-      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
-        <Text style={styles.nextButtonLabel}>Next</Text>
-      </TouchableOpacity>
+      <TaggSquareButton
+        onPress={handleNext}
+        title={'Next'}
+        mode={'normal'}
+        color={'purple'}
+        style={styles.nextButton}
+      />
     </Background>
   );
 };
@@ -53,44 +57,29 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: '10%',
   },
   image: {
-    width: SCREEN_WIDTH * 0.9,
-    height: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
   },
   header: {
     color: '#fff',
-    fontSize: normalize(28),
-    fontWeight: '700',
+    fontSize: 32,
+    fontWeight: '600',
     textAlign: 'center',
     marginBottom: '4%',
     marginHorizontal: '10%',
   },
   subtext: {
     color: '#fff',
-    fontSize: normalize(17),
-    fontWeight: '500',
+    fontSize: 16,
+    fontWeight: '600',
     textAlign: 'center',
-    marginBottom: '10%',
+    marginBottom: '15%',
     marginHorizontal: '10%',
-    lineHeight: normalize(25),
   },
   nextButton: {
-    backgroundColor: '#8F01FF',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '70%',
-    height: '10%',
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#8F01FF',
     marginBottom: '15%',
   },
-  nextButtonLabel: {
-    fontSize: normalize(20),
-    fontWeight: '700',
-    color: '#ddd',
-  },
 });
 export default WelcomeScreen;