1 files changed, 77 insertions, 54 deletions

diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 41b044fe..d3bc3945 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,21 +1,38 @@
 import React from 'react';
-import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
-import { TAGG_LIGHT_BLUE } from '../../constants';
-import {SCREEN_WIDTH} from '../../utils';
+import {SocialIcon} from '.';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+import TaggSquareButton from './TaggSquareButton';
 
 interface SocialLinkModalProps {
+  social: string;
   modalVisible: boolean;
   setModalVisible: (_: boolean) => void;
   completionCallback: (username: string) => void;
 }
 
 const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
+  social,
   modalVisible,
   setModalVisible,
   completionCallback,
 }) => {
   const [username, setUsername] = React.useState('');
+
+  const onClosePress = () => {
+    setModalVisible(false);
+  };
+
+  const onSubmit = () => {
+    if (username !== '') {
+      setModalVisible(!modalVisible);
+      setUsername('');
+      completionCallback(username);
+    }
+  };
+
   return (
     <>
       <View style={styles.centeredView}>
@@ -26,34 +43,32 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
           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}
-                textAlign={'center'}
-                placeholder={'Your username'}
+                placeholder={'Username'}
                 style={styles.textInput}
                 onChangeText={setUsername}
+                selectionColor={'grey'}
                 value={username}
               />
-              {/* link button */}
-              <TouchableHighlight
-                style={styles.openButton}
-                onPress={() => {
-                  setModalVisible(!modalVisible);
-                  setUsername('');
-                  completionCallback(username);
-                }}>
-                <Text style={styles.textStyle}>Link</Text>
-              </TouchableHighlight>
-              {/* cancel button */}
-              <Text
-                onPress={() => {
-                  setUsername('');
-                  setModalVisible(!modalVisible);
-                }}
-                style={styles.cancelStyle}>
-                Cancel
-              </Text>
+              <TaggSquareButton
+                title={'Submit'}
+                onPress={onSubmit}
+                mode={'gradient'}
+                color={'white'}
+              />
             </View>
           </View>
         </Modal>
@@ -67,14 +82,12 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 22,
   },
   modalView: {
-    width: (SCREEN_WIDTH * 2) / 3,
-    margin: 20,
+    width: SCREEN_WIDTH * 0.8,
     backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
+    borderRadius: 5,
+    padding: '10%',
     alignItems: 'center',
     shadowColor: '#000',
     shadowOffset: {
@@ -85,34 +98,44 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
-  openButton: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    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,
-  },
   textInput: {
-    height: 20,
-    width: '75%',
+    marginTop: '8%',
+    width: '85%',
+    paddingBottom: '2%',
     borderBottomWidth: 0.4,
     borderBottomColor: '#C4C4C4',
-    marginBottom: 20,
+    fontSize: normalize(20),
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  closeButton: {
+    position: 'absolute',
+    height: normalize(20),
+    width: normalize(20),
+    left: '5%',
+    top: '5%',
+  },
+  icon: {
+    top: -(normalize(70) / 3),
+    height: normalize(70),
+    width: normalize(70),
+    borderRadius: 30,
+    position: 'absolute',
+  },
+  titleLabel: {
+    marginTop: '8%',
+    fontSize: normalize(17),
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  descriptionLabel: {
+    width: SCREEN_WIDTH * 0.7,
+    marginTop: '3%',
+    fontSize: normalize(11),
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: 15,
+    color: '#828282',
   },
 });