Even cleaner header and auth pages

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>