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

Add focus state to species faces picker

Browse source
This commit is contained in:
Emi Matchu 2021-02-02 13:31:57 -08:00
parent d16bfd9781
commit b0a8b41c80
1 changed files with 100 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/ItemPage.js
View file

@ -686,7 +686,6 @@ function ItemPageOutfitPreview({ itemId }) {
</Box> </Box>
</Box> </Box>
</VStack> </VStack>
<Box maxWidth="400px">
<SpeciesFacesPicker <SpeciesFacesPicker
itemId={itemId} itemId={itemId}
selectedSpeciesId={petState.speciesId} selectedSpeciesId={petState.speciesId}
@ -700,7 +699,6 @@ function ItemPageOutfitPreview({ itemId }) {
} }
isLoading={loading} isLoading={loading}
/> />
</Box>
</Stack> </Stack>
); );
} }
@ -757,10 +755,20 @@ function PlayPauseButton({ isPaused, onClick }) {
function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) { function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
const selectedBorderColor = useColorModeValue("green.600", "green.400"); const selectedBorderColor = useColorModeValue("green.600", "green.400");
const selectedBackgroundColor = useColorModeValue("green.200", "green.600"); const selectedBackgroundColor = useColorModeValue("green.200", "green.600");
const focusBorderColor = "blue.400";
const focusBackgroundColor = "blue.100";
const [ const [
selectedBorderColorValue, selectedBorderColorValue,
selectedBackgroundColorValue, selectedBackgroundColorValue,
] = useToken("colors", [selectedBorderColor, selectedBackgroundColor]); focusBorderColorValue,
focusBackgroundColorValue,
] = useToken("colors", [
selectedBorderColor,
selectedBackgroundColor,
focusBorderColor,
focusBackgroundColor,
]);
const lgShadow = useToken("shadows", "xl");
const allSpeciesFaces = speciesFaces.sort((a, b) => const allSpeciesFaces = speciesFaces.sort((a, b) =>
a.speciesName.localeCompare(b.speciesName) a.speciesName.localeCompare(b.speciesName)
@ -769,6 +777,16 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
return ( return (
<ClassNames> <ClassNames>
{({ css }) => ( {({ css }) => (
<Box
_focusWithin={{
boxShadow: `${focusBackgroundColorValue} 0 0 1px 2px`,
}}
maxWidth="400px"
boxSizing="content-box"
padding="2"
borderRadius="md"
transition="all 0.2s"
>
<Wrap <Wrap
spacing="0" spacing="0"
justify="center" justify="center"
@ -803,10 +821,17 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
input:checked + & { input:checked + & {
background: ${selectedBackgroundColorValue}; background: ${selectedBackgroundColorValue};
border-radius: 6px; border-radius: 6px;
box-shadow: ${selectedBorderColorValue} 0 0 0 3px; box-shadow: ${lgShadow},
${selectedBorderColorValue} 0 0 2px 2px;
transform: scale(1.2); transform: scale(1.2);
z-index: 1; z-index: 1;
} }
input:focus + & {
background: ${focusBackgroundColorValue};
box-shadow: ${lgShadow},
${focusBorderColorValue} 0 0 0 3px;
}
`} `}
> >
<Box <Box
@ -823,7 +848,7 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
opacity="0.9" opacity="0.9"
transition="all 0.2s" transition="all 0.2s"
className={css` className={css`
input:checked + * > & { input:checked + * & {
opacity: 1; opacity: 1;
filter: saturate(110%); filter: saturate(110%);
} }
@ -834,6 +859,7 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
) )
)} )}
</Wrap> </Wrap>
</Box>
)} )}
</ClassNames> </ClassNames>
); );