From 2d84f2295bf1099591e8293b98f1694a39bd3604 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 02:32:41 -0700
Subject: [PATCH] tweak download button styles

---
 src/OutfitPreview.js | 88 ++++++++++++++++++++++++--------------------
 1 file changed, 48 insertions(+), 40 deletions(-)

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