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

style tweaks & fixes for larger screens

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 05:43:55 -07:00
parent b3ead75772
commit b1a60e4e9d
1 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/OutfitPreview.js
View file

@ -125,32 +125,12 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
</FullScreenCenter>
</Delay>
)}
<Box pos="absolute" left="2" top="2">
<IconButton
icon="arrow-back"
aria-label="Leave this outfit"
variant="unstyled"
d="flex"
alignItems="center"
justifyContent="center"
color="gray.50"
opacity={hasFocus ? 1 : 0}
transition="all 0.2s"
_groupHover={{
opacity: 1,
}}
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
onClick={() => setShowResetModal(true)}
/>
</Box>
<Box
// Bottom toolbar on small screens, top on large screens
pos="absolute"
left="2"
right="2"
bottom={{ base: "2", lg: "auto" }}
top={{ base: "auto", lg: "2" }}
left={{ base: 2, lg: 6 }}
right={{ base: 2, lg: 6 }}
bottom={{ base: 2, lg: 6 }}
// Grid layout for the content!
display="grid"
gridTemplateAreas={`"space picker download"`}
@ -212,6 +192,26 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
</Tooltip>
</Flex>
</Box>
<Box pos="absolute" left="3" top="3">
<IconButton
icon="arrow-back"
aria-label="Leave this outfit"
variant="unstyled"
isRound={true}
d="flex"
alignItems="center"
justifyContent="center"
color="gray.50"
opacity={hasFocus ? 1 : 0}
transition="all 0.2s"
_groupHover={{
opacity: 1,
}}
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
onClick={() => setShowResetModal(true)}
/>
</Box>
<OutfitResetModal
isOpen={showResetModal}
onClose={() => setShowResetModal(false)}