Move FollowButton to ProfileHeader

[tarikfp]

Web

web-demo.mov

App

app-demo.mov

• In the current state, the ProfileHeader component uses custom TouchableOpacity components to display the Follow/Unfollow Action button, despite the fact that we already have a pre-existing FollowButton component in the app.

• Suggested follows icon is not visible in dark mode. It is being displayed as white circle when showSuggestFollows is set to true.

• Furthermore, when the follow/unfollow action is initiated, the button interactions remain active, and there is no loading indicator displayed which may confuse the user.

To address these issues, we should:

• Utilize the existing FollowButton component within the ProfileHeader.
• Changing Suggested follows icon's color to correct one.
• Enhance the Button component by introducing StartIcon and EndIcon props, enabling the rendering of additional icons such as a plus sign (+) or a checkmark (✓) alongside the follow/unfollow text in FollowButton component. By using Button component, we eliminate the need of controlling loading state to disable interactions on the button since it is already being internally handled by the Button component itself.

App demo after changes

app-fixed.mov

Web demo after changes

web-fixed.mov