diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js index 402b7fc..bb7d6c4 100644 --- a/src/app/UserItemListPage.js +++ b/src/app/UserItemListPage.js @@ -408,6 +408,7 @@ export function ClosetListContents({ {itemsToShow.length > 0 ? ( ) : ( @@ -446,12 +447,12 @@ export function ClosetListContents({ const ITEM_CARD_WIDTH = 112 + 16; const ITEM_CARD_HEIGHT = 171 + 16; -function ClosetItemList({ items, tradeMatchingMode }) { +function ClosetItemList({ items, canEdit, tradeMatchingMode }) { const renderItem = (item) => ( - ); @@ -521,6 +522,19 @@ function ClosetItemList({ items, tradeMatchingMode }) { ); } +function ClosetListItemCard({ item, canEdit, tradeMatchingMode }) { + return ( + alert("TODO")} + /> + ); +} + export function buildClosetListPath(closetList) { let ownsOrWants; if (closetList.ownsOrWantsItems === "OWNS") { diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js index dd7c586..2141d90 100644 --- a/src/app/components/SquareItemCard.js +++ b/src/app/components/SquareItemCard.js @@ -1,6 +1,7 @@ import React from "react"; import { Box, + IconButton, Skeleton, useColorModeValue, useTheme, @@ -10,15 +11,18 @@ import { ClassNames } from "@emotion/react"; import { Link } from "react-router-dom"; import { safeImageUrl, useCommonStyles } from "../util"; -import { CheckIcon, StarIcon } from "@chakra-ui/icons"; +import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons"; function SquareItemCard({ item, + showRemoveButton = false, + onRemove = () => {}, tradeMatchingMode = null, footer = null, ...props }) { const outlineShadowValue = useToken("shadows", "outline"); + const mdRadiusValue = useToken("radii", "md"); const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200"); const tradeMatchWantShadowColor = useColorModeValue("blue.400", "blue.200"); @@ -46,33 +50,70 @@ function SquareItemCard({ // SquareItemCard renders in large lists of 1k+ items, so we get a big // perf win by using Emotion directly instead of Chakra's styled-system // Box. - - - } - boxShadow={tradeMatchShadow} - footer={footer} - /> - + + + } + removeButton={ + showRemoveButton ? ( + + ) : null + } + boxShadow={tradeMatchShadow} + footer={footer} + /> + + {showRemoveButton && ( +
+ +
+ )} + )} ); @@ -363,6 +404,32 @@ function ItemThumbnailKindBadge({ colorScheme, children }) { ); } +function SquareItemCardRemoveButton({ onClick }) { + const backgroundColor = useColorModeValue("gray.200", "gray.500"); + + return ( + } + size="xs" + borderRadius="full" + boxShadow="lg" + backgroundColor={backgroundColor} + onClick={onClick} + _hover={{ + // Override night mode's fade-out on hover + opacity: 1, + transform: "scale(1.15, 1.15)", + }} + _focus={{ + transform: "scale(1.15, 1.15)", + boxShadow: "outline", + }} + /> + ); +} + export function SquareItemCardSkeleton({ minHeightNumLines, footer = null }) { return (