Wrap error messages in Layout.Center (#7655)

* Added Portal to ErrorMessage to stack it on top of the view

* Changing Portal solution for Layout.Center according to PR suggestion

1 files changed, 37 insertions, 31 deletions

diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx
index c09d1b2e6..50e55e70c 100644
--- a/src/view/com/util/error/ErrorMessage.tsx
+++ b/src/view/com/util/error/ErrorMessage.tsx
@@ -14,6 +14,7 @@ import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
+import * as Layout from '#/components/Layout'
 import {Text} from '../text/Text'
 
 export function ErrorMessage({
@@ -31,39 +32,44 @@ export function ErrorMessage({
   const pal = usePalette('error')
   const {_} = useLingui()
   return (
-    <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>
-      <Text
-        type="sm-medium"
-        style={[styles.message, pal.text]}
-        numberOfLines={numberOfLines}>
-        {message}
-      </Text>
-      {onPressTryAgain && (
-        <TouchableOpacity
-          testID="errorMessageTryAgainButton"
-          style={styles.btn}
-          onPress={onPressTryAgain}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Retry`)}
-          accessibilityHint={_(
-            msg`Retries the last action, which errored out`,
-          )}>
+    <Layout.Center>
+      <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
+        <View
+          style={[
+            styles.errorIcon,
+            {backgroundColor: theme.palette.error.icon},
+          ]}>
           <FontAwesomeIcon
-            icon="arrows-rotate"
-            style={{color: theme.palette.error.icon}}
-            size={18}
+            icon="exclamation"
+            style={pal.text as FontAwesomeIconStyle}
+            size={16}
           />
-        </TouchableOpacity>
-      )}
-    </View>
+        </View>
+        <Text
+          type="sm-medium"
+          style={[styles.message, pal.text]}
+          numberOfLines={numberOfLines}>
+          {message}
+        </Text>
+        {onPressTryAgain && (
+          <TouchableOpacity
+            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>
+        )}
+      </View>
+    </Layout.Center>
   )
 }