zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[🐴] Change up icons (#3938)

Browse source 
* Swap for chat icon

* Replace icons in left nav

* Replace icons in bottom bars

* Ditch feeds, drop size

* Fine tune

* Swap bell icon, improve alignment and size
This commit is contained in:
Eric Bailey 2024-05-10 10:42:45 -05:00 • committed by GitHub
parent d7f3a8d01f
commit 8f56f79c6c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 250 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/view/shell/bottom-bar/BottomBar.tsx
View file

@ -13,15 +13,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {
BellIcon,
BellIconSolid,
HashtagIcon,
HomeIcon,
HomeIconSolid,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
} from '#/lib/icons'
import {clamp} from '#/lib/numbers'
import {getTabState, TabState} from '#/lib/routes/helpers'
import {useGate} from '#/lib/statsig/statsig'
@ -41,8 +32,20 @@ import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
import {useDialogControl} from '#/components/Dialog'
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
import {
Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell'
import {
HomeOpen_Filled_Corner0_Rounded as HomeFilled,
HomeOpen_Stoke2_Corner0_Rounded as Home,
} from '#/components/icons/HomeOpen'
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
import {
Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} from '#/components/icons/Message'
import {styles} from './BottomBarStyles'
type TabOptions =
@ -60,14 +63,8 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const safeAreaInsets = useSafeAreaInsets()
const {track} = useAnalytics()
const {footerHeight} = useShellLayout()
const {
isAtHome,
isAtSearch,
isAtFeeds,
isAtNotifications,
isAtMyProfile,
isAtMessages,
} = useNavigationTabState()
const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
useNavigationTabState()
const numUnreadNotifications = useUnreadNotifications()
const numUnreadMessages = useUnreadMessageCount()
const {footerMinimalShellTransform} = useMinimalShellMode()
@ -78,6 +75,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const accountSwitchControl = useDialogControl()
const playHaptic = useHaptics()
const gate = useGate()
const iconWidth = 28
const showSignIn = React.useCallback(() => {
closeAllActiveElements()
@ -110,10 +108,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
() => onPressTab('Search'),
[onPressTab],
)
const onPressFeeds = React.useCallback(
() => onPressTab('Feeds'),
[onPressTab],
)
const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'),
[onPressTab],
@ -152,15 +146,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarHomeBtn"
icon={
isAtHome ? (
<HomeIconSolid
strokeWidth={4}
size={24}
<HomeFilled
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
) : (
<HomeIcon
strokeWidth={4}
size={24}
<Home
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@ -174,16 +166,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarSearchBtn"
icon={
isAtSearch ? (
<MagnifyingGlassIcon2Solid
size={25}
<MagnifyingGlassFilled
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
) : (
<MagnifyingGlassIcon2
size={25}
<MagnifyingGlass
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
)
}
@ -192,68 +182,18 @@ export function BottomBar({navigation}: BottomTabBarProps) {
accessibilityLabel={_(msg`Search`)}
accessibilityHint=""
/>
<Btn
testID="bottomBarFeedsBtn"
icon={
isAtFeeds ? (
<HashtagIcon
size={24}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={4}
/>
) : (
<HashtagIcon
size={24}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={2.25}
/>
)
}
onPress={onPressFeeds}
accessibilityRole="tab"
accessibilityLabel={_(msg`Feeds`)}
accessibilityHint=""
/>
<Btn
testID="bottomBarNotificationsBtn"
icon={
isAtNotifications ? (
<BellIconSolid
size={24}
strokeWidth={1.9}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
) : (
<BellIcon
size={24}
strokeWidth={1.9}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
}
onPress={onPressNotifications}
notificationCount={numUnreadNotifications}
accessible={true}
accessibilityRole="tab"
accessibilityLabel={_(msg`Notifications`)}
accessibilityHint={
numUnreadNotifications === ''
? ''
: `${numUnreadNotifications} unread`
}
/>
{gate('dms') && (
<Btn
testID="bottomBarMessagesBtn"
icon={
isAtMessages ? (
<EnvelopeFilled
size="lg"
<MessageFilled
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
) : (
<Envelope
size="lg"
<Message
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
)
@ -270,6 +210,32 @@ export function BottomBar({navigation}: BottomTabBarProps) {
}
/>
)}
<Btn
testID="bottomBarNotificationsBtn"
icon={
isAtNotifications ? (
<BellFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
) : (
<Bell
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
}
onPress={onPressNotifications}
notificationCount={numUnreadNotifications}
accessible={true}
accessibilityRole="tab"
accessibilityLabel={_(msg`Notifications`)}
accessibilityHint={
numUnreadNotifications === ''
? ''
: `${numUnreadNotifications} unread`
}
/>
<Btn
testID="bottomBarProfileBtn"
icon={
@ -285,7 +251,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
]}>
<UserAvatar
avatar={profile?.avatar}
size={27}
size={iconWidth - 3}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
@ -296,7 +262,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
<UserAvatar
avatar={profile?.avatar}
size={28}
size={iconWidth - 3}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}

26
src/view/shell/bottom-bar/BottomBarStyles.tsx
View file

@ -48,27 +48,19 @@ export const styles = StyleSheet.create({
marginLeft: 'auto',
marginRight: 'auto',
},
ctrlIconSizingWrapper: {
height: 27,
},
homeIcon: {
top: 0,
},
feedsIcon: {
top: -2,
},
ctrlIconSizingWrapper: {},
homeIcon: {},
feedsIcon: {},
searchIcon: {
top: -2,
},
bellIcon: {
top: -2.5,
top: -1,
},
bellIcon: {},
profileIcon: {
top: -4,
},
messagesIcon: {
top: 2,
borderRadius: 100,
borderWidth: 1,
borderColor: 'transparent',
},
messagesIcon: {},
onProfile: {
borderWidth: 1,
borderRadius: 100,

87
src/view/shell/bottom-bar/BottomBarWeb.tsx
View file

@ -8,17 +8,6 @@ import {useNavigationState} from '@react-navigation/native'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {usePalette} from '#/lib/hooks/usePalette'
import {
BellIcon,
BellIconSolid,
HashtagIcon,
HomeIcon,
HomeIconSolid,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
UserIcon,
UserIconSolid,
} from '#/lib/icons'
import {clamp} from '#/lib/numbers'
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
import {makeProfileLink} from '#/lib/routes/links'
@ -33,8 +22,24 @@ import {Text} from '#/view/com/util/text/Text'
import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
import {Link} from 'view/com/util/Link'
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
import {
Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell'
import {
HomeOpen_Filled_Corner0_Rounded as HomeFilled,
HomeOpen_Stoke2_Corner0_Rounded as Home,
} from '#/components/icons/HomeOpen'
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
import {
Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} from '#/components/icons/Message'
import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {styles} from './BottomBarStyles'
export function BottomBarWeb() {
@ -46,6 +51,7 @@ export function BottomBarWeb() {
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
const gate = useGate()
const iconWidth = 26
const showSignIn = React.useCallback(() => {
closeAllActiveElements()
@ -72,11 +78,10 @@ export function BottomBarWeb() {
<>
<NavItem routeName="Home" href="/">
{({isActive}) => {
const Icon = isActive ? HomeIconSolid : HomeIcon
const Icon = isActive ? HomeFilled : Home
return (
<Icon
strokeWidth={4}
size={24}
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@ -84,14 +89,11 @@ export function BottomBarWeb() {
</NavItem>
<NavItem routeName="Search" href="/search">
{({isActive}) => {
const Icon = isActive
? MagnifyingGlassIcon2Solid
: MagnifyingGlassIcon2
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
return (
<Icon
size={25}
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
)
}}
@ -99,42 +101,30 @@ export function BottomBarWeb() {
{hasSession && (
<>
<NavItem routeName="Feeds" href="/feeds">
{({isActive}) => {
return (
<HashtagIcon
size={22}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={isActive ? 4 : 2.5}
/>
)
}}
</NavItem>
<NavItem routeName="Notifications" href="/notifications">
{({isActive}) => {
const Icon = isActive ? BellIconSolid : BellIcon
return (
<Icon
size={24}
strokeWidth={1.9}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
}}
</NavItem>
{gate('dms') && (
<NavItem routeName="Messages" href="/messages">
{({isActive}) => {
const Icon = isActive ? EnvelopeFilled : Envelope
const Icon = isActive ? MessageFilled : Message
return (
<Icon
size="lg"
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
/>
)
}}
</NavItem>
)}
<NavItem routeName="Notifications" href="/notifications">
{({isActive}) => {
const Icon = isActive ? BellFilled : Bell
return (
<Icon
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
}}
</NavItem>
<NavItem
routeName="Profile"
href={
@ -146,11 +136,10 @@ export function BottomBarWeb() {
: '/'
}>
{({isActive}) => {
const Icon = isActive ? UserIconSolid : UserIcon
const Icon = isActive ? UserCircleFilled : UserCircle
return (
<Icon
size={28}
strokeWidth={1.5}
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
/>
)