From 1ddd265d586dc34a89755cb240f974a7bc36ebb4 Mon Sep 17 00:00:00 2001
From: John Oshalusi <oshalusijohn@gmail.com>
Date: Thu, 7 Sep 2023 13:13:39 +0100
Subject: [PATCH] fix: center align side-drawer header text when back button is
 absent (#497)

---
 .../side-drawer-content-header.component.tsx  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 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
index 405185a766..410dc07ca8 100644
--- 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 />