Merge branch 'master' into tma255-taggs-bar

# Conflicts:
#	src/components/common/SocialLinkModal.tsx

1 files changed, 42 insertions, 49 deletions

diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 0bd5a0a5..20061cd0 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
-import { ScreenType } from '../../types';
+import {ScreenType} from '../../types';
 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 {
@@ -35,59 +36,51 @@ 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}
-                screenType={ScreenType.Profile}
-              />
-              <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}
+              screenType={ScreenType.Profile}
+            />
+            <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}
+              buttonStyle={'gradient'}
+              buttonColor={'white'}
+              labelColor={'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',