using centered view, updated TaggSquareButton styles

5 files changed, 76 insertions, 62 deletions

diff --git a/src/assets/images/logo-purple.png b/src/assets/images/logo-purple.png
new file mode 100644
index 00000000..48768f67
--- /dev/null
+++ b/src/assets/images/logo-purple.png
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index d3bc3945..67a3f074 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -4,6 +4,7 @@ import {TextInput} from 'react-native-gesture-handler';
 import {SocialIcon} from '.';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import CenteredView from './CenteredView';
 import TaggSquareButton from './TaggSquareButton';
 
 interface SocialLinkModalProps {
@@ -34,55 +35,46 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
   };
 
   return (
-    <>
-      <View style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {}}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <TouchableOpacity
-                style={styles.closeButton}
-                onPress={onClosePress}>
-                <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
-              </TouchableOpacity>
-              <SocialIcon style={styles.icon} social={social} />
-              <Text style={styles.titleLabel}>{social}</Text>
-              <Text style={styles.descriptionLabel}>
-                Insert your {social.toLowerCase()} username to link your{' '}
-                {social.toLowerCase()} account to your profile!
-              </Text>
-              <TextInput
-                autoCapitalize={'none'}
-                autoCorrect={false}
-                placeholder={'Username'}
-                style={styles.textInput}
-                onChangeText={setUsername}
-                selectionColor={'grey'}
-                value={username}
-              />
-              <TaggSquareButton
-                title={'Submit'}
-                onPress={onSubmit}
-                mode={'gradient'}
-                color={'white'}
-              />
-            </View>
+    <CenteredView>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {}}>
+        <CenteredView>
+          <View style={styles.modalView}>
+            <TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
+              <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
+            </TouchableOpacity>
+            <SocialIcon style={styles.icon} social={social} />
+            <Text style={styles.titleLabel}>{social}</Text>
+            <Text style={styles.descriptionLabel}>
+              Insert your {social.toLowerCase()} username to link your{' '}
+              {social.toLowerCase()} account to your profile!
+            </Text>
+            <TextInput
+              autoCapitalize={'none'}
+              autoCorrect={false}
+              placeholder={'Username'}
+              style={styles.textInput}
+              onChangeText={setUsername}
+              selectionColor={'grey'}
+              value={username}
+            />
+            <TaggSquareButton
+              title={'Submit'}
+              onPress={onSubmit}
+              mode={'gradient'}
+              color={'white'}
+            />
           </View>
-        </Modal>
-      </View>
-    </>
+        </CenteredView>
+      </Modal>
+    </CenteredView>
   );
 };
 
 const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   modalView: {
     width: SCREEN_WIDTH * 0.8,
     backgroundColor: 'white',
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 78a90554..817a2690 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -3,6 +3,7 @@ import {
   GestureResponderEvent,
   StyleSheet,
   Text,
+  TextStyle,
   TouchableOpacity,
   ViewProps,
   ViewStyle,
@@ -14,14 +15,16 @@ import {normalize, SCREEN_WIDTH} from '../../utils';
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
-  mode: 'normal' | 'large' | 'gradient';
-  color: 'purple' | 'white';
+  buttonStyle: 'normal' | 'large' | 'gradient';
+  buttonColor: 'purple' | 'white';
+  labelColor: 'white' | 'blue';
   style?: ViewStyle;
+  labelStyle?: TextStyle;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
-  const buttonStyles = (() => {
-    switch (props.color) {
+  const buttonColor = (() => {
+    switch (props.buttonColor) {
       case 'purple':
         return {backgroundColor: TAGG_PURPLE};
       case 'white':
@@ -29,24 +32,37 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
         return {backgroundColor: 'white'};
     }
   })();
-  switch (props.mode) {
+  const labelColor = (() => {
+    switch (props.labelColor) {
+      case 'white':
+        return {color: 'white'};
+      case 'blue':
+      default:
+        return {color: '#78A0EF'};
+    }
+  })();
+  switch (props.buttonStyle) {
     case 'large':
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.largeButton, buttonStyles, props.style]}>
-          <Text style={styles.largeLabel}>{props.title}</Text>
+          style={[styles.largeButton, buttonColor, props.style]}>
+          <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress}>
+        <TouchableOpacity onPress={props.onPress} style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
-            <Text style={styles.gradientLabel}>{props.title}</Text>
+            <Text style={[styles.gradientLabel, props.labelStyle]}>
+              {props.title}
+            </Text>
           </LinearGradient>
         </TouchableOpacity>
       );
@@ -55,8 +71,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, buttonStyles, props.style]}>
-          <Text style={styles.normalLabel}>{props.title}</Text>
+          style={[styles.normalButton, buttonColor, props.style]}>
+          <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
   }
@@ -86,7 +104,6 @@ const styles = StyleSheet.create({
   normalLabel: {
     fontSize: normalize(20),
     fontWeight: '500',
-    color: '#78A0EF',
   },
   gradientButton: {
     marginTop: '8%',
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 4d1fb09a..450c5039 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -28,6 +28,7 @@ import {fcmService} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType, UserType} from '../../types';
 import {normalize, userLogin} from '../../utils';
+import UpdateRequired from './UpdateRequired';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -212,6 +213,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       {/* <Modal visible={newVersionAvailable} /> */}
+      <UpdateRequired visible={newVersionAvailable} />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.keyboardAvoidingView}>
@@ -255,14 +257,16 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         <TaggSquareButton
           onPress={handleLogin}
           title={'Login'}
-          mode={'normal'}
-          color={'white'}
+          buttonStyle={'normal'}
+          buttonColor={'white'}
+          labelColor={'blue'}
         />
         <TaggSquareButton
           onPress={startRegistrationProcess}
           title={'Sign up'}
-          mode={'normal'}
-          color={'purple'}
+          buttonStyle={'normal'}
+          buttonColor={'purple'}
+          labelColor={'blue'}
         />
       </KeyboardAvoidingView>
     </Background>
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index bfb1a127..ae31f933 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -39,8 +39,9 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       <TaggSquareButton
         onPress={handleNext}
         title={'Next'}
-        mode={'large'}
-        color={'purple'}
+        buttonStyle={'large'}
+        buttonColor={'purple'}
+        labelColor={'white'}
         style={styles.nextButton}
       />
     </Background>