Profile back button tweaks for web (#8795)

* Profile back button tweaks

* apply review feedback - remove StyleSheet

* Update src/screens/Profile/Header/Shell.tsx

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 41 insertions, 55 deletions

diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
index 27962ba05..167be0aa8 100644
--- a/src/screens/Profile/Header/Shell.tsx
+++ b/src/screens/Profile/Header/Shell.tsx
@@ -1,5 +1,5 @@
 import {memo, useCallback, useEffect, useMemo} from 'react'
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import {TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {
   measure,
   type MeasuredDimensions,
@@ -26,6 +26,8 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {UserBanner} from '#/view/com/util/UserBanner'
 import {atoms as a, platform, useTheme} from '#/alf'
+import {transparentifyColor} from '#/alf/util/colorGeneration'
+import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
 import {EditLiveDialog} from '#/components/live/EditLiveDialog'
@@ -148,30 +150,46 @@ let ProfileHeaderShell = ({
         <StatusBarShadow />
         <GrowableBanner
           backButton={
-            <>
-              {!hideBackButton && (
-                <TouchableWithoutFeedback
-                  testID="profileHeaderBackBtn"
-                  onPress={onPressBack}
-                  hitSlop={BACK_HITSLOP}
-                  accessibilityRole="button"
-                  accessibilityLabel={_(msg`Back`)}
-                  accessibilityHint="">
+            !hideBackButton && (
+              <Button
+                testID="profileHeaderBackBtn"
+                onPress={onPressBack}
+                hitSlop={BACK_HITSLOP}
+                label={_(msg`Back`)}
+                style={[
+                  a.absolute,
+                  a.pointer,
+                  {
+                    top: platform({
+                      web: 10,
+                      default: topInset,
+                    }),
+                    left: platform({
+                      web: 18,
+                      default: 12,
+                    }),
+                  },
+                ]}>
+                {({hovered}) => (
                   <View
                     style={[
-                      styles.backBtnWrapper,
+                      a.align_center,
+                      a.justify_center,
+                      a.rounded_sm,
                       {
-                        top: platform({
-                          web: 10,
-                          default: topInset,
-                        }),
+                        width: 31,
+                        height: 31,
+                        backgroundColor: transparentifyColor('#000', 0.5),
+                      },
+                      hovered && {
+                        backgroundColor: transparentifyColor('#000', 0.75),
                       },
                     ]}>
                     <ArrowLeftIcon size="lg" fill="white" />
                   </View>
-                </TouchableWithoutFeedback>
-              )}
-            </>
+                )}
+              </Button>
+            )
           }>
           {isPlaceholderProfile ? (
             <LoadingPlaceholder
@@ -203,7 +221,7 @@ let ProfileHeaderShell = ({
         </View>
       )}
 
-      <GrowableAvatar style={styles.aviPosition}>
+      <GrowableAvatar style={[a.absolute, {top: 104, left: 10}]}>
         <TouchableWithoutFeedback
           testID="profileHeaderAviButton"
           onPress={onPressAvi}
@@ -215,13 +233,14 @@ let ProfileHeaderShell = ({
               t.atoms.bg,
               a.rounded_full,
               {
+                width: 94,
+                height: 94,
                 borderWidth: live.isActive ? 3 : 2,
                 borderColor: live.isActive
                   ? t.palette.negative_500
                   : t.atoms.bg.backgroundColor,
               },
-              styles.avi,
-              profile.associated?.labeler && styles.aviLabeler,
+              profile.associated?.labeler && a.rounded_md,
             ]}>
             <Animated.View ref={aviRef} collapsable={false}>
               <UserAvatar
@@ -255,39 +274,6 @@ let ProfileHeaderShell = ({
     </View>
   )
 }
+
 ProfileHeaderShell = memo(ProfileHeaderShell)
 export {ProfileHeaderShell}
-
-const styles = StyleSheet.create({
-  backBtnWrapper: {
-    position: 'absolute',
-    left: 12,
-    width: 30,
-    height: 30,
-    overflow: 'hidden',
-    borderRadius: 15,
-    cursor: 'pointer',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  backBtn: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  aviPosition: {
-    position: 'absolute',
-    top: 104,
-    left: 10,
-  },
-  avi: {
-    width: 94,
-    height: 94,
-  },
-  aviLabeler: {
-    borderRadius: 10,
-  },
-})