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

Better focus/hover UI on /support/petAppearances

Browse source
This commit is contained in:
Emi Matchu 2021-04-23 15:34:16 -07:00
parent 72e4fa0ad0
commit 61636a0067
1 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/SupportPetAppearancesPage.js
View file

@ -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>