redesign app layout: set different background colors to avatars depending on user's name

Client/src/Components/Avatar/index.jsx

@@ -3,6 +3,27 @@ import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 
+/**
+ * Generates a color based on the input string.
+ * @param {string} string - The input string to generate the color from.
+ * @returns {string}
+ */
+const stringToColor = (string) => {
+  let hash = 0;
+  let i;
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = "#";
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+
+  return color;
+};
+
 /**
  * @component
  * @param {Object} props
@@ -37,6 +58,7 @@ const Avatar = ({ src, small, sx }) => {
       sx={{
         fontSize: small ? "16px" : "22px",
         fontWeight: 400,
+        backgroundColor: stringToColor(`${user?.firstName} ${user?.lastName}`),
         display: "inline-flex",
         "&::before": {
           content: `""`,
@@ -53,7 +75,7 @@ const Avatar = ({ src, small, sx }) => {
       }}
     >
       {user.firstName?.charAt(0)}
-      {!small && user.lastName?.charAt(0)}
+      {user.lastName?.charAt(0)}
     </MuiAvatar>
   );
 };

Client/src/Components/Sidebar/index.jsx

@@ -23,13 +23,6 @@ import Arrow from "../../assets/icons/down-arrow.svg?react";
 
 import "./index.css";
 
-/**
- * @component
- * Sidebar component serves as a sidebar containing a menu.
- *
- * @returns {JSX.Element} The JSX element representing the Sidebar component.
- */
-
 const menu = [
   { name: "Monitors", path: "monitors", icon: <Monitors /> },
   { name: "Incidents", path: "incidents", icon: <Incidents /> },
@@ -48,6 +41,13 @@ const icons = {
   Logout: <LogoutSvg />,
 };
 
+/**
+ * @component
+ * Sidebar component serves as a sidebar containing a menu.
+ *
+ * @returns {JSX.Element} The JSX element representing the Sidebar component.
+ */
+
 function Sidebar() {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -173,7 +173,7 @@ function Sidebar() {
           <Typography component="span" ml={theme.gap.xs}>
             {authState.user?.firstName} {authState.user?.lastName}
           </Typography>
-          <Arrow style={{marginTop: "2px"}}/>
+          <Arrow style={{ marginTop: "2px", marginLeft: "auto" }} />
         </Stack>
       </Tooltip>
       <Menu