✨(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.
numerique-gouv · Aug 5, 2024 · ca3b1f0 · ca3b1f0
1 parent 01390b1
commit ca3b1f0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -45,6 +45,14 @@ export const text = cva({
       },
       inherits: {},
     },
+    centered: {
+      true: {
+        textAlign: 'center',
+      },
+      false: {
+        textAlign: 'inherit',
+      },
+    },
     bold: {
       true: {
         fontWeight: 'bold',