[TMA-356] Updated icons (#118)

* updated icons

* added small icons

* fixed a bug

* now using the correct assets, fixed a bug

1 files changed, 38 insertions, 6 deletions

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;