From 0d14fde31881b54106e11ae6e92aa6c882ccadd8 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 26 Jan 2021 15:02:11 -0800
Subject: [PATCH] Add "Customize more" button to item page preview

---
 src/app/ItemPage.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 904c7aa..fda0d7a 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -22,6 +22,7 @@ import {
 import {
   CheckIcon,
   ChevronRightIcon,
+  EditIcon,
   StarIcon,
   WarningIcon,
 } from "@chakra-ui/icons";
@@ -631,6 +632,12 @@ function ItemPageOutfitPreview({ itemId }) {
               engine="canvas"
               onChangeHasAnimations={setHasAnimations}
             />
+            <CustomizeMoreButton
+              speciesId={petState.speciesId}
+              colorId={petState.colorId}
+              pose={petState.pose}
+              itemId={itemId}
+            />
             {hasAnimations && (
               <PlayPauseButton
                 isPaused={isPaused}
@@ -698,6 +705,36 @@ function ItemPageOutfitPreview({ itemId }) {
   );
 }
 
+function CustomizeMoreButton({ speciesId, colorId, pose, itemId }) {
+  const url =
+    `/outfits/new?species=${speciesId}&color=${colorId}&pose=${pose}&` +
+    `objects[]=${itemId}`;
+
+  // The default background is good in light mode, but in dark mode it's a
+  // very subtle transparent white... make it a semi-transparent black, for
+  // better contrast against light-colored background items!
+  const backgroundColor = useColorModeValue(undefined, "blackAlpha.600");
+  const backgroundColorHover = useColorModeValue(undefined, "blackAlpha.700");
+
+  return (
+    <Tooltip label="Customize more" placement="left" colorScheme="white">
+      <IconButton
+        as={Link}
+        to={url}
+        icon={<EditIcon />}
+        position="absolute"
+        top="2"
+        right="2"
+        size="sm"
+        background={backgroundColor}
+        _hover={{ backgroundColor: backgroundColorHover }}
+        _focus={{ backgroundColor: backgroundColorHover }}
+        boxShadow="sm"
+      />
+    </Tooltip>
+  );
+}
+
 function PlayPauseButton({ isPaused, onClick }) {
   return (
     <IconButton