OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Highlight trade matches with pretty shadow

Browse source 
This makes scanning the lists WAY easier imo!
This commit is contained in:
Emi Matchu 2021-06-19 11:43:51 -07:00
parent 01ea733b10
commit eace28839e
1 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/app/components/SquareItemCard.js
View file

@ -14,6 +14,26 @@ import { CheckIcon, StarIcon } from "@chakra-ui/icons";
function SquareItemCard({ item, tradeMatchingMode = null, ...props }) {
const outlineShadowValue = useToken("shadows", "outline");
const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200");
const tradeMatchWantShadowColor = useColorModeValue("blue.400", "blue.200");
const [
tradeMatchOwnShadowColorValue,
tradeMatchWantShadowColorValue,
] = useToken("colors", [tradeMatchOwnShadowColor, tradeMatchWantShadowColor]);
// When this is a trade match, give it an extra colorful shadow highlight so
// it stands out! (They'll generally be sorted to the front anyway, but this
// make it easier to scan a user's lists page, and to learn how the sorting
// works!)
let tradeMatchShadow;
if (tradeMatchingMode === "offering" && item.currentUserWantsThis) {
tradeMatchShadow = `0 0 6px ${tradeMatchWantShadowColorValue}`;
} else if (tradeMatchingMode === "seeking" && item.currentUserOwnsThis) {
tradeMatchShadow = `0 0 6px ${tradeMatchOwnShadowColorValue}`;
} else {
tradeMatchShadow = null;
}
return (
<ClassNames>
{({ css }) => (
@ -43,6 +63,7 @@ function SquareItemCard({ item, tradeMatchingMode = null, ...props }) {
tradeMatchingMode={tradeMatchingMode}
/>
}
boxShadow={tradeMatchShadow}
/>
</Link>
)}
@ -50,7 +71,12 @@ function SquareItemCard({ item, tradeMatchingMode = null, ...props }) {
);
}
function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
function SquareItemCardLayout({
name,
thumbnailImage,
minHeightNumLines = 2,
boxShadow = null,
}) {
const { brightBackground } = useCommonStyles();
const brightBackgroundValue = useToken("colors", brightBackground);
const theme = useTheme();
@ -66,7 +92,7 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: ${theme.shadows.md};
box-shadow: ${boxShadow || theme.shadows.md};
border-radius: ${theme.radii.md};
padding: ${theme.space["3"]};
width: calc(80px + 2em);