fix: revert seen indicator to notification-item

hikka-io · May 26, 2024 · d34020e · d34020e
1 parent 0ec5f5a
commit d34020e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/components/content-card/content-card.tsx b/components/content-card/content-card.tsx
@@ -115,7 +115,7 @@ const Content = memo(
                         >
                             <Comp
                                 href={href || ''}
-                                className="absolute left-0 top-0 flex size-full items-center justify-center bg-secondary/60"
+                                className="absolute left-0 top-0 flex size-full items-center justify-center rounded-md bg-secondary/60"
                             >
                                 {poster ? (
                                     typeof poster === 'string' ? (

diff --git a/components/ui/horizontal-card.tsx b/components/ui/horizontal-card.tsx
@@ -24,6 +24,7 @@ interface Props extends ComponentProps<'div'> {
     imageClassName?: string;
     imageContainerClassName?: string;
     imageRatio?: number;
+    imageChildren?: ReactNode;
 }
 
 const HorizontalCard: FC<Props> = ({
@@ -40,6 +41,7 @@ const HorizontalCard: FC<Props> = ({
     imageClassName,
     imageContainerClassName,
     imageRatio,
+    imageChildren,
     className,
     children,
     ...props
@@ -52,7 +54,9 @@ const HorizontalCard: FC<Props> = ({
                 containerRatio={imageRatio}
                 href={href}
                 poster={image}
-            />
+            >
+                {imageChildren}
+            </ContentCard>
 
             <div className="flex min-w-0 flex-1 flex-col gap-2">
                 <div className="flex items-center gap-2">

diff --git a/features/common/navbar/notifications-menu/notification-item.tsx b/features/common/navbar/notifications-menu/notification-item.tsx
@@ -39,7 +39,13 @@ const NotificationItem: FC<Props> = ({ data }) => {
                     createdAt={data.created}
                     image={data.icon}
                     imageRatio={1}
+                    imageClassName="overflow-visible"
                     imageContainerClassName="w-8"
+                    imageChildren={
+                        !data.seen && (
+                            <div className="absolute -bottom-0.5 -right-0.5 size-2 rounded-full border border-secondary/60 bg-warning" />
+                        )
+                    }
                 >
                     {data.poster && data.poster}
                 </HorizontalCard>