fix top border width for user list updates (#4340)

* fix nits in add/remove users from list screen

invert check

use `ViewHeader`

simplify

replace with hairline width

fix top border width for user list updates

* dont use `ViewHeader`

* update one more hairline

1 files changed, 30 insertions, 25 deletions

diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx
index 995af7da2..88506da57 100644
--- a/src/view/com/modals/UserAddRemoveLists.tsx
+++ b/src/view/com/modals/UserAddRemoveLists.tsx
@@ -6,28 +6,30 @@ import {
   View,
 } from 'react-native'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
-import {Text} from '../util/text/Text'
-import {UserAvatar} from '../util/UserAvatar'
-import {MyLists} from '../lists/MyLists'
-import {Button} from '../util/forms/Button'
-import * as Toast from '../util/Toast'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {s} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb, isAndroid, isMobileWeb} from 'platform/detection'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
 import {useModalControls} from '#/state/modals'
 import {
-  useDangerousListMembershipsQuery,
   getMembership,
   ListMembersip,
+  useDangerousListMembershipsQuery,
   useListMembershipAddMutation,
   useListMembershipRemoveMutation,
 } from '#/state/queries/list-memberships'
-import {cleanError} from '#/lib/strings/errors'
 import {useSession} from '#/state/session'
+import {usePalette} from 'lib/hooks/usePalette'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {s} from 'lib/styles'
+import {isAndroid, isMobileWeb, isWeb} from 'platform/detection'
+import {MyLists} from '../lists/MyLists'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
+import {UserAvatar} from '../util/UserAvatar'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 export const snapPoints = ['fullscreen']
 
@@ -61,12 +63,23 @@ export function Component({
       return [pal.border, {height: screenHeight / 1.5}]
     }
 
-    return [pal.border, {flex: 1, borderTopWidth: 1}]
+    return [pal.border, {flex: 1, borderTopWidth: hairlineWidth}]
   }, [pal.border, screenHeight])
 
   return (
     <View testID="userAddRemoveListsModal" style={s.hContentRegion}>
-      <Text style={[styles.title, pal.text]}>
+      <Text
+        style={[
+          {
+            textAlign: 'center',
+            fontWeight: 'bold',
+            fontSize: 20,
+            marginBottom: 12,
+            paddingHorizontal: 12,
+          },
+          pal.text,
+        ]}
+        numberOfLines={1}>
         <Trans>Update {displayName} in Lists</Trans>
       </Text>
       <MyLists
@@ -175,9 +188,7 @@ function ListItem({
       style={[
         styles.listItem,
         pal.border,
-        {
-          borderTopWidth: index === 0 ? 0 : 1,
-        },
+        index !== 0 && {borderTopWidth: hairlineWidth},
       ]}>
       <View style={styles.listItemAvi}>
         <UserAvatar size={40} avatar={list.avatar} type="list" />
@@ -229,12 +240,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: isWeb ? 0 : 16,
   },
-  title: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
-    marginBottom: 12,
-  },
   btns: {
     position: 'relative',
     flexDirection: 'row',
@@ -243,7 +248,7 @@ const styles = StyleSheet.create({
     gap: 10,
     paddingTop: 10,
     paddingBottom: isAndroid ? 10 : 0,
-    borderTopWidth: 1,
+    borderTopWidth: hairlineWidth,
   },
   footerBtn: {
     paddingHorizontal: 24,