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 (