UserAvatar font-size consistency

src/UserAvatar/UserAvatar.test.tsx

@@ -30,6 +30,14 @@ describe("UserAvatar", () => {
     expect(avatar.innerHTML).toBe("JD");
   });
 
+  // checks the correct font size is set for two word name
+  test("correct font size set for two word name", () => {
+    const name = "John Doe";
+    const { container } = render(<UserAvatar name={name} />);
+    const avatar = container.querySelector(".MuiAvatar-root") as HTMLElement;
+    expect(avatar).toHaveStyle("font-size: 14px");
+  });
+
   // check only first and last initials are shown for more than two word name
   test("only first and last initials shown for more than two word name", () => {
     const name = "John Doe Smith";

src/UserAvatar/UserAvatar.tsx

@@ -2,19 +2,20 @@ import { Avatar } from "@mui/material";
 import React from "react";
 import { UserAvatarProps } from "./UserAvatar.types";
 
+// returns the first char of first name and first char of last name
+const getFirstAndLastChars = (str: string) => {
+  return str.charAt(0) + str.charAt(str.length - 1);
+};
+
 /**
  * UserAvatar component
  */
 export default function UserAvatar({
   img,
   name = "",
-  color = "rgb(0,0,0)"
+  color = "rgb(0,0,0)",
+  sx
 }: UserAvatarProps) {
-  // returns the first char of first name and first char of last name
-  const getFirstAndLastChars = (str: string) => {
-    return str.charAt(0) + str.charAt(str.length - 1);
-  };
-
   // set icon name
   let initials = (name === "" ? "?" : name)
     .split(" ")
@@ -27,9 +28,20 @@ export default function UserAvatar({
   return (
     <>
       {img ? (
-        <Avatar src={img} />
+        <Avatar src={img} sx={sx} />
       ) : (
-        <Avatar sx={{ backgroundColor: color }}>{initials}</Avatar>
+        <Avatar
+          sx={[
+            {
+              backgroundColor: color,
+              color: theme => theme.palette.getContrastText(color),
+              fontSize: "14px"
+            },
+            ...(Array.isArray(sx) ? sx : [sx])
+          ]}
+        >
+          {initials}
+        </Avatar>
       )}
     </>
   );

src/UserAvatar/UserAvatar.types.ts

@@ -1,3 +1,5 @@
+import { SxProps, Theme } from "@mui/material";
+
 export type UserAvatarProps = {
   /**
    * Icon background color
@@ -11,4 +13,8 @@ export type UserAvatarProps = {
    * Display Name
    */
   name?: string;
+  /**
+   * Styling
+   */
+  sx?: SxProps<Theme>;
 };

src/UserMenu/UserMenu.test.tsx

@@ -23,6 +23,10 @@ describe("User Menu", () => {
       render(<UserMenu {...defaultInputs} username="" />);
       expect(screen.getByText(/\?/i)).toBeInTheDocument();
     });
+    test("renders correct font-size", () => {
+      render(<UserMenu {...defaultInputs} username="John Doe" />);
+      expect(screen.getByText(/JD/i)).toHaveStyle("font-size: 14px");
+    });
   });
   describe("Menu header", () => {
     test("shows full username", async () => {

src/UserMenu/UserMenu.tsx

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Divider,
   IconButton,
   ListItemIcon,
@@ -10,14 +9,15 @@ import {
 } from "@mui/material";
 import { ExitToApp, VpnKey } from "@mui/icons-material";
 import React, { Fragment } from "react";
-import { UserAvatarProps, UserMenuProps } from "./UserMenu.types";
 import {
   bindMenu,
   bindTrigger,
   usePopupState
 } from "material-ui-popup-state/hooks";
 
 import { Theme } from "@mui/material/styles";
+import { UserAvatar } from "../UserAvatar";
+import { UserMenuProps } from "./UserMenu.types";
 
 // styling
 const sx = {
@@ -58,7 +58,15 @@ export default function UserMenu({
   return (
     <Fragment>
       <IconButton {...bindTrigger(popupState)} size="large" sx={sx.button}>
-        <UserAvatar username={username} />
+        <UserAvatar
+          name={username}
+          color="#bdbdbd"
+          sx={{
+            color: "#fff",
+            height: 34,
+            width: 34
+          }}
+        />
       </IconButton>
       <Menu
         {...bindMenu(popupState)}
@@ -86,38 +94,3 @@ export default function UserMenu({
     </Fragment>
   );
 }
-
-/**
- * User avatar
- *
- * Provides custom styling and converts username to max 2 initials
- */
-const UserAvatar = ({ username, ...rest }: UserAvatarProps) => {
-  const allInitials = (!username ? "?" : username)
-    .split(" ")
-    .map(s => s[0])
-    .join("")
-    .toUpperCase();
-  const initials =
-    allInitials.length <= 2 ? allInitials : getFirstAndLastChars(allInitials);
-  return (
-    <Avatar
-      {...rest}
-      sx={{
-        backgroundColor: "#bdbdbd",
-        border: "2px solid #bdbdbd",
-        color: "white",
-        fontSize: "13px",
-        height: 34,
-        width: 34
-      }}
-    >
-      {initials}
-    </Avatar>
-  );
-};
-
-// returns the first and last chars of a string concatenated
-function getFirstAndLastChars(str: string) {
-  return [str.charAt(0), str.charAt(str.length - 1)].join("");
-}