feat(web-ui): move nav button to header (#969)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>
johanbook · Nov 24, 2024 · 5eb28a2 · 5eb28a2
1 parent ec52f7d
commit 5eb28a2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx b/services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx
@@ -21,7 +21,7 @@ export function CreateChatPageNav({
       <IconButton component={ReactRouterLink} to="/chat">
         <ArrowBack />
 
-        <Typography sx={{ pl: 3 }} variant="h5">
+        <Typography color="textPrimary" sx={{ pl: 3 }} variant="h5">
           {t("header")}
         </Typography>
       </IconButton>

diff --git a/services/web-ui/src/pages/CreateOrganizationPage/CreateOrganizationPage.container.tsx b/services/web-ui/src/pages/CreateOrganizationPage/CreateOrganizationPage.container.tsx
@@ -1,11 +1,12 @@
 import { ReactElement, SyntheticEvent } from "react";
 import { useNavigate } from "react-router-dom";
+import { Link as ReactRouterLink } from "react-router-dom";
 
-import { Box } from "@mui/material";
+import { ArrowBack } from "@mui/icons-material";
+import { Box, IconButton } from "@mui/material";
 
 import { CreateOrganizationCommand } from "src/api";
 import { organizationsApi } from "src/apis";
-import { NavLayout } from "src/components/layout";
 import { Nav } from "src/components/nav";
 import { Button, TextField, Typography } from "src/components/ui";
 import { useForm, validators } from "src/core/forms";
@@ -61,9 +62,27 @@ export function CreateOrganizationPageContainer(): ReactElement {
     });
   }
 
+  const appBarContent = (
+    <>
+      <IconButton
+        component={ReactRouterLink}
+        sx={{
+          mr: 2,
+        }}
+        to="/profile"
+      >
+        <ArrowBack />
+
+        <Typography color="textPrimary" sx={{ pl: 3 }} variant="h5">
+          {t("header")}
+        </Typography>
+      </IconButton>
+    </>
+  );
+
   return (
-    <Nav>
-      <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ px: 2, pt: 2 }}>
         <Typography color="textSecondary" sx={{ paddingBottom: 3 }}>
           {t("description")}
         </Typography>
@@ -95,7 +114,7 @@ export function CreateOrganizationPageContainer(): ReactElement {
             </Button>
           </Box>
         </form>
-      </NavLayout>
+      </Box>
     </Nav>
   );
 }