Fix profile header buttons (#5558)

* Fix profile header buttons

* Adjust labeler buttons too

* Fix load state jumps

* Small tweak for web

* Remove log

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -25,7 +25,7 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useRequireAuth, useSession} from '#/state/session'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogOuterProps} from '#/components/Dialog'
 import {
@@ -61,7 +61,6 @@ let ProfileHeaderLabeler = ({
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {currentAccount, hasSession} = useSession()
   const {openModal} = useModalControls()
@@ -167,7 +166,7 @@ let ProfileHeaderLabeler = ({
         style={[a.px_lg, a.pt_md, a.pb_sm]}
         pointerEvents={isIOS ? 'auto' : 'box-none'}>
         <View
-          style={[a.flex_row, a.justify_end, a.gap_sm, a.pb_lg]}
+          style={[a.flex_row, a.justify_end, a.align_center, a.gap_xs, a.pb_lg]}
           pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
             <Button
@@ -196,7 +195,10 @@ let ProfileHeaderLabeler = ({
                   <View
                     style={[
                       {
-                        paddingVertical: gtMobile ? 12 : 10,
+                        paddingVertical: 9,
+                        paddingHorizontal: 12,
+                        borderRadius: 6,
+                        gap: 6,
                         backgroundColor: isSubscribed
                           ? state.hovered || state.pressed
                             ? t.palette.contrast_50
@@ -205,9 +207,6 @@ let ProfileHeaderLabeler = ({
                           ? tokens.color.temp_purple_dark
                           : tokens.color.temp_purple,
                       },
-                      a.px_lg,
-                      a.rounded_sm,
-                      a.gap_sm,
                     ]}>
                     <Text
                       style={[
@@ -218,6 +217,7 @@ let ProfileHeaderLabeler = ({
                         },
                         a.font_bold,
                         a.text_center,
+                        a.leading_tight,
                       ]}>
                       {isSubscribed ? (
                         <Trans>Unsubscribe</Trans>

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -153,8 +153,9 @@ let ProfileHeaderStandard = ({
           style={[
             {paddingLeft: 90},
             a.flex_row,
+            a.align_center,
             a.justify_end,
-            a.gap_sm,
+            a.gap_xs,
             a.pb_sm,
             a.flex_wrap,
           ]}
@@ -167,7 +168,7 @@ let ProfileHeaderStandard = ({
               variant="solid"
               onPress={onPressEditProfile}
               label={_(msg`Edit profile`)}
-              style={[a.rounded_full, a.py_sm]}>
+              style={[a.rounded_full]}>
               <ButtonText>
                 <Trans>Edit Profile</Trans>
               </ButtonText>
@@ -182,7 +183,7 @@ let ProfileHeaderStandard = ({
                 label={_(msg`Unblock`)}
                 disabled={!hasSession}
                 onPress={() => unblockPromptControl.open()}
-                style={[a.rounded_full, a.py_sm]}>
+                style={[a.rounded_full]}>
                 <ButtonText>
                   <Trans context="action">Unblock</Trans>
                 </ButtonText>
@@ -205,7 +206,7 @@ let ProfileHeaderStandard = ({
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }
-                style={[a.rounded_full, a.gap_xs, a.py_sm]}>
+                style={[a.rounded_full]}>
                 <ButtonIcon
                   position="left"
                   icon={profile.viewer?.following ? Check : Plus}

src/screens/Profile/Header/index.tsx

@@ -27,7 +27,7 @@ let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
       </View>
       <View style={styles.content}>
         <View style={[styles.buttonsLine]}>
-          <LoadingPlaceholder width={167} height={36} style={styles.br50} />
+          <LoadingPlaceholder width={140} height={34} style={styles.br50} />
         </View>
       </View>
     </View>
@@ -69,13 +69,12 @@ const styles = StyleSheet.create({
   },
   content: {
     paddingTop: 12,
-    paddingHorizontal: 14,
-    paddingBottom: 4,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
   },
   buttonsLine: {
     flexDirection: 'row',
     marginLeft: 'auto',
-    marginBottom: 12,
   },
   br45: {borderRadius: 45},
   br50: {borderRadius: 50},