From 80e69ab37d5045789cf91e0dfd2a43772102c65a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 4 Jun 2024 17:40:34 -0700
Subject: [PATCH] add card to notification

---
 src/components/StarterPack/StarterPackCard.tsx | 13 ++++++++++---
 src/view/com/notifications/FeedItem.tsx        |  5 ++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx
index 52cae2040a..ca5d123970 100644
--- a/src/components/StarterPack/StarterPackCard.tsx
+++ b/src/components/StarterPack/StarterPackCard.tsx
@@ -6,7 +6,13 @@ import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
 import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function StarterPackCard({hideTopBorder}: {hideTopBorder?: boolean}) {
+export function StarterPackCard({
+  type,
+  hideTopBorder,
+}: {
+  hideTopBorder?: boolean
+  type: 'list' | 'notification'
+}) {
   const t = useTheme()
 
   return (
@@ -15,13 +21,14 @@ export function StarterPackCard({hideTopBorder}: {hideTopBorder?: boolean}) {
         style={[
           a.flex_row,
           a.w_full,
-          !hideTopBorder && a.border_t,
           a.px_xl,
           a.py_lg,
           a.gap_md,
           t.atoms.border_contrast_low,
+          !hideTopBorder && type !== 'notification' && a.border_t,
+          type === 'notification' && [a.mt_sm, a.py_md, a.border, a.rounded_sm],
         ]}>
-        <StarterPackIcon width={36} height={36} />
+        {type === 'notification' && <StarterPackIcon width={36} height={36} />}
         <View style={a.gap_md}>
           <View>
             <Text style={[a.font_bold, a.text_md]}>Science</Text>
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 0ad8ed89a5..5cc575aacd 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -52,6 +52,7 @@ import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
 
 import hairlineWidth = StyleSheet.hairlineWidth
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 
 const MAX_AUTHORS = 5
 
@@ -305,7 +306,9 @@ let FeedItem = ({
             showLikes
           />
         ) : null}
-        {item.type === 'starter-pack-signup' ? <></> : null}
+        {item.type === 'starter-pack-signup' ? (
+          <StarterPackCard type="notification" />
+        ) : null}
       </View>
     </Link>
   )