diff --git a/assets/icons/bell2_filled_corner0_rounded.svg b/assets/icons/bell2_filled_corner0_rounded.svg new file mode 100644 index 0000000000..9c66129b11 --- /dev/null +++ b/assets/icons/bell2_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/bell2_stroke2_corner0_rounded.svg b/assets/icons/bell2_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..577bc5eaa1 --- /dev/null +++ b/assets/icons/bell2_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/bulletList_filled_corner0_rounded.svg b/assets/icons/bulletList_filled_corner0_rounded.svg new file mode 100644 index 0000000000..b70d589952 --- /dev/null +++ b/assets/icons/bulletList_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/bulletList_stroke2_corner0_rounded.svg b/assets/icons/bulletList_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..4f7911bada --- /dev/null +++ b/assets/icons/bulletList_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/editBig_stroke2_corner0_rounded.svg b/assets/icons/editBig_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..16ca3d4c85 --- /dev/null +++ b/assets/icons/editBig_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/hashtag_filled_corner0_rounded.svg b/assets/icons/hashtag_filled_corner0_rounded.svg new file mode 100644 index 0000000000..5512179dce --- /dev/null +++ b/assets/icons/hashtag_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/homeOpen_filled_corner0_rounded.svg b/assets/icons/homeOpen_filled_corner0_rounded.svg new file mode 100644 index 0000000000..e3ab6e2039 --- /dev/null +++ b/assets/icons/homeOpen_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/homeOpen_stroke2_corner0_rounded.svg b/assets/icons/homeOpen_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..698f5d5db7 --- /dev/null +++ b/assets/icons/homeOpen_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/magnifyingGlass_filled_corner0_rounded.svg b/assets/icons/magnifyingGlass_filled_corner0_rounded.svg new file mode 100644 index 0000000000..b0c9ddefac --- /dev/null +++ b/assets/icons/magnifyingGlass_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/settingsGear2_filled_corner0_rounded.svg b/assets/icons/settingsGear2_filled_corner0_rounded.svg new file mode 100644 index 0000000000..dfc89ff507 --- /dev/null +++ b/assets/icons/settingsGear2_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/userCircle_filled_corner0_rounded.svg b/assets/icons/userCircle_filled_corner0_rounded.svg new file mode 100644 index 0000000000..67bb6eac77 --- /dev/null +++ b/assets/icons/userCircle_filled_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/userCircle_stroke2_corner0_rounded.svg b/assets/icons/userCircle_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..ffad04f2b7 --- /dev/null +++ b/assets/icons/userCircle_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/icons/Bell2.tsx b/src/components/icons/Bell2.tsx new file mode 100644 index 0000000000..084445b1d1 --- /dev/null +++ b/src/components/icons/Bell2.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Bell2_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4.702 8.943a7.307 7.307 0 0 1 14.596 0l.19 3.798 1.321 2.641A1.809 1.809 0 0 1 19.191 18H16.9a5.002 5.002 0 0 1-9.8 0H4.809a1.809 1.809 0 0 1-1.618-2.618l1.32-2.641.19-3.798ZM9.17 18a3.001 3.001 0 0 0 5.658 0H9.171ZM12 4a5.307 5.307 0 0 0-5.3 5.042l-.19 3.798a2 2 0 0 1-.21.795L5.119 16h13.764l-1.183-2.365a2 2 0 0 1-.208-.795l-.19-3.798A5.308 5.308 0 0 0 12 4Z', +}) + +export const Bell2_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 2a7.307 7.307 0 0 0-7.298 6.943l-.19 3.798-1.321 2.641A1.809 1.809 0 0 0 4.809 18H7.1a5.002 5.002 0 0 0 9.8 0h2.291a1.809 1.809 0 0 0 1.618-2.618l-1.32-2.641-.19-3.798A7.308 7.308 0 0 0 12 2Zm0 18a3.001 3.001 0 0 1-2.83-2h5.66A3.001 3.001 0 0 1 12 20Z', +}) diff --git a/src/components/icons/BulletList.tsx b/src/components/icons/BulletList.tsx new file mode 100644 index 0000000000..58847d9d96 --- /dev/null +++ b/src/components/icons/BulletList.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const BulletList_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', +}) + +export const BulletList_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm0 10a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm10-1a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2h-7Zm-1-9a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', +}) diff --git a/src/components/icons/EditBig.tsx b/src/components/icons/EditBig.tsx new file mode 100644 index 0000000000..571f38b3e1 --- /dev/null +++ b/src/components/icons/EditBig.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const EditBig_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z', +}) diff --git a/src/components/icons/Hashtag.tsx b/src/components/icons/Hashtag.tsx index 668ed92566..930484fb21 100644 --- a/src/components/icons/Hashtag.tsx +++ b/src/components/icons/Hashtag.tsx @@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE' export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: 'M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z', }) + +export const Hashtag_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M9.186 2.512a1.5 1.5 0 0 0-1.674 1.302L7.176 6.5H4a1.5 1.5 0 1 0 0 3h2.8l-.624 5H4a1.5 1.5 0 0 0 0 3h1.8l-.288 2.314a1.5 1.5 0 1 0 2.976.372l.336-2.686h4.977l-.29 2.314a1.5 1.5 0 1 0 2.977.372l.336-2.686H20a1.5 1.5 0 0 0 0-3h-2.8l.624-5H20a1.5 1.5 0 0 0 0-3h-1.8l.288-2.314a1.5 1.5 0 1 0-2.976-.372L15.176 6.5h-4.977l.29-2.314a1.5 1.5 0 0 0-1.303-1.674ZM9.2 14.5l.625-5h4.977l-.625 5H9.199Z', +}) diff --git a/src/components/icons/HomeOpen.tsx b/src/components/icons/HomeOpen.tsx new file mode 100644 index 0000000000..1b7df5aa90 --- /dev/null +++ b/src/components/icons/HomeOpen.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const HomeOpen_Stoke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M11.37 1.724a1 1 0 0 1 1.26 0l8 6.5A1 1 0 0 1 21 9v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 .37-.776l8-6.5ZM5 9.476V19h4v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h4V9.476l-7-5.688-7 5.688Z', +}) + +export const HomeOpen_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M12.63 1.724a1 1 0 0 0-1.26 0l-8 6.5A1 1 0 0 0 3 9v11a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-6h4v6a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-.37-.776l-8-6.5Z', +}) diff --git a/src/components/icons/MagnifyingGlass.tsx b/src/components/icons/MagnifyingGlass.tsx new file mode 100644 index 0000000000..de5f83c9cb --- /dev/null +++ b/src/components/icons/MagnifyingGlass.tsx @@ -0,0 +1,6 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const MagnifyingGlass_Filled_Stroke2_Corner0_Rounded = + createSinglePathSVG({ + path: 'M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3Zm4 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z', + }) diff --git a/src/components/icons/SettingsGear2.tsx b/src/components/icons/SettingsGear2.tsx new file mode 100644 index 0000000000..2cc0661bb4 --- /dev/null +++ b/src/components/icons/SettingsGear2.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z', +}) + +export const SettingsGear2_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M9.996 2.869A1.951 1.951 0 0 1 11.62 2h.76c.653 0 1.262.326 1.624.869l1.141 1.712 1.749-.404a1.951 1.951 0 0 1 1.819.522l.588.589c.476.475.673 1.162.522 1.818l-.404 1.749 1.712 1.141c.543.362.869.971.869 1.624v.76c0 .653-.326 1.262-.869 1.624l-1.712 1.141.404 1.749a1.951 1.951 0 0 1-.522 1.819l-.588.588a1.951 1.951 0 0 1-1.819.522l-1.749-.404-1.141 1.712A1.951 1.951 0 0 1 12.38 22h-.76a1.951 1.951 0 0 1-1.624-.869L8.855 19.42l-1.749.404a1.951 1.951 0 0 1-1.818-.522l-.59-.588a1.951 1.951 0 0 1-.52-1.819l.403-1.749-1.712-1.141A1.951 1.951 0 0 1 2 12.38v-.76c0-.653.326-1.262.869-1.624L4.58 8.855l-.404-1.749A1.951 1.951 0 0 1 4.7 5.288l.589-.59a1.951 1.951 0 0 1 1.818-.52l1.749.403 1.141-1.712ZM8.5 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z', +}) diff --git a/src/components/icons/UserCircle.tsx b/src/components/icons/UserCircle.tsx new file mode 100644 index 0000000000..d30466f080 --- /dev/null +++ b/src/components/icons/UserCircle.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const UserCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 4a8 8 0 0 0-5.935 13.365C7.56 15.895 9.612 15 12 15c2.388 0 4.44.894 5.935 2.365A8 8 0 0 0 12 4Zm4.412 14.675C15.298 17.636 13.792 17 12 17c-1.791 0-3.298.636-4.412 1.675A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.412-1.325ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10a9.98 9.98 0 0 1-3.462 7.567A9.965 9.965 0 0 1 12 22a9.965 9.965 0 0 1-6.538-2.433A9.98 9.98 0 0 1 2 12Zm10-4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z', +}) + +export const UserCircle_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3-12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-3 10a7.976 7.976 0 0 1-5.714-2.4C7.618 16.004 9.605 15 12 15c2.396 0 4.383 1.005 5.714 2.6A7.976 7.976 0 0 1 12 20Z', +}) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index f7915747e5..4b7e34bee3 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -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,10 +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 { + Bell2_Filled_Corner0_Rounded as BellFilled, + Bell2_Stroke2_Corner0_Rounded as Bell, +} from '#/components/icons/Bell2' +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() { @@ -258,11 +270,7 @@ function ComposeBtn() { accessibilityLabel={_(msg`New post`)} accessibilityHint=""> - + New Post @@ -280,6 +288,7 @@ export function DesktopLeftNav() { const numUnreadNotifications = useUnreadNotifications() const numUnreadMessages = useUnreadMessageCount() const gate = useGate() + const iconWidth = isDesktop ? 28 : 32 if (!hasSession && !isDesktop) { return null @@ -307,134 +316,66 @@ export function DesktopLeftNav() { } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Home`)} /> - } + icon={} iconFilled={ - + } label={_(msg`Search`)} /> - } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Notifications`)} /> {gate('dms') && ( } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Messages`)} /> )} } iconFilled={ - } label={_(msg`Feeds`)} /> - } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Lists`)} /> - } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Profile`)} /> - } - iconFilled={ - - } + icon={} + iconFilled={} label={_(msg`Settings`)} /> @@ -496,7 +437,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: 28, - height: 28, + height: 24, marginTop: 2, zIndex: 1, },