fix CSS bugs in Item

This commit is contained in:
Matt Dunn-Rankin 2020-04-30 00:30:27 -07:00
parent 2db0e33f28
commit a3204cd2cf

View file

@ -28,21 +28,27 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
return ( return (
<ItemContainer> <ItemContainer>
<Box>
<ItemThumbnail <ItemThumbnail
src={`/api/assetProxy?url=${encodeURIComponent(item.thumbnailUrl)}`} src={`/api/assetProxy?url=${encodeURIComponent(item.thumbnailUrl)}`}
isWorn={isWorn} isWorn={isWorn}
/> />
</Box>
<Box width="3" /> <Box width="3" />
<Box>
<ItemName id={itemNameId} isWorn={isWorn}> <ItemName id={itemNameId} isWorn={isWorn}>
{item.name} {item.name}
</ItemName> </ItemName>
</Box>
<Box flexGrow="1" /> <Box flexGrow="1" />
{isInOutfit && ( {isInOutfit && (
<Box>
<RemoveItemButton <RemoveItemButton
onClick={() => onClick={() =>
dispatchToOutfit({ type: "removeItem", itemId: item.id }) dispatchToOutfit({ type: "removeItem", itemId: item.id })
} }
/> />
</Box>
)} )}
</ItemContainer> </ItemContainer>
); );
@ -115,14 +121,16 @@ function ItemThumbnail({ src, isWorn }) {
rounded="lg" rounded="lg"
boxShadow="md" boxShadow="md"
border="1px" border="1px"
borderColor="green.700"
width="50px" width="50px"
height="50px" height="50px"
overflow="hidden" overflow="hidden"
transition="all 0.15s" transition="all 0.15s"
transformOrigin="center" transformOrigin="center"
transform="scale(0.8)"
className={css([ className={css([
{
borderColor: theme.colors.green["700"],
transform: "scale(0.8)",
},
!isWorn && { !isWorn && {
[containerHasFocus]: { [containerHasFocus]: {
opacity: "0.9", opacity: "0.9",