Even cleaner header and auth pages

gui/rpk-gui/src/App.tsx

@@ -8,6 +8,7 @@ import {
 import CssBaseline from "@mui/material/CssBaseline";
 import GlobalStyles from "@mui/material/GlobalStyles";
 import { ThemeProvider } from "@mui/material/styles";
+import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
 import routerBindings, {
   CatchAllNavigate,
   DocumentTitleHandler,
@@ -40,6 +41,10 @@ function App() {
               notificationProvider={useNotificationProvider}
               routerProvider={routerBindings}
               options={{
+                title: {
+                  text: "Roleplay Contracts",
+                  icon: <HistoryEduIcon />
+                },
                 syncWithLocation: true,
                 warnWhenUnsavedChanges: true,
                 useNewQueryKeys: true,
@@ -72,13 +77,13 @@ function App() {
                   <Route path="hub/*" element={<HubRoutes />} />
                   <Route path="firm/*" element={<FirmRoutes />} />
                 </Route>
-                <Route path="auth/*" element={<><Header /><Outlet /></>}>
+                <Route path="auth/*" element={<Outlet />}>
                   <Route path="login" element={<Login />} />
                   <Route path="register" element={<Register />} />
                   <Route path="forgot-password" element={<ForgotPassword />} />
                   <Route path="update-password" element={<UpdatePassword />} />
                 </Route>
-                <Route index element={<><Header /><h1>HOME&nbsp;</h1></>} />
+                <Route index element={<><Header /><h1>HOME</h1></>} />
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />

gui/rpk-gui/src/components/auth/Login.tsx

@@ -2,7 +2,12 @@ import { AuthPage } from "@refinedev/mui";
 
 import GoogleIcon from "@mui/icons-material/Google";
 import DiscordIcon from "../../components/DiscordIcon";
-import { useSearchParams, Navigate } from "react-router";
+import {useSearchParams, Navigate, Link} from "react-router";
+import MuiLink from "@mui/material/Link";
+import * as React from "react";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 
 export const Login = () => {
   const [searchParams] = useSearchParams();
@@ -16,6 +21,7 @@ export const Login = () => {
     <AuthPage
       type="login"
       formProps={{ defaultValues: { email: "test@test.te", password: "test" }, }}
+      rememberMe={false}
       providers={[{
           name: "google",
           label: "Sign in with Google",
@@ -27,6 +33,58 @@ export const Login = () => {
           icon: (<DiscordIcon style={{ fontSize: 24, }} />),
         },
       ]}
+      forgotPasswordLink={
+        <Stack
+          sx={{
+            direction: "row",
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+          }}
+        >
+          <MuiLink
+            variant="body2"
+            color="primary"
+            fontSize="12px"
+            component={Link}
+            underline="none"
+            to="/auth/forgot-password"
+          >
+            Forgot password?
+          </MuiLink>
+        </Stack>
+      }
+      registerLink={
+        <Box
+          sx={{
+            mt: "24px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            textAlign="center"
+            variant="body2"
+            component="span"
+            fontSize="12px"
+          >
+            Don’t have an account?
+          </Typography>
+          <MuiLink
+            ml="4px"
+            fontSize="12px"
+            variant="body2"
+            color="primary"
+            component={Link}
+            underline="none"
+            to="/auth/register"
+            fontWeight="bold"
+          >
+            Sign up
+          </MuiLink>
+        </Box>
+      }
     />
   );
 };

gui/rpk-gui/src/components/header/index.tsx

@@ -1,5 +1,6 @@
 import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
 import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import BusinessIcon from '@mui/icons-material/Business';
 import HubIcon from '@mui/icons-material/Hub';
 import { Button, Menu, MenuItem } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
@@ -11,15 +12,17 @@ import Typography from "@mui/material/Typography";
 import React, { useContext } from "react";
 import { Link } from "react-router";
 import { useGetIdentity } from "@refinedev/core";
-import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
+import { HamburgerMenu, RefineThemedLayoutV2HeaderProps, ThemedTitleV2 } from "@refinedev/mui";
 import { ColorModeContext } from "../../contexts/color-mode";
 import { FirmContext } from "../../contexts/FirmContext";
 import { Logout } from "../auth/Logout";
 import { IUser } from "../../interfaces";
+import MuiLink from "@mui/material/Link";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky = true,
 }) => {
+  const collapsed = false;
   const { mode, setMode } = useContext(ColorModeContext);
   const { currentFirm } = useContext(FirmContext);
 
@@ -45,10 +48,34 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
         >
           <HamburgerMenu />
           {currentFirm && (
-            <Link to={`/firm/${currentFirm.instance}/${currentFirm.firm}`} ><Typography variant="h4" >{currentFirm.instance}&nbsp;/&nbsp;{currentFirm.firm}</Typography></Link>
+            <MuiLink
+              to={`/firm/${currentFirm.instance}/${currentFirm.firm}`}
+              component={Link}
+              underline="none"
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+              }}
+            >
+              <BusinessIcon height="24px" width="24px" color="primary" />
+              {!collapsed && (
+                <Typography
+                  variant="h6"
+                  fontWeight={700}
+                  color="text.primary"
+                  fontSize="inherit"
+                  textOverflow="ellipsis"
+                  overflow="hidden"
+                >
+                  {currentFirm.instance}&nbsp;/&nbsp;{currentFirm.firm}
+                </Typography>
+              )}
+            </MuiLink>
+
           )}
           {!currentFirm && (
-            <Link to="/" ><Typography variant="h4">Roleplay&nbsp;Contracts</Typography></Link>
+            <ThemedTitleV2 collapsed={collapsed}/>
           )}
           {(user?.email) && (
             <Link to="/hub"><HubIcon /></Link>