From ea4d801b0cadeda4b3b38f435bebd8afd9fa5c3a Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Tue, 21 Apr 2020 20:41:29 -0700
Subject: [PATCH] improve item hover animation perf & details

---
 app/src/WardrobePage.js | 49 +++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

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