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

improve item hover animation perf & details

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-21 20:41:29 -07:00
parent 6ee411fd7b
commit ea4d801b0c
1 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/src/WardrobePage.js
View file

@ -149,37 +149,38 @@ function Item({ item, isWorn, onWear }) {
cursor="pointer" cursor="pointer"
onClick={onWear} onClick={onWear}
> >
<Flex w="50px" h="50px" mr="3" align="center" justify="center">
<PseudoBox <PseudoBox
rounded="full" rounded="full"
border="2px"
boxShadow="md" boxShadow="md"
border="1px"
borderColor={isWorn ? "green.700" : "gray.400"} borderColor={isWorn ? "green.700" : "gray.400"}
opacity={isWorn ? 1 : 0.7} opacity={isWorn ? 1 : 0.7}
width={isWorn ? "50px" : "40px"} width="50px"
height={isWorn ? "50px" : "40px"} height="50px"
overflow="hidden" overflow="hidden"
transition="all 0.2s" transition="all 0.15s"
transformOrigin="center" transformOrigin="center"
transform={isWorn ? null : "scale(0.8)"}
_groupHover={ _groupHover={
!isWorn && { !isWorn && {
opacity: 0.9, opacity: 0.9,
transform: "scale(1.1)", transform: "scale(0.9)",
borderColor: "gray.600", borderColor: "gray.600",
} }
} }
> >
<Image src={item.thumbnailSrc} /> <Image src={item.thumbnailSrc} />
</PseudoBox> </PseudoBox>
</Flex>
<PseudoBox <PseudoBox
marginLeft="3"
fontSize="md" fontSize="md"
fontWeight={isWorn && "bold"} fontWeight={isWorn && "bold"}
color={isWorn ? "gray.800" : "gray.600"} color={isWorn ? "gray.800" : "gray.600"}
transition="all 0.2s" transition="all 0.15s"
_groupHover={ _groupHover={
!isWorn && { !isWorn && {
color: "gray.800", color: "gray.800",
fontWeight: "medium",
} }
} }
> >