feat(web-ui): improve mobile nav (#871)

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

Author: johanbook

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

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { Link as ReactRouterLink } from "react-router-dom";
 
-import { ArrowBackIosNew } from "@mui/icons-material";
+import { ArrowBack } from "@mui/icons-material";
 import { Box, IconButton } from "@mui/material";
 
 import { Nav } from "src/components/nav";
@@ -10,18 +10,16 @@ interface ChatPageNavProps {
   children: ReactNode;
 }
 
-export function ChatPageNav({
-  children,
-}: ChatPageNavProps): React.ReactElement {
+export function ChatPageNav({ children }: ChatPageNavProps): ReactElement {
   const appBarContent = (
     <IconButton
       component={ReactRouterLink}
       sx={{
-        pr: 2,
+        mr: 2,
       }}
       to="/chat"
     >
-      <ArrowBackIosNew sx={{ paddingRight: 1 / 2 }} />
+      <ArrowBack />
     </IconButton>
   );
 

services/web-ui/src/features/settings/pages/AppearancePage/AppearancePage.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,24 @@ export function AppearancePageNav({
 }: AppearancePageNavProps): 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">
-        {children}
-      </NavLayout>
+    <Nav appBarContent={appBarContent}>
+      <Box sx={{ pt: 1, px: 3 }}>{children}</Box>
     </Nav>
   );
 }