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

tweak download button styles

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 02:32:41 -07:00
parent e9a15857c1
commit 2d84f2295b
1 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/OutfitPreview.js
View file

@ -120,46 +120,54 @@ function OutfitPreview({ outfitState }) {
</FullScreenCenter> </FullScreenCenter>
</Delay> </Delay>
)} )}
<Tooltip label="Download" placement="left" showDelay={200}> <Box
<IconButton // Bottom-right in small screens, top-right on large screens
icon="download" pos="absolute"
aria-label="Download" right="2"
as="a" bottom={{ base: "2", lg: "auto" }}
// eslint-disable-next-line no-script-url top={{ base: "auto", lg: "2" }}
href={downloadImageUrl || "javascript:void 0"} >
download={(outfitState.name || "Outfit") + ".png"} <Tooltip label="Download" placement="left">
onMouseEnter={prepareDownload} <IconButton
onFocus={prepareDownload} icon="download"
onClick={() => { aria-label="Download"
if (!downloadImageUrl) { isRound
toast({ as="a"
title: // eslint-disable-next-line no-script-url
"Just a second, try again when the image is done loading!", href={downloadImageUrl || "javascript:void 0"}
}); download={(outfitState.name || "Outfit") + ".png"}
} onMouseEnter={prepareDownload}
}} onFocus={prepareDownload}
variant="unstyled" onClick={() => {
color="gray.50" if (!downloadImageUrl) {
d="flex" toast({
alignItems="center" title:
justifyContent="center" "Just a second, try again when the image is done loading!",
opacity="0" });
transition="all 0.2s" }
_hover={{ }}
backgroundColor: "gray.600", variant="unstyled"
}} backgroundColor="gray.600"
_focus={{ color="gray.50"
opacity: 1, d="flex"
backgroundColor: "gray.600", alignItems="center"
}} justifyContent="center"
_groupHover={{ opacity="0"
opacity: 1, transition="all 0.2s"
}} _groupHover={{
pos="absolute" opacity: 1,
right="1" }}
top="1" _focus={{
/> opacity: 1,
</Tooltip> backgroundColor: "gray.500",
}}
_hover={{
backgroundColor: "gray.500",
}}
outline="initial"
/>
</Tooltip>
</Box>
</PseudoBox> </PseudoBox>
); );
} }