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

4 files changed, 9 insertions, 9 deletions

diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 8e53996f..0be1e831 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -48,7 +48,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="six" />
-       <View style={styles.textContainer}>
+      <View style={styles.textContainer}>
         <Text style={styles.header}>You are registered!</Text>
         <Text style={styles.subtext}>
           We're almost there. Would you like to setup your profile now?
@@ -64,7 +64,6 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
           </TouchableOpacity>
         </View>
       </View>
-      
     </Background>
   );
 };
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 3249a281..edefebaf 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -106,7 +106,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
     });
   };
 
-    /*
+  /*
    * Handles changes to the email field value and verifies the input by updating state and running a validation function.
    */
   const handleEmailUpdate = (email: string) => {
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 34ad7f48..a0321341 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,4 +1,5 @@
 import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -12,8 +13,7 @@ import {
 import {AVATAR_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
 import {SimplePostType, TwitterPostType} from '../../types';
-import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
 
 type SocialMediaTaggsRouteProp = RouteProp<
   ProfileStackParams,
@@ -42,7 +42,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
     profile: {name},
     socialAccounts,
   } = context;
-  const headerHeight = headerBarHeightWithImage();
+
   let accountData = socialAccounts[socialMediaType];
 
   /**
@@ -54,8 +54,9 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       headerTitle: () => {
         return <AvatarTitle isProfileView={isProfileView} />;
       },
+      headerStyle: {height: AvatarHeaderHeight},
     });
-  }, []);
+  }, [isProfileView, navigation]);
 
   return (
     <LinearGradient
@@ -67,7 +68,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
       <View
         // we want a slightly bigger header here for the avatar image
-        style={[styles.flex, {paddingTop: headerHeight}]}>
+        style={[styles.flex, {marginTop: AvatarHeaderHeight}]}>
         <ScrollView
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainer}>
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index a9f3511c..c2bd4c4b 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -3,4 +3,4 @@ export {default as SocialMediaTaggs} from './SocialMediaTaggs';
 export {default as CaptionScreen} from './CaptionScreen';
 export {default as IndividualMoment} from './IndividualMoment';
 export {default as MomentCommentsScreen} from './MomentCommentsScreen';
-export {default as FollowersListScreen} from './FollowersListScreen';
\ No newline at end of file
+export {default as FollowersListScreen} from './FollowersListScreen';