Merge pull request #220 from tbhatia2299/TMA-579-Redesign-Snapchat-Tiktok

TMA-579-Redesign-Snapchat-Tiktok

4 files changed, 108 insertions, 56 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',
   },
 });
 
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index e8c7315e..78a90554 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -7,13 +7,14 @@ import {
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import {TAGG_PURPLE} from '../../constants';
+import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP, TAGG_PURPLE} from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
-  mode: 'normal' | 'large';
+  mode: 'normal' | 'large' | 'gradient';
   color: 'purple' | 'white';
   style?: ViewStyle;
 }
@@ -37,6 +38,18 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           <Text style={styles.largeLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
+    case 'gradient':
+      return (
+        <TouchableOpacity onPress={props.onPress}>
+          <LinearGradient
+            style={styles.gradientButton}
+            colors={BACKGROUND_GRADIENT_MAP[0]}
+            useAngle
+            angle={90}>
+            <Text style={styles.gradientLabel}>{props.title}</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      );
     case 'normal':
     default:
       return (
@@ -75,6 +88,20 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#78A0EF',
   },
+  gradientButton: {
+    marginTop: '8%',
+    borderRadius: 5,
+    paddingVertical: '5%',
+    aspectRatio: 3.3,
+    elevation: 2,
+    backgroundColor: '#2196F3',
+  },
+  gradientLabel: {
+    color: 'white',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: normalize(17),
+  },
 });
 
 export default TaggSquareButton;
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}