Consistent UserAvatar in UserMenu and elsewhere

IPG-Automotive-UK · Nov 17, 2023 · e217582 · e217582
1 parent a96caab
commit e217582
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 46 deletions.
diff --git a/src/UserAvatar/UserAvatar.tsx b/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,16 @@ export default function UserAvatar({
   return (
     <>
       {img ? (
-        <Avatar src={img} />
+        <Avatar src={img} sx={sx} />
       ) : (
-        <Avatar sx={{ backgroundColor: color }}>{initials}</Avatar>
+        <Avatar
+          sx={[
+            { backgroundColor: color, fontSize: "14px" },
+            ...(Array.isArray(sx) ? sx : [sx])
+          ]}
+        >
+          {initials}
+        </Avatar>
       )}
     </>
   );

diff --git a/src/UserAvatar/UserAvatar.types.ts b/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>;
 };
diff --git a/src/UserMenu/UserMenu.tsx b/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("");
-}