diff --git a/assets/icons/listPlus_stroke2_corner0_rounded.svg b/assets/icons/listPlus_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..c1f38e43b9 --- /dev/null +++ b/assets/icons/listPlus_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/menu_stroke2_corner0_rounded.svg b/assets/icons/menu_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..4a5ad3bdf8 --- /dev/null +++ b/assets/icons/menu_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/icons/ListPlus.tsx b/src/components/icons/ListPlus.tsx new file mode 100644 index 0000000000..fd14ac9c79 --- /dev/null +++ b/src/components/icons/ListPlus.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +/* + * This icon is off-menu, not part of the icon set + */ + +export const ListPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z', +}) diff --git a/src/components/icons/Menu.tsx b/src/components/icons/Menu.tsx new file mode 100644 index 0000000000..fb183c2224 --- /dev/null +++ b/src/components/icons/Menu.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Menu_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z', +}) diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index a81fc67802..e7a203f72f 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -10,7 +10,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Logo} from '#/view/icons/Logo' import {atoms as a, useTheme} from '#/alf' -import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {ListPlus_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/ListPlus' import {Link} from '#/components/Link' import {useKawaiiMode} from '../../../state/preferences/kawaii' import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' @@ -77,7 +77,7 @@ function HomeHeaderLayoutDesktopAndTablet({ to="/feeds" hitSlop={10} label={_(msg`View your feeds and explore more`)}> - + )} diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 1f6817ef30..4bdd417fe0 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,7 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import Animated from 'react-native-reanimated' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -16,7 +15,8 @@ import {Logo} from '#/view/icons/Logo' import {atoms} from '#/alf' import {useTheme} from '#/alf' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' -import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {ListPlus_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/ListPlus' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import {Link} from '#/components/Link' import {IS_DEV} from '#/env' @@ -55,11 +55,7 @@ export function HomeHeaderLayoutMobile({ msg`Access profile and other navigation links`, )} hitSlop={HITSLOP_10}> - + @@ -85,10 +81,7 @@ export function HomeHeaderLayoutMobile({ to="/feeds" hitSlop={HITSLOP_10} label={_(msg`View your feeds and explore more`)}> - + )} @@ -112,7 +105,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - paddingHorizontal: 18, + paddingHorizontal: 16, paddingVertical: 8, width: '100%', }, diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 549fc5151a..edc6b75f9d 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -21,6 +21,7 @@ import {Text} from '../util/text/Text' import {UserAvatar, UserAvatarType} from '../util/UserAvatar' import {CenteredView} from '../util/Views' import hairlineWidth = StyleSheet.hairlineWidth +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' export function ProfileSubpageHeader({ isLoading, @@ -103,11 +104,7 @@ export function ProfileSubpageHeader({ style={[styles.backIcon, pal.text]} /> ) : ( - + )} @@ -194,7 +191,7 @@ const styles = StyleSheet.create({ backBtnWide: { width: 20, height: 30, - paddingHorizontal: 6, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx index 814b2fb15d..dc14723d2f 100644 --- a/src/view/com/util/SimpleViewHeader.tsx +++ b/src/view/com/util/SimpleViewHeader.tsx @@ -8,13 +8,15 @@ import { } from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useNavigation} from '@react-navigation/native' -import {CenteredView} from './Views' + +import {isWeb} from '#/platform/detection' +import {useSetDrawerOpen} from '#/state/shell' +import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAnalytics} from 'lib/analytics/analytics' import {NavigationProp} from 'lib/routes/types' -import {useSetDrawerOpen} from '#/state/shell' -import {isWeb} from '#/platform/detection' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {CenteredView} from './Views' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -72,11 +74,7 @@ export function SimpleViewHeader({ style={[styles.backIcon, pal.text]} /> ) : ( - + )} ) : null} @@ -110,7 +108,8 @@ const styles = StyleSheet.create({ backBtnWide: { width: 30, height: 30, - paddingHorizontal: 6, + paddingLeft: 4, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 4c0f0e3e5c..5197e2dfe2 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -16,6 +16,7 @@ import {useTheme} from '#/alf' import {Text} from './text/Text' import {CenteredView} from './Views' import hairlineWidth = StyleSheet.hairlineWidth +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -98,11 +99,7 @@ export function ViewHeader({ style={[styles.backIcon, pal.text]} /> ) : !isTablet ? ( - + ) : null} ) : null} @@ -269,7 +266,8 @@ const styles = StyleSheet.create({ backBtnWide: { width: 30, height: 30, - paddingHorizontal: 6, + paddingLeft: 4, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 118a8be25b..552d5e5e9f 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -59,6 +59,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {atoms as a} from '#/alf' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' function Loader() { const pal = usePalette('default') @@ -712,11 +713,7 @@ export function SearchScreen( accessibilityRole="button" accessibilityLabel={_(msg`Menu`)} accessibilityHint={_(msg`Access navigation links and settings`)}> - + )}