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

Swap bell icon, improve alignment and size

Browse Source
This commit is contained in:
Eric Bailey
2024-05-10 07:22:37 -05:00
parent c88647c8d1
commit 2dbc7419f6
7 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/bell_filled_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

assets/icons/bell_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

src/components/icons/Bell.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Bell_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z',
})
export const Bell_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z',
})
src/view/shell/bottom-bar/BottomBar.tsx
+9 -9
View File
@@ -33,9 +33,9 @@ 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'
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,
@@ -147,12 +147,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
icon={
isAtHome ? (
<HomeFilled
width={iconWidth + 2}
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
) : (
<Home
width={iconWidth + 2}
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@@ -188,12 +188,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
icon={
isAtMessages ? (
<MessageFilled
width={iconWidth}
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
) : (
<Message
width={iconWidth}
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
/>
)
@@ -251,7 +251,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
]}>
<UserAvatar
avatar={profile?.avatar}
size={iconWidth}
size={iconWidth - 3}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -262,7 +262,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
<UserAvatar
avatar={profile?.avatar}
size={iconWidth}
size={iconWidth - 3}
// 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
+4 -5
View File
@@ -9,7 +9,6 @@ export const styles = StyleSheet.create({
left: 0,
right: 0,
flexDirection: 'row',
alignItems: 'center',
borderTopWidth: 1,
paddingLeft: 5,
paddingRight: 10,
@@ -49,12 +48,12 @@ export const styles = StyleSheet.create({
marginLeft: 'auto',
marginRight: 'auto',
},
ctrlIconSizingWrapper: {
height: 28,
},
ctrlIconSizingWrapper: {},
homeIcon: {},
feedsIcon: {},
searchIcon: {},
searchIcon: {
top: -1,
},
bellIcon: {},
profileIcon: {
borderRadius: 100,
src/view/shell/bottom-bar/BottomBarWeb.tsx
+6 -6
View File
@@ -23,9 +23,9 @@ 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'
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,
@@ -81,7 +81,7 @@ export function BottomBarWeb() {
const Icon = isActive ? HomeFilled : Home
return (
<Icon
width={iconWidth + 2}
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
/>
)
@@ -107,7 +107,7 @@ export function BottomBarWeb() {
const Icon = isActive ? MessageFilled : Message
return (
<Icon
width={iconWidth}
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
/>
)
@@ -139,7 +139,7 @@ export function BottomBarWeb() {
const Icon = isActive ? UserCircleFilled : UserCircle
return (
<Icon
width={iconWidth + 2}
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
/>
)
src/view/shell/desktop/LeftNav.tsx
+3 -3
View File
@@ -34,9 +34,9 @@ import {PressableWithHover} from 'view/com/util/PressableWithHover'
import {Text} from 'view/com/util/text/Text'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {
Bell2_Filled_Corner0_Rounded as BellFilled,
Bell2_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell2'
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,