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

fix CSS bugs in Item

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-30 00:30:27 -07:00
parent 2db0e33f28
commit a3204cd2cf
1 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/Item.js
View file

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