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

Try moving the glitch badges to the top

Browse source 
Experiment! Let's see if them being more prominent like this is helpful or annoying 😅

I think this is clunkier in the HTML5 Green Happy Path, but worth it for bringing attention in the error cases.

But I feel like we might tweak this over time!
This commit is contained in:
Emi Matchu 2021-06-24 20:05:10 -07:00
parent 35a1096da3
commit 0bffaec989
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/app/WardrobePage/OutfitControls.js
View file

@ -176,19 +176,24 @@ function OutfitControls({
<BackButton outfitState={outfitState} /> <BackButton outfitState={outfitState} />
</Box> </Box>
<Box <Flex
gridArea="play-pause" gridArea="play-pause"
// HACK: Better visual centering with other controls // HACK: Better visual centering with other controls
paddingTop="0.3rem" paddingTop="0.3rem"
direction="column"
align="center"
> >
<HStack spacing="2" align="center" justify="center">
{showAnimationControls && <PlayPauseButton />} {showAnimationControls && <PlayPauseButton />}
<Box height="2" />
<HStack spacing="2" align="center" justify="center">
<OutfitHTML5Badge appearance={appearance} />
<OutfitKnownGlitchesBadge appearance={appearance} />
<SettingsButton <SettingsButton
onLockFocus={onLockFocus} onLockFocus={onLockFocus}
onUnlockFocus={onUnlockFocus} onUnlockFocus={onUnlockFocus}
/> />
</HStack> </HStack>
</Box> </Flex>
<Stack <Stack
gridArea="sharing" gridArea="sharing"
alignSelf="flex-end" alignSelf="flex-end"
@ -215,11 +220,7 @@ function OutfitControls({
paddingRight="3" paddingRight="3"
align="center" align="center"
justify="flex-end" justify="flex-end"
> />
<OutfitHTML5Badge appearance={appearance} />
<Box width="2" />
<OutfitKnownGlitchesBadge appearance={appearance} />
</Flex>
<Box flex="0 0 auto"> <Box flex="0 0 auto">
<DarkMode> <DarkMode>
<SpeciesColorPicker <SpeciesColorPicker

2
src/app/components/HTML5Badge.js
View file

@ -120,6 +120,8 @@ export function GlitchBadgeLayout({
transition="all 0.2s" transition="all 0.2s"
tabIndex="0" tabIndex="0"
_focus={{ outline: "none", boxShadow: "outline" }} _focus={{ outline: "none", boxShadow: "outline" }}
// For consistency between the HTML5Badge & OutfitKnownGlitchesBadge
minHeight="30px"
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}