From ca3b1f02974315d4330e93f493e0b98d38125029 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 4 Aug 2024 21:58:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20center=20error=20screen?=
 =?UTF-8?q?=20body?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 2 +-
 src/frontend/src/primitives/Text.tsx        | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/ErrorScreen.tsx b/src/frontend/src/components/ErrorScreen.tsx
index 2e349ed6..71fd605c 100644
--- a/src/frontend/src/components/ErrorScreen.tsx
+++ b/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>
diff --git a/src/frontend/src/primitives/Text.tsx b/src/frontend/src/primitives/Text.tsx
index ee136467..047f07e9 100644
--- a/src/frontend/src/primitives/Text.tsx
+++ b/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',