3 files changed, 67 insertions, 46 deletions

diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index f7192d10..26d19e60 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,14 +1,18 @@
-import React, {useState} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {TabsGradient, Friends, CenteredView} from '../../components';
-import {ScrollView} from 'react-native-gesture-handler';
-import {SCREEN_HEIGHT} from '../../utils';
-import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import {TabsGradient, Friends} from '../../components';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ProfileStackParams} from '../../routes';
-import {ProfilePreviewType} from '../../types';
-import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 
 type FriendsListScreenRouteProp = RouteProp<
   ProfileStackParams,
@@ -20,51 +24,66 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
+  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.friends);
 
   return (
-    <CenteredView>
-      <View style={styles.modalView}>
-        <ScrollView
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <Friends result={friends} screenType={screenType} />
-        </ScrollView>
-        <TabsGradient />
-      </View>
-    </CenteredView>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.headerButton}
+            onPress={() => {
+              navigation.pop();
+            }}>
+            <BackIcon height={'100%'} width={'100%'} color={'white'} />
+          </TouchableOpacity>
+          <Text style={styles.headerText}>Friends</Text>
+        </View>
+        <View style={styles.body}>
+          <Friends result={friends} screenType={screenType} userId={userXId} />
+        </View>
+      </SafeAreaView>
+      <TabsGradient />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  contentContainer: {
-    paddingBottom: SCREEN_HEIGHT / 15,
-    paddingHorizontal: 15,
-    marginTop: '5%',
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
   },
-  modalView: {
-    width: '85%',
-    height: '70%',
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOpacity: 30,
-    shadowOffset: {width: 0, height: 2},
-    shadowRadius: 5,
-    borderRadius: 8,
-    paddingBottom: 15,
-    paddingHorizontal: 20,
-    justifyContent: 'space-between',
-  },
-  modalScrollViewContent: {
+  header: {
+    flexDirection: 'column',
     justifyContent: 'center',
+    height: SCREEN_HEIGHT * 0.05,
+    padding: '3%',
+    paddingBottom: 0,
+    marginTop: '1%',
+  },
+  headerText: {
+    position: 'absolute',
+    alignSelf: 'center',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
+  },
+  headerButton: {
+    width: '5%',
+    aspectRatio: 1,
+    padding: 0,
+    marginLeft: '5%',
+    alignSelf: 'flex-start',
+    marginBottom: '1%',
   },
-  modalScrollView: {
-    marginBottom: 10,
+  body: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
   },
 });
 
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 5c3b8579..ec193db5 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -9,7 +9,7 @@ import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -92,8 +92,10 @@ const styles = StyleSheet.create({
   headerText: {
     position: 'absolute',
     alignSelf: 'center',
-    fontSize: 20.5,
-    fontWeight: '600',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
   },
   headerButton: {
     width: '5%',
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 0ea96cd2..9cdba555 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -29,9 +29,9 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
    * This is a double safety check to avoid app crash.
    * Checks if the required userXId is present in the store, if not userXId is set to dummy id
    */
-  if (userXId && !(userXId in useStore().getState().userX[screenType])) {
-    userXId = DUMMY_USERID;
-  }
+  // if (userXId && !(userXId in useStore().getState().userX[screenType])) {
+  //   userXId = DUMMY_USERID;
+  // }
 
   /**
    * Code under useFocusEffect gets executed every time the screen comes under focus / is being viewed by the user.