[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>

3 files changed, 10 insertions, 6 deletions

diff --git a/src/components/profile/FollowUnfollow.tsx b/src/components/profile/FollowUnfollow.tsx
index bb1e9ef7..fa224be3 100644
--- a/src/components/profile/FollowUnfollow.tsx
+++ b/src/components/profile/FollowUnfollow.tsx
@@ -15,7 +15,7 @@ const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
     <TouchableOpacity
       style={styles.button}
       onPress={() => handleFollowUnfollow()}>
-      <Text style={styles.text}>{!followed ? `Follow` : `Unfollow`}</Text>
+      <Text style={styles.text}>{!followed ? 'Follow' : 'Unfollow'}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index f3ef5dfa..0b56a787 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,15 +5,19 @@ import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {AuthContext, ProfileContext} from '../../routes/';
-import { ProfilePreviewType } from 'src/types';
+import {ProfilePreviewType} from 'src/types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean,
-  numFollowing: number,
+  isProfileView: boolean;
+  numFollowing: number;
   numFollowers: number;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView, numFollowing, numFollowers}) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  isProfileView,
+  numFollowing,
+  numFollowers,
+}) => {
   const {
     profile: {name},
   } = isProfileView
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6848f993..7bbc3fb6 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -149,7 +149,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   };
 
   //With @ sign if on search screen.
-  const usernameToDisplay = !isComment ? `@` + username : username;
+  const usernameToDisplay = !isComment ? '@' + username : username;
   const usernameStyle = isComment
     ? styles.commentUsername
     : styles.searchUsername;