friends style

3 files changed, 58 insertions, 43 deletions

diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index 44ce4e63..c1aa5c76 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView, Text} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
 import {Button} from 'react-native-elements';
@@ -9,6 +9,7 @@ import {RootState} from '../../store/rootReducer';
 import {useDispatch, useStore} from 'react-redux';
 import {handleUnfriend} from '../../utils/friends';
 import {NO_USER} from '../../store/initialStates';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
@@ -29,23 +30,26 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
       style={styles.scrollView}
       contentContainerStyle={styles.scrollViewContent}
       showsVerticalScrollIndicator={false}>
+      <View style={styles.subheader}>
+        <Text style={styles.subheaderText}>Friends</Text>
+      </View>
       {result.map((profilePreview) => (
         <View key={profilePreview.id} style={styles.container}>
-          <ProfilePreview
-            style={styles.friend}
-            {...{profilePreview}}
-            previewType={'Friend'}
-            screenType={screenType}
-          />
+          <View style={styles.friend}>
+            <ProfilePreview
+              {...{profilePreview}}
+              previewType={'Friend'}
+              screenType={screenType}
+            />
+          </View>
           {loggedInUser.userId === userId && (
-            <Button
-              title={'Unfriend'}
-              buttonStyle={styles.button}
-              titleStyle={styles.buttonTitle}
+            <TouchableOpacity
+              style={styles.button}
               onPress={() =>
                 handleUnfriend(screenType, profilePreview, dispatch, state)
-              }
-            />
+              }>
+              <Text style={styles.buttonTitle}>Unfriend</Text>
+            </TouchableOpacity>
           )}
         </View>
       ))}
@@ -54,49 +58,58 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
 };
 
 const styles = StyleSheet.create({
+  scrollView: {
+    flexDirection: 'column',
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+  },
+  scrollViewContent: {
+    alignSelf: 'center',
+    paddingBottom: SCREEN_HEIGHT / 15,
+    width: SCREEN_WIDTH * 0.85,
+    marginTop: '1%',
+  },
   container: {
+    alignSelf: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: SCREEN_WIDTH * 0.93,
+    width: SCREEN_WIDTH * 0.85,
+    height: '50%',
     alignItems: 'center',
+    marginBottom: '1%',
   },
   header: {flexDirection: 'row'},
+  subheader: {width: '100%', marginTop: '3%'},
+  subheaderText: {
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+  },
   friend: {
     marginVertical: 10,
-  },
-  title: {
-    position: 'relative',
-    fontSize: 17,
-    fontWeight: 'bold',
-    paddingBottom: 10,
-    paddingTop: 10,
-    flexGrow: 1,
-    paddingLeft: '26%',
-  },
-  scrollView: {},
-  scrollViewContent: {
-    paddingBottom: SCREEN_HEIGHT / 15,
-    paddingLeft: '4%',
-    marginTop: '5%',
+    alignSelf: 'center',
   },
   button: {
+    alignSelf: 'center',
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.25,
-    height: SCREEN_WIDTH * 0.075,
+    width: '100%',
+    height: '35%',
     borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 2,
-    borderRadius: 0,
-    marginRight: '1%',
-    marginLeft: '1%',
+    borderRadius: 2,
     padding: 0,
     backgroundColor: 'transparent',
   },
   buttonTitle: {
     color: TAGG_LIGHT_BLUE,
     padding: 0,
-    fontSize: normalize(14),
+    fontSize: normalize(11),
     fontWeight: '700',
+    lineHeight: normalize(14),
+    letterSpacing: 0.5,
+    paddingHorizontal: '3.5%',
   },
 });
 
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 159798de..cbee368b 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -314,12 +314,12 @@ 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(44),
+    width: normalize(44),
     marginRight: 15,
     borderRadius: 20,
   },
@@ -330,14 +330,14 @@ const styles = StyleSheet.create({
   friendUsername: {
     fontSize: normalize(14),
     fontWeight: '500',
-    color: '#3C3C3C',
-    letterSpacing: 0.6,
+    color: '#000',
+    letterSpacing: 0.3,
   },
   friendName: {
     fontSize: normalize(12),
     fontWeight: '400',
     color: '#6C6C6C',
-    letterSpacing: 0.5,
+    letterSpacing: 0.1,
   },
 });
 
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index eb498641..26d19e60 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -68,8 +68,10 @@ const styles = StyleSheet.create({
   headerText: {
     position: 'absolute',
     alignSelf: 'center',
-    fontSize: normalize(20.5),
-    fontWeight: '600',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
   },
   headerButton: {
     width: '5%',