[TMA-356] Updated icons (#118)

* updated icons

* added small icons

* fixed a bug

* now using the correct assets, fixed a bug

50 files changed, 114 insertions, 14 deletions

diff --git a/src/assets/navigationIcons/home-clicked.png b/src/assets/navigationIcons/home-clicked.png
index 8b6e9766..a9f7253b 100644
--- a/src/assets/navigationIcons/home-clicked.png
+++ b/src/assets/navigationIcons/home-clicked.png
diff --git a/src/assets/navigationIcons/home-clicked@2x.png b/src/assets/navigationIcons/home-clicked@2x.png
deleted file mode 100644
index 51a80de7..00000000
--- a/src/assets/navigationIcons/home-clicked@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home-clicked@3x.png b/src/assets/navigationIcons/home-clicked@3x.png
index 17010413..43dded74 100644
--- a/src/assets/navigationIcons/home-clicked@3x.png
+++ b/src/assets/navigationIcons/home-clicked@3x.png
diff --git a/src/assets/navigationIcons/home-new-clicked.png b/src/assets/navigationIcons/home-new-clicked.png
deleted file mode 100644
index 9bf31927..00000000
--- a/src/assets/navigationIcons/home-new-clicked.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home-new-large-clicked.png b/src/assets/navigationIcons/home-new-large-clicked.png
deleted file mode 100644
index d19cc167..00000000
--- a/src/assets/navigationIcons/home-new-large-clicked.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home-new-large.png b/src/assets/navigationIcons/home-new-large.png
deleted file mode 100644
index 0531fb9b..00000000
--- a/src/assets/navigationIcons/home-new-large.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home-new.png b/src/assets/navigationIcons/home-new.png
deleted file mode 100644
index c94dceed..00000000
--- a/src/assets/navigationIcons/home-new.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home.png b/src/assets/navigationIcons/home.png
index ac20c3c1..a8975ccd 100644
--- a/src/assets/navigationIcons/home.png
+++ b/src/assets/navigationIcons/home.png
diff --git a/src/assets/navigationIcons/home@2x.png b/src/assets/navigationIcons/home@2x.png
deleted file mode 100644
index 02564b85..00000000
--- a/src/assets/navigationIcons/home@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/home@3x.png b/src/assets/navigationIcons/home@3x.png
index 4a6c9cba..0a15a4c5 100644
--- a/src/assets/navigationIcons/home@3x.png
+++ b/src/assets/navigationIcons/home@3x.png
diff --git a/src/assets/navigationIcons/notifications-clicked.png b/src/assets/navigationIcons/notifications-clicked.png
index 0e72b0d5..d2357db1 100644
--- a/src/assets/navigationIcons/notifications-clicked.png
+++ b/src/assets/navigationIcons/notifications-clicked.png
diff --git a/src/assets/navigationIcons/notifications-clicked@2x.png b/src/assets/navigationIcons/notifications-clicked@2x.png
deleted file mode 100644
index 29ce7fbf..00000000
--- a/src/assets/navigationIcons/notifications-clicked@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/notifications-clicked@3x.png b/src/assets/navigationIcons/notifications-clicked@3x.png
index 611f3221..cc3a9a0a 100644
--- a/src/assets/navigationIcons/notifications-clicked@3x.png
+++ b/src/assets/navigationIcons/notifications-clicked@3x.png
diff --git a/src/assets/navigationIcons/notifications.png b/src/assets/navigationIcons/notifications.png
index 5dd46fba..5a59852d 100644
--- a/src/assets/navigationIcons/notifications.png
+++ b/src/assets/navigationIcons/notifications.png
diff --git a/src/assets/navigationIcons/notifications@2x.png b/src/assets/navigationIcons/notifications@2x.png
deleted file mode 100644
index 85760ebb..00000000
--- a/src/assets/navigationIcons/notifications@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/notifications@3x.png b/src/assets/navigationIcons/notifications@3x.png
index 101c7f8a..02a72bf7 100644
--- a/src/assets/navigationIcons/notifications@3x.png
+++ b/src/assets/navigationIcons/notifications@3x.png
diff --git a/src/assets/navigationIcons/profile-clicked.png b/src/assets/navigationIcons/profile-clicked.png
index add50faf..c5b5a052 100644
--- a/src/assets/navigationIcons/profile-clicked.png
+++ b/src/assets/navigationIcons/profile-clicked.png
diff --git a/src/assets/navigationIcons/profile-clicked@2x.png b/src/assets/navigationIcons/profile-clicked@2x.png
deleted file mode 100644
index 7c1fc99d..00000000
--- a/src/assets/navigationIcons/profile-clicked@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/profile-clicked@3x.png b/src/assets/navigationIcons/profile-clicked@3x.png
index ab0d194f..8ebc2009 100644
--- a/src/assets/navigationIcons/profile-clicked@3x.png
+++ b/src/assets/navigationIcons/profile-clicked@3x.png
diff --git a/src/assets/navigationIcons/profile.png b/src/assets/navigationIcons/profile.png
index e79b8547..9ab9a43c 100644
--- a/src/assets/navigationIcons/profile.png
+++ b/src/assets/navigationIcons/profile.png
diff --git a/src/assets/navigationIcons/profile@3x.png b/src/assets/navigationIcons/profile@3x.png
new file mode 100644
index 00000000..5e4c9a8e
--- /dev/null
+++ b/src/assets/navigationIcons/profile@3x.png
diff --git a/src/assets/navigationIcons/search-clicked.png b/src/assets/navigationIcons/search-clicked.png
index 8fc8fa5a..7020eb53 100644
--- a/src/assets/navigationIcons/search-clicked.png
+++ b/src/assets/navigationIcons/search-clicked.png
diff --git a/src/assets/navigationIcons/search-clicked3x.png b/src/assets/navigationIcons/search-clicked3x.png
deleted file mode 100644
index 54290168..00000000
--- a/src/assets/navigationIcons/search-clicked3x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/search-clicked@2x.png b/src/assets/navigationIcons/search-clicked@2x.png
deleted file mode 100644
index 56b5cb6b..00000000
--- a/src/assets/navigationIcons/search-clicked@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/search-clicked@3x.png b/src/assets/navigationIcons/search-clicked@3x.png
new file mode 100644
index 00000000..726ba9fa
--- /dev/null
+++ b/src/assets/navigationIcons/search-clicked@3x.png
diff --git a/src/assets/navigationIcons/search.png b/src/assets/navigationIcons/search.png
index bf02835d..3bfe624b 100644
--- a/src/assets/navigationIcons/search.png
+++ b/src/assets/navigationIcons/search.png
diff --git a/src/assets/navigationIcons/search@2x.png b/src/assets/navigationIcons/search@2x.png
deleted file mode 100644
index d079844c..00000000
--- a/src/assets/navigationIcons/search@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/search@3x.png b/src/assets/navigationIcons/search@3x.png
index 73453cad..a42b1998 100644
--- a/src/assets/navigationIcons/search@3x.png
+++ b/src/assets/navigationIcons/search@3x.png
diff --git a/src/assets/navigationIcons/upload-clicked.png b/src/assets/navigationIcons/upload-clicked.png
index 083f289d..434e384c 100644
--- a/src/assets/navigationIcons/upload-clicked.png
+++ b/src/assets/navigationIcons/upload-clicked.png
diff --git a/src/assets/navigationIcons/upload-clicked@3x.png b/src/assets/navigationIcons/upload-clicked@3x.png
new file mode 100644
index 00000000..c07d1a1e
--- /dev/null
+++ b/src/assets/navigationIcons/upload-clicked@3x.png
diff --git a/src/assets/navigationIcons/upload-large-clicked.png b/src/assets/navigationIcons/upload-large-clicked.png
deleted file mode 100644
index 74fe647c..00000000
--- a/src/assets/navigationIcons/upload-large-clicked.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/upload-large.png b/src/assets/navigationIcons/upload-large.png
deleted file mode 100644
index 4d7cb7b7..00000000
--- a/src/assets/navigationIcons/upload-large.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/upload.png b/src/assets/navigationIcons/upload.png
index 839aaebc..0d4ff362 100644
--- a/src/assets/navigationIcons/upload.png
+++ b/src/assets/navigationIcons/upload.png
diff --git a/src/assets/navigationIcons/upload@2x.png b/src/assets/navigationIcons/upload@2x.png
deleted file mode 100644
index 66ab56b5..00000000
--- a/src/assets/navigationIcons/upload@2x.png
+++ /dev/null
diff --git a/src/assets/navigationIcons/upload@3x.png b/src/assets/navigationIcons/upload@3x.png
index ca51c710..61d239a6 100644
--- a/src/assets/navigationIcons/upload@3x.png
+++ b/src/assets/navigationIcons/upload@3x.png
diff --git a/src/assets/socials/facebook-icon-small.png b/src/assets/socials/facebook-icon-small.png
new file mode 100644
index 00000000..d06707be
--- /dev/null
+++ b/src/assets/socials/facebook-icon-small.png
diff --git a/src/assets/socials/instagram-icon-small.png b/src/assets/socials/instagram-icon-small.png
new file mode 100644
index 00000000..74ce771c
--- /dev/null
+++ b/src/assets/socials/instagram-icon-small.png
diff --git a/src/assets/socials/snapchat-icon-small.png b/src/assets/socials/snapchat-icon-small.png
new file mode 100644
index 00000000..608d6539
--- /dev/null
+++ b/src/assets/socials/snapchat-icon-small.png
diff --git a/src/assets/socials/spotify-icon-small.png b/src/assets/socials/spotify-icon-small.png
new file mode 100755
index 00000000..0c8d5147
--- /dev/null
+++ b/src/assets/socials/spotify-icon-small.png
diff --git a/src/assets/socials/tiktok-icon-small.png b/src/assets/socials/tiktok-icon-small.png
new file mode 100644
index 00000000..3167ff71
--- /dev/null
+++ b/src/assets/socials/tiktok-icon-small.png
diff --git a/src/assets/socials/twitter-icon-small.png b/src/assets/socials/twitter-icon-small.png
new file mode 100755
index 00000000..33903b1f
--- /dev/null
+++ b/src/assets/socials/twitter-icon-small.png
diff --git a/src/assets/socials/twitter-icon.png b/src/assets/socials/twitter-icon.png
index 203a30cf..9810d5a1 100755..100644
--- a/src/assets/socials/twitter-icon.png
+++ b/src/assets/socials/twitter-icon.png
diff --git a/src/assets/socials/twitter-icon_old.png b/src/assets/socials/twitter-icon_old.png
new file mode 100755
index 00000000..203a30cf
--- /dev/null
+++ b/src/assets/socials/twitter-icon_old.png
diff --git a/src/assets/socials/youtube-icon-small.png b/src/assets/socials/youtube-icon-small.png
new file mode 100755
index 00000000..8dce3e33
--- /dev/null
+++ b/src/assets/socials/youtube-icon-small.png
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 8bf8b4a0..8fff18f4 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -17,8 +17,8 @@ const NavigationIcon = (props: NavigationIconProps) => {
   switch (props.tab) {
     case 'Home':
       imgSrc = props.disabled
-        ? require('../../assets/navigationIcons/home-new.png')
-        : require('../../assets/navigationIcons/home-new-clicked.png');
+        ? require('../../assets/navigationIcons/home.png')
+        : require('../../assets/navigationIcons/home-clicked.png');
       break;
     case 'Search':
       imgSrc = props.disabled
@@ -44,16 +44,16 @@ const NavigationIcon = (props: NavigationIconProps) => {
       imgSrc = null;
   }
   return (
-    <View style={styles.icon}>
+    <View style={styles.container}>
       <TouchableOpacity {...props}>
-        <Image source={imgSrc} />
+        <Image source={imgSrc} style={styles.icon} />
       </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  icon: {
+  container: {
     flex: 1,
     justifyContent: 'center',
     shadowColor: '#000000',
@@ -64,6 +64,10 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     shadowOpacity: 0.4,
   },
+  icon: {
+    height: 30,
+    width: 30,
+  },
 });
 
 export default NavigationIcon;
diff --git a/src/components/common/SmallSocialIcon.tsx b/src/components/common/SmallSocialIcon.tsx
new file mode 100644
index 00000000..d7d175d5
--- /dev/null
+++ b/src/components/common/SmallSocialIcon.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {Image} from 'react-native';
+
+interface SmallSocialIconProps {
+  social: string;
+  style: object;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const SmallSocialIcon: React.FC<SmallSocialIconProps> = ({
+  social: social,
+  style: style,
+}) => {
+  switch (social) {
+    case 'Instagram':
+      var icon = require('../../assets/socials/instagram-icon-small.png');
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/socials/facebook-icon-small.png');
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/socials/twitter-icon-small.png');
+      break;
+    // TODO: Missing icon assets
+    // case 'Twitch':
+    //   var icon = require('../../assets/socials/twitch-icon-small.png');
+    //   break;
+    // case 'Pinterest':
+    //   var icon = require('../../assets/socials/pinterest-icon-small.png');
+    //   break;
+    // case 'Whatsapp':
+    //   var icon = require('../../assets/socials/whatsapp-icon-small.png');
+    //   break;
+    // case 'Linkedin':
+    //   var icon = require('../../assets/socials/linkedin-icon-small.png');
+    //   break;
+    case 'Snapchat':
+      var icon = require('../../assets/socials/snapchat-icon-small.png');
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/socials/youtube-icon-small.png');
+      break;
+    case 'TikTok':
+      var icon = require('../../assets/socials/tiktok-icon-small.png');
+      break;
+    default:
+      var icon = require('../../assets/socials/logo.png');
+      break;
+  }
+  return <Image style={style} source={icon} />;
+};
+
+export default SmallSocialIcon;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 883dae61..0feeaab8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -5,6 +5,7 @@ export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as NavigationIcon} from './NavigationIcon';
 export {default as GradientBackground} from './GradientBackground';
 export {default as SocialIcon} from './SocialIcon';
+export {default as SmallSocialIcon} from './SmallSocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
 export {default as LoadingIndicator} from './LoadingIndicator';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index d9c35b27..9f8fafd1 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -7,6 +7,7 @@ import RingPlus from '../../assets/icons/ring+.svg';
 import Ring from '../../assets/icons/ring.svg';
 import {
   INTEGRATED_SOCIAL_LIST,
+  SOCIAL_ICON_SIZE_ADJUSTMENT,
   TAGG_ICON_DIM,
   TAGG_RING_DIM,
 } from '../../constants';
@@ -15,7 +16,7 @@ import {
   handlePressForAuthBrowser,
   registerNonIntegratedSocialLink,
 } from '../../services';
-import {SocialIcon, SocialLinkModal} from '../common';
+import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
 import {AuthContext, ProfileContext} from '../../routes';
 
 interface TaggProps {
@@ -129,17 +130,33 @@ const Tagg: React.FC<TaggProps> = ({
       {isProfileView && !isLinked ? (
         <Fragment />
       ) : (
-        <TouchableOpacity onPress={modalOrAuthBrowserOrPass}>
+        <>
           <SocialLinkModal
             modalVisible={modalVisible}
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}
           />
           <View style={styles.container}>
-            <SocialIcon style={styles.image} social={social} />
-            {pickTheRightRingHere()}
+            <TouchableOpacity
+              style={styles.iconTap}
+              onPress={modalOrAuthBrowserOrPass}>
+              <SocialIcon style={styles.icon} social={social} />
+              {pickTheRightRingHere()}
+            </TouchableOpacity>
+            <View style={styles.smallIconContainer}>
+              <SmallSocialIcon
+                style={[
+                  styles.smallIcon,
+                  {
+                    height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+                    width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+                  },
+                ]}
+                social={social}
+              />
+            </View>
           </View>
-        </TouchableOpacity>
+        </>
       )}
     </>
   );
@@ -151,12 +168,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginHorizontal: 15,
   },
-  image: {
+  iconTap: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
     width: TAGG_ICON_DIM,
     height: TAGG_ICON_DIM,
     borderRadius: TAGG_ICON_DIM / 2,
     position: 'absolute',
   },
+  smallIconContainer: {
+    height: 35,
+    width: 35,
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    bottom: -35,
+  },
+  smallIcon: {
+    borderRadius: 1000,
+  },
 });
 
 export default Tagg;
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index c2003fb4..4b76a1e0 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -37,6 +37,14 @@ export const SOCIAL_LIST: string[] = [
   // 'Youtube',
 ];
 
+export const SOCIAL_ICON_SIZE_ADJUSTMENT: {[social: string]: number} = {
+  Instagram: 25,
+  Facebook: 20,
+  Twitter: 23,
+  Snapchat: 25,
+  TikTok: 20,
+};
+
 export const INSTAGRAM_FONT_COLOR: string = '#FF97DE';
 export const FACEBOOK_FONT_COLOR: string = '#6697FD';
 export const TWITTER_FONT_COLOR: string = '#74C9FD';
diff --git a/src/services/SocialLinkingService.ts b/src/services/SocialLinkingService.ts
index c9ffcedf..4a01ee50 100644
--- a/src/services/SocialLinkingService.ts
+++ b/src/services/SocialLinkingService.ts
@@ -170,6 +170,8 @@ export const handlePressForAuthBrowser: (
           }
           Alert.alert(`Successfully linked ${socialType} 🎉`);
           return true;
+        } else if (response.type === 'cancel') {
+          return false;
         } else {
           throw 'Error from Oauth API';
         }
@@ -200,11 +202,10 @@ export const getLinkedSocials: (user_id: string) => Promise<string[]> = async (
         Authorization: 'Token ' + user_token,
       },
     });
-    const body = await response.json();
     if (response.status !== 200) {
-      console.log(body);
-      throw 'Unable to fetch from server';
+      throw 'Unable to fetch linked socials from server';
     }
+    const body = await response.json();
     return body.linked_socials || [];
   } catch (error) {
     console.log(error);