From fbc864bfd254fa6cecea938396cc387196117ed8 Mon Sep 17 00:00:00 2001
From: aabidsofi19 <mailtoaabid01@gmail.com>
Date: Wed, 1 Nov 2023 16:14:46 +0530
Subject: [PATCH 1/2] make the eventActors avtar overlapping stack

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>
---
 ui/components/NotificationCenter/metadata.js  | 12 +++-
 .../NotificationCenter/notification.js        | 69 ++++++++++++++-----
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/ui/components/NotificationCenter/metadata.js b/ui/components/NotificationCenter/metadata.js
index ed6c175b614..a806c8f3451 100644
--- a/ui/components/NotificationCenter/metadata.js
+++ b/ui/components/NotificationCenter/metadata.js
@@ -96,7 +96,17 @@ export const ErrorMetadataFormatter = ({ metadata, event }) => {
 };
 
 const EmptyState = ({ event }) => {
-  return <Typography variant="body1"> {event.description} </Typography>;
+  return (
+    <Typography
+      variant="body1"
+      style={{
+        marginBlock: '0.5rem',
+      }}
+    >
+      {' '}
+      {event.description}{' '}
+    </Typography>
+  );
 };
 
 export const FormattedMetadata = ({ event }) => {
diff --git a/ui/components/NotificationCenter/notification.js b/ui/components/NotificationCenter/notification.js
index d44f07fadb3..8b9f7dc0317 100644
--- a/ui/components/NotificationCenter/notification.js
+++ b/ui/components/NotificationCenter/notification.js
@@ -90,6 +90,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'start',
+    paddingTop: '1rem',
   },
 
   descriptionHeading: {
@@ -113,6 +114,36 @@ export const canTruncateDescription = (description) => {
   return description.length > MAX_NOTIFICATION_DESCRIPTION_LENGTH;
 };
 
+const AvatarStack = ({ avatars, direction }) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: direction,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '0',
+
+        '& .MuiAvatar-root': {
+          width: '2rem',
+          height: '2rem',
+          border: '0.05rem solid ' + theme.palette.secondary.elevatedComponents2,
+          boxShadow: '0 0 0 0.1rem ' + theme.palette.secondary.elevatedComponents2,
+        },
+      }}
+    >
+      {avatars.map((avatar, index) => (
+        <Tooltip title={avatar.name} placement="top" key={index}>
+          <div style={{ zIndex: avatars.length - index, marginTop: '-0.4rem' }}>
+            <Avatar alt={avatar.name} src={avatar.avatar_url} />
+          </div>
+        </Tooltip>
+      ))}
+    </Box>
+  );
+};
+
 const useMenuStyles = makeStyles((theme) => {
   return {
     paper: {
@@ -324,6 +355,21 @@ export const Notification = withErrorBoundary(({ event_id }) => {
     );
   };
 
+  const eventActors = [
+    ...(event.user_id && user
+      ? [{ name: userName, avatar_url: userAvatarUrl, tooltip: userName }]
+      : []),
+    ...(event.system_id
+      ? [
+          {
+            name: 'Meshery',
+            avatar_url: '/static/img/meshery-logo.png',
+            tooltip: `System ID: ${event.system_id}`,
+          },
+        ]
+      : []),
+  ];
+
   return (
     <Slide
       in={isVisible}
@@ -380,24 +426,13 @@ export const Notification = withErrorBoundary(({ event_id }) => {
           <ErrorBoundary>
             <Grid container className={classes.expanded}>
               <Grid item sm={1} className={classes.actorAvatar}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    gridGap: '0.5rem',
-                    flexDirection: { xs: 'row', md: 'column' },
+                <AvatarStack
+                  avatars={eventActors}
+                  direction={{
+                    xs: 'row',
+                    md: 'column',
                   }}
-                >
-                  {event.user_id && user && (
-                    <Tooltip title={userName} placement="top">
-                      <Avatar alt={userName} src={userAvatarUrl} />
-                    </Tooltip>
-                  )}
-                  {event.system_id && (
-                    <Tooltip title={`System ID: ${event.system_id}`} placement="top">
-                      <Avatar src="/static/img/meshery-logo.png" />
-                    </Tooltip>
-                  )}
-                </Box>
+                />
               </Grid>
               <Grid
                 item

From d61e3cea8447058556b4f35c637ba9786755e8c5 Mon Sep 17 00:00:00 2001
From: aabidsofi19 <mailtoaabid01@gmail.com>
Date: Wed, 1 Nov 2023 20:09:52 +0530
Subject: [PATCH 2/2] fix color

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>
---
 ui/components/NotificationCenter/notification.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/components/NotificationCenter/notification.js b/ui/components/NotificationCenter/notification.js
index 8b9f7dc0317..f4bb0922176 100644
--- a/ui/components/NotificationCenter/notification.js
+++ b/ui/components/NotificationCenter/notification.js
@@ -128,8 +128,7 @@ const AvatarStack = ({ avatars, direction }) => {
         '& .MuiAvatar-root': {
           width: '2rem',
           height: '2rem',
-          border: '0.05rem solid ' + theme.palette.secondary.elevatedComponents2,
-          boxShadow: '0 0 0 0.1rem ' + theme.palette.secondary.elevatedComponents2,
+          border: '0.05rem solid ' + theme.palette.secondary.menuActionText,
         },
       }}
     >