Finish ALFing up ErrorScreen

assets/icons/warning_stroke2_corner2_rounded_large.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><path fill="#000" d="M26.108 9.886c2.632-4.514 9.152-4.514 11.784 0l18.671 32.02v0c2.651 4.548-.627 10.261-5.892 10.261H13.329c-5.265 0-8.543-5.713-5.892-10.26v-.002l18.671-32.02Zm9.192 1.51c-1.474-2.528-5.125-2.528-6.6 0L10.028 43.418c-1.486 2.55.353 5.75 3.301 5.75h37.342c2.948 0 4.787-3.2 3.3-5.75L35.3 11.397ZM32 36.834a2.167 2.167 0 1 1 0 4.334 2.167 2.167 0 0 1 0-4.334Zm-1.5-3.797v-7.985a1.5 1.5 0 0 1 3 0v7.985a1.5 1.5 0 0 1-3 0Z"/></svg>

src/components/icons/Warning.tsx

@@ -3,3 +3,8 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const Warning_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M11.14 4.494a.995.995 0 0 1 1.72 0l7.001 12.008a.996.996 0 0 1-.86 1.498H4.999a.996.996 0 0 1-.86-1.498L11.14 4.494Zm3.447-1.007c-1.155-1.983-4.019-1.983-5.174 0L2.41 15.494C1.247 17.491 2.686 20 4.998 20h14.004c2.312 0 3.751-2.509 2.587-4.506L14.587 3.487ZM13 9.019a1 1 0 1 0-2 0v2.994a1 1 0 1 0 2 0V9.02Zm-1 4.731a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z',
 })
+
+export const Warning_Stroke2_Corner0_Rounded_Large = createSinglePathSVG({
+  viewBox: '0 0 64 64',
+  path: 'M26.108 9.886c2.632-4.514 9.152-4.514 11.784 0l18.671 32.02v0c2.651 4.548-.627 10.261-5.892 10.261H13.329c-5.265 0-8.543-5.713-5.892-10.26v-.002l18.671-32.02Zm9.192 1.51c-1.474-2.528-5.125-2.528-6.6 0L10.028 43.418c-1.486 2.55.353 5.75 3.301 5.75h37.342c2.948 0 4.787-3.2 3.3-5.75L35.3 11.397ZM32 36.834a2.167 2.167 0 1 1 0 4.334 2.167 2.167 0 0 1 0-4.334Zm-1.5-3.797v-7.985a1.5 1.5 0 0 1 3 0v7.985a1.5 1.5 0 0 1-3 0Z',
+})

src/components/icons/common.tsx

@@ -21,6 +21,7 @@ export const sizes = {
   xl: 28,
   '2xl': 32,
   '3xl': 48,
+  '4xl': 64,
 } as const
 
 export function useCommonSVGProps(props: Props) {

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

@@ -17,6 +17,11 @@ import {useTheme} from '#/lib/ThemeContext'
 import * as Layout from '#/components/Layout'
 import {Text} from '../text/Text'
 
+/**
+ * @deprecated - use Admonition with type="error" instead (does not cover all cases)
+ *
+ * TODO: Create a new ALF'd <ErrorBanner /> component -sfn
+ */
 export function ErrorMessage({
   message,
   numberOfLines,

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

@@ -1,15 +1,11 @@
 import {View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-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_Large as WarningIcon} from '#/components/icons/Warning'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
 
@@ -29,7 +25,6 @@ export function ErrorScreen({
   showHeader?: boolean
 }) {
   const t = useTheme()
-  const pal = usePalette('default')
   const {_} = useLingui()
 
   return (
@@ -45,27 +40,22 @@ export function ErrorScreen({
           <Layout.Header.Slot />
         </Layout.Header.Outer>
       )}
-      <View style={[a.px_xl, a.py_2xl]}>
-        <View style={[a.mb_md, a.align_center]}>
-          <View
-            style={[
-              a.rounded_full,
-              {width: 50, height: 50},
-              a.align_center,
-              a.justify_center,
-              {backgroundColor: t.palette.contrast_950},
-            ]}>
-            <FontAwesomeIcon
-              icon="exclamation"
-              style={pal.textInverted as FontAwesomeIconStyle}
-              size={24}
-            />
-          </View>
+      <View style={[a.px_xl, a.py_5xl]}>
+        <View style={[a.mb_sm, a.align_center]}>
+          <WarningIcon size="4xl" style={{color: t.palette.yellow}} />
         </View>
-        <Text style={[a.text_center, a.font_bold, a.text_2xl, a.mb_md]}>
+        <Text style={[a.text_center, a.font_semi_bold, a.text_xl, a.mb_xs]}>
           {title}
         </Text>
-        <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>
+        <Text
+          style={[
+            a.text_center,
+            a.text_md,
+            t.atoms.text_contrast_high,
+            a.mb_lg,
+          ]}>
+          {message}
+        </Text>
         {details && (
           <View
             style={[
@@ -73,10 +63,10 @@ export function ErrorScreen({
               a.border,
               t.atoms.border_contrast_medium,
               t.atoms.bg_contrast_25,
-              a.mb_xl,
+              a.mb_lg,
               a.py_sm,
               a.px_lg,
-              a.rounded_xs,
+              a.rounded_sm,
               a.overflow_hidden,
             ]}>
             <Text
@@ -91,7 +81,6 @@ export function ErrorScreen({
             <Button
               testID="errorScreenTryAgainButton"
               onPress={onPressTryAgain}
-              variant="solid"
               color="secondary_inverted"
               size="small"
               label={_(msg`Retry`)}