From 61636a006766c225c4a6b05d80605d48d4b5b2e1 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 23 Apr 2021 15:34:16 -0700
Subject: [PATCH] Better focus/hover UI on /support/petAppearances

---
 src/app/SupportPetAppearancesPage.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/SupportPetAppearancesPage.js b/src/app/SupportPetAppearancesPage.js
index b0b1dfe..3d73c9c 100644
--- a/src/app/SupportPetAppearancesPage.js
+++ b/src/app/SupportPetAppearancesPage.js
@@ -1,4 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
+import { useColorModeValue } from "@chakra-ui/color-mode";
 import { QuestionIcon } from "@chakra-ui/icons";
 import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/layout";
 import {
@@ -99,6 +100,11 @@ function UnlabeledPetAppearancesList() {
 }
 
 function SpeciesColorEditorLink({ species, color }) {
+  const hoverBackgroundColor = useColorModeValue(
+    "blackAlpha.50",
+    "whiteAlpha.100"
+  );
+
   return (
     <Box
       as={Link}
@@ -110,6 +116,8 @@ function SpeciesColorEditorLink({ species, color }) {
       paddingX="3"
       paddingY="2"
       fontSize="sm"
+      _hover={{ backgroundColor: hoverBackgroundColor }}
+      _focus={{ boxShadow: "outline", outline: "none" }}
     >
       {color.name} {species.name}
     </Box>