✨(frontend) center error screen body

Added a new props on Text primitive to allow centering
the text if needed. It's align the design with the mockup.

src/frontend/src/components/ErrorScreen.tsx

@@ -14,7 +14,7 @@ export const ErrorScreen = ({ title, body }: {
       <CenteredContent title={title || t('error.heading')} withBackButton>
         {!!body && (
           <Center>
-            <Text as="p" variant="h3">
+            <Text as="p" variant="h3" centered>
               {body}
             </Text>
           </Center>

src/frontend/src/primitives/Text.tsx

@@ -45,6 +45,14 @@ export const text = cva({
       },
       inherits: {},
     },
+    centered: {
+      true: {
+        textAlign: 'center',
+      },
+      false: {
+        textAlign: 'inherit',
+      },
+    },
     bold: {
       true: {
         fontWeight: 'bold',