[TMA-344] Tabs bar margin, Social Taggs margin (#108)

* fixed margin for smaller screen

* fixed header avatar

* cleaned up code, improved logic

* yarn lint

* dynamically calculate avatar and header

* changed back tint color and use 1% for tabs bar margin

* last edit to avatar size

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

1 files changed, 26 insertions, 19 deletions

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index e9998113..f3105f70 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,27 +1,26 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext} from '../../routes/';
 
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
-
 type AvatarTitleProps = {
   isProfileView: boolean;
 };
+
 const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
   const {avatar} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   return (
-    <LinearGradient
-      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
-      useAngle={true}
-      angle={154.72}
-      angleCenter={{x: 0.5, y: 0.5}}
-      style={[styles.gradient]}>
+    <View style={[styles.container]}>
+      <LinearGradient
+        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.gradient}
+      />
       <Image
         style={styles.avatar}
         source={
@@ -30,22 +29,30 @@ const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-    </LinearGradient>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   gradient: {
-    width: AVATAR_GRADIENT_DIM,
-    height: AVATAR_GRADIENT_DIM,
-    borderRadius: AVATAR_GRADIENT_DIM / 2,
+    width: '82%',
+    height: '82%',
+    borderRadius: 1000,
     justifyContent: 'center',
     alignItems: 'center',
   },
   avatar: {
-    width: AVATAR_DIM,
-    height: AVATAR_DIM,
-    borderRadius: AVATAR_DIM / 2,
+    position: 'absolute',
+    width: '73%',
+    height: '73%',
+    borderRadius: 1000,
   },
 });