fix: Default outline shown for the avatar container if the url is invalid

Author: reshmarevi17

jest.config.js

@@ -7,6 +7,7 @@ export default {
   transform: {
     "^.+\\.[t|j]sx?$": "ts-jest",
     "^.+\\.svg?$": "<rootDir>/transform.js",
+    "^.+\\.png?$": "<rootDir>/transform.js",
     "^.+\\.scss?$": "<rootDir>/transform.js"
   },
 };

src/assets/dark/defaultAvatarDark.png

@@ -3,7 +3,8 @@ import React, { type FC } from "react";
 
 import CloseIcon from "./CloseIcon";
 import TimerIcon from "./TimerIcon";
-import DefaultAvatar from "../assets/defaultAvatar.svg";
+import defaultAvatarDark from "../assets/dark/defaultAvatarDark.png";
+import defaultAvatarLight from "../assets/light/defaultAvatarLight.png";
 import type { NotificationCardProps } from "../types";
 import { generateElapsedTimeText } from "../utils/commonUtils";
 import "../styles/card.css";
@@ -44,6 +45,7 @@ const Card: FC<NotificationCardProps> = ({
   notification,
   cardProps,
   styles,
+  darkMode,
   onNotificationCardClick,
   deleteNotificationById,
 }) => {
@@ -55,7 +57,8 @@ const Card: FC<NotificationCardProps> = ({
     event.stopPropagation();
   };
 
-  const cardConatinerStyle: CSSProperties = isRead
+  const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
+  const cardContainerStyle: CSSProperties = isRead
     ? {
       ...styles.defaultCardContainer,
       borderLeft: "4px transparent solid",
@@ -68,7 +71,7 @@ const Card: FC<NotificationCardProps> = ({
 
   return (
     <div
-      style={cardConatinerStyle}
+      style={cardContainerStyle}
       className={`${
         cardProps?.hideAvatar
           ? "siren-sdk-hide-avatar-card-container"
@@ -80,10 +83,13 @@ const Card: FC<NotificationCardProps> = ({
       data-testid={`card-${notification.id}`}
     >
       {!cardProps?.hideAvatar && (
-        <img
-          src={avatar?.imageUrl || DefaultAvatar}
-          alt=""
-          style={styles.cardIconRound}
+        <div
+          style={{
+            ...styles.cardIconRound,
+            backgroundImage: `url(${avatar?.imageUrl || defaultAvatar})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
         />
       )}
       <div className="siren-sdk-card-content-wrapper">

src/assets/defaultAvatar.svg

@@ -356,6 +356,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
         deleteNotificationById={deleteNotificationById}
         styles={styles}
         key={item.id}
+        darkMode={darkMode}
         data-testid="notification-card"
       />
     ));

src/assets/light/defaultAvatarLight.png

@@ -2,3 +2,8 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.png' {
+  const value: string;
+  export = value;
+}

src/components/Card.tsx

@@ -55,6 +55,7 @@ export type NotificationCardProps = {
   onNotificationCardClick: SirenInboxProps["onNotificationCardClick"];
   styles: SirenStyleProps;
   deleteNotificationById: (id: string) => void;
+  darkMode: boolean;
 };
 
 export type SirenNotificationButtonProps = {

src/components/SirenPanel.tsx

@@ -7,10 +7,8 @@ exports[`matches snapshot 1`] = `
     data-testid="card-1"
     style="background-color: rgb(46, 45, 48); padding: 10px; border-bottom: 0.5px solid; border-color: #344054; border-left: 4px solid #F56630;"
   >
-    <img
-      alt=""
-      src="[object Object]"
-      style="width: 40px; height: 40px; border-radius: 20px; overflow: hidden; background-color: rgb(52, 64, 84);"
+    <div
+      style="width: 40px; height: 40px; border-radius: 20px; overflow: hidden; background-color: rgb(52, 64, 84); background-size: cover; background-position: center;"
     />
     <div
       class="siren-sdk-card-content-wrapper"

src/global.d.ts

@@ -40,6 +40,7 @@ test("matches snapshot", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
+      darkMode={false}
     />
   );
 
@@ -53,6 +54,7 @@ test("renders notification card with basic content", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
+      darkMode={false}
     />
   );
 
@@ -67,6 +69,7 @@ test("triggers delete notification callback on delete button click", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
+      darkMode={false}
     />
   );
   const deleteButton = screen.getByTestId("delete-1");
@@ -83,6 +86,7 @@ test("triggers notification card click callback on card click", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{ hideAvatar: true }}
       styles={style}
+      darkMode={false}
     />
   );
 
@@ -100,6 +104,7 @@ test("renders header, subheader, and body", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
+      darkMode={false}
     />
   );
 
@@ -120,6 +125,7 @@ test("does not render avatar if hideAvatar is true", () => {
       onNotificationCardClick={mockOnNotificationCardClick}
       cardProps={{ hideAvatar: true }}
       styles={style}
+      darkMode={false}
     />
   );