Changed snapchat and tiktok linking

1 files changed, 31 insertions, 15 deletions

diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 41b044fe..85445155 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,18 +1,22 @@
 import React from 'react';
-import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {TouchableOpacity} from 'react-native';
+import {Modal, StyleSheet, Text, TouchableHighlight, View, ViewProps} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 import { TAGG_LIGHT_BLUE } from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
 
 interface SocialLinkModalProps {
   modalVisible: boolean;
   setModalVisible: (_: boolean) => void;
   completionCallback: (username: string) => void;
+  close: () => void;
 }
 
 const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
   modalVisible,
   setModalVisible,
+  close,
   completionCallback,
 }) => {
   const [username, setUsername] = React.useState('');
@@ -26,11 +30,14 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
           onRequestClose={() => {}}>
           <View style={styles.centeredView}>
             <View style={styles.modalView}>
+              <Text>
+                Insert your snapchat username to link your snapchat account to your profile!
+              </Text>
               <TextInput
                 autoCapitalize={'none'}
                 autoCorrect={false}
                 textAlign={'center'}
-                placeholder={'Your username'}
+                placeholder={'Username'}
                 style={styles.textInput}
                 onChangeText={setUsername}
                 value={username}
@@ -43,17 +50,20 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
                   setUsername('');
                   completionCallback(username);
                 }}>
-                <Text style={styles.textStyle}>Link</Text>
+                <Text style={styles.textStyle}>Submit</Text>
               </TouchableHighlight>
               {/* cancel button */}
-              <Text
+              <TouchableOpacity style={styles.closeButton} onPress={close}>
+                <CloseIcon height={'100%'} width={'100%'} color={'white'} />
+              </TouchableOpacity>
+              {/* <Text
                 onPress={() => {
                   setUsername('');
                   setModalVisible(!modalVisible);
                 }}
                 style={styles.cancelStyle}>
                 Cancel
-              </Text>
+              </Text> */}
             </View>
           </View>
         </Modal>
@@ -96,17 +106,23 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
-  cancelStyle: {
-    position: 'relative',
-    height: 17,
-    top: 17,
-    fontStyle: 'normal',
-    fontWeight: '500',
-    fontSize: 14,
-    /* identical to box height */
-    textAlign: 'center',
-    color: TAGG_LIGHT_BLUE,
+  closeButton: {
+    position: 'absolute',
+    height: '50%',
+    aspectRatio: 1,
+    left: '3%',
   },
+  // cancelStyle: {
+  //   position: 'absolute',
+  //   height: 17,
+  //   // fontStyle: 'normal',
+  //   // fontWeight: '500',
+  //   // fontSize: 14,
+  //   /* identical to box height */
+  //   left: '3%',
+  //   // textAlign: 'center',
+  //   // color: TAGG_LIGHT_BLUE,
+  // },
   textInput: {
     height: 20,
     width: '75%',