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