diff options
Diffstat (limited to 'src/view/shell')
-rw-r--r-- | src/view/shell/Drawer.tsx | 15 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 19 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBarStyles.tsx | 3 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 12 | ||||
-rw-r--r-- | src/view/shell/desktop/Feeds.tsx | 92 | ||||
-rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 13 | ||||
-rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 5 | ||||
-rw-r--r-- | src/view/shell/desktop/Search.tsx | 1 |
8 files changed, 126 insertions, 34 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 3a4b8947a..174e4a806 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -28,8 +28,7 @@ import { MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, UserIconSolid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, HandIcon, } from 'lib/icons' import {UserAvatar} from 'view/com/util/UserAvatar' @@ -258,21 +257,21 @@ export const DrawerContent = observer(function DrawerContentImpl() { <MenuItem icon={ isAtFeeds ? ( - <SatelliteDishIconSolid - strokeWidth={1.5} + <HashtagIcon + strokeWidth={3} style={pal.text as FontAwesomeIconStyle} size={24} /> ) : ( - <SatelliteDishIcon - strokeWidth={1.5} + <HashtagIcon + strokeWidth={2} style={pal.text as FontAwesomeIconStyle} size={24} /> ) } - label="My Feeds" - accessibilityLabel="My Feeds" + label="Feeds" + accessibilityLabel="Feeds" accessibilityHint="" onPress={onPressMyFeeds} /> diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 4a34371ea..8ba74da2e 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -18,8 +18,7 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, BellIcon, BellIconSolid, } from 'lib/icons' @@ -134,16 +133,16 @@ export const BottomBar = observer(function BottomBarImpl({ testID="bottomBarFeedsBtn" icon={ isAtFeeds ? ( - <SatelliteDishIconSolid - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={24} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={4} /> ) : ( - <SatelliteDishIcon - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={24} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={2.25} /> ) } diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index f31ab44cf..ae9381440 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx @@ -49,6 +49,9 @@ export const styles = StyleSheet.create({ homeIcon: { top: 0, }, + feedsIcon: { + top: -2, + }, searchIcon: { top: -2, }, diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index af70d3364..6448eea63 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -15,8 +15,7 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, UserIcon, UserIconSolid, } from 'lib/icons' @@ -68,12 +67,11 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() { </NavItem> <NavItem routeName="Feeds" href="/feeds"> {({isActive}) => { - const Icon = isActive ? SatelliteDishIconSolid : SatelliteDishIcon return ( - <Icon - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={22} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={isActive ? 4 : 2.5} /> ) }} diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx new file mode 100644 index 000000000..4da1401c3 --- /dev/null +++ b/src/view/shell/desktop/Feeds.tsx @@ -0,0 +1,92 @@ +import React from 'react' +import {View, StyleSheet} from 'react-native' +import {useNavigationState} from '@react-navigation/native' +import {AtUri} from '@atproto/api' +import {observer} from 'mobx-react-lite' +import {useStores} from 'state/index' +import {usePalette} from 'lib/hooks/usePalette' +import {TextLink} from 'view/com/util/Link' +import {getCurrentRoute} from 'lib/routes/helpers' + +export const DesktopFeeds = observer(function DesktopFeeds() { + const store = useStores() + const pal = usePalette('default') + + const route = useNavigationState(state => { + if (!state) { + return {name: 'Home'} + } + return getCurrentRoute(state) + }) + + return ( + <View style={[styles.container, pal.view, pal.border]}> + <FeedItem href="/" title="Following" current={route.name === 'Home'} /> + {store.me.savedFeeds.pinned.map(feed => { + try { + const {hostname, rkey} = new AtUri(feed.uri) + const href = `/profile/${hostname}/feed/${rkey}` + const params = route.params as Record<string, string> + return ( + <FeedItem + key={feed.uri} + href={href} + title={feed.displayName} + current={ + route.name === 'CustomFeed' && + params.name === hostname && + params.rkey === rkey + } + /> + ) + } catch { + return null + } + })} + <View style={{paddingTop: 8, paddingBottom: 6}}> + <TextLink + type="lg" + href="/feeds" + text="More feeds" + style={[pal.link]} + /> + </View> + </View> + ) +}) + +function FeedItem({ + title, + href, + current, +}: { + title: string + href: string + current: boolean +}) { + const pal = usePalette('default') + return ( + <View style={{paddingVertical: 6}}> + <TextLink + type="xl" + href={href} + text={title} + style={[ + current ? pal.text : pal.textLight, + {letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'}, + ]} + /> + </View> + ) +} + +const styles = StyleSheet.create({ + container: { + position: 'relative', + width: 300, + paddingHorizontal: 12, + borderTopWidth: 1, + borderBottomWidth: 1, + paddingVertical: 18, + }, +}) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 8c1a33245..907df8641 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -32,8 +32,7 @@ import { CogIconSolid, ComposeIcon2, HandIcon, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, } from 'lib/icons' import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' @@ -272,20 +271,20 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() { <NavItem href="/feeds" icon={ - <SatelliteDishIcon - strokeWidth={1.75} + <HashtagIcon + strokeWidth={2.25} style={pal.text as FontAwesomeIconStyle} size={isDesktop ? 24 : 28} /> } iconFilled={ - <SatelliteDishIconSolid - strokeWidth={1.75} + <HashtagIcon + strokeWidth={2.5} style={pal.text as FontAwesomeIconStyle} size={isDesktop ? 24 : 28} /> } - label="My Feeds" + label="Feeds" /> <NavItem href="/notifications" diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index e17fa6a84..12ca256d2 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -4,6 +4,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' +import {DesktopFeeds} from './Feeds' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' @@ -26,6 +27,7 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() { return ( <View style={[styles.rightNav, pal.view]}> {store.session.hasSession && <DesktopSearch />} + {store.session.hasSession && <DesktopFeeds />} <View style={styles.message}> {store.session.isSandbox ? ( <View style={[palError.view, styles.messageLine, s.p10]}> @@ -126,7 +128,7 @@ const styles = StyleSheet.create({ }, message: { - marginTop: 20, + paddingVertical: 18, paddingHorizontal: 10, }, messageLine: { @@ -134,7 +136,6 @@ const styles = StyleSheet.create({ }, inviteCodes: { - marginTop: 12, borderTopWidth: 1, paddingHorizontal: 16, paddingVertical: 12, diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index c7b322b58..dfd4f50bf 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -113,6 +113,7 @@ const styles = StyleSheet.create({ container: { position: 'relative', width: 300, + paddingBottom: 18, }, search: { paddingHorizontal: 16, |