Remove FontAwesome (#10528)

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

src/view/com/auth/SplashScreen.web.tsx

@@ -1,6 +1,5 @@
 import {useEffect, useState} from 'react'
 import {Pressable, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -17,6 +16,7 @@ import {
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as TimesIcon} from '#/components/icons/Times'
 import * as Layout from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -61,13 +61,7 @@ export const SplashScreen = ({
             zIndex: 100,
           }}
           onPress={onDismiss}>
-          <FontAwesomeIcon
-            icon="x"
-            size={24}
-            style={{
-              color: String(t.atoms.text.color),
-            }}
-          />
+          <TimesIcon width={24} style={t.atoms.text} />
         </Pressable>
       )}
 

src/view/com/composer/photos/Gallery.tsx

@@ -11,7 +11,6 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {Image} from 'expo-image'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -23,6 +22,10 @@ import {type ComposerImage, cropImage} from '#/state/gallery'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import * as Dialog from '#/components/Dialog'
+import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {Pencil_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
+import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
+import {TimesLarge_Stroke2_Corner0_Rounded as TimesIcon} from '#/components/icons/Times'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
@@ -198,17 +201,9 @@ const GalleryItem = ({
         onPress={onAltTextEdit}
         style={[styles.altTextControl, altTextControlStyle]}>
         {image.alt.length !== 0 ? (
-          <FontAwesomeIcon
-            icon="check"
-            size={10}
-            style={{color: t.palette.white}}
-          />
+          <CheckIcon width={10} style={{color: t.palette.white}} />
         ) : (
-          <FontAwesomeIcon
-            icon="plus"
-            size={10}
-            style={{color: t.palette.white}}
-          />
+          <PlusIcon width={10} style={{color: t.palette.white}} />
         )}
         <Text style={styles.altTextControlLabel} accessible={false}>
           <Trans>ALT</Trans>
@@ -222,7 +217,7 @@ const GalleryItem = ({
           accessibilityHint=""
           onPress={onImageEdit}
           style={styles.imageControl}>
-          <FontAwesomeIcon icon="pen" size={12} style={{color: colors.white}} />
+          <PencilIcon width={12} style={{color: colors.white}} />
         </TouchableOpacity>
         <TouchableOpacity
           testID="removePhotoButton"
@@ -231,11 +226,7 @@ const GalleryItem = ({
           accessibilityHint=""
           onPress={onRemove}
           style={styles.imageControl}>
-          <FontAwesomeIcon
-            icon="xmark"
-            size={16}
-            style={{color: colors.white}}
-          />
+          <TimesIcon width={16} style={{color: colors.white}} />
         </TouchableOpacity>
       </View>
       <TouchableOpacity

src/view/com/posts/CustomFeedEmptyState.tsx

@@ -1,10 +1,6 @@
 import {useCallback, useEffect, useRef} from 'react'
 import {StyleSheet, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {DISCOVER_FEED_URI} from '#/lib/constants'
@@ -14,9 +10,11 @@ import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useSession} from '#/state/session'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
 import {useAnalytics} from '#/analytics'
 import {IS_WEB} from '#/env'
-import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 
 export function CustomFeedEmptyState() {
@@ -40,8 +38,8 @@ export function CustomFeedEmptyState() {
       }
     }
   }, [feedFeedback.feedSourceInfo, currentAccount?.did])
+  const {t: l} = useLingui()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
   const onPressFindAccounts = useCallback(() => {
@@ -64,19 +62,18 @@ export function CustomFeedEmptyState() {
           language settings.
         </Trans>
       </Text>
-      <Button
-        type="inverted"
-        style={styles.emptyBtn}
-        onPress={onPressFindAccounts}>
-        <Text type="lg-medium" style={palInverted.text}>
-          <Trans>Find accounts to follow</Trans>
-        </Text>
-        <FontAwesomeIcon
-          icon="angle-right"
-          style={palInverted.text as FontAwesomeIconStyle}
-          size={14}
-        />
-      </Button>
+      <View style={[a.mt_xl, a.align_center]}>
+        <Button
+          label={l`Find accounts to follow`}
+          onPress={onPressFindAccounts}
+          color="secondary_inverted"
+          size="large">
+          <ButtonText>
+            <Trans>Find accounts to follow</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ChevronRightIcon} />
+        </Button>
+      </View>
     </View>
   )
 }
@@ -93,22 +90,4 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  emptyBtn: {
-    marginVertical: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    borderRadius: 30,
-  },
-
-  feedsTip: {
-    position: 'absolute',
-    left: 22,
-  },
-  feedsTipArrow: {
-    marginLeft: 32,
-    marginTop: 8,
-  },
 })

src/view/com/posts/FollowingEmptyState.tsx

@@ -1,23 +1,21 @@
 import {useCallback} from 'react'
 import {StyleSheet, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from '#/lib/icons'
 import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
 import {IS_WEB} from '#/env'
-import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 
 export function FollowingEmptyState() {
+  const {t: l} = useLingui()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
   const onPressFindAccounts = useCallback(() => {
@@ -45,36 +43,34 @@ export function FollowingEmptyState() {
             happening.
           </Trans>
         </Text>
-        <Button
-          type="inverted"
-          style={styles.emptyBtn}
-          onPress={onPressFindAccounts}>
-          <Text type="lg-medium" style={palInverted.text}>
-            <Trans>Find accounts to follow</Trans>
-          </Text>
-          <FontAwesomeIcon
-            icon="angle-right"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-        </Button>
+        <View style={[a.mt_xl, a.align_center]}>
+          <Button
+            label={l`Find accounts to follow`}
+            onPress={onPressFindAccounts}
+            color="secondary_inverted"
+            size="large">
+            <ButtonText>
+              <Trans>Find accounts to follow</Trans>
+            </ButtonText>
+            <ButtonIcon icon={ChevronRightIcon} />
+          </Button>
+        </View>
 
         <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
           <Trans>You can also discover new Custom Feeds to follow.</Trans>
         </Text>
-        <Button
-          type="inverted"
-          style={[styles.emptyBtn, s.mt10]}
-          onPress={onPressDiscoverFeeds}>
-          <Text type="lg-medium" style={palInverted.text}>
-            <Trans>Discover new custom feeds</Trans>
-          </Text>
-          <FontAwesomeIcon
-            icon="angle-right"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-        </Button>
+        <View style={[a.mt_md, a.align_center]}>
+          <Button
+            label={l`Discover new custom feeds`}
+            onPress={onPressDiscoverFeeds}
+            color="secondary_inverted"
+            size="large">
+            <ButtonText>
+              <Trans>Discover new custom feeds</Trans>
+            </ButtonText>
+            <ButtonIcon icon={ChevronRightIcon} />
+          </Button>
+        </View>
       </View>
     </View>
   )
@@ -98,13 +94,4 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  emptyBtn: {
-    marginVertical: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    borderRadius: 30,
-  },
 })

src/view/com/posts/FollowingEndOfFeed.tsx

@@ -1,22 +1,20 @@
 import {useCallback} from 'react'
 import {Dimensions, StyleSheet, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
 import {IS_WEB} from '#/env'
-import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 
 export function FollowingEndOfFeed() {
+  const {t: l} = useLingui()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
   const onPressFindAccounts = useCallback(() => {
@@ -46,36 +44,34 @@ export function FollowingEndOfFeed() {
             follow.
           </Trans>
         </Text>
-        <Button
-          type="inverted"
-          style={styles.emptyBtn}
-          onPress={onPressFindAccounts}>
-          <Text type="lg-medium" style={palInverted.text}>
-            <Trans>Find accounts to follow</Trans>
-          </Text>
-          <FontAwesomeIcon
-            icon="angle-right"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-        </Button>
+        <View style={[a.mt_xl, a.align_center]}>
+          <Button
+            label={l`Find accounts to follow`}
+            onPress={onPressFindAccounts}
+            color="secondary_inverted"
+            size="large">
+            <ButtonText>
+              <Trans>Find accounts to follow</Trans>
+            </ButtonText>
+            <ButtonIcon icon={ChevronRightIcon} />
+          </Button>
+        </View>
 
         <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
           <Trans>You can also discover new Custom Feeds to follow.</Trans>
         </Text>
-        <Button
-          type="inverted"
-          style={[styles.emptyBtn, s.mt10]}
-          onPress={onPressDiscoverFeeds}>
-          <Text type="lg-medium" style={palInverted.text}>
-            <Trans>Discover new custom feeds</Trans>
-          </Text>
-          <FontAwesomeIcon
-            icon="angle-right"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-        </Button>
+        <View style={[a.mt_md, a.align_center]}>
+          <Button
+            label={l`Discover new custom feeds`}
+            onPress={onPressDiscoverFeeds}
+            color="secondary_inverted"
+            size="large">
+            <ButtonText>
+              <Trans>Discover new custom feeds</Trans>
+            </ButtonText>
+            <ButtonIcon icon={ChevronRightIcon} />
+          </Button>
+        </View>
       </View>
     </View>
   )
@@ -93,13 +89,4 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 460,
   },
-  emptyBtn: {
-    marginVertical: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    borderRadius: 30,
-  },
 })

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]}>