acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Replace icons in bottom bars

Browse Source
This commit is contained in:
Eric Bailey
2024-05-09 21:59:29 -05:00
parent 5b38567b18
commit 5143b3ca3a
3 changed files with 69 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/bottom-bar/BottomBar.tsx
+35 -37
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,6 +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 {
Bell2_Filled_Corner0_Rounded as BellFilled,
Bell2_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell2'
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,
@@ -80,6 +85,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const accountSwitchControl = useDialogControl()
const playHaptic = useHaptics()
const gate = useGate()
const iconWidth = 30
const showSignIn = React.useCallback(() => {
closeAllActiveElements()
@@ -154,15 +160,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarHomeBtn"
icon={
isAtHome ? (
<HomeIconSolid
strokeWidth={4}
size={24}
<HomeFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
) : (
<HomeIcon
strokeWidth={4}
size={24}
<Home
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@@ -176,16 +180,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarSearchBtn"
icon={
isAtSearch ? (
<MagnifyingGlassIcon2Solid
size={25}
<MagnifyingGlassFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
) : (
<MagnifyingGlassIcon2
size={25}
<MagnifyingGlass
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
)
}
@@ -198,16 +200,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarFeedsBtn"
icon={
isAtFeeds ? (
<HashtagIcon
size={24}
<HashtagFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={4}
/>
) : (
<HashtagIcon
size={24}
<Hashtag
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={2.25}
/>
)
}
@@ -220,15 +220,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarNotificationsBtn"
icon={
isAtNotifications ? (
<BellIconSolid
size={24}
strokeWidth={1.9}
<BellFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
) : (
<BellIcon
size={24}
strokeWidth={1.9}
<Bell
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
@@ -250,12 +248,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
icon={
isAtMessages ? (
<MessageFilled
size="lg"
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
) : (
<Message
size="lg"
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
)
@@ -287,7 +285,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
]}>
<UserAvatar
avatar={profile?.avatar}
size={27}
size={iconWidth}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -298,7 +296,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
<UserAvatar
avatar={profile?.avatar}
size={28}
size={iconWidth}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
src/view/shell/bottom-bar/BottomBarStyles.tsx
+3
View File
@@ -64,6 +64,9 @@ export const styles = StyleSheet.create({
top: -2.5,
},
profileIcon: {
borderRadius: 100,
borderWidth: 1,
borderColor: 'transparent',
top: -4,
},
messagesIcon: {
src/view/shell/bottom-bar/BottomBarWeb.tsx
+31 -29
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,10 +22,28 @@ 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 {
Bell2_Filled_Corner0_Rounded as BellFilled,
Bell2_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell2'
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 {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {styles} from './BottomBarStyles'
export function BottomBarWeb() {
@@ -48,6 +55,7 @@ export function BottomBarWeb() {
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
const gate = useGate()
const iconWidth = 28
const showSignIn = React.useCallback(() => {
closeAllActiveElements()
@@ -74,11 +82,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}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@@ -86,14 +93,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}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
strokeWidth={1.8}
/>
)
}}
@@ -103,22 +107,21 @@ export function BottomBarWeb() {
<>
<NavItem routeName="Feeds" href="/feeds">
{({isActive}) => {
const Icon = isActive ? HashtagFilled : Hashtag
return (
<HashtagIcon
size={22}
<Icon
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
strokeWidth={isActive ? 4 : 2.5}
/>
)
}}
</NavItem>
<NavItem routeName="Notifications" href="/notifications">
{({isActive}) => {
const Icon = isActive ? BellIconSolid : BellIcon
const Icon = isActive ? BellFilled : Bell
return (
<Icon
size={24}
strokeWidth={1.9}
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
/>
)
@@ -130,7 +133,7 @@ export function BottomBarWeb() {
const Icon = isActive ? MessageFilled : Message
return (
<Icon
size="lg"
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
/>
)
@@ -148,11 +151,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]}
/>
)