An ATproto social media client -- with an independent Appview.
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
+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
-
})