diff --git a/src/view/com/feeds/SavedFeeds.tsx b/src/view/com/feeds/SavedFeeds.tsx
index 2d0057cf..7135fdf0 100644
--- a/src/view/com/feeds/SavedFeeds.tsx
+++ b/src/view/com/feeds/SavedFeeds.tsx
@@ -1,10 +1,10 @@
import React, {useEffect, useCallback} from 'react'
-import {FlatList, RefreshControl, StyleSheet, View} from 'react-native'
+import {RefreshControl, StyleSheet, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
-import {CenteredView} from 'view/com/util/Views'
+import {FlatList} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {isDesktopWeb} from 'platform/detection'
import {s} from 'lib/styles'
@@ -65,31 +65,29 @@ export const SavedFeeds = observer(
)
return (
-
- item.data.uri}
- refreshing={store.me.savedFeeds.isRefreshing}
- refreshControl={
- store.me.savedFeeds.refresh()}
- tintColor={pal.colors.text}
- titleColor={pal.colors.text}
- progressViewOffset={headerOffset}
- />
- }
- renderItem={renderItem}
- initialNumToRender={10}
- ListFooterComponent={renderListFooterComponent}
- ListEmptyComponent={renderListEmptyComponent}
- extraData={store.me.savedFeeds.isLoading}
- contentOffset={{x: 0, y: headerOffset * -1}}
- // @ts-ignore our .web version only -prf
- desktopFixedHeight
- />
-
+ item.data.uri}
+ refreshing={store.me.savedFeeds.isRefreshing}
+ refreshControl={
+ store.me.savedFeeds.refresh()}
+ tintColor={pal.colors.text}
+ titleColor={pal.colors.text}
+ progressViewOffset={headerOffset}
+ />
+ }
+ renderItem={renderItem}
+ initialNumToRender={10}
+ ListFooterComponent={renderListFooterComponent}
+ ListEmptyComponent={renderListEmptyComponent}
+ extraData={store.me.savedFeeds.isLoading}
+ contentOffset={{x: 0, y: headerOffset * -1}}
+ // @ts-ignore our .web version only -prf
+ desktopFixedHeight
+ />
)
},
)
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 13ee9a68..56ca6f2a 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -28,7 +28,12 @@ const FeedsTabBarDesktop = observer(
) => {
const store = useStores()
const items = useMemo(
- () => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames],
+ () => [
+ 'Following',
+ "What's hot",
+ ...store.me.savedFeeds.pinnedFeedNames,
+ 'My feeds',
+ ],
[store.me.savedFeeds.pinnedFeedNames],
)
const pal = usePalette('default')
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index a04693fa..fe76a08b 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -107,11 +107,12 @@ const styles = isDesktopWeb
? StyleSheet.create({
outer: {
flexDirection: 'row',
- paddingHorizontal: 18,
+ width: 598,
+ paddingHorizontal: 14,
},
item: {
paddingTop: 14,
- paddingBottom: 16,
+ paddingBottom: 12,
paddingHorizontal: 12,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 97802394..7f13f183 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -20,12 +20,14 @@ export const ViewHeader = observer(function ({
canGoBack,
hideOnScroll,
showOnDesktop,
+ showBorder,
renderButton,
}: {
title: string
canGoBack?: boolean
hideOnScroll?: boolean
showOnDesktop?: boolean
+ showBorder?: boolean
renderButton?: () => JSX.Element
}) {
const pal = usePalette('default')
@@ -57,7 +59,7 @@ export const ViewHeader = observer(function ({
}
return (
-
+
{
const store = useStores()
const pal = usePalette('default')
@@ -145,11 +149,28 @@ const Container = observer(
}
if (!hideOnScroll) {
- return {children}
+ return (
+
+ {children}
+
+ )
}
return (
+ style={[
+ styles.header,
+ pal.view,
+ pal.border,
+ styles.headerFloating,
+ transform,
+ showBorder && styles.border,
+ ]}>
{children}
)
@@ -172,6 +193,9 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
paddingVertical: 12,
},
+ border: {
+ borderBottomWidth: 1,
+ },
titleContainer: {
marginLeft: 'auto',
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 9d6501d5..3313492e 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -126,5 +126,6 @@ const styles = StyleSheet.create({
},
fixedHeight: {
height: '100vh',
+ scrollbarGutter: 'stable both-edges',
},
})
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 5b9b546f..c2723f69 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -71,8 +71,17 @@ export const SavedFeeds = withAuthRequired(
}
return (
-
-
+
+
savedFeeds.reorderPinnedFeeds(data)}
- // @ts-ignore our .web version only -prf
- desktopFixedHeight
/>
)
@@ -126,8 +133,8 @@ const ListItem = observer(
}}>
@@ -173,6 +180,11 @@ const ListItem = observer(
)
const styles = StyleSheet.create({
+ desktopContainer: {
+ borderLeftWidth: 1,
+ borderRightWidth: 1,
+ minHeight: '100vh',
+ },
footer: {
paddingVertical: 20,
},
@@ -187,10 +199,11 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
alignItems: 'center',
- borderTopWidth: 1,
+ borderBottomWidth: 1,
paddingRight: 16,
},
webArrowButtonsContainer: {
+ paddingLeft: 16,
flexDirection: 'column',
justifyContent: 'space-around',
},