From e71b8ec7ae7b37dc1d5da4355460e2b448ae039c Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Thu, 16 Apr 2026 10:35:50 -0700
Subject: [PATCH] feat: notification item redesign

---
 .../NotificationActivityStatus.tsx            | 47 ++++++++++++++-----
 .../notificationItem/NotificationItem.tsx     |  1 -
 .../NotificationsContainer.tsx                |  2 +-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx b/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
index db043051..51c9994e 100644
--- a/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
+++ b/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Box,
   Card,
   Group,
   Menu,
@@ -16,6 +17,7 @@ import {
   NotificationType,
   CollectionAccessType,
 } from '@/api-client';
+
 import { Fragment } from 'react';
 import styles from '../../../feeds/components/feedActivityStatus/FeedActivityStatus.module.css';
 import { getRelativeTime } from '@/lib/utils/time';
@@ -239,21 +241,40 @@ export default function NotificationActivityStatus(props: Props) {
   return (
     <Card p={0} className={styles.root} radius={'lg'}>
       <Stack gap={'xs'} p={'xs'}>
-        <Group gap={'xs'} wrap="nowrap" align="center" justify="space-between">
-          <Group gap={'xs'} wrap="nowrap" align="center">
-            {TypeIcon && (
-              <ThemeIcon size={'sm'} variant="light" radius={'xl'}>
-                <TypeIcon size={12} />
-              </ThemeIcon>
-            )}
-            <LinkAvatar
-              href={`/profile/${props.user.handle}`}
-              src={props.user.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
-              alt={`${props.user.name}'s' avatar`}
-            />
+        <Group gap={'xs'} justify="space-between">
+          <Group gap={'xs'} align="center" wrap="nowrap">
+            <Box
+              pos="relative"
+              style={{ display: 'inline-block', flexShrink: 0 }}
+            >
+              <LinkAvatar
+                href={`/profile/${props.user.handle}`}
+                src={props.user.avatarUrl?.replace(
+                  'avatar',
+                  'avatar_thumbnail',
+                )}
+                alt={`${props.user.name}'s' avatar`}
+              />
+              {TypeIcon && (
+                <ThemeIcon
+                  size={20}
+                  radius="xl"
+                  pos="absolute"
+                  bottom={-4}
+                  right={-5}
+                  style={{
+                    border:
+                      '2px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4))',
+                  }}
+                >
+                  <TypeIcon size={10} />
+                </ThemeIcon>
+              )}
+            </Box>
+
             <Text fw={500}>
               {getActivityText()}
-              <Text fz={'sm'} fw={600} c={'gray'} span display={'block'}>
+              <Text fz={'sm'} fw={600} c={'gray'} display={'block'} span>
                 {time}
               </Text>
             </Text>
diff --git a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
index dd671d0d..e582d9ef 100644
--- a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
+++ b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
@@ -61,7 +61,6 @@ export default function NotificationItem(props: Props) {
                 targetType="USER"
                 targetHandle={notification.item.user.handle}
                 initialIsFollowing={notification.item.user.isFollowing}
-                followText="Follow back"
               />
             ) : undefined
           }
diff --git a/src/webapp/features/notifications/containers/notificationsContainer/NotificationsContainer.tsx b/src/webapp/features/notifications/containers/notificationsContainer/NotificationsContainer.tsx
index 7fe0c9a4..8c19d331 100644
--- a/src/webapp/features/notifications/containers/notificationsContainer/NotificationsContainer.tsx
+++ b/src/webapp/features/notifications/containers/notificationsContainer/NotificationsContainer.tsx
@@ -101,7 +101,7 @@ export default function NotificationsContainer() {
         <Group justify="end" mb="md">
           <Button
             onClick={handleMarkAllAsRead}
-            variant="subtle"
+            variant="light"
             color="tangerine"
             size="sm"
             leftSection={<IoCheckmarkDoneSharp size={18} />}
-- 
2.51.2