fix(service-portal): Update notification icon styling (#15219)

* Update notification icon styling * Add option to remove button docline
island-is · Jun 13, 2024 · 5bf7cbd · 5bf7cbd
1 parent f26bd9d
commit 5bf7cbd
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/apps/service-portal/src/components/Notifications/NotificationLine.tsx b/apps/service-portal/src/components/Notifications/NotificationLine.tsx
@@ -51,6 +51,8 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
             <AvatarImage
               img={data.sender.logoUrl}
               background={!isRead ? 'white' : 'blue100'}
+              as="div"
+              imageClass={styles.img}
             />
           ) : undefined}
           <Box

diff --git a/apps/service-portal/src/components/Notifications/Notifications.css.ts b/apps/service-portal/src/components/Notifications/Notifications.css.ts
@@ -9,6 +9,14 @@ export const link = style({
   overflow: 'hidden',
 })
 
+export const img = style({
+  height: 'auto',
+  width: 'auto',
+  display: 'flex',
+  maxHeight: 28,
+  maxWidth: 28,
+})
+
 globalStyle(`${link} > span`, {
   boxShadow: 'none',
 })

diff --git a/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts b/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts
@@ -30,9 +30,11 @@ export const avatar = style({
 })
 
 export const circleImg = style({
-  width: '28px',
   height: 'auto',
+  width: 'auto',
   display: 'flex',
+  maxHeight: 38,
+  maxWidth: 38,
 })
 
 export const button = style({

diff --git a/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx b/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx
@@ -13,13 +13,17 @@ interface Props {
   avatar?: ReactNode
   onClick?: (event: MouseEvent<HTMLElement>) => void
   large?: boolean
+  as?: 'div' | 'button'
+  imageClass?: string
 }
 
 export const AvatarImage: FC<Props> = ({
   img,
   background,
   avatar,
   large,
+  imageClass,
+  as = 'button',
   onClick,
 }) => {
   const { formatMessage } = useLocale()
@@ -38,14 +42,24 @@ export const AvatarImage: FC<Props> = ({
       className={cn(styles.imageContainer, {
         [styles.largeAvatar]: large,
       })}
-      component="button"
-      aria-label={formatMessage(messages.markAsBulkSelection)}
+      component={as}
+      aria-label={
+        as === 'button'
+          ? formatMessage(messages.markAsBulkSelection)
+          : undefined
+      }
       onClick={onClick}
     >
       {avatar ? (
         avatar
       ) : (
-        <img className={styles.image} src={img} alt="document" />
+        <img
+          className={cn(styles.image, {
+            [`${imageClass}`]: imageClass,
+          })}
+          src={img}
+          alt="document"
+        />
       )}
     </Box>
   )