Merge branch 'master' into tma641-animation-tutorial

7 files changed, 80 insertions, 72 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index c7f56e2d..243a551d 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     marginRight: '2%',
     marginLeft: '1%',
-    padding: 0,
     backgroundColor: 'transparent',
   },
   requestedButtonTitle: {
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 0cd5d2a7..8216b6ff 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -17,9 +17,9 @@ const SocialIcon: React.FC<SocialIconProps> = ({
 }) => {
   switch (social) {
     case 'Instagram':
-      var icon = require('../../assets/socials/instagram-icon-white-bg.png');
+      var icon = require('../../assets/socials/instagram-icon.png');
       if (screenType === ScreenType.SuggestedPeople) {
-        icon = require('../../assets/socials/instagram-icon.png');
+        icon = require('../../assets/socials/instagram-icon-white-bg.png');
       }
       break;
     case 'Facebook':
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',
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 78a90554..817a2690 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -3,6 +3,7 @@ import {
   GestureResponderEvent,
   StyleSheet,
   Text,
+  TextStyle,
   TouchableOpacity,
   ViewProps,
   ViewStyle,
@@ -14,14 +15,16 @@ import {normalize, SCREEN_WIDTH} from '../../utils';
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
-  mode: 'normal' | 'large' | 'gradient';
-  color: 'purple' | 'white';
+  buttonStyle: 'normal' | 'large' | 'gradient';
+  buttonColor: 'purple' | 'white';
+  labelColor: 'white' | 'blue';
   style?: ViewStyle;
+  labelStyle?: TextStyle;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
-  const buttonStyles = (() => {
-    switch (props.color) {
+  const buttonColor = (() => {
+    switch (props.buttonColor) {
       case 'purple':
         return {backgroundColor: TAGG_PURPLE};
       case 'white':
@@ -29,24 +32,37 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
         return {backgroundColor: 'white'};
     }
   })();
-  switch (props.mode) {
+  const labelColor = (() => {
+    switch (props.labelColor) {
+      case 'white':
+        return {color: 'white'};
+      case 'blue':
+      default:
+        return {color: '#78A0EF'};
+    }
+  })();
+  switch (props.buttonStyle) {
     case 'large':
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.largeButton, buttonStyles, props.style]}>
-          <Text style={styles.largeLabel}>{props.title}</Text>
+          style={[styles.largeButton, buttonColor, props.style]}>
+          <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress}>
+        <TouchableOpacity onPress={props.onPress} style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
-            <Text style={styles.gradientLabel}>{props.title}</Text>
+            <Text style={[styles.gradientLabel, props.labelStyle]}>
+              {props.title}
+            </Text>
           </LinearGradient>
         </TouchableOpacity>
       );
@@ -55,8 +71,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, buttonStyles, props.style]}>
-          <Text style={styles.normalLabel}>{props.title}</Text>
+          style={[styles.normalButton, buttonColor, props.style]}>
+          <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
   }
@@ -86,7 +104,6 @@ const styles = StyleSheet.create({
   normalLabel: {
     fontSize: normalize(20),
     fontWeight: '500',
-    color: '#78A0EF',
   },
   gradientButton: {
     marginTop: '8%',
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 29b55786..bb450b64 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -148,7 +148,7 @@ const Tagg: React.FC<TaggProps> = ({
               <SocialIcon
                 style={styles.icon}
                 social={social}
-                screenType={ScreenType.Profile}
+                screenType={screenType}
               />
               {pickTheRightRingHere()}
             </TouchableOpacity>
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index cc0c70a7..e7bdb0f2 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -77,7 +77,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
           );
           i++;
         }
-        if (!userXId) {
+        if (!userXId && screenType !== ScreenType.SuggestedPeople) {
           for (let social of unlinkedSocials) {
             new_taggs.push(
               <Tagg
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index 0cfde857..834e32ef 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -3,11 +3,7 @@ import {Image, Linking, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import Hyperlink from 'react-native-hyperlink';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  AVATAR_DIM,
-  TAGGS_GRADIENT,
-  TAGG_LIGHT_BLUE,
-} from '../../constants';
+import {AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE} from '../../constants';
 import {TwitterPostType} from '../../types';
 import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
 import {DateLabel, PostCarousel} from '../common';
@@ -94,7 +90,10 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
                       <Text
                         style={styles.replyHandleText}
                         onPress={() =>
-                          openTwitterProfileLink(post.in_reply_to?.handle)
+                          handleOpenSocialUrlOnBrowser(
+                            post.in_reply_to?.handle,
+                            'Twitter',
+                          )
                         }>
                         @{post.in_reply_to.handle}
                       </Text>