friends style

1 files changed, 48 insertions, 35 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%',
   },
 });