fix: center align side-drawer header text when back button is absent …

…(#497)
lgobbi-atix · Sep 7, 2023 · 1ddd265 · 1ddd265
1 parent 666cea6
commit 1ddd265
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/packages/ui/src/design-system/side-drawer/side-drawer-content-header.component.tsx b/packages/ui/src/design-system/side-drawer/side-drawer-content-header.component.tsx
@@ -27,14 +27,20 @@ export const Header = ({
       justifyContent="space-between"
     >
       {onBackClick !== undefined && (
-        <NavigationButtons.Back onClick={onBackClick} />
+        <Flex w="$40">
+          <NavigationButtons.Back onClick={onBackClick} />
+        </Flex>
       )}
-      <Typography.Body.Large weight="$bold" className={cx.text}>
-        {text}
-      </Typography.Body.Large>
-      <Close>
-        <NavigationButtons.Close onClick={onCloseClick} />
-      </Close>
+      <Flex justifyContent="center" w="$fill">
+        <Typography.Body.Large weight="$bold" className={cx.text}>
+          {text}
+        </Typography.Body.Large>
+      </Flex>
+      <Flex w="$40">
+        <Close>
+          <NavigationButtons.Close onClick={onCloseClick} />
+        </Close>
+      </Flex>
     </Flex>
     <Box mb="$32">
       <Separator />