restyle - more responsive

2 files changed, 53 insertions, 44 deletions

diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index c1aa5c76..9b8b227c 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -24,36 +24,38 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
   const {user: loggedInUser = NO_USER} = state;
 
   return (
-    <ScrollView
-      keyboardShouldPersistTaps={'always'}
-      stickyHeaderIndices={[4]}
-      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}>
-          <View style={styles.friend}>
-            <ProfilePreview
-              {...{profilePreview}}
-              previewType={'Friend'}
-              screenType={screenType}
-            />
+      <ScrollView
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}>
+        {result.map((profilePreview) => (
+          <View key={profilePreview.id} style={styles.container}>
+            <View style={styles.friend}>
+              <ProfilePreview
+                {...{profilePreview}}
+                previewType={'Friend'}
+                screenType={screenType}
+              />
+            </View>
+            {loggedInUser.userId === userId && (
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() =>
+                  handleUnfriend(screenType, profilePreview, dispatch, state)
+                }>
+                <Text style={styles.buttonTitle}>Unfriend</Text>
+              </TouchableOpacity>
+            )}
           </View>
-          {loggedInUser.userId === userId && (
-            <TouchableOpacity
-              style={styles.button}
-              onPress={() =>
-                handleUnfriend(screenType, profilePreview, dispatch, state)
-              }>
-              <Text style={styles.buttonTitle}>Unfriend</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      ))}
-    </ScrollView>
+        ))}
+      </ScrollView>
+    </>
   );
 };
 
@@ -62,40 +64,46 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     alignSelf: 'center',
     width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT,
   },
   scrollViewContent: {
     alignSelf: 'center',
     paddingBottom: SCREEN_HEIGHT / 15,
     width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT,
     marginTop: '1%',
   },
-  container: {
+  header: {flexDirection: 'row'},
+  subheader: {
     alignSelf: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
     width: SCREEN_WIDTH * 0.85,
-    height: '50%',
-    alignItems: 'center',
-    marginBottom: '1%',
+    marginVertical: '3%',
   },
-  header: {flexDirection: 'row'},
-  subheader: {width: '100%', marginTop: '3%'},
   subheaderText: {
     color: '#828282',
     fontSize: normalize(12),
     fontWeight: '600',
     lineHeight: normalize(14.32),
   },
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '5%',
+  },
   friend: {
-    marginVertical: 10,
     alignSelf: 'center',
+    height: '100%',
   },
   button: {
     alignSelf: 'center',
     justifyContent: 'center',
     alignItems: 'center',
     width: '100%',
-    height: '35%',
+    height: '55%',
     borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 2,
     borderRadius: 2,
@@ -107,9 +115,9 @@ const styles = StyleSheet.create({
     padding: 0,
     fontSize: normalize(11),
     fontWeight: '700',
-    lineHeight: normalize(14),
-    letterSpacing: 0.5,
-    paddingHorizontal: '3.5%',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
   },
 });
 
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index cbee368b..455c4f56 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -318,12 +318,13 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH * 0.6,
   },
   friendAvatar: {
-    height: normalize(44),
-    width: normalize(44),
+    height: '100%',
+    aspectRatio: 1,
     marginRight: 15,
-    borderRadius: 20,
+    borderRadius: 50,
   },
   friendNameContainer: {
+    height: '100%',
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
@@ -331,13 +332,13 @@ const styles = StyleSheet.create({
     fontSize: normalize(14),
     fontWeight: '500',
     color: '#000',
-    letterSpacing: 0.3,
+    letterSpacing: normalize(0.1),
   },
   friendName: {
     fontSize: normalize(12),
     fontWeight: '400',
     color: '#6C6C6C',
-    letterSpacing: 0.1,
+    letterSpacing: normalize(0.1),
   },
 });