move outfit preview buttons to top

src/app/OutfitPreview.js

@@ -142,67 +142,46 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
         </Delay>
       )}
       <Box
-        // Bottom toolbar on small screens, top on large screens
         pos="absolute"
-        left={{ base: 2, lg: 6 }}
+        left="0"
-        right={{ base: 2, lg: 6 }}
+        right="0"
-        bottom={{ base: 2, lg: 6 }}
+        top="0"
-        // Grid layout for the content!
+        bottom="0"
+        padding={{ base: 2, lg: 6 }}
         display="grid"
-        gridTemplateAreas={`"space picker buttons"`}
+        overflow="auto"
-        gridTemplateColumns="minmax(0, 1fr) auto 1fr"
+        gridTemplateAreas={`"back sharing"
-        alignItems="flex-end"
+                            "space space"
+                            "picker picker"`}
+        gridTemplateRows="auto minmax(1rem, 1fr) auto"
       >
-        <Box gridArea="space"></Box>
+        <Box gridArea="back">
-        <PseudoBox
+          <IconButton
-          gridArea="picker"
+            icon="arrow-back"
-          opacity={hasFocus ? 1 : 0}
+            aria-label="Leave this outfit"
-          _groupHover={{ opacity: 1 }}
+            variant="unstyled"
-          transition="opacity 0.2s"
+            backgroundColor="gray.600"
-        >
+            isRound={true}
-          <SpeciesColorPicker
+            d="flex"
-            outfitState={outfitState}
+            alignItems="center"
-            dispatchToOutfit={dispatchToOutfit}
+            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)}
           />
-        </PseudoBox>
+        </Box>
-        <Stack gridArea="buttons" spacing="2" align="flex-end">
+        <Stack
-          <Box>
+          gridArea="sharing"
-            <Tooltip
+          alignSelf="flex-end"
-              label={hasCopied ? "Copied!" : "Copy link"}
+          spacing={{ base: "2", lg: "4" }}
-              placement="left"
+          align="flex-end"
-            >
+        >
-              <IconButton
-                icon={hasCopied ? "check" : "link"}
-                aria-label="Copy link"
-                isRound
-                onClick={onCopy}
-                onFocus={() => setHasFocus(true)}
-                onBlur={() => setHasFocus(false)}
-                variant="unstyled"
-                backgroundColor="gray.600"
-                color="gray.50"
-                boxShadow="md"
-                d="flex"
-                alignItems="center"
-                justifyContent="center"
-                opacity={hasFocus ? 1 : 0}
-                transition="all 0.2s"
-                _groupHover={{
-                  opacity: 1,
-                }}
-                _focus={{
-                  opacity: 1,
-                  backgroundColor: "gray.500",
-                }}
-                _hover={{
-                  backgroundColor: "gray.500",
-                }}
-                outline="initial"
-              />
-            </Tooltip>
-          </Box>
           <Box>
             <Tooltip label="Download" placement="left">
               <IconButton
@@ -243,27 +222,58 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
               />
             </Tooltip>
           </Box>
+          <Box>
+            <Tooltip
+              label={hasCopied ? "Copied!" : "Copy link"}
+              placement="left"
+            >
+              <IconButton
+                icon={hasCopied ? "check" : "link"}
+                aria-label="Copy link"
+                isRound
+                onClick={onCopy}
+                onFocus={() => setHasFocus(true)}
+                onBlur={() => setHasFocus(false)}
+                variant="unstyled"
+                backgroundColor="gray.600"
+                color="gray.50"
+                boxShadow="md"
+                d="flex"
+                alignItems="center"
+                justifyContent="center"
+                opacity={hasFocus ? 1 : 0}
+                transition="all 0.2s"
+                _groupHover={{
+                  opacity: 1,
+                }}
+                _focus={{
+                  opacity: 1,
+                  backgroundColor: "gray.500",
+                }}
+                _hover={{
+                  backgroundColor: "gray.500",
+                }}
+                outline="initial"
+              />
+            </Tooltip>
+          </Box>
         </Stack>
-      </Box>
+        <Box gridArea="space"></Box>
-      <Box pos="absolute" left="3" top="3">
+        <PseudoBox
-        <IconButton
+          gridArea="picker"
-          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 }}
-          _groupHover={{
+          transition="opacity 0.2s"
-            opacity: 1,
+          display="flex"
-          }}
+          justifyContent="center"
-          onFocus={() => setHasFocus(true)}
+        >
-          onBlur={() => setHasFocus(false)}
+          <SpeciesColorPicker
-          onClick={() => setShowResetModal(true)}
+            outfitState={outfitState}
-        />
+            dispatchToOutfit={dispatchToOutfit}
+            onFocus={() => setHasFocus(true)}
+            onBlur={() => setHasFocus(false)}
+          />
+        </PseudoBox>
       </Box>
       <OutfitResetModal
         isOpen={showResetModal}

src/app/SpeciesColorPicker.js

@@ -120,6 +120,7 @@ function SpeciesColorPicker({
         color="gray.50"
         border="none"
         boxShadow="md"
+        width="auto"
         onFocus={onFocus}
         onBlur={onBlur}
       >
@@ -129,7 +130,7 @@ function SpeciesColorPicker({
           </option>
         ))}
       </Select>
-      <Box width="8" />
+      <Box width="4" />
       <Select
         aria-label="Pet species"
         value={outfitState.speciesId}
@@ -138,6 +139,7 @@ function SpeciesColorPicker({
         color="gray.50"
         border="none"
         boxShadow="md"
+        width="auto"
         onFocus={onFocus}
         onBlur={onBlur}
       >