alice.mosphere.at / bsky-social-app
this repo has no description
0
fork

Configure Feed

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

tweak hover state (#5892)

authored by

Samuel Newman and committed by
GitHub 090ac041 f6649e22

+103 -108
+103 -108
src/view/shell/Drawer.tsx
··· 226 226 <ScrollView 227 227 style={[a.flex_1]} 228 228 contentContainerStyle={[ 229 - a.px_xl, 230 229 { 231 230 paddingTop: Math.max( 232 231 insets.top + a.pt_xl.paddingTop, ··· 234 233 ), 235 234 }, 236 235 ]}> 237 - {hasSession && currentAccount ? ( 238 - <DrawerProfileCard 239 - account={currentAccount} 240 - onPressProfile={onPressProfile} 241 - /> 242 - ) : ( 243 - <View style={[a.pr_xl]}> 244 - <NavSignupCard /> 245 - </View> 246 - )} 236 + <View style={[a.px_xl]}> 237 + {hasSession && currentAccount ? ( 238 + <DrawerProfileCard 239 + account={currentAccount} 240 + onPressProfile={onPressProfile} 241 + /> 242 + ) : ( 243 + <View style={[a.pr_xl]}> 244 + <NavSignupCard /> 245 + </View> 246 + )} 247 247 248 - <Divider style={[a.mt_xl, a.mb_sm]} /> 248 + <Divider style={[a.mt_xl, a.mb_sm]} /> 249 + </View> 249 250 250 251 {hasSession ? ( 251 252 <> ··· 272 273 </> 273 274 )} 274 275 275 - <Divider style={[a.mb_xl, a.mt_sm]} /> 276 + <View style={[a.px_xl]}> 277 + <Divider style={[a.mb_xl, a.mt_sm]} /> 276 278 277 - <View style={[a.flex_col, a.gap_md, a.flex_wrap]}> 278 - <InlineLinkText 279 - style={[a.text_md]} 280 - label={_(msg`Terms of Service`)} 281 - to="https://bsky.social/about/support/tos"> 282 - <Trans>Terms of Service</Trans> 283 - </InlineLinkText> 284 - <InlineLinkText 285 - style={[a.text_md]} 286 - to="https://bsky.social/about/support/privacy-policy" 287 - label={_(msg`Privacy Policy`)}> 288 - <Trans>Privacy Policy</Trans> 289 - </InlineLinkText> 290 - {kawaii && ( 291 - <Text style={t.atoms.text_contrast_medium}> 292 - <Trans> 293 - Logo by{' '} 294 - <InlineLinkText 295 - style={[a.text_md]} 296 - to="/profile/sawaratsuki.bsky.social" 297 - label="@sawaratsuki.bsky.social"> 298 - @sawaratsuki.bsky.social 299 - </InlineLinkText> 300 - </Trans> 301 - </Text> 302 - )} 279 + <View style={[a.flex_col, a.gap_md, a.flex_wrap]}> 280 + <InlineLinkText 281 + style={[a.text_md]} 282 + label={_(msg`Terms of Service`)} 283 + to="https://bsky.social/about/support/tos"> 284 + <Trans>Terms of Service</Trans> 285 + </InlineLinkText> 286 + <InlineLinkText 287 + style={[a.text_md]} 288 + to="https://bsky.social/about/support/privacy-policy" 289 + label={_(msg`Privacy Policy`)}> 290 + <Trans>Privacy Policy</Trans> 291 + </InlineLinkText> 292 + {kawaii && ( 293 + <Text style={t.atoms.text_contrast_medium}> 294 + <Trans> 295 + Logo by{' '} 296 + <InlineLinkText 297 + style={[a.text_md]} 298 + to="/profile/sawaratsuki.bsky.social" 299 + label="@sawaratsuki.bsky.social"> 300 + @sawaratsuki.bsky.social 301 + </InlineLinkText> 302 + </Trans> 303 + </Text> 304 + )} 305 + </View> 303 306 </View> 304 307 </ScrollView> 305 308 ··· 387 390 ) 388 391 } 389 392 label={_(msg`Search`)} 390 - accessibilityLabel={_(msg`Search`)} 391 - accessibilityHint="" 392 393 bold={isActive} 393 394 onPress={onPress} 394 395 /> ··· 415 416 ) 416 417 } 417 418 label={_(msg`Home`)} 418 - accessibilityLabel={_(msg`Home`)} 419 - accessibilityHint="" 420 419 bold={isActive} 421 420 onPress={onPress} 422 421 /> ··· 443 442 ) 444 443 } 445 444 label={_(msg`Chat`)} 446 - accessibilityLabel={_(msg`Chat`)} 447 - accessibilityHint="" 448 445 bold={isActive} 449 446 onPress={onPress} 450 447 /> ··· 472 469 ) 473 470 } 474 471 label={_(msg`Notifications`)} 475 - accessibilityLabel={_(msg`Notifications`)} 476 472 accessibilityHint={ 477 473 numUnreadNotifications === '' 478 474 ? '' ··· 505 501 ) 506 502 } 507 503 label={_(msg`Feeds`)} 508 - accessibilityLabel={_(msg`Feeds`)} 509 - accessibilityHint="" 510 504 bold={isActive} 511 505 onPress={onPress} 512 506 /> ··· 522 516 <MenuItem 523 517 icon={<List style={[t.atoms.text]} width={iconWidth} />} 524 518 label={_(msg`Lists`)} 525 - accessibilityLabel={_(msg`Lists`)} 526 - accessibilityHint="" 527 519 onPress={onPress} 528 520 /> 529 521 ) ··· 549 541 ) 550 542 } 551 543 label={_(msg`Profile`)} 552 - accessibilityLabel={_(msg`Profile`)} 553 - accessibilityHint="" 554 544 onPress={onPress} 555 545 /> 556 546 ) ··· 564 554 <MenuItem 565 555 icon={<Settings style={[t.atoms.text]} width={iconWidth} />} 566 556 label={_(msg`Settings`)} 567 - accessibilityLabel={_(msg`Settings`)} 568 - accessibilityHint="" 569 557 onPress={onPress} 570 558 /> 571 559 ) 572 560 } 573 561 SettingsMenuItem = React.memo(SettingsMenuItem) 574 562 575 - function MenuItem({ 576 - icon, 577 - label, 578 - accessibilityLabel, 579 - count, 580 - bold, 581 - onPress, 582 - }: MenuItemProps) { 563 + function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) { 583 564 const t = useTheme() 584 565 return ( 585 - <PressableScale 566 + <Button 586 567 testID={`menuItemButton-${label}`} 587 - style={[a.flex_row, a.align_center, a.gap_sm, {paddingVertical: 10}]} 588 568 onPress={onPress} 589 569 accessibilityRole="tab" 590 - accessibilityLabel={accessibilityLabel} 591 - accessibilityHint="" 592 - targetScale={0.95}> 593 - <View style={[a.relative]}> 594 - {icon} 595 - {count ? ( 596 - <View 597 - style={[ 598 - a.absolute, 599 - a.inset_0, 600 - a.align_end, 601 - {top: -4, right: a.gap_sm.gap * -1}, 602 - ]}> 603 - <View 604 - style={[ 605 - a.rounded_full, 606 - { 607 - right: count.length === 1 ? 6 : 0, 608 - paddingHorizontal: 4, 609 - paddingVertical: 1, 610 - backgroundColor: t.palette.primary_500, 611 - }, 612 - ]}> 613 - <Text 570 + label={label}> 571 + {({hovered, pressed}) => ( 572 + <View 573 + style={[ 574 + a.flex_1, 575 + a.flex_row, 576 + a.gap_md, 577 + a.py_md, 578 + a.px_xl, 579 + (hovered || pressed) && t.atoms.bg_contrast_25, 580 + ]}> 581 + <View style={[a.relative]}> 582 + {icon} 583 + {count ? ( 584 + <View 614 585 style={[ 615 - a.text_xs, 616 - a.leading_tight, 617 - a.font_bold, 618 - { 619 - fontVariant: ['tabular-nums'], 620 - color: colors.white, 621 - }, 622 - ]} 623 - numberOfLines={1}> 624 - {count} 625 - </Text> 626 - </View> 586 + a.absolute, 587 + a.inset_0, 588 + a.align_end, 589 + {top: -4, right: a.gap_sm.gap * -1}, 590 + ]}> 591 + <View 592 + style={[ 593 + a.rounded_full, 594 + { 595 + right: count.length === 1 ? 6 : 0, 596 + paddingHorizontal: 4, 597 + paddingVertical: 1, 598 + backgroundColor: t.palette.primary_500, 599 + }, 600 + ]}> 601 + <Text 602 + style={[ 603 + a.text_xs, 604 + a.leading_tight, 605 + a.font_bold, 606 + { 607 + fontVariant: ['tabular-nums'], 608 + color: colors.white, 609 + }, 610 + ]} 611 + numberOfLines={1}> 612 + {count} 613 + </Text> 614 + </View> 615 + </View> 616 + ) : undefined} 627 617 </View> 628 - ) : undefined} 629 - </View> 630 - <Text 631 - style={[a.flex_1, a.text_2xl, bold && a.font_bold, web(a.leading_snug)]} 632 - numberOfLines={1}> 633 - {label} 634 - </Text> 635 - </PressableScale> 618 + <Text 619 + style={[ 620 + a.flex_1, 621 + a.text_2xl, 622 + bold && a.font_heavy, 623 + web(a.leading_snug), 624 + ]} 625 + numberOfLines={1}> 626 + {label} 627 + </Text> 628 + </View> 629 + )} 630 + </Button> 636 631 ) 637 632 }