[TMA-338, TMA-400] Zoom out on profile page and adjust follow/block button touchable opacity (#132)

* changed dimensions of username, bio, website, moment tiles; Changed padding in profile body; Added padding between moment tiles;

* adjusted spacing between profile cutout and body

* adjusting space below profile cutout accoring to device

* Ensuring userId exists before loading taggs

* Made tagg icons responsive according to device dimensions

* shoft profile picture to the left

* Fix bug

* small

* flex

* flex remove

* Shrunk taggs bar icons and readjusted padding around it

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

1 files changed, 12 insertions, 16 deletions

diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 8158cbac..4c8f8226 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -8,7 +8,6 @@ import Ring from '../../assets/icons/ring.svg';
 import {
   INTEGRATED_SOCIAL_LIST,
   SOCIAL_ICON_SIZE_ADJUSTMENT,
-  TAGG_ICON_DIM,
   TAGG_RING_DIM,
 } from '../../constants';
 import {
@@ -17,9 +16,7 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
+import {UserType} from '../../types';
 
 interface TaggProps {
   social: string;
@@ -28,7 +25,7 @@ interface TaggProps {
   setTaggsNeedUpdate: (_: boolean) => void;
   setSocialDataNeedUpdate: (social: string, username: string) => void;
   userXId: string;
-  screenType: ScreenType;
+  user: UserType;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -38,14 +35,12 @@ const Tagg: React.FC<TaggProps> = ({
   setTaggsNeedUpdate,
   setSocialDataNeedUpdate,
   userXId,
-  screenType,
+  user,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
   const youMayPass = isLinked || userXId;
-  const {user} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+
   /*
   case isProfileView:
     case linked:
@@ -160,27 +155,28 @@ const Tagg: React.FC<TaggProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
     marginHorizontal: 15,
+    height: 90,
   },
   iconTap: {
     justifyContent: 'center',
     alignItems: 'center',
   },
   icon: {
-    width: TAGG_ICON_DIM,
-    height: TAGG_ICON_DIM,
-    borderRadius: TAGG_ICON_DIM / 2,
+    width: '77%',
+    height: '77%',
+    borderRadius: 30,
     position: 'absolute',
   },
   smallIconContainer: {
-    height: 35,
-    width: 35,
+    height: 20,
+    width: 20,
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',
-    bottom: -35,
+    bottom: 0,
   },
   smallIcon: {
     borderRadius: 1000,