Fix a few border nits (#4349)

* replace w/ hairline width

* no border for placeholder

* few notifications screen fixes tablet

* still show the border on desktop

* Simp

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

3 files changed, 19 insertions, 11 deletions

diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index c632ed5dc..e2f12e84f 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -129,7 +129,11 @@ export function Feed({
         )
       } else if (item === LOADING_ITEM) {
         return (
-          <View style={[pal.border, {borderTopWidth: hairlineWidth}]}>
+          <View
+            style={[
+              pal.border,
+              !isTabletOrMobile && {borderTopWidth: hairlineWidth},
+            ]}>
             <NotificationFeedLoadingPlaceholder />
           </View>
         )
@@ -185,6 +189,7 @@ export function Feed({
         desktopFixedHeight
         initialNumToRender={initialNumToRender}
         windowSize={11}
+        sideBorders={false}
       />
     </View>
   )
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 7e2fc68b3..67b00021e 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -29,6 +29,7 @@ import {colors, s} from 'lib/styles'
 import {TextLink} from 'view/com/util/Link'
 import {ListMethods} from 'view/com/util/List'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
+import {CenteredView} from 'view/com/util/Views'
 import {Feed} from '../com/notifications/Feed'
 import {FAB} from '../com/util/fab/FAB'
 import {MainScrollProvider} from '../com/util/MainScrollProvider'
@@ -145,7 +146,10 @@ export function NotificationsScreen({}: Props) {
   }, [isDesktop, pal, hasNew])
 
   return (
-    <View testID="notificationsScreen" style={s.hContentRegion}>
+    <CenteredView
+      testID="notificationsScreen"
+      style={s.hContentRegion}
+      sideBorders={true}>
       <ViewHeader
         title={_(msg`Notifications`)}
         canGoBack={false}
@@ -173,6 +177,6 @@ export function NotificationsScreen({}: Props) {
         accessibilityLabel={_(msg`New post`)}
         accessibilityHint=""
       />
-    </View>
+    </CenteredView>
   )
 }
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index a3aee19dc..d79c7708c 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -32,6 +32,7 @@ import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
 import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
 import {atoms as a, useTheme} from '#/alf'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 const HITSLOP_TOP = {
   top: 20,
@@ -92,7 +93,7 @@ export function SavedFeeds({}: Props) {
       <ViewHeader title={_(msg`Edit My Feeds`)} showOnDesktop showBorder />
       <ScrollView style={s.flex1} contentContainerStyle={[styles.noBorder]}>
         {noSavedFeedsOfAnyType && (
-          <View style={[pal.border, {borderBottomWidth: 1}]}>
+          <View style={[pal.border, {borderBottomWidth: hairlineWidth}]}>
             <NoSavedFeedsOfAnyType />
           </View>
         )}
@@ -134,7 +135,7 @@ export function SavedFeeds({}: Props) {
         )}
 
         {noFollowingFeed && (
-          <View style={[pal.border, {borderBottomWidth: 1}]}>
+          <View style={[pal.border, {borderBottomWidth: hairlineWidth}]}>
             <NoFollowingFeed />
           </View>
         )}
@@ -298,9 +299,10 @@ function ListItem({
         <FeedSourceCard
           key={feedUri}
           feedUri={feedUri}
-          style={[styles.noTopBorder, isPinned && {paddingRight: 8}]}
+          style={[isPinned && {paddingRight: 8}]}
           showMinimalPlaceholder
           showSaveBtn={!isPinned}
+          hideTopBorder={true}
         />
       )}
       {isPinned ? (
@@ -435,15 +437,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     paddingTop: 20,
     paddingBottom: 10,
-    borderBottomWidth: 1,
+    borderBottomWidth: hairlineWidth,
   },
   itemContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottomWidth: 1,
-  },
-  noTopBorder: {
-    borderTopWidth: 0,
+    borderBottomWidth: hairlineWidth,
   },
   footerText: {
     paddingHorizontal: 26,