Show the being deleted item in the confirmation modal

packages/web/components/elements/StyledText.tsx

@@ -52,9 +52,9 @@ const textVariants = {
       margin: 0,
     },
     modalTitle: {
-      fontSize: '29px',
-      lineHeight: '37.7px',
-      color: '$textDefault',
+      fontSize: '16px',
+      color: '$grayText',
+      lineHeight: '1.50',
       margin: 0,
     },
     boldText: {
@@ -194,13 +194,10 @@ export const StyledList = styled('ul', {
   color: '$grayTextContrast',
 })
 
-export const StyledImg = styled('img', {
-})
+export const StyledImg = styled('img', {})
 
 export const StyledAnchor = styled('a', {
-  textDecoration: 'none'
+  textDecoration: 'none',
 })
 
-export const StyledMark = styled('mark', {
-
-})
+export const StyledMark = styled('mark', {})

packages/web/components/patterns/ConfirmationModal.tsx

@@ -11,6 +11,7 @@ import { useEffect, useRef } from 'react'
 
 type ConfirmationModalProps = {
   message?: string
+  richMessage?: React.ReactNode
   icon?: React.ReactNode
   acceptButtonLabel?: string
   onAccept: () => void
@@ -24,7 +25,11 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
       <ModalContent css={{ bg: '$grayBg', maxWidth: '20em' }}>
         <VStack alignment="center" distribution="center" css={{ p: '$2' }}>
           {props.icon ? props.icon : null}
-          <StyledText>{props.message}</StyledText>
+          {props.richMessage ? (
+            props.richMessage
+          ) : (
+            <StyledText>{props.message}</StyledText>
+          )}
           <HStack distribution="center" css={{ pt: '$2' }}>
             <Button
               style="ctaOutlineYellow"

packages/web/components/patterns/DeleteItemConfirmationModal.tsx

@@ -0,0 +1,66 @@
+import {
+  ModalRoot,
+  ModalContent,
+  ModalOverlay,
+} from '../elements/ModalPrimitives'
+import { VStack, HStack } from '../elements/LayoutPrimitives'
+import { Button } from '../elements/Button'
+import { StyledText } from '../elements/StyledText'
+import { useConfirmListener } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
+import { useEffect, useRef } from 'react'
+
+type ConfirmationModalProps = {
+  message?: string
+  richMessage?: React.ReactNode
+  icon?: React.ReactNode
+  acceptButtonLabel?: string
+  onAccept: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export function DeleteItemConfirmationModal(
+  props: ConfirmationModalProps
+): JSX.Element {
+  return (
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+      <ModalOverlay />
+      <ModalContent css={{ bg: '$grayBg', maxWidth: '20em' }}>
+        <VStack alignment="center" distribution="end" css={{ p: '$2' }}>
+          {props.icon ? props.icon : null}
+          {props.richMessage ? (
+            props.richMessage
+          ) : (
+            <StyledText>{props.message}</StyledText>
+          )}
+          <HStack distribution="end" css={{ pt: '$2' }}>
+            <Button
+              style="ctaOutlineYellow"
+              css={{ mr: '$2' }}
+              onClick={() => props.onOpenChange(false)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  props.onOpenChange(false)
+                }
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              style="ctaDarkYellow"
+              onClick={props.onAccept}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  props.onAccept()
+                }
+              }}
+            >
+              {props.acceptButtonLabel ?? 'Confirm'}
+            </Button>
+          </HStack>
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -1158,10 +1158,32 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
       )}
       {showRemoveLinkConfirmation && (
         <ConfirmationModal
-          message={
-            'Are you sure you want to remove this item? All associated notes and highlights will be deleted.'
+          richMessage={
+            <VStack alignment="center" distribution="center">
+              <StyledText style="modalTitle" css={{ margin: '8px' }}>
+                Are you sure you want to delete this item? All associated notes
+                and highlights will be deleted.
+              </StyledText>
+              {props.linkToRemove?.node && viewerData?.me && (
+                <Box
+                  css={{
+                    transform: 'scale(0.8)',
+                    opacity: 0.5,
+                    pointerEvents: 'none',
+                  }}
+                >
+                  <LinkedItemCard
+                    item={props.linkToRemove?.node}
+                    viewer={viewerData.me}
+                    layout="GRID_LAYOUT"
+                    handleAction={() => {}}
+                  />
+                </Box>
+              )}
+            </VStack>
           }
           onAccept={removeItem}
+          acceptButtonLabel="Delete Item"
           onOpenChange={() => setShowRemoveLinkConfirmation(false)}
         />
       )}