From 9e761fee61abf5797bf669e09ebb8826262321f3 Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Sat, 28 Oct 2023 23:01:55 +0300
Subject: [PATCH 1/6] Remove cropped area in Edit profile screen iOS

---
 src/view/com/modals/EditProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 58d0857ad1..79ffa252aa 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -144,7 +144,7 @@ export function Component({
   ])
 
   return (
-    <KeyboardAvoidingView behavior="height">
+    <KeyboardAvoidingView style={s.flex1} behavior="height">
       <ScrollView style={[pal.view]} testID="editProfileModal">
         <Text style={[styles.title, pal.text]}>Edit my profile</Text>
         <View style={styles.photos}>

From 23f0d44bbe8b7eb61092d28f4b325527334dbcbd Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Sat, 28 Oct 2023 23:55:34 +0300
Subject: [PATCH 2/6] Hide cancel button when saving changes in EditProfile

---
 src/view/com/modals/EditProfile.tsx | 31 ++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 79ffa252aa..3a92f065ba 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -25,6 +25,10 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
+import Animated, {FadeOut} from 'react-native-reanimated'
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity)
 
 export const snapPoints = ['fullscreen']
 
@@ -219,18 +223,21 @@ export function Component({
               </LinearGradient>
             </TouchableOpacity>
           )}
-          <TouchableOpacity
-            testID="editProfileCancelBtn"
-            style={s.mt5}
-            onPress={onPressCancel}
-            accessibilityRole="button"
-            accessibilityLabel="Cancel profile editing"
-            accessibilityHint=""
-            onAccessibilityEscape={onPressCancel}>
-            <View style={[styles.btn]}>
-              <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
-            </View>
-          </TouchableOpacity>
+          {!isProcessing && (
+            <AnimatedTouchableOpacity
+              exiting={FadeOut}
+              testID="editProfileCancelBtn"
+              style={s.mt5}
+              onPress={onPressCancel}
+              accessibilityRole="button"
+              accessibilityLabel="Cancel profile editing"
+              accessibilityHint=""
+              onAccessibilityEscape={onPressCancel}>
+              <View style={[styles.btn]}>
+                <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
+              </View>
+            </AnimatedTouchableOpacity>
+          )}
         </View>
       </ScrollView>
     </KeyboardAvoidingView>

From 1fb774baf2989399bb4d5c84c570b7c1ccae8c90 Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Sun, 29 Oct 2023 00:00:07 +0300
Subject: [PATCH 3/6] Disable fadeOut animation cancel button for web in
 EditProfile screen

Since react-native-reanimated is not configured for web support (https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/web-support/), we are enabling fade out animation for iOS and android solely
---
 src/view/com/modals/EditProfile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 3a92f065ba..dfd5305f5e 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -26,6 +26,7 @@ import {useTheme} from 'lib/ThemeContext'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
 import Animated, {FadeOut} from 'react-native-reanimated'
+import {isWeb} from 'platform/detection'
 
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
@@ -225,7 +226,7 @@ export function Component({
           )}
           {!isProcessing && (
             <AnimatedTouchableOpacity
-              exiting={FadeOut}
+              exiting={!isWeb ? FadeOut : undefined}
               testID="editProfileCancelBtn"
               style={s.mt5}
               onPress={onPressCancel}

From 2b6197ee5eaa816604a214b8da643ad3b9b920f1 Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Wed, 8 Nov 2023 02:07:44 +0300
Subject: [PATCH 4/6] Move FollowButton component to profile header

- Button component with optional start/end icon elements
- Suggested follows icon's dark mode color adjusted in ProfileHeader
---
 src/view/com/profile/FollowButton.tsx  | 31 ++++++++++----
 src/view/com/profile/ProfileHeader.tsx | 57 +++++++++-----------------
 src/view/com/util/forms/Button.tsx     | 27 +++++++++---
 3 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index adb496f6d7..569ab9612c 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -6,6 +6,17 @@ import {Button, ButtonType} from '../util/forms/Button'
 import * as Toast from '../util/Toast'
 import {FollowState} from 'state/models/cache/my-follows'
 import {useFollowProfile} from 'lib/hooks/useFollowProfile'
+import {s} from '#/lib/styles'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from '#/lib/hooks/usePalette'
+
+type Props = {
+  unfollowedType?: ButtonType
+  followedType?: ButtonType
+  profile: AppBskyActorDefs.ProfileViewBasic
+  onToggleFollow?: (v: boolean) => void
+  labelStyle?: StyleProp<TextStyle>
+} & React.ComponentProps<typeof Button>
 
 export const FollowButton = observer(function FollowButtonImpl({
   unfollowedType = 'inverted',
@@ -13,13 +24,11 @@ export const FollowButton = observer(function FollowButtonImpl({
   profile,
   onToggleFollow,
   labelStyle,
-}: {
-  unfollowedType?: ButtonType
-  followedType?: ButtonType
-  profile: AppBskyActorDefs.ProfileViewBasic
-  onToggleFollow?: (v: boolean) => void
-  labelStyle?: StyleProp<TextStyle>
-}) {
+  ...rest
+}: Props) {
+  const pal = usePalette('default')
+  const palInverted = usePalette('inverted')
+
   const {state, following, toggle} = useFollowProfile(profile)
 
   const onPress = React.useCallback(async () => {
@@ -37,11 +46,19 @@ export const FollowButton = observer(function FollowButtonImpl({
 
   return (
     <Button
+      StartIcon={
+        following ? (
+          <FontAwesomeIcon icon="check" style={[pal.text, s.mr2]} size={14} />
+        ) : (
+          <FontAwesomeIcon icon="plus" style={[palInverted.text, s.mr2]} />
+        )
+      }
       type={following ? followedType : unfollowedType}
       labelStyle={labelStyle}
       onPress={onPress}
       label={following ? 'Unfollow' : 'Follow'}
       withLoading={true}
+      {...rest}
     />
   )
 })
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 1a1d38e4b7..5cff2fcb47 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -40,6 +40,7 @@ import {makeProfileLink} from 'lib/routes/links'
 import {Link} from '../util/Link'
 import {ProfileHeaderSuggestedFollows} from './ProfileHeaderSuggestedFollows'
 import {logger} from '#/logger'
+import {FollowButton} from './FollowButton'
 
 interface Props {
   view: ProfileModel
@@ -111,7 +112,6 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
   isProfilePreview,
 }: Props) {
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const store = useStores()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
@@ -355,6 +355,8 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
   const following = formatCount(view.followsCount)
   const followers = formatCount(view.followersCount)
   const pluralizedFollowers = pluralize(view.followersCount, 'follower')
+  const isFollowing =
+    store.me.follows.getFollowState(view.did) === FollowState.Following
 
   return (
     <View style={pal.view}>
@@ -413,7 +415,7 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
                       pal.text,
                       {
                         color: showSuggestedFollows
-                          ? colors.white
+                          ? pal.textInverted.color
                           : pal.text.color,
                       },
                     ]}
@@ -422,41 +424,22 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
                 </TouchableOpacity>
               )}
 
-              {store.me.follows.getFollowState(view.did) ===
-              FollowState.Following ? (
-                <TouchableOpacity
-                  testID="unfollowBtn"
-                  onPress={onPressToggleFollow}
-                  style={[styles.btn, styles.mainBtn, pal.btn]}
-                  accessibilityRole="button"
-                  accessibilityLabel={`Unfollow ${view.handle}`}
-                  accessibilityHint={`Hides posts from ${view.handle} in your feed`}>
-                  <FontAwesomeIcon
-                    icon="check"
-                    style={[pal.text, s.mr5]}
-                    size={14}
-                  />
-                  <Text type="button" style={pal.text}>
-                    Following
-                  </Text>
-                </TouchableOpacity>
-              ) : (
-                <TouchableOpacity
-                  testID="followBtn"
-                  onPress={onPressToggleFollow}
-                  style={[styles.btn, styles.mainBtn, palInverted.view]}
-                  accessibilityRole="button"
-                  accessibilityLabel={`Follow ${view.handle}`}
-                  accessibilityHint={`Shows posts from ${view.handle} in your feed`}>
-                  <FontAwesomeIcon
-                    icon="plus"
-                    style={[palInverted.text, s.mr5]}
-                  />
-                  <Text type="button" style={[palInverted.text, s.bold]}>
-                    Follow
-                  </Text>
-                </TouchableOpacity>
-              )}
+              <FollowButton
+                style={styles.btn}
+                testID={isFollowing ? 'unfollowBtn' : 'followBtn'}
+                unfollowedType="inverted"
+                profile={view}
+                accessibilityHint={
+                  isFollowing
+                    ? `Hides posts from ${view.handle} in your feed`
+                    : `Shows posts from ${view.handle} in your feed`
+                }
+                accessibilityLabel={`${isFollowing ? 'Unfollow' : 'Follow'} ${
+                  view.handle
+                }`}
+                onToggleFollow={onPressToggleFollow}
+                followedType="default"
+              />
             </>
           ) : null}
           {dropdownItems?.length ? (
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 270d983172..e4b013a2d2 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -13,6 +13,7 @@ import {
 import {Text} from '../text/Text'
 import {useTheme} from 'lib/ThemeContext'
 import {choose} from 'lib/functions'
+import {s} from '#/lib/styles'
 
 type Event =
   | React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -42,6 +43,8 @@ export function Button({
   type = 'primary',
   label,
   style,
+  StartIcon,
+  EndIcon,
   labelContainerStyle,
   labelStyle,
   onPress,
@@ -56,6 +59,8 @@ export function Button({
   type?: ButtonType
   label?: string
   style?: StyleProp<ViewStyle>
+  StartIcon?: React.ReactElement
+  EndIcon?: React.ReactElement
   labelContainerStyle?: StyleProp<ViewStyle>
   labelStyle?: StyleProp<TextStyle>
   onPress?: () => void | Promise<void>
@@ -169,29 +174,40 @@ export function Button({
     [typeOuterStyle, style],
   )
 
-  const renderChildern = React.useCallback(() => {
+  const renderChildren = React.useCallback(() => {
     if (!label) {
       return children
     }
 
     return (
       <View style={[styles.labelContainer, labelContainerStyle]}>
+        {React.isValidElement(StartIcon) && !isLoading ? StartIcon : null}
+
         {label && withLoading && isLoading ? (
-          <ActivityIndicator size={12} color={typeLabelStyle.color} />
+          <ActivityIndicator
+            style={s.mr2}
+            size={12}
+            color={typeLabelStyle.color}
+          />
         ) : null}
+
         <Text type="button" style={[typeLabelStyle, labelStyle]}>
           {label}
         </Text>
+
+        {React.isValidElement(EndIcon) && !isLoading && EndIcon}
       </View>
     )
   }, [
-    children,
     label,
+    labelContainerStyle,
+    StartIcon,
     withLoading,
     isLoading,
-    labelContainerStyle,
     typeLabelStyle,
     labelStyle,
+    EndIcon,
+    children,
   ])
 
   return (
@@ -205,7 +221,7 @@ export function Button({
       accessibilityHint={accessibilityHint}
       accessibilityLabelledBy={accessibilityLabelledBy}
       onAccessibilityEscape={onAccessibilityEscape}>
-      {renderChildern}
+      {renderChildren}
     </Pressable>
   )
 }
@@ -217,6 +233,7 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   labelContainer: {
+    alignItems: 'center',
     flexDirection: 'row',
     gap: 8,
   },

From b3cd5b2e3ebf4823870ba5cdbfccff307775645a Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Wed, 8 Nov 2023 16:40:40 +0300
Subject: [PATCH 5/6] Fix jump in suggested follows tab

-Fix on blur action on search input in suggested follows tab(second tabbar item) causes ProfileCard description content to jump in android and iOS
---
 src/view/com/profile/ProfileCard.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index f7340fd6f2..60dda6798a 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -223,7 +223,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   layoutAvi: {
-    alignSelf: 'baseline',
+    alignSelf: 'flex-start',
     width: 54,
     paddingLeft: 4,
     paddingTop: 10,
@@ -247,6 +247,7 @@ const styles = StyleSheet.create({
     paddingLeft: 54,
     paddingRight: 10,
     paddingBottom: 10,
+    paddingTop: 15,
   },
   pills: {
     flexDirection: 'row',

From 330c13fd4eecae302f56c5f5e128e0450406018f Mon Sep 17 00:00:00 2001
From: tarikpnr <tarikdotcom@gmail.com>
Date: Wed, 8 Nov 2023 16:44:14 +0300
Subject: [PATCH 6/6] Revert "Fix jump in suggested follows tab"

This reverts commit b3cd5b2e3ebf4823870ba5cdbfccff307775645a.
---
 src/view/com/profile/ProfileCard.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index 60dda6798a..f7340fd6f2 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -223,7 +223,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   layoutAvi: {
-    alignSelf: 'flex-start',
+    alignSelf: 'baseline',
     width: 54,
     paddingLeft: 4,
     paddingTop: 10,
@@ -247,7 +247,6 @@ const styles = StyleSheet.create({
     paddingLeft: 54,
     paddingRight: 10,
     paddingBottom: 10,
-    paddingTop: 15,
   },
   pills: {
     flexDirection: 'row',