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

[TMA-597] Update Login Button Styles

1 files changed, 19 insertions, 30 deletions

diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 7e18cb99..bfb1a127 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={'large'}
+        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;