Improve AppBar for windows <400px wide (#2637)

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>

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.2;
 
-/** 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>
   );
 }

src/components/AppBar/ProjectButtons.tsx

@@ -21,10 +21,9 @@ export const projButtonId = "project-settings";
 export const statButtonId = "project-statistics";
 
 const enum projNameLength {
-  sm = 15,
-  md = 25,
-  lg = 45,
-  xl = 75,
+  md = 17,
+  lg = 34,
+  xl = 51,
 }
 
 export async function getHasStatsPermission(): Promise<boolean> {
@@ -52,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 />
@@ -68,17 +67,17 @@ 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,
             minWidth: 0,
           }}
         >
           <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>

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
+        color="inherit"
+        id="app-bar-guide"
+        onClick={openUserGuide}
+        style={{
+          background: themeColors.lightShade,
+          margin: 5,
+          minHeight: buttonMinHeight,
+          minWidth: 0,
+        }}
+      >
+        <Info />
+      </Button>
+    </Tooltip>
+  );
+}

src/components/AppBar/UserMenu.tsx

@@ -1,6 +1,6 @@
 import {
   ExitToApp,
-  Help,
+  Info,
   Person,
   SettingsApplications,
 } from "@mui/icons-material";
@@ -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> {
@@ -70,26 +69,23 @@ 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 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>
         ) : (
@@ -102,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} />
@@ -177,7 +173,7 @@ export function UserMenuList(props: UserMenuListProps): ReactElement {
           props.onSelect();
         }}
       >
-        <Help style={iconStyle} />
+        <Info style={iconStyle} />
         {t("userMenu.userGuide")}
       </MenuItem>
 
@@ -193,8 +189,8 @@ export function UserMenuList(props: UserMenuListProps): ReactElement {
       </MenuItem>
 
       <MenuItem
-        id={`${idAffix}-version`}
         disabled
+        id={`${idAffix}-version`}
         style={{ justifyContent: "center" }}
       >
         {combineAppRelease}