Merge branch 'master' into tma258-sp-pagination-2

# Conflicts:
#	src/constants/api.ts
#	src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
#	src/services/SuggestedPeopleService.ts

3 files changed, 9 insertions, 7 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index a1e107c5..46421bd1 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -128,6 +128,7 @@ const styles = StyleSheet.create({
   row: {
     flex: 1,
     flexDirection: 'row',
+    justifyContent: 'space-between',
   },
 });
 
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index a23d7736..ff32a464 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -11,7 +11,7 @@ import {
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomDrawer} from '.';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 // conforms the JSX onPress attribute type
 type OnPressHandler = (event: GestureResponderEvent) => void;
@@ -75,8 +75,10 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 20,
   },
   panelButtonTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
+    fontSize: 17,
+    fontWeight: '600',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
   },
   icon: {
     height: 25,
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 8216b6ff..cb3b926b 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import {Image} from 'react-native';
-import {ScreenType} from '../../types';
 
 interface SocialIconProps {
   social: string;
   style: object;
-  screenType: ScreenType;
+  whiteRing: boolean | undefined;
 }
 /**
  * An image component that returns the <Image> of the icon for a specific social media platform.
@@ -13,12 +12,12 @@ interface SocialIconProps {
 const SocialIcon: React.FC<SocialIconProps> = ({
   social: social,
   style: style,
-  screenType,
+  whiteRing,
 }) => {
   switch (social) {
     case 'Instagram':
       var icon = require('../../assets/socials/instagram-icon.png');
-      if (screenType === ScreenType.SuggestedPeople) {
+      if (whiteRing) {
         icon = require('../../assets/socials/instagram-icon-white-bg.png');
       }
       break;