An ATproto social media client -- with an independent Appview.
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

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>

authored by

Bartosz Kaszubowski
Samuel Newman
and committed by
GitHub
9440068b 7b2e61bf

+41 -55
+41 -55
src/screens/Profile/Header/Shell.tsx
··· 1 1 import {memo, useCallback, useEffect, useMemo} from 'react' 2 - import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' 2 + import {TouchableWithoutFeedback, View} from 'react-native' 3 3 import Animated, { 4 4 measure, 5 5 type MeasuredDimensions, ··· 26 26 import {UserAvatar} from '#/view/com/util/UserAvatar' 27 27 import {UserBanner} from '#/view/com/util/UserBanner' 28 28 import {atoms as a, platform, useTheme} from '#/alf' 29 + import {transparentifyColor} from '#/alf/util/colorGeneration' 30 + import {Button} from '#/components/Button' 29 31 import {useDialogControl} from '#/components/Dialog' 30 32 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow' 31 33 import {EditLiveDialog} from '#/components/live/EditLiveDialog' ··· 148 150 <StatusBarShadow /> 149 151 <GrowableBanner 150 152 backButton={ 151 - <> 152 - {!hideBackButton && ( 153 - <TouchableWithoutFeedback 154 - testID="profileHeaderBackBtn" 155 - onPress={onPressBack} 156 - hitSlop={BACK_HITSLOP} 157 - accessibilityRole="button" 158 - accessibilityLabel={_(msg`Back`)} 159 - accessibilityHint=""> 153 + !hideBackButton && ( 154 + <Button 155 + testID="profileHeaderBackBtn" 156 + onPress={onPressBack} 157 + hitSlop={BACK_HITSLOP} 158 + label={_(msg`Back`)} 159 + style={[ 160 + a.absolute, 161 + a.pointer, 162 + { 163 + top: platform({ 164 + web: 10, 165 + default: topInset, 166 + }), 167 + left: platform({ 168 + web: 18, 169 + default: 12, 170 + }), 171 + }, 172 + ]}> 173 + {({hovered}) => ( 160 174 <View 161 175 style={[ 162 - styles.backBtnWrapper, 176 + a.align_center, 177 + a.justify_center, 178 + a.rounded_sm, 163 179 { 164 - top: platform({ 165 - web: 10, 166 - default: topInset, 167 - }), 180 + width: 31, 181 + height: 31, 182 + backgroundColor: transparentifyColor('#000', 0.5), 183 + }, 184 + hovered && { 185 + backgroundColor: transparentifyColor('#000', 0.75), 168 186 }, 169 187 ]}> 170 188 <ArrowLeftIcon size="lg" fill="white" /> 171 189 </View> 172 - </TouchableWithoutFeedback> 173 - )} 174 - </> 190 + )} 191 + </Button> 192 + ) 175 193 }> 176 194 {isPlaceholderProfile ? ( 177 195 <LoadingPlaceholder ··· 203 221 </View> 204 222 )} 205 223 206 - <GrowableAvatar style={styles.aviPosition}> 224 + <GrowableAvatar style={[a.absolute, {top: 104, left: 10}]}> 207 225 <TouchableWithoutFeedback 208 226 testID="profileHeaderAviButton" 209 227 onPress={onPressAvi} ··· 215 233 t.atoms.bg, 216 234 a.rounded_full, 217 235 { 236 + width: 94, 237 + height: 94, 218 238 borderWidth: live.isActive ? 3 : 2, 219 239 borderColor: live.isActive 220 240 ? t.palette.negative_500 221 241 : t.atoms.bg.backgroundColor, 222 242 }, 223 - styles.avi, 224 - profile.associated?.labeler && styles.aviLabeler, 243 + profile.associated?.labeler && a.rounded_md, 225 244 ]}> 226 245 <Animated.View ref={aviRef} collapsable={false}> 227 246 <UserAvatar ··· 255 274 </View> 256 275 ) 257 276 } 277 + 258 278 ProfileHeaderShell = memo(ProfileHeaderShell) 259 279 export {ProfileHeaderShell} 260 - 261 - const styles = StyleSheet.create({ 262 - backBtnWrapper: { 263 - position: 'absolute', 264 - left: 12, 265 - width: 30, 266 - height: 30, 267 - overflow: 'hidden', 268 - borderRadius: 15, 269 - cursor: 'pointer', 270 - backgroundColor: 'rgba(0, 0, 0, 0.5)', 271 - alignItems: 'center', 272 - justifyContent: 'center', 273 - }, 274 - backBtn: { 275 - width: 30, 276 - height: 30, 277 - borderRadius: 15, 278 - alignItems: 'center', 279 - justifyContent: 'center', 280 - }, 281 - aviPosition: { 282 - position: 'absolute', 283 - top: 104, 284 - left: 10, 285 - }, 286 - avi: { 287 - width: 94, 288 - height: 94, 289 - }, 290 - aviLabeler: { 291 - borderRadius: 10, 292 - }, 293 - })