1 files changed, 20 insertions, 12 deletions
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 38defb8d..fad3ec09 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -15,7 +15,13 @@ import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
-import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
+import {
+  checkIfUserIsBlocked,
+  fetchUserX,
+  normalize,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
 
 /**
  * This component returns user's profile picture friended by username as a touchable component.
@@ -308,29 +314,31 @@ const styles = StyleSheet.create({
   friendContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 10,
+    justifyContent: 'flex-start',
+    width: SCREEN_WIDTH * 0.6,
   },
   friendAvatar: {
-    height: 42,
-    width: 42,
+    height: normalize(42),
+    width: normalize(42),
     marginRight: 15,
-    borderRadius: 20,
+    borderRadius: 50,
   },
   friendNameContainer: {
+    height: '100%',
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
   friendUsername: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: '#3C3C3C',
-    letterSpacing: 0.6,
+    fontSize: normalize(14),
+    fontWeight: '500',
+    color: '#000',
+    letterSpacing: normalize(0.1),
   },
   friendName: {
-    fontSize: 12,
-    fontWeight: '500',
+    fontSize: normalize(12),
+    fontWeight: '400',
     color: '#6C6C6C',
-    letterSpacing: 0.5,
+    letterSpacing: normalize(0.1),
   },
 });