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 { gql, useQuery } from "@apollo/client";
import { useColorModeValue } from "@chakra-ui/color-mode";
import { QuestionIcon } from "@chakra-ui/icons"; import { QuestionIcon } from "@chakra-ui/icons";
import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/layout"; import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/layout";
import { import {
@ -99,6 +100,11 @@ function UnlabeledPetAppearancesList() {
} }
function SpeciesColorEditorLink({ species, color }) { function SpeciesColorEditorLink({ species, color }) {
const hoverBackgroundColor = useColorModeValue(
"blackAlpha.50",
"whiteAlpha.100"
);
return ( return (
<Box <Box
as={Link} as={Link}
@ -110,6 +116,8 @@ function SpeciesColorEditorLink({ species, color }) {
paddingX="3" paddingX="3"
paddingY="2" paddingY="2"
fontSize="sm" fontSize="sm"
_hover={{ backgroundColor: hoverBackgroundColor }}
_focus={{ boxShadow: "outline", outline: "none" }}
> >
{color.name} {species.name} {color.name} {species.name}
</Box> </Box>