From a513094030b6c0814d85929d7b9ce5f4e7dc5a4a Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 25 Sep 2023 14:25:05 -0400
Subject: [PATCH 1/3] Add icon buttons

---
 src/components/AppBar/AppBarComponent.tsx   |  2 ++
 src/components/AppBar/NavigationButtons.tsx | 18 ++++++++++---
 src/components/AppBar/ProjectButtons.tsx    |  8 +++---
 src/components/AppBar/UserGuideButton.tsx   | 30 +++++++++++++++++++++
 src/components/AppBar/UserMenu.tsx          |  4 +--
 5 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/components/AppBar/UserGuideButton.tsx

diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx
index 36fe16f35a..8564ba195b 100644
--- a/src/components/AppBar/AppBarComponent.tsx
+++ b/src/components/AppBar/AppBarComponent.tsx
@@ -7,6 +7,7 @@ import { appBarHeight } from "components/AppBar/AppBarTypes";
 import Logo from "components/AppBar/Logo";
 import NavigationButtons from "components/AppBar/NavigationButtons";
 import ProjectButtons from "components/AppBar/ProjectButtons";
+import UserGuideButton from "components/AppBar/UserGuideButton";
 import UserMenu from "components/AppBar/UserMenu";
 import { topBarHeight } from "components/LandingPage/TopBar";
 import DownloadButton from "components/ProjectExport/DownloadButton";
@@ -41,6 +42,7 @@ export default function AppBarComponent(): ReactElement {
             </Grid>
             <Grid item>
               <UserMenu currentTab={currentTab} />
+              <UserGuideButton />
             </Grid>
           </Grid>
         </Toolbar>
diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx
index 2d01ce31c3..3fdd72cc0c 100644
--- a/src/components/AppBar/NavigationButtons.tsx
+++ b/src/components/AppBar/NavigationButtons.tsx
@@ -1,4 +1,5 @@
-import { Button } from "@mui/material";
+import { PlaylistAdd, Rule } from "@mui/icons-material";
+import { Button, Hidden, Tooltip, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -15,21 +16,23 @@ import { useWindowSize } from "utilities/useWindowSize";
 export const dataEntryButtonId = "data-entry";
 export const dataCleanupButtonId = "data-cleanup";
 
-const navButtonMaxWidthProportion = 0.12;
+const navButtonMaxWidthProportion = 0.19;
 
-/** A button that redirects to the home page */
+/** Buttons for navigating to Data Entry and Data Cleanup */
 export default function NavigationButtons(props: TabProps): ReactElement {
   return (
     <>
       <NavButton
         buttonId={dataEntryButtonId}
         currentTab={props.currentTab}
+        icon={<PlaylistAdd />}
         targetPath={Path.DataEntry}
         textId="appBar.dataEntry"
       />
       <NavButton
         buttonId={dataCleanupButtonId}
         currentTab={props.currentTab}
+        icon={<Rule />}
         targetPath={Path.Goals}
         textId="appBar.dataCleanup"
       />
@@ -39,6 +42,7 @@ export default function NavigationButtons(props: TabProps): ReactElement {
 
 interface NavButtonProps extends TabProps {
   buttonId: string;
+  icon: ReactElement;
   targetPath: Path;
   textId: string;
 }
@@ -60,10 +64,16 @@ function NavButton(props: NavButtonProps): ReactElement {
         maxHeight: appBarHeight,
         maxWidth: navButtonMaxWidthProportion * windowWidth,
         minHeight: buttonMinHeight,
+        minWidth: 0,
         width: "fit-content",
       }}
     >
-      {t(props.textId)}
+      <Tooltip title={t(props.textId)}>{props.icon}</Tooltip>
+      <Hidden smDown>
+        <Typography style={{ marginLeft: 5, marginRight: 5 }}>
+          {t(props.textId)}
+        </Typography>
+      </Hidden>
     </Button>
   );
 }
diff --git a/src/components/AppBar/ProjectButtons.tsx b/src/components/AppBar/ProjectButtons.tsx
index 275009cc2b..4c6eccb3fd 100644
--- a/src/components/AppBar/ProjectButtons.tsx
+++ b/src/components/AppBar/ProjectButtons.tsx
@@ -21,10 +21,10 @@ export const projButtonId = "project-settings";
 export const statButtonId = "project-statistics";
 
 const enum projNameLength {
-  sm = 15,
-  md = 25,
-  lg = 45,
-  xl = 75,
+  sm = 11,
+  md = 21,
+  lg = 41,
+  xl = 71,
 }
 
 export async function getHasStatsPermission(): Promise<boolean> {
diff --git a/src/components/AppBar/UserGuideButton.tsx b/src/components/AppBar/UserGuideButton.tsx
new file mode 100644
index 0000000000..c6a8ac8370
--- /dev/null
+++ b/src/components/AppBar/UserGuideButton.tsx
@@ -0,0 +1,30 @@
+import { Info } from "@mui/icons-material";
+import { Button, Tooltip } from "@mui/material";
+import { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+import { buttonMinHeight } from "components/AppBar/AppBarTypes";
+import { themeColors } from "types/theme";
+import { openUserGuide } from "utilities/pathUtilities";
+
+export default function UserGuideButton(): ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t("userMenu.userGuide")}>
+      <Button
+        id="app-bar-guide"
+        onClick={openUserGuide}
+        color="inherit"
+        style={{
+          background: themeColors.lightShade,
+          minHeight: buttonMinHeight,
+          minWidth: 0,
+          margin: 5,
+        }}
+      >
+        <Info />
+      </Button>
+    </Tooltip>
+  );
+}
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
index a091f587ac..a577fb21dd 100644
--- a/src/components/AppBar/UserMenu.tsx
+++ b/src/components/AppBar/UserMenu.tsx
@@ -1,6 +1,6 @@
 import {
   ExitToApp,
-  Help,
+  Info,
   Person,
   SettingsApplications,
 } from "@mui/icons-material";
@@ -177,7 +177,7 @@ export function UserMenuList(props: UserMenuListProps): ReactElement {
           props.onSelect();
         }}
       >
-        <Help style={iconStyle} />
+        <Info style={iconStyle} />
         {t("userMenu.userGuide")}
       </MenuItem>
 

From 2e234cfc3fc3c5e530265335df80cfc9c6adedb9 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 25 Sep 2023 15:10:40 -0400
Subject: [PATCH 2/3] Update the magic numbers

---
 src/components/AppBar/NavigationButtons.tsx |  2 +-
 src/components/AppBar/ProjectButtons.tsx    | 12 ++++--------
 src/components/AppBar/UserMenu.tsx          | 10 +++-------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx
index 3fdd72cc0c..5017200c9a 100644
--- a/src/components/AppBar/NavigationButtons.tsx
+++ b/src/components/AppBar/NavigationButtons.tsx
@@ -16,7 +16,7 @@ import { useWindowSize } from "utilities/useWindowSize";
 export const dataEntryButtonId = "data-entry";
 export const dataCleanupButtonId = "data-cleanup";
 
-const navButtonMaxWidthProportion = 0.19;
+const navButtonMaxWidthProportion = 0.2;
 
 /** Buttons for navigating to Data Entry and Data Cleanup */
 export default function NavigationButtons(props: TabProps): ReactElement {
diff --git a/src/components/AppBar/ProjectButtons.tsx b/src/components/AppBar/ProjectButtons.tsx
index 4c6eccb3fd..6ffc696099 100644
--- a/src/components/AppBar/ProjectButtons.tsx
+++ b/src/components/AppBar/ProjectButtons.tsx
@@ -21,10 +21,9 @@ export const projButtonId = "project-settings";
 export const statButtonId = "project-statistics";
 
 const enum projNameLength {
-  sm = 11,
-  md = 21,
-  lg = 41,
-  xl = 71,
+  md = 17,
+  lg = 34,
+  xl = 51,
 }
 
 export async function getHasStatsPermission(): Promise<boolean> {
@@ -78,7 +77,7 @@ export default function ProjectButtons(props: TabProps): ReactElement {
           }}
         >
           <Settings />
-          <Hidden smDown>
+          <Hidden mdDown>
             <Typography
               display="inline"
               style={{ marginLeft: 5, marginRight: 5 }}
@@ -92,9 +91,6 @@ export default function ProjectButtons(props: TabProps): ReactElement {
               <Hidden mdDown lgUp>
                 {shortenName(projectName, projNameLength.md)}
               </Hidden>
-              <Hidden mdUp smDown>
-                {shortenName(projectName, projNameLength.sm)}
-              </Hidden>
             </Typography>
           </Hidden>
         </Button>
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
index a577fb21dd..a07dfb3cbf 100644
--- a/src/components/AppBar/UserMenu.tsx
+++ b/src/components/AppBar/UserMenu.tsx
@@ -33,9 +33,8 @@ import { openUserGuide } from "utilities/pathUtilities";
 const idAffix = "user-menu";
 
 const enum usernameLength {
-  md = 13,
-  lg = 19,
-  xl = 25,
+  lg = 12,
+  xl = 24,
 }
 
 export async function getIsAdmin(): Promise<boolean> {
@@ -81,15 +80,12 @@ export default function UserMenu(props: TabProps): ReactElement {
         id={`avatar-${idAffix}`}
       >
         {username ? (
-          <Hidden mdDown>
+          <Hidden lgDown>
             <Typography style={{ marginLeft: 5, marginRight: 5 }}>
               <Hidden xlDown>{shortenName(username, usernameLength.xl)}</Hidden>
               <Hidden xlUp lgDown>
                 {shortenName(username, usernameLength.lg)}
               </Hidden>
-              <Hidden lgUp mdDown>
-                {shortenName(username, usernameLength.md)}
-              </Hidden>
             </Typography>
           </Hidden>
         ) : (

From 9da0d195208b1ef211dca38edb426ebaf65b9980 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 25 Sep 2023 15:19:42 -0400
Subject: [PATCH 3/3] Sort props

---
 src/components/AppBar/ProjectButtons.tsx  |  6 +++---
 src/components/AppBar/UserGuideButton.tsx |  4 ++--
 src/components/AppBar/UserMenu.tsx        | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/AppBar/ProjectButtons.tsx b/src/components/AppBar/ProjectButtons.tsx
index 6ffc696099..0661cc04d0 100644
--- a/src/components/AppBar/ProjectButtons.tsx
+++ b/src/components/AppBar/ProjectButtons.tsx
@@ -51,14 +51,14 @@ export default function ProjectButtons(props: TabProps): ReactElement {
       {hasStatsPermission && (
         <Tooltip title={t("appBar.statistics")}>
           <Button
+            color="inherit"
             id={statButtonId}
             onClick={() => navigate(Path.Statistics)}
-            color="inherit"
             style={{
               background: tabColor(props.currentTab, Path.Statistics),
+              margin: 5,
               minHeight: buttonMinHeight,
               minWidth: 0,
-              margin: 5,
             }}
           >
             <BarChart />
@@ -67,9 +67,9 @@ export default function ProjectButtons(props: TabProps): ReactElement {
       )}
       <Tooltip title={t("appBar.projectSettings")}>
         <Button
+          color="inherit"
           id={projButtonId}
           onClick={() => navigate(Path.ProjSettings)}
-          color="inherit"
           style={{
             background: tabColor(props.currentTab, Path.ProjSettings),
             minHeight: buttonMinHeight,
diff --git a/src/components/AppBar/UserGuideButton.tsx b/src/components/AppBar/UserGuideButton.tsx
index c6a8ac8370..1e6cb45919 100644
--- a/src/components/AppBar/UserGuideButton.tsx
+++ b/src/components/AppBar/UserGuideButton.tsx
@@ -13,14 +13,14 @@ export default function UserGuideButton(): ReactElement {
   return (
     <Tooltip title={t("userMenu.userGuide")}>
       <Button
+        color="inherit"
         id="app-bar-guide"
         onClick={openUserGuide}
-        color="inherit"
         style={{
           background: themeColors.lightShade,
+          margin: 5,
           minHeight: buttonMinHeight,
           minWidth: 0,
-          margin: 5,
         }}
       >
         <Info />
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
index a07dfb3cbf..1a256d6db5 100644
--- a/src/components/AppBar/UserMenu.tsx
+++ b/src/components/AppBar/UserMenu.tsx
@@ -69,15 +69,15 @@ export default function UserMenu(props: TabProps): ReactElement {
       <Button
         aria-controls="user-menu"
         aria-haspopup="true"
-        onClick={handleClick}
         color="secondary"
+        id={`avatar-${idAffix}`}
+        onClick={handleClick}
         style={{
           background: tabColor(props.currentTab, Path.UserSettings),
           minHeight: buttonMinHeight,
           minWidth: 0,
           padding: 0,
         }}
-        id={`avatar-${idAffix}`}
       >
         {username ? (
           <Hidden lgDown>
@@ -98,11 +98,11 @@ export default function UserMenu(props: TabProps): ReactElement {
         )}
       </Button>
       <Menu
-        id={idAffix}
         anchorEl={anchorElement}
-        open={Boolean(anchorElement)}
-        onClose={handleClose}
         anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        id={idAffix}
+        onClose={handleClose}
+        open={Boolean(anchorElement)}
         transformOrigin={{ horizontal: "right", vertical: "top" }}
       >
         <WrappedUserMenuList isAdmin={isAdmin} onSelect={handleClose} />
@@ -189,8 +189,8 @@ export function UserMenuList(props: UserMenuListProps): ReactElement {
       </MenuItem>
 
       <MenuItem
-        id={`${idAffix}-version`}
         disabled
+        id={`${idAffix}-version`}
         style={{ justifyContent: "center" }}
       >
         {combineAppRelease}