style rating bubble

frontend/app/notification/notificationbubbles.less

@@ -3,8 +3,8 @@
 
 .notification-bubbles {
     display: flex;
-    width: 380px;
+    width: 432px;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: flex-end;
     row-gap: 8px;
 }

frontend/app/notification/notificationpopover.tsx

@@ -37,8 +37,10 @@ const NotificationPopover = () => {
         setNotificationPopoverMode(!notificationPopoverMode);
     }, [notificationPopoverMode]);
 
-    const hasErrors = notifications.some((n) => n.statusType === "error");
-    const hasUpdate = notifications.some((n) => n.statusType === "update");
+    const filteredNotifications = notifications.filter((n) => n.componentType == null);
+
+    const hasErrors = filteredNotifications.some((n) => n.statusType === "error");
+    const hasUpdate = filteredNotifications.some((n) => n.statusType === "update");
 
     const addOnClassNames = hasUpdate ? "solid green" : hasErrors ? "solid red" : "ghost grey";
 
@@ -61,12 +63,12 @@ const NotificationPopover = () => {
                     "notification-trigger-button horizontal-padding-6 vertical-padding-4 border-radius-",
                     addOnClassNames
                 )}
-                disabled={notifications.length === 0}
+                disabled={filteredNotifications.length === 0}
                 onClick={handleTogglePopover}
             >
                 {getIcon()}
             </PopoverButton>
-            {notifications.length > 0 && (
+            {filteredNotifications.length > 0 && (
                 <PopoverContent className="notification-content">
                     <div className="header">
                         <span>Notifications</span>
@@ -85,7 +87,7 @@ const NotificationPopover = () => {
                         options={{ scrollbars: { autoHide: "leave" } }}
                         style={{ maxHeight: window.innerHeight / 2 }}
                     >
-                        {notifications.map((notif, index) => (
+                        {filteredNotifications.map((notif, index) => (
                             <Fragment key={notif.id}>
                                 <NotificationItem
                                     className={clsx({ hovered: hoveredId === notif.id })}
@@ -98,7 +100,7 @@ const NotificationPopover = () => {
                                     onMouseEnter={() => setHoveredId(notif.id)}
                                     onMouseLeave={() => setHoveredId(null)}
                                 />
-                                {index !== notifications.length - 1 && <div className="divider"></div>}
+                                {index !== filteredNotifications.length - 1 && <div className="divider"></div>}
                             </Fragment>
                         ))}
                     </OverlayScrollbarsComponent>

frontend/app/notification/ratingbubble.less

@@ -1,33 +1,10 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.notification-title {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
-    margin-bottom: 3px;
-    color: var(--success-color);
-}
-
-.notification-message {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    opacity: 0.7;
-}
-
-.close-btn {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-.rating-bubble {
+.notification-rating-bubble {
     position: relative;
     display: flex;
-    width: 380px;
+    width: 432px;
     padding: 16px 24px 16px 16px;
     align-items: flex-start;
     gap: 12px;
@@ -35,14 +12,25 @@
     border: 0.5px solid rgba(255, 255, 255, 0.12);
     background: #232323;
     box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-}
 
-.notification-inner {
-    display: flex;
-    align-items: flex-start;
-    column-gap: 6px;
-}
+    .notification-inner {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        column-gap: 6px;
 
-&.hovered {
-    background: #292929;
+        .actions-wrapper {
+            display: flex;
+            column-gap: 9px;
+            margin-top: 12px;
+
+            button {
+                width: 32px;
+                height: 32px;
+                padding: 0;
+                text-align: center;
+                justify-content: center;
+            }
+        }
+    }
 }

frontend/app/notification/ratingbubble.tsx

@@ -30,7 +30,7 @@ const RatingBubble = ({ notification, onRemove }: RatingBubbleProps) => {
     };
 
     return (
-        <div className={clsx("rating-bubble")} title="Click to Copy Notification Message">
+        <div className={clsx("notification-rating-bubble")} title="Click to Copy Notification Message">
             <Button
                 className="close-btn ghost grey vertical-padding-10"
                 onClick={(e) => {
@@ -42,13 +42,13 @@ const RatingBubble = ({ notification, onRemove }: RatingBubbleProps) => {
                 <i className={clsx(makeIconClass("close", false))}></i>
             </Button>
             <div className="notification-inner">
-                <div className="notification-text">
-                    {title && <div className={clsx("notification-title green")}>{title}</div>}
-                    {message && <div className="notification-message">{message}</div>}
+                {title && <div className={clsx("notification-title green")}>{title}</div>}
+                {message && <div className="notification-message">{message}</div>}
+                <div className="actions-wrapper">
                     {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((rating) => (
                         <Button
                             key={rating}
-                            className={clsx(hoveredButtons[rating] ? "green" : "grey")}
+                            className={clsx("border-radius-4", hoveredButtons[rating] ? "green" : "grey")}
                             onClick={() => handleRatingClick(rating)}
                             onMouseEnter={() => handleMouseEnter(rating)}
                             onMouseLeave={() => handleMouseLeave(rating)}