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]}
/>
)

161
src/view/shell/desktop/LeftNav.tsx
View file

@ -23,21 +23,6 @@ import {useSession} from '#/state/session'
import {useComposerControls} from '#/state/shell/composer'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {
BellIcon,
BellIconSolid,
CogIcon,
CogIconSolid,
ComposeIcon2,
HashtagIcon,
HomeIcon,
HomeIconSolid,
ListIcon,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
UserIcon,
UserIconSolid,
} from 'lib/icons'
import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
import {makeProfileLink} from 'lib/routes/links'
import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
@ -48,8 +33,37 @@ import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {PressableWithHover} from 'view/com/util/PressableWithHover'
import {Text} from 'view/com/util/text/Text'
import {UserAvatar} from 'view/com/util/UserAvatar'
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 {
BulletList_Filled_Corner0_Rounded as ListFilled,
BulletList_Stroke2_Corner0_Rounded as List,
} from '#/components/icons/BulletList'
import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig'
import {
Hashtag_Filled_Corner0_Rounded as HashtagFilled,
Hashtag_Stroke2_Corner0_Rounded as Hashtag,
} from '#/components/icons/Hashtag'
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 {
SettingsGear2_Filled_Corner0_Rounded as SettingsFilled,
SettingsGear2_Stroke2_Corner0_Rounded as Settings,
} from '#/components/icons/SettingsGear2'
import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {router} from '../../../routes'
function ProfileCard() {
@ -256,11 +270,7 @@ function ComposeBtn() {
accessibilityLabel={_(msg`New post`)}
accessibilityHint="">
<View style={styles.newPostBtnIconWrapper}>
<ComposeIcon2
size={19}
strokeWidth={2}
style={styles.newPostBtnLabel}
/>
<EditBig width={19} style={styles.newPostBtnLabel} />
</View>
<Text type="button" style={styles.newPostBtnLabel}>
<Trans context="action">New Post</Trans>
@ -278,6 +288,7 @@ export function DesktopLeftNav() {
const numUnreadNotifications = useUnreadNotifications()
const numUnreadMessages = useUnreadMessageCount()
const gate = useGate()
const iconWidth = 28
if (!hasSession && !isDesktop) {
return null
@ -305,134 +316,66 @@ export function DesktopLeftNav() {
<NavItem
href="/"
icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
iconFilled={
<HomeIconSolid
strokeWidth={4}
size={isDesktop ? 24 : 28}
style={pal.text}
/>
}
icon={<Home width={iconWidth} style={pal.text} />}
iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
label={_(msg`Home`)}
/>
<NavItem
href="/search"
icon={
<MagnifyingGlassIcon2
strokeWidth={2}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
}
icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
iconFilled={
<MagnifyingGlassIcon2Solid
strokeWidth={2}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
<MagnifyingGlassFilled style={pal.text} width={iconWidth} />
}
label={_(msg`Search`)}
/>
<NavItem
href="/notifications"
count={numUnreadNotifications}
icon={
<BellIcon
strokeWidth={2}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
}
iconFilled={
<BellIconSolid
strokeWidth={1.5}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
}
icon={<Bell width={iconWidth} style={pal.text} />}
iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
label={_(msg`Notifications`)}
/>
{gate('dms') && (
<NavItem
href="/messages"
count={numUnreadMessages.numUnread}
icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />}
iconFilled={
<EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} />
}
icon={<Message style={pal.text} width={iconWidth} />}
iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
label={_(msg`Messages`)}
/>
)}
<NavItem
href="/feeds"
icon={
<HashtagIcon
strokeWidth={2.25}
<Hashtag
style={pal.text as FontAwesomeIconStyle}
size={isDesktop ? 24 : 28}
width={iconWidth}
/>
}
iconFilled={
<HashtagIcon
strokeWidth={4}
<HashtagFilled
style={pal.text as FontAwesomeIconStyle}
size={isDesktop ? 24 : 28}
width={iconWidth}
/>
}
label={_(msg`Feeds`)}
/>
<NavItem
href="/lists"
icon={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={2}
/>
}
iconFilled={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={3}
/>
}
icon={<List style={pal.text} width={iconWidth} />}
iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
label={_(msg`Lists`)}
/>
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
icon={
<UserIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
iconFilled={
<UserIconSolid
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
icon={<UserCircle width={iconWidth} style={pal.text} />}
iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
label={_(msg`Profile`)}
/>
<NavItem
href="/settings"
icon={
<CogIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
iconFilled={
<CogIconSolid
strokeWidth={1.5}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
icon={<Settings width={iconWidth} style={pal.text} />}
iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
label={_(msg`Settings`)}
/>
@ -494,7 +437,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
height: 24,
marginTop: 2,
zIndex: 1,
},