From 088ac43b782a2791cc4fec8f8807fe314d92f297 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Tue, 22 Jun 2021 10:35:22 +0500
Subject: [PATCH] updated profile summary footer actions...

1. moved fav to dropdown
2. using text based follow/unfollow button
3. UI fine tuning
---
 src/components/profile/profileView.js         |  2 -
 .../view/profileSummaryStyles.js              | 22 ++++++---
 .../profileSummary/view/profileSummaryView.js | 46 +++++++++----------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/profile/profileView.js b/src/components/profile/profileView.js
index b38a926ce..1db4d5f8a 100644
--- a/src/components/profile/profileView.js
+++ b/src/components/profile/profileView.js
@@ -168,7 +168,6 @@ class ProfileView extends PureComponent {
 
   _contentWalletTab = () => {
     const { currencyRate, currencySymbol, selectedUser } = this.props;
-
     const { isSummaryOpen, estimatedWalletValue } = this.state;
 
     return (
@@ -205,7 +204,6 @@ class ProfileView extends PureComponent {
     } = this.props;
 
     const { isSummaryOpen } = this.state;
-
     const pageType = isOwnProfile ? 'ownProfile' : 'profile';
     const tabs = (isOwnProfile ? ownProfileTabs : profileTabs) || getDefaultFilters(pageType);
 
diff --git a/src/components/profileSummary/view/profileSummaryStyles.js b/src/components/profileSummary/view/profileSummaryStyles.js
index 49db84c73..a0913c112 100644
--- a/src/components/profileSummary/view/profileSummaryStyles.js
+++ b/src/components/profileSummary/view/profileSummaryStyles.js
@@ -19,7 +19,7 @@ export default EStyleSheet.create({
     backgroundColor: '#296CC0',
   },
   footer: {
-    width: '$deviceWidth - 24',
+    width: '$deviceWidth - 14',
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginVertical: 10,
@@ -33,6 +33,7 @@ export default EStyleSheet.create({
   rightIcons: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
+    alignItems: 'center',
   },
   insetIconStyle: {
     marginRight: 20,
@@ -57,15 +58,24 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
     fontSize: 9,
   },
-  // TODO: look at here
   dropdownIconStyle: {
     width: 25,
     height: 25,
-    left: -5,
-    marginBottom: 3,
-    color: '#c1c5c7',
+    color: '$primaryDarkGray',
   },
   dropdownStyle: {
-    maxWidth: 150,
+    marginLeft: 12,
+  },
+  followActionText: {
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    color: '$primaryDarkGray',
+  },
+  followActionWrapper: {
+    borderColor: '$primaryDarkGray',
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 4,
+    paddingHorizontal: 12,
   },
 });
diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js
index ab9ea677c..f13d25ecd 100644
--- a/src/components/profileSummary/view/profileSummaryView.js
+++ b/src/components/profileSummary/view/profileSummaryView.js
@@ -19,6 +19,7 @@ import { getResizedImage } from '../../../utils/image';
 
 // Styles
 import styles from './profileSummaryStyles';
+import { TextButton } from '../../buttons';
 
 const DEVICE_WIDTH = Dimensions.get('window').width;
 
@@ -45,12 +46,19 @@ class ProfileSummaryView extends PureComponent {
   };
 
   _handleOnDropdownSelect = (index) => {
-    const { isMuted, handleMuteUnmuteUser } = this.props;
+    const { isMuted, isFavorite, handleMuteUnmuteUser, handleOnFavoritePress } = this.props;
 
-    // This funciton should have switch case but now only has one option therefor
-    // temporarily I created with if statments
-    if (index === 0 && handleMuteUnmuteUser) {
-      handleMuteUnmuteUser(!isMuted);
+    switch (index) {
+      case 0:
+        if (handleMuteUnmuteUser) {
+          handleMuteUnmuteUser(!isMuted);
+        }
+        break;
+      case 1:
+        if (handleOnFavoritePress) {
+          handleOnFavoritePress(isFavorite);
+        }
+        break;
     }
   };
 
@@ -62,7 +70,6 @@ class ProfileSummaryView extends PureComponent {
       followerCount,
       followingCount,
       handleFollowUnfollowUser,
-      handleOnFavoritePress,
       handleOnFollowsPress,
       handleOnPressProfileEdit,
       handleUIChange,
@@ -97,7 +104,7 @@ class ProfileSummaryView extends PureComponent {
       (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0);
     const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3;
 
-    const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus';
+    const followButtonText = !isFollowing ? 'Follow' : 'Unfollow';
     let coverImageUrl = getResizedImage(get(about, 'cover_image'), 600);
 
     if (!coverImageUrl) {
@@ -109,6 +116,7 @@ class ProfileSummaryView extends PureComponent {
     }
 
     dropdownOptions.push(!isMuted ? 'MUTE' : 'UNMUTE');
+    dropdownOptions.push(isFavorite ? 'REMOVE FROM FAVOURITES' : 'ADD TO FAVOURITES');
 
     return (
       <Fragment>
@@ -186,28 +194,18 @@ class ProfileSummaryView extends PureComponent {
           </View>
           {isLoggedIn && !isOwnProfile ? (
             <View style={styles.rightIcons}>
-              <IconButton
-                backgroundColor="transparent"
-                color={isFavorite ? '#e63535' : '#c1c5c7'}
-                iconType="MaterialIcons"
-                name={isFavorite ? 'favorite' : 'favorite-border'}
-                size={20}
-                style={[styles.insetIconStyle]}
-                onPress={() => handleOnFavoritePress(isFavorite)}
-              />
-              <IconButton
-                backgroundColor="transparent"
-                color="#c1c5c7"
-                iconType="MaterialCommunityIcons"
-                name={followButtonIcon}
+              <TouchableOpacity
+                style={styles.followActionWrapper}
                 onPress={() => handleFollowUnfollowUser(!isFollowing)}
-                size={20}
-              />
+              >
+                <Text style={styles.followActionText}>{followButtonText}</Text>
+              </TouchableOpacity>
+
               {isProfileLoading ? (
                 <ActivityIndicator style={styles.activityIndicator} />
               ) : (
                 <DropdownButton
-                  dropdownStyle={styles.dropdownStyle}
+                  style={styles.dropdownStyle}
                   iconName="more-vert"
                   iconStyle={styles.dropdownIconStyle}
                   isHasChildIcon