Remove FontAwesome (#10528)

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/util/LoadMoreRetryBtn.tsx

@@ -1,10 +1,7 @@
 import {StyleSheet} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 
 import {usePalette} from '#/lib/hooks/usePalette'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateIcon} from '#/components/icons/ArrowRotate'
 import {Button} from './forms/Button'
 import {Text} from './text/Text'
 
@@ -18,11 +15,7 @@ export function LoadMoreRetryBtn({
   const pal = usePalette('default')
   return (
     <Button type="default-light" onPress={onPress} style={styles.loadMoreRetry}>
-      <FontAwesomeIcon
-        icon="arrow-rotate-left"
-        style={pal.textLight as FontAwesomeIconStyle}
-        size={18}
-      />
+      <ArrowRotateIcon width={18} style={pal.textLight} />
       <Text style={[pal.textLight, styles.label]}>{label}</Text>
     </Button>
   )

src/view/com/util/UserAvatar.tsx

@@ -5,13 +5,13 @@ import {
   Pressable,
   type StyleProp,
   StyleSheet,
+  Text as RNText,
   View,
   type ViewStyle,
 } from 'react-native'
 import Svg, {Circle, Path, Rect} from 'react-native-svg'
 import {Image as ExpoImage} from 'expo-image'
 import {type ModerationUI} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -270,13 +270,27 @@ let UserAvatar = ({
           a.right_0,
           a.bottom_0,
           a.rounded_full,
-          {backgroundColor: t.palette.white},
+          {width: 16, height: 16},
+          a.align_center,
+          a.justify_center,
+          {backgroundColor: t.palette.pink},
+          {transform: [{scale: size / 42}]},
         ]}>
-        <FontAwesomeIcon
-          icon="exclamation-circle"
-          style={{color: t.palette.negative_400}}
-          size={Math.floor(size / 3)}
-        />
+        <RNText
+          style={[
+            a.text_sm,
+            a.font_bold,
+            a.text_center,
+            {
+              color: t.palette.white,
+              includeFontPadding: false,
+              textAlignVertical: 'center',
+            },
+          ]}
+          minimumFontScale={1}
+          maxFontSizeMultiplier={1}>
+          !
+        </RNText>
       </View>
     )
   }, [moderation?.alert, size, t])

src/view/com/util/error/ErrorMessage.tsx

@@ -1,21 +1,12 @@
-import {
-  type StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
 
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useTheme} from '#/lib/ThemeContext'
+import {atoms as a, useGutters, useTheme, utils} from '#/alf'
+import {Button} from '#/components/Button'
+import {ArrowRotateClockwise_Stroke2_Corner0_Rounded as ArrowRotateIcon} from '#/components/icons/ArrowRotate'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import * as Layout from '#/components/Layout'
-import {Text} from '../text/Text'
+import {Text} from '#/components/Typography'
 
 export function ErrorMessage({
   message,
@@ -28,72 +19,51 @@ export function ErrorMessage({
   style?: StyleProp<ViewStyle>
   onPressTryAgain?: () => void
 }) {
-  const theme = useTheme()
-  const pal = usePalette('error')
-  const {_} = useLingui()
+  const {t: l} = useLingui()
+  const t = useTheme()
+  const gutter = useGutters(['base'])
+
   return (
     <Layout.Center>
-      <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
-        <View
-          style={[
-            styles.errorIcon,
-            {backgroundColor: theme.palette.error.icon},
-          ]}>
-          <FontAwesomeIcon
-            icon="exclamation"
-            style={pal.text as FontAwesomeIconStyle}
-            size={16}
-          />
-        </View>
+      <View
+        testID="errorMessageView"
+        style={[
+          a.flex_row,
+          a.align_center,
+          gutter,
+          a.py_sm,
+          {backgroundColor: t.palette.pink},
+          a.gap_md,
+          style,
+        ]}>
+        <WarningIcon size="md" fill={t.palette.white} />
         <Text
-          type="sm-medium"
-          style={[styles.message, pal.text]}
+          style={[
+            a.flex_1,
+            a.font_medium,
+            a.leading_snug,
+            a.text_md,
+            {color: t.palette.white},
+          ]}
           numberOfLines={numberOfLines}>
           {message}
         </Text>
         {onPressTryAgain && (
-          <TouchableOpacity
+          <Button
             testID="errorMessageTryAgainButton"
-            style={styles.btn}
             onPress={onPressTryAgain}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Retry`)}
-            accessibilityHint={_(
-              msg`Retries the last action, which errored out`,
-            )}>
-            <FontAwesomeIcon
-              icon="arrows-rotate"
-              style={{color: theme.palette.error.icon}}
-              size={18}
-            />
-          </TouchableOpacity>
+            label={l`Retry`}
+            accessibilityHint={l`Retries the last action, which errored out`}
+            size="small"
+            shape="round"
+            variant="ghost"
+            hoverStyle={{
+              backgroundColor: utils.alpha(t.palette.white, 0.2),
+            }}>
+            <ArrowRotateIcon size="md" fill={t.palette.white} />
+          </Button>
         )}
       </View>
     </Layout.Center>
   )
 }
-
-const styles = StyleSheet.create({
-  outer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-  },
-  errorIcon: {
-    borderRadius: 12,
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 8,
-  },
-  message: {
-    flex: 1,
-    paddingRight: 10,
-  },
-  btn: {
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
-})

src/view/com/util/error/ErrorScreen.tsx

@@ -1,8 +1,4 @@
 import {View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -11,6 +7,7 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotate'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
 
@@ -56,11 +53,7 @@ export function ErrorScreen({
               a.justify_center,
               {backgroundColor: t.palette.contrast_950},
             ]}>
-            <FontAwesomeIcon
-              icon="exclamation"
-              style={pal.textInverted as FontAwesomeIconStyle}
-              size={24}
-            />
+            <WarningIcon width={24} style={pal.textInverted} />
           </View>
         </View>
         <Text style={[a.text_center, a.font_bold, a.text_2xl, a.mb_md]}>