add card to notification

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>

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>
   )