add appearance layer support modal

Just some metadata for now, want to add body modification next!

src/app/WardrobePage/support/ItemSupportAppearanceLayerModal.js

@@ -0,0 +1,87 @@
+import * as React from "react";
+import {
+  Button,
+  Box,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/core";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+
+function ItemSupportAppearanceLayerModal({ item, itemLayer, isOpen, onClose }) {
+  return (
+    <Modal size="xl" isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay>
+        <ModalContent>
+          <ModalHeader>
+            Layer {itemLayer.id}: {item.name}
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody mb="4" pb="4">
+            <Box
+              as="dl"
+              display="grid"
+              gridTemplateColumns="max-content auto"
+              gridRowGap="1"
+              gridColumnGap="2"
+            >
+              <Box as="dt" gridColumn="1" fontWeight="bold">
+                ID:
+              </Box>
+              <Box as="dd" gridColumn="2">
+                {itemLayer.id}
+              </Box>
+              <Box as="dt" gridColumn="1" fontWeight="bold">
+                Zone:
+              </Box>
+              <Box as="dd" gridColumn="2">
+                {itemLayer.zone.label} ({itemLayer.zone.id})
+              </Box>
+              <Box as="dt" gridColumn="1" fontWeight="bold">
+                Assets:
+              </Box>
+              <HStack as="dd" gridColumn="2" spacing="2">
+                {itemLayer.svgUrl ? (
+                  <Button
+                    as="a"
+                    size="xs"
+                    target="_blank"
+                    href={itemLayer.svgUrl}
+                    colorScheme="teal"
+                  >
+                    SVG <ExternalLinkIcon ml="1" />
+                  </Button>
+                ) : (
+                  <Button size="xs" isDisabled>
+                    No SVG
+                  </Button>
+                )}
+                {itemLayer.imageUrl ? (
+                  <Button
+                    as="a"
+                    size="xs"
+                    target="_blank"
+                    href={itemLayer.imageUrl}
+                    colorScheme="teal"
+                  >
+                    PNG <ExternalLinkIcon ml="1" />
+                  </Button>
+                ) : (
+                  <Button size="xs" isDisabled>
+                    No PNG
+                  </Button>
+                )}
+              </HStack>
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </ModalOverlay>
+    </Modal>
+  );
+}
+
+export default ItemSupportAppearanceLayerModal;

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import gql from "graphql-tag";
 import { useQuery, useMutation } from "@apollo/client";
+import { css } from "emotion";
 import {
   Badge,
   Box,
@@ -20,9 +21,11 @@ import {
   Spinner,
   Stack,
   useBreakpointValue,
+  useDisclosure,
 } from "@chakra-ui/core";
-import { CheckCircleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
+import ItemSupportAppearanceLayerModal from "./ItemSupportAppearanceLayerModal";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import useOutfitAppearance from "../../components/useOutfitAppearance";
 import useSupportSecret from "./useSupportSecret";
@@ -244,11 +247,12 @@ function ItemSupportAppearanceFields({ item, outfitState }) {
   return (
     <FormControl>
       <FormLabel>Appearance layers</FormLabel>
-      <HStack spacing="4" overflow="auto">
+      <HStack spacing="4" overflow="auto" paddingX="1">
         {itemLayers.map((itemLayer) => (
           <ItemSupportAppearanceLayer
             biologyLayers={biologyLayers}
             itemLayer={itemLayer}
+            item={item}
           />
         ))}
       </HStack>
@@ -257,9 +261,18 @@ function ItemSupportAppearanceFields({ item, outfitState }) {
   );
 }
 
-function ItemSupportAppearanceLayer({ biologyLayers, itemLayer }) {
+function ItemSupportAppearanceLayer({ biologyLayers, itemLayer, item }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   return (
-    <Box width="150px" textAlign="center" fontSize="xs">
+    <Box
+      as="button"
+      width="150px"
+      textAlign="center"
+      fontSize="xs"
+      position="relative"
+      onClick={onOpen}
+    >
       <Box
         width="150px"
         height="150px"
@@ -269,11 +282,38 @@ function ItemSupportAppearanceLayer({ biologyLayers, itemLayer }) {
       >
         <OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
       </Box>
-      <Box>
+      <Box fontWeight="bold">{itemLayer.zone.label}</Box>
-        <b>{itemLayer.zone.label}</b>
-      </Box>
       <Box>Zone ID: {itemLayer.zone.id}</Box>
       <Box>Layer ID: {itemLayer.id}</Box>
+      <Box
+        className={css`
+          opacity: 0;
+          transition: opacity 0.2s;
+
+          button:hover > &,
+          button:focus > & {
+            opacity: 1;
+          }
+        `}
+        background="rgba(255, 255, 255, 0.8)"
+        borderRadius="full"
+        position="absolute"
+        top="2"
+        right="2"
+        padding="2"
+        alignItems="center"
+        justifyContent="center"
+        width="32px"
+        height="32px"
+      >
+        <EditIcon boxSize="16px" position="relative" top="-2px" right="-1px" />
+      </Box>
+      <ItemSupportAppearanceLayerModal
+        item={item}
+        itemLayer={itemLayer}
+        isOpen={isOpen}
+        onClose={onClose}
+      />
     </Box>
   );
 }