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

src/view/com/modals/UserAddRemoveLists.tsx

@@ -6,28 +6,31 @@ 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
+import {ViewHeader} from 'view/com/util/ViewHeader'
 
 export const snapPoints = ['fullscreen']
 
@@ -61,14 +64,15 @@ 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]}>
-        <Trans>Update {displayName} in Lists</Trans>
-      </Text>
+      <ViewHeader
+        title={_(msg`Update ${displayName} in Lists`)}
+        showBackButton={false}
+      />
       <MyLists
         filter="all"
         inline
@@ -175,9 +179,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 +231,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: isWeb ? 0 : 16,
   },
-  title: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
-    marginBottom: 12,
-  },
   btns: {
     position: 'relative',
     flexDirection: 'row',