Move HTML5Badge to zones area

This commit is contained in:
Emi Matchu 2021-02-12 17:46:33 -08:00
parent 2d58627bdd
commit 7421f41e58
2 changed files with 17 additions and 15 deletions

View file

@ -756,18 +756,7 @@ function ItemPageOutfitPreview({ itemId }) {
// This box grows at the same rate as the box on the right, so the
// middle box will be centered, if there's space!
flex="1 0 0"
display="flex"
justifyContent="center"
paddingRight="2"
>
<HTML5Badge
usesHTML5={usesHTML5}
// If we're not compatible, act the same as if we're loading:
// don't change the badge, but don't show one yet if we don't
// have one yet.
isLoading={appearance.loading || !isCompatible}
/>
</Box>
/>
<SpeciesColorPicker
speciesId={petState.speciesId}
colorId={petState.colorId}
@ -840,13 +829,26 @@ function ItemPageOutfitPreview({ itemId }) {
isLoading={loadingGQL || loadingValids}
/>
</Box>
<Box gridArea="zones" alignSelf="center" justifySelf="center">
<Flex gridArea="zones" justifySelf="center" align="center">
{compatibleBodiesAndTheirZones.length > 0 && (
<ItemZonesInfo
compatibleBodiesAndTheirZones={compatibleBodiesAndTheirZones}
/>
)}
</Box>
<Box width="4" />
<Flex
// Avoid layout shift while loading
minWidth="54px"
>
<HTML5Badge
usesHTML5={usesHTML5}
// If we're not compatible, act the same as if we're loading:
// don't change the badge, but don't show one yet if we don't
// have one yet.
isLoading={appearance.loading || !isCompatible}
/>
</Flex>
</Flex>
</Grid>
);
}

View file

@ -99,7 +99,7 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
<Tooltip
textAlign="center"
fontSize="xs"
placement="bottom-start"
placement="top"
label={tooltipLabel}
// HACK: Chakra tooltips seem inconsistent about staying open when focus
// comes from touch events. But I really want this one to work on