feat: centred and styled productsNavbar

package.json

@@ -68,6 +68,7 @@
     "libsodium-wrappers": "^0.7.10",
     "logrocket": "^2.2.1",
     "logrocket-react": "^4.0.1",
+    "npm": "^8.5.5",
     "path-browserify": "^1.0.1",
     "react": "^17.0.0",
     "react-cookie-consent": "^6.4.1",

src/components/NavBar.tsx

@@ -1,89 +1,139 @@
 import { ReactElement, useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import SVG from "react-inlinesvg";
 import {
+  HtmlTooltip,
+  MuiIconbutton,
   AppBar,
   Avatar,
+  Button,
   Grid,
-  IconButton,
   Menu,
   MenuItem,
-  Theme,
+  theme,
   Toolbar,
   Typography,
-} from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import { Link, useNavigate } from "react-router-dom";
-import SVG from "react-inlinesvg";
-import { HtmlTooltip } from "@gliff-ai/style";
+} from "@gliff-ai/style";
 import { imgSrc } from "@/imgSrc";
 
 import { useAuth } from "@/hooks/use-auth";
-import { ProductIcons, BaseProductIcon } from "@/components";
+import { ProductsNavbar, ProductNavbarData } from "@/components";
 
-const useStyles = makeStyles((theme: Theme) => ({
-  appBar: {
-    backgroundColor: `${theme.palette.secondary.light} !important`,
-    height: "90px",
-    paddingTop: "9px",
+const documentButton = {
+  marginLeft: "40px",
+  "& img": {
+    margin: "auto",
+    borderRadius: "50%",
+    height: "48px",
+    backgroundColor: "#FAFAFA",
   },
-  svgMedium: {
-    width: "22px",
-    height: "100%",
-    marginLeft: "-1px",
+  ".documentHover:hover": {
+    backgroundColor: "#02FFAD",
   },
-  avatarUser: {
-    width: "64px !important",
-    height: "64px !important",
-    backgroundColor: `${theme.palette.text.secondary} !important`,
-    "&:hover": {
-      backgroundColor: `${theme.palette.text.secondary} !important`,
-    },
+};
+const svgMedium = {
+  marginLeft: "-1px",
+};
+const menuItem = {
+  opacity: "1",
+  "&:hover": {
+    background: theme.palette.primary.main,
   },
-  menuItem: {
-    opacity: "1",
-    "&:hover": {
-      background: theme.palette.primary.main,
-    },
-    "& a": {
-      color: theme.palette.text.primary,
-      textDecoration: "none",
-      fontSize: "1rem",
-      display: "inline-flex",
-    },
+  "& a": {
+    color: theme.palette.text.primary,
+    textDecoration: "none",
+    fontSize: "1rem",
+    display: "inline-flex",
   },
-  logo: {
-    marginBottom: "5px",
-    marginTop: "7px",
+  "& svg": {
+    marginLeft: "-1px",
+    marginRight: "12px",
   },
-  productSectionGrid: {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
+};
+const appBar = {
+  backgroundColor: `${theme.palette.secondary.light} !important`,
+  height: "90px",
+  paddingTop: "9px",
+  justifyContent: "space-between",
+};
+const logo = {
+  marginBottom: "5px",
+  marginTop: "7px",
+  marginRight: "200px",
+};
+const avatarUser = {
+  width: "40px !important",
+  height: "40px !important",
+  backgroundColor: `${theme.palette.text.secondary} !important`,
+  "&:hover": {
+    backgroundColor: `${theme.palette.text.secondary} !important`,
   },
-  navGrid: {
-    marginLeft: "auto",
-    height: "90px",
+};
+const productSectionGrid = {
+  paddingTop: "0px",
+  marginLeft: "30px",
+};
+const productSectionDiv = {
+  ".productNavbarData": {
+    display: "flex",
   },
-  navLinks: {
+};
+const navGrid = {
+  height: "90px",
+  ".navLinks": {
     height: "100%",
     alignItems: "center",
     display: "flex",
   },
-  accessibleSvg: {
-    fill: "#000000",
+  ".productLocation": {
+    border: "1px solid",
+    borderColor: "#DADDE9",
+    borderRadius: "9px",
+    height: "42px",
+    verticalAlign: "middle",
+    fontFamily: "Roboto",
+    fontWeight: "400",
+    fontSize: "0.875rem",
+    lineHeight: "1.75",
+    display: "flex",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    backgroundColor: "#FAFAFA",
+  },
+  ".productLocationImage": {
+    margin: "auto",
+    paddingRight: "10px",
+    height: "40px",
+    width: "40px",
   },
-  accessibleName: {
-    color: "#000000",
+  ".productLocationText": {
+    margin: "auto",
   },
-}));
+};
+
+const productLocationIcons = {
+  manage: imgSrc("manage"),
+  curate: imgSrc("curate"),
+  audit: imgSrc("audit"),
+  annotate: imgSrc("annotate"),
+};
+
+const getProductLocationIcon = (productLocation: string): string => {
+  if (productLocation === "manage") return productLocationIcons.manage;
+  if (productLocation === "curate") return productLocationIcons.curate;
+  if (productLocation === "audit") return productLocationIcons.audit;
+  if (productLocation === "annotate") return productLocationIcons.annotate;
+  return "";
+};
+
 interface Props {
   productSection: JSX.Element | null;
+  productNavbarData: ProductNavbarData;
 }
 export const NavBar = (props: Props): ReactElement | null => {
   // Get auth state and re-render anytime it changes
   const auth = useAuth();
   const navigate = useNavigate();
-  const classes = useStyles();
   const [userInitials, setUserInitials] = useState("");
   const [anchorElement, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -113,6 +163,10 @@ export const NavBar = (props: Props): ReactElement | null => {
       "/recover",
     ].includes(window.location.pathname);
 
+  // If the URL begins with /annotate/ the productSection is rendered
+  const isAnnotate = (): boolean =>
+    window.location.pathname.startsWith("/annotate/");
+
   if (!auth) return null;
   if (!hasNavbar()) return null;
 
@@ -123,21 +177,16 @@ export const NavBar = (props: Props): ReactElement | null => {
 
   const accountMenu = (
     <>
-      <IconButton
-        onClick={handleClick}
-        aria-controls="menu"
-        style={{ paddingTop: 0 }}
-        size="large"
-      >
+      <MuiIconbutton onClick={handleClick} aria-controls="menu" size="large">
         <HtmlTooltip
           title={<Typography>Account</Typography>}
           placement="bottom"
         >
-          <Avatar variant="circular" className={classes.avatarUser}>
+          <Avatar variant="circular" sx={avatarUser}>
             {userInitials}
           </Avatar>
         </HtmlTooltip>
-      </IconButton>
+      </MuiIconbutton>
       <Menu
         anchorEl={anchorElement}
         keepMounted
@@ -150,77 +199,89 @@ export const NavBar = (props: Props): ReactElement | null => {
           horizontal: "right",
         }}
       >
-        <MenuItem className={classes.menuItem}>
+        <MenuItem sx={{ ...menuItem }}>
           <Link to="/account" onClick={() => setAnchorEl(null)}>
-            <SVG
-              src={imgSrc("account-settings")}
-              className={classes.svgMedium}
-              style={{ marginRight: "12px" }}
-            />
+            <SVG src={imgSrc("account-settings")} width="22px" height="100%" />
             Account Settings
           </Link>
         </MenuItem>
         {showBilling ? (
-          <MenuItem className={classes.menuItem}>
+          <MenuItem sx={{ ...menuItem }}>
             <Link to="/billing" onClick={() => setAnchorEl(null)}>
               <SVG
                 src={imgSrc("account-settings")}
-                className={classes.svgMedium}
-                style={{ marginRight: "12px" }}
+                width="22px"
+                height="100%"
               />
               Billing
             </Link>
           </MenuItem>
         ) : null}
         <MenuItem
-          className={classes.menuItem}
+          sx={{ ...menuItem }}
           onClick={() =>
             auth.signout().then(() => {
               navigate("signin");
               setAnchorEl(null);
             })
           }
         >
-          <SVG
-            src={imgSrc("log-out")}
-            className={classes.svgMedium}
-            style={{ marginRight: "12px" }}
-          />
+          <SVG src={imgSrc("log-out")} width="22px" height="100%" />
           Log out
         </MenuItem>
       </Menu>
     </>
   );
 
   return (
-    <AppBar position="sticky" className={classes.appBar} elevation={0}>
+    <AppBar position="sticky" sx={appBar} elevation={0}>
       <Toolbar>
-        <Grid container direction="row" alignContent="space-between">
-          <Grid className={classes.logo}>
+        <Grid
+          sx={productSectionDiv}
+          container
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Grid sx={logo}>
             <img
               src={imgSrc("gliff-web-master-black")}
               width="79px"
               height="60px"
               alt="gliff logo"
             />
           </Grid>
-          <Grid className={classes.productSectionGrid}>
-            {props.productSection}
-          </Grid>
-          <Grid className={classes.navGrid}>
-            <nav className={classes.navLinks}>
+          <div className="productNavbarData">
+            <ProductsNavbar productNavbarData={props.productNavbarData} />
+            {isAnnotate() ? (
+              <Grid sx={productSectionGrid}>{props.productSection}</Grid>
+            ) : null}
+          </div>
+          <Grid sx={navGrid}>
+            <nav className="navLinks">
+              <div className="productLocation">
+                <img
+                  className="productLocationImage"
+                  src={getProductLocationIcon(
+                    props.productNavbarData.productLocation.toLowerCase()
+                  )}
+                  alt={props.productNavbarData.productLocation}
+                />
+                <p className="productLocationText">
+                  {props.productNavbarData.productLocation}
+                </p>
+              </div>
+              <Button
+                sx={documentButton}
+                onClick={() => window.open("https://docs.gliff.app/", "_blank")}
+              >
+                <img
+                  className="documentHover"
+                  src={imgSrc("document")}
+                  alt="help-center"
+                />
+              </Button>
               {auth.user ? (
-                <>
-                  <ProductIcons />
-                  <BaseProductIcon
-                    key="document"
-                    tool="document"
-                    customUrlPath="https://docs.gliff.app/"
-                    extraStyleSvg={classes.accessibleSvg}
-                    extraStyleName={classes.accessibleName}
-                  />
-                  {accountMenu}
-                </>
+                <>{accountMenu}</>
               ) : (
                 <Typography>
                   <Link to="/signin">Sign In</Link>