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

src/view/com/util/LoadingPlaceholder.tsx

@@ -15,6 +15,7 @@ import {useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 export function LoadingPlaceholder({
   width,
@@ -233,7 +234,7 @@ export function FeedLoadingPlaceholder({
         {
           paddingHorizontal: 12,
           paddingVertical: 18,
-          borderTopWidth: showTopBorder ? 1 : 0,
+          borderTopWidth: showTopBorder ? hairlineWidth : 0,
         },
         pal.border,
         style,

src/view/com/util/ViewHeader.tsx

@@ -15,6 +15,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {useTheme} from '#/alf'
 import {Text} from './text/Text'
 import {CenteredView} from './Views'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -156,7 +157,7 @@ function DesktopWebHeader({
         styles.desktopHeader,
         pal.border,
         {
-          borderBottomWidth: showBorder ? 1 : 0,
+          borderBottomWidth: showBorder ? hairlineWidth : 0,
         },
         {display: 'flex', flexDirection: 'column'},
       ]}>
@@ -245,7 +246,7 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   border: {
-    borderBottomWidth: 1,
+    borderBottomWidth: hairlineWidth,
   },
   titleContainer: {
     marginLeft: 'auto',

src/view/com/util/Views.web.tsx

@@ -26,6 +26,7 @@ import Animated from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {addStyle} from 'lib/styles'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 interface AddedProps {
   desktopFixedHeight?: boolean | number
@@ -46,8 +47,8 @@ export const CenteredView = React.forwardRef(function CenteredView({
   }
   if (sideBorders) {
     style = addStyle(style, {
-      borderLeftWidth: 1,
-      borderRightWidth: 1,
+      borderLeftWidth: hairlineWidth,
+      borderRightWidth: hairlineWidth,
     })
     style = addStyle(style, pal.border)
   }
@@ -159,8 +160,8 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl(
 
 const styles = StyleSheet.create({
   contentContainer: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
+    borderLeftWidth: hairlineWidth,
+    borderRightWidth: hairlineWidth,
     // @ts-ignore web only
     minHeight: '100vh',
   },

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -13,6 +13,7 @@ import {clamp} from '#/lib/numbers'
 import {colors} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
@@ -73,7 +74,7 @@ const styles = StyleSheet.create({
     // @ts-ignore 'fixed' is web only -prf
     position: isWeb ? 'fixed' : 'absolute',
     left: 18,
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
     width: 52,
     height: 52,
     borderRadius: 26,

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -39,6 +39,7 @@ import {Link} from '../Link'
 import {PostMeta} from '../PostMeta'
 import {Text} from '../text/Text'
 import {PostEmbeds} from '.'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 export function MaybeQuoteEmbed({
   embed,
@@ -247,7 +248,7 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingVertical: 12,
     paddingHorizontal: 12,
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
   },
   quotePost: {
     flex: 1,
@@ -262,7 +263,7 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingVertical: 14,
     paddingHorizontal: 14,
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
   },
   alert: {
     marginBottom: 6,

src/view/com/util/post-embeds/index.tsx

@@ -27,6 +27,7 @@ import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {ListEmbed} from './ListEmbed'
 import {MaybeQuoteEmbed} from './QuoteEmbed'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -187,7 +188,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   customFeedOuter: {
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
     borderRadius: 8,
     marginTop: 4,
     paddingHorizontal: 12,