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

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