Change many border widths from 1 to hairlineWidth (#4294)

* feed items * update some more * moar * profile card * composer and notifications * settings screen * remove border from first item in feeds * remove border from first item in feeds * more removal of top border * fix flatlist rendering * oops * scroll to top fab * a.border * centeredview/list * placeholder * web sidebar * search posts * feeds list * user lists * list header * account list width 1 * hide top border feedgens * same for lists * fix tab bar web desktop * wait... * show the border on desktop web * fix lists * fix lists * round
2024-05-30 21:32:54 -07:00 · 2024-05-30 21:32:54 -07:00 · 89c9fd3be1
commit 89c9fd3be1
parent 8569e2e389
33 changed files with 227 additions and 144 deletions
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@ -52,6 +52,7 @@ import {IconCircle} from '#/components/IconCircle'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
 import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass'
 import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
+import hairlineWidth = StyleSheet.hairlineWidth

 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>

@ -856,13 +857,13 @@ const styles = StyleSheet.create({
    paddingHorizontal: 16,
    paddingVertical: 14,
    gap: 12,
-    borderBottomWidth: 1,
+    borderBottomWidth: hairlineWidth,
  },
  savedFeedMobile: {
    paddingVertical: 10,
  },
  offlineSlug: {
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
    borderRadius: 4,
    paddingHorizontal: 4,
    paddingVertical: 2,
--- a/src/view/screens/Lists.tsx
+++ b/src/view/screens/Lists.tsx
@ -1,20 +1,22 @@
 import React from 'react'
-import {View} from 'react-native'
-import {useFocusEffect, useNavigation} from '@react-navigation/native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {StyleSheet, View} from 'react-native'
 import {AtUri} from '@atproto/api'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {MyLists} from '#/view/com/lists/MyLists'
-import {Text} from 'view/com/util/text/Text'
-import {Button} from 'view/com/util/forms/Button'
-import {NavigationProp} from 'lib/routes/types'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Trans} from '@lingui/macro'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
+
+import {useModalControls} from '#/state/modals'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {NavigationProp} from 'lib/routes/types'
 import {s} from 'lib/styles'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useModalControls} from '#/state/modals'
-import {Trans} from '@lingui/macro'
+import {MyLists} from '#/view/com/lists/MyLists'
+import {Button} from 'view/com/util/forms/Button'
+import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
+import {Text} from 'view/com/util/text/Text'
+import hairlineWidth = StyleSheet.hairlineWidth

 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
 export function ListsScreen({}: Props) {
@ -51,7 +53,10 @@ export function ListsScreen({}: Props) {
      <SimpleViewHeader
        showBackButton={isMobile}
        style={
-          !isMobile && [pal.border, {borderLeftWidth: 1, borderRightWidth: 1}]
+          !isMobile && [
+            pal.border,
+            {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth},
+          ]
        }>
        <View style={{flex: 1}}>
          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@ -1,37 +1,38 @@
 import React from 'react'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
-import {
-  NativeStackScreenProps,
-  NotificationsTabNavigatorParams,
-} from 'lib/routes/types'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {Feed} from '../com/notifications/Feed'
-import {TextLink} from 'view/com/util/Link'
-import {ListMethods} from 'view/com/util/List'
-import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
-import {MainScrollProvider} from '../com/util/MainScrollProvider'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {s, colors} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics/analytics'
+
+import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {logger} from '#/logger'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {isNative} from '#/platform/detection'
+import {emitSoftReset, listenSoftReset} from '#/state/events'
+import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 import {
  useUnreadNotifications,
  useUnreadNotificationsApi,
 } from '#/state/queries/notifications/unread'
-import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
-import {listenSoftReset, emitSoftReset} from '#/state/events'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {isNative} from '#/platform/detection'
-import {FAB} from '../com/util/fab/FAB'
-import {ComposeIcon2} from 'lib/icons'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {ComposeIcon2} from 'lib/icons'
+import {
+  NativeStackScreenProps,
+  NotificationsTabNavigatorParams,
+} from 'lib/routes/types'
+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 {Feed} from '../com/notifications/Feed'
+import {FAB} from '../com/util/fab/FAB'
+import {MainScrollProvider} from '../com/util/MainScrollProvider'
+import {ViewHeader} from '../com/util/ViewHeader'

 type Props = NativeStackScreenProps<
  NotificationsTabNavigatorParams,
@ -145,7 +146,11 @@ export function NotificationsScreen({}: Props) {

  return (
    <View testID="notificationsScreen" style={s.hContentRegion}>
-      <ViewHeader title={_(msg`Notifications`)} canGoBack={false} />
+      <ViewHeader
+        title={_(msg`Notifications`)}
+        canGoBack={false}
+        showBorder={true}
+      />
      <MainScrollProvider>
        <Feed
          onScrolledDownChange={setIsScrolledDown}
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@ -65,6 +65,7 @@ import {useDialogControl} from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
+import hairlineWidth = StyleSheet.hairlineWidth

 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@ -802,7 +803,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
          <View
            style={[
              {
-                borderTopWidth: 1,
+                borderTopWidth: hairlineWidth,
                padding: isMobile ? 14 : 20,
                gap: 12,
              },
@ -953,7 +954,7 @@ function ErrorScreen({error}: {error: string}) {
          marginTop: 10,
          paddingHorizontal: 18,
          paddingVertical: 14,
-          borderTopWidth: 1,
+          borderTopWidth: hairlineWidth,
        },
      ]}>
      <Text type="title-lg" style={[pal.text, s.mb10]}>
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@ -66,6 +66,7 @@ import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 import {navigate, resetToTab} from '#/Navigation'
 import {Email2FAToggle} from './Email2FAToggle'
 import {ExportCarDialog} from './ExportCarDialog'
+import hairlineWidth = StyleSheet.hairlineWidth

 function SettingsAccountCard({
  account,
@ -317,7 +318,7 @@ export function SettingsScreen({}: Props) {
        showBackButton={isMobile}
        style={[
          pal.border,
-          {borderBottomWidth: 1},
+          {borderBottomWidth: hairlineWidth},
          !isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
        ]}>
        <View style={{flex: 1}}>