From 6a918bd07457a3d66f2389fe8e450cbad1617b96 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 24 Nov 2022 14:56:44 +0800 Subject: [PATCH 1/4] Show the being deleted item in the confirmation modal --- .../web/components/elements/StyledText.tsx | 15 ++--- .../components/patterns/ConfirmationModal.tsx | 7 +- .../patterns/DeleteItemConfirmationModal.tsx | 66 +++++++++++++++++++ .../templates/homeFeed/HomeFeedContainer.tsx | 26 +++++++- 4 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 packages/web/components/patterns/DeleteItemConfirmationModal.tsx diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 14258784c..53efb2229 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/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', {}) diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx index 8e553c8f1..0e9f3ca17 100644 --- a/packages/web/components/patterns/ConfirmationModal.tsx +++ b/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 { {props.icon ? props.icon : null} - {props.message} + {props.richMessage ? ( + props.richMessage + ) : ( + {props.message} + )} + + + + + + ) +} diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 420e7c4c2..0380ced0e 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1158,10 +1158,32 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { )} {showRemoveLinkConfirmation && ( + + Are you sure you want to delete this item? All associated notes + and highlights will be deleted. + + {props.linkToRemove?.node && viewerData?.me && ( + + {}} + /> + + )} + } onAccept={removeItem} + acceptButtonLabel="Delete Item" onOpenChange={() => setShowRemoveLinkConfirmation(false)} /> )} From 1b731ece90247f4e1ecec7a7f73311752d18134e Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 24 Nov 2022 14:57:41 +0800 Subject: [PATCH 2/4] Make delete language consistent on iOS and web --- .../Sources/App/Views/Home/HomeFeedViewIOS.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift index cc97741df..c94991fd8 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift @@ -397,9 +397,9 @@ import Views } .padding(.top, 0) .listStyle(PlainListStyle()) - .alert("Are you sure you want to remove this item? All associated notes and highlights will be deleted.", + .alert("Are you sure you want to delete this item? All associated notes and highlights will be deleted.", isPresented: $confirmationShown) { - Button("Remove Item") { + Button("Delete Item") { if let itemToRemove = itemToRemove { withAnimation { viewModel.removeLink(dataService: dataService, objectID: itemToRemove.objectID) @@ -486,8 +486,8 @@ import Views } } } - .alert("Are you sure you want to remove this item? All associated notes and highlights will be deleted.", isPresented: $confirmationShown) { - Button("Remove Item", role: .destructive) { + .alert("Are you sure you want to delete this item? All associated notes and highlights will be deleted.", isPresented: $confirmationShown) { + Button("Delete Item", role: .destructive) { if let itemToRemove = itemToRemove { withAnimation { viewModel.removeLink(dataService: dataService, objectID: itemToRemove.objectID) From 2d0c0aabcd1f502a7545c5bfb5b80001bea6c7c1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 24 Nov 2022 15:07:02 +0800 Subject: [PATCH 3/4] Allow empty arrow on grid item since interaction is disabled on this item --- packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 0380ced0e..717af44ca 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1176,6 +1176,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { item={props.linkToRemove?.node} viewer={viewerData.me} layout="GRID_LAYOUT" + // eslint-disable-next-line @typescript-eslint/no-empty-function handleAction={() => {}} /> From d6393c58556048f2f7d114ffa602faa6ce19e85e Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 24 Nov 2022 15:55:54 +0800 Subject: [PATCH 4/4] Style tweaks on delete confirmation view --- packages/web/components/elements/StyledText.tsx | 1 + .../components/templates/homeFeed/HomeFeedContainer.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 53efb2229..f1c6b5c61 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -53,6 +53,7 @@ const textVariants = { }, modalTitle: { fontSize: '16px', + fontWeight: '600', color: '$grayText', lineHeight: '1.50', margin: 0, diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 717af44ca..178f6148e 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1160,16 +1160,17 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { - + Are you sure you want to delete this item? All associated notes and highlights will be deleted. {props.linkToRemove?.node && viewerData?.me && (