From adecb4167b0a14471e247fba20bb1ad927740049 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 2 Feb 2021 16:31:55 -0800
Subject: [PATCH] Remove extra focus outline for SpeciesFacesPicker

Before the tooltips, I thought the focus state wasn't clear enough at a glance, so I added an extra focus outline to the species faces picker area. Now, I think it's clear enough with the species name tooltip popping up!
---
 src/app/ItemPage.js | 47 ++++++++++++++++++---------------------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 70a0c0f..40eee24 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -718,20 +718,22 @@ function ItemPageOutfitPreview({ itemId }) {
           </Box>
         </Box>
       </VStack>
-      <SpeciesFacesPicker
-        selectedSpeciesId={petState.speciesId}
-        compatibleBodies={compatibleBodies}
-        couldProbablyModelMoreData={couldProbablyModelMoreData}
-        onChange={({ speciesId, colorId }) =>
-          setPetState({
-            speciesId,
-            colorId,
-            pose: idealPose,
-            appearanceId: null,
-          })
-        }
-        isLoading={loading}
-      />
+      <Box maxWidth="400px">
+        <SpeciesFacesPicker
+          selectedSpeciesId={petState.speciesId}
+          compatibleBodies={compatibleBodies}
+          couldProbablyModelMoreData={couldProbablyModelMoreData}
+          onChange={({ speciesId, colorId }) =>
+            setPetState({
+              speciesId,
+              colorId,
+              pose: idealPose,
+              appearanceId: null,
+            })
+          }
+          isLoading={loading}
+        />
+      </Box>
     </Stack>
   );
 }
@@ -801,19 +803,8 @@ function SpeciesFacesPicker({
     a.speciesName.localeCompare(b.speciesName)
   );
 
-  const focusBorderColorValue = useToken("colors", "blue.100");
-
   return (
-    <Box
-      _focusWithin={{
-        boxShadow: `${focusBorderColorValue} 0 0 1px 2px`,
-      }}
-      maxWidth="400px"
-      boxSizing="content-box"
-      padding="2"
-      borderRadius="md"
-      transition="all 0.2s"
-    >
+    <>
       <Wrap
         spacing="0"
         justify="center"
@@ -851,7 +842,7 @@ function SpeciesFacesPicker({
           }
         `}
       />
-    </Box>
+    </>
   );
 }
 
@@ -910,7 +901,7 @@ function SpeciesFaceOption({
         <Tooltip
           label={tooltipLabel}
           placement="top"
-          gutter={-12}
+          gutter={-10}
           // We track hover and focus state manually for the tooltip, so that
           // keyboard nav to switch between options causes the tooltip to
           // follow. (By default, the tooltip appears on the first tab focus,