feat(web-ui): update style of appbar for new chat page (#906)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx

@@ -1,6 +1,9 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
+
+import { ArrowBack } from "@mui/icons-material";
+import { Box, IconButton, Typography } from "@mui/material";
 
-import { NavLayout } from "src/components/layout";
 import { Nav } from "src/components/nav";
 import { useTranslation } from "src/core/i18n";
 
@@ -13,11 +16,21 @@ export function CreateChatPageNav({
 }: CreateChatPageNavProps): ReactElement {
   const { t } = useTranslation("chat-create");
 
+  const appBarContent = (
+    <>
+      <IconButton component={ReactRouterLink} to="/chat">
+        <ArrowBack />
+
+        <Typography sx={{ pl: 3 }} variant="h5">
+          {t("header")}
+        </Typography>
+      </IconButton>
+    </>
+  );
+
   return (
-    <Nav>
-      <NavLayout header={t("header")} linkText="Back" to="/chat">
-        {children}
-      </NavLayout>
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ px: 3, pt: 1 }}>{children}</Box>
     </Nav>
   );
 }