[🐴] Change up icons (#3938)
* 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
GitHub
parent
d7f3a8d01f
commit
8f56f79c6c
30 changed files with 250 additions and 266 deletions
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue