feat(web-ui): improve nav further (#872)

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

Author: johanbook

services/web-ui/src/features/settings/pages/AppearancePage/AppearancePage.nav.tsx

@@ -31,6 +31,7 @@ export function AppearancePageNav({
       <Typography variant="h5">{t("header")}</Typography>
     </>
   );
+
   return (
     <Nav appBarContent={appBarContent}>
       <Box sx={{ pt: 1, px: 3 }}>{children}</Box>

services/web-ui/src/features/settings/pages/SettingsPage/SettingsPage.nav.tsx

@@ -1,8 +1,9 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
 
-import { Typography } from "@mui/material";
+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";
 
@@ -15,13 +16,29 @@ export function SettingsPageNav({
 }: SettingsPageNavProps): ReactElement {
   const { t } = useTranslation("settings");
 
+  const appBarContent = (
+    <>
+      <IconButton
+        component={ReactRouterLink}
+        sx={{
+          mr: 2,
+        }}
+        to="/profile"
+      >
+        <ArrowBack />
+      </IconButton>
+
+      <Typography variant="h5">{t("header")}</Typography>
+    </>
+  );
+
   return (
-    <Nav>
-      <NavLayout header={t("header")} linkText="Back" to="/profile">
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ pt: 1, px: 3 }}>
         <Typography color="textSecondary">{t("description")}</Typography>
 
         {children}
-      </NavLayout>
+      </Box>
     </Nav>
   );
 }

services/web-ui/src/pages/OrganizationListPage/OrganizationListPage.nav.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
 
-import { Typography } from "@mui/material";
+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";
 
@@ -12,16 +13,32 @@ interface OrganizationListPageNavProps {
 
 export function OrganizationListPageNav({
   children,
-}: OrganizationListPageNavProps): React.ReactElement {
+}: OrganizationListPageNavProps): ReactElement {
   const { t } = useTranslation("organization-list");
 
+  const appBarContent = (
+    <>
+      <IconButton
+        component={ReactRouterLink}
+        sx={{
+          mr: 2,
+        }}
+        to="/profile"
+      >
+        <ArrowBack />
+      </IconButton>
+
+      <Typography variant="h5">{t("header")}</Typography>
+    </>
+  );
+
   return (
-    <Nav>
-      <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ pt: 1, px: 3 }}>
         <Typography color="textSecondary">{t("description")}</Typography>
 
         {children}
-      </NavLayout>
+      </Box>
     </Nav>
   );
 }

services/web-ui/src/pages/ProfileJournalPage/ProfileJournalPage.component.tsx

@@ -32,7 +32,7 @@ export function ProfileJournalPageComponent({
   return (
     <Table
       columns={columns}
-      height="55vh"
+      height="65vh"
       initialState={{
         sorting: {
           sortModel: [{ field: "created", sort: "desc" }],

services/web-ui/src/pages/ProfileJournalPage/ProfileJournalPage.nav.tsx

@@ -1,8 +1,9 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
 
-import { Grid, Typography } from "@mui/material";
+import { ArrowBack } from "@mui/icons-material";
+import { Box, Grid, IconButton, Typography } from "@mui/material";
 
-import { NavLayout } from "src/components/layout";
 import { Nav } from "src/components/nav";
 import { DatePicker } from "src/components/ui/DatePicker";
 import { useTranslation } from "src/core/i18n";
@@ -25,9 +26,25 @@ export function ProfileJournalPageNav({
 }: ProfileJournalPageNavProps): ReactElement {
   const { t } = useTranslation("journal");
 
+  const appBarContent = (
+    <>
+      <IconButton
+        component={ReactRouterLink}
+        sx={{
+          mr: 2,
+        }}
+        to="/profile"
+      >
+        <ArrowBack />
+      </IconButton>
+
+      <Typography variant="h5">{t("header")}</Typography>
+    </>
+  );
+
   return (
-    <Nav>
-      <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ pt: 1, px: 3 }}>
         <Typography color="textSecondary" sx={{ paddingBottom: 3 }}>
           {t("description")}
         </Typography>
@@ -53,7 +70,7 @@ export function ProfileJournalPageNav({
         </Grid>
 
         {children}
-      </NavLayout>
+      </Box>
     </Nav>
   );
 }