new modal done

3 files changed, 67 insertions, 63 deletions

diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 85445155..be3221ee 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,25 +1,30 @@
 import React from 'react';
-import {TouchableOpacity} from 'react-native';
-import {Modal, StyleSheet, Text, TouchableHighlight, View, ViewProps} 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;
-  close: () => void;
 }
 
 const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
+  social,
   modalVisible,
   setModalVisible,
-  close,
   completionCallback,
 }) => {
   const [username, setUsername] = React.useState('');
+
+  const onClosePress = () => {
+    setModalVisible(false);
+  };
+
   return (
     <>
       <View style={styles.centeredView}>
@@ -30,40 +35,38 @@ 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!
+              <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={'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}>Submit</Text>
-              </TouchableHighlight>
-              {/* cancel button */}
-              <TouchableOpacity style={styles.closeButton} onPress={close}>
-                <CloseIcon height={'100%'} width={'100%'} color={'white'} />
-              </TouchableOpacity>
-              {/* <Text
+              <TaggSquareButton
+                title={'Submit'}
                 onPress={() => {
-                  setUsername('');
-                  setModalVisible(!modalVisible);
+                  if (username !== '') {
+                    setModalVisible(!modalVisible);
+                    setUsername('');
+                    completionCallback(username);
+                  }
                 }}
-                style={styles.cancelStyle}>
-                Cancel
-              </Text> */}
+                mode={'gradient'}
+                color={'white'}
+              />
             </View>
           </View>
         </Modal>
@@ -77,14 +80,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: {
@@ -95,40 +96,41 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
-  openButton: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
+  textInput: {
+    marginTop: '8%',
+    width: '85%',
+    paddingBottom: '2%',
+    borderBottomWidth: 0.4,
+    borderBottomColor: '#C4C4C4',
+    fontSize: normalize(20),
     textAlign: 'center',
+    fontWeight: '500',
   },
   closeButton: {
     position: 'absolute',
-    height: '50%',
-    aspectRatio: 1,
-    left: '3%',
+    height: normalize(20),
+    width: normalize(20),
+    left: '5%',
+    top: '5%',
   },
-  // 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%',
-    borderBottomWidth: 0.4,
-    borderBottomColor: '#C4C4C4',
-    marginBottom: 20,
+  icon: {
+    top: -(normalize(70) / 3),
+    height: normalize(70),
+    width: normalize(70),
+    borderRadius: 30,
+    position: 'absolute',
+  },
+  titleLabel: {
+    marginTop: '8%',
+    fontSize: normalize(17),
+    fontWeight: '600',
+  },
+  descriptionLabel: {
+    marginTop: '3%',
+    fontSize: normalize(11),
+    fontWeight: '600',
+    textAlign: 'center',
+    color: '#828282',
   },
 });
 
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index 6cb7e9cf..8938b9a0 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -100,6 +100,7 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
         />
       )}
       <SocialLinkModal
+        social={label}
         modalVisible={modalVisible}
         setModalVisible={setModalVisible}
         completionCallback={linkNonIntegratedSocial}
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 5fa8b395..cba7777a 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -131,6 +131,7 @@ const Tagg: React.FC<TaggProps> = ({
       ) : (
         <>
           <SocialLinkModal
+            social={social}
             modalVisible={modalVisible}
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}