Add disabled save UI

package.json

@@ -41,7 +41,7 @@
     "react": "^17.0.1",
     "react-autosuggest": "^10.0.2",
     "react-dom": "^17.0.1",
-    "react-icons": "^3.11.0",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^4.0.1",
     "react-transition-group": "^4.3.0",

src/app/WardrobePage/ItemsPanel.js

@@ -15,12 +15,15 @@ import {
   MenuList,
   MenuItem,
   Portal,
+  Button,
 } from "@chakra-ui/react";
 import { EditIcon, QuestionIcon } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { Delay, Heading1, Heading2 } from "../util";
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
+import { BiRename } from "react-icons/bi";
+import { IoCloudUploadOutline } from "react-icons/io5";
 import { MdMoreVert } from "react-icons/md";
 
 /**
@@ -261,8 +264,8 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
       }
     >
       {({ onEdit }) => (
-        <Flex align="center" justify="space-between" marginBottom="6">
-          <Box marginRight="4">
+        <Flex align="center" marginBottom="6">
+          <Box>
             <Box role="group" d="inline-block" position="relative" width="100%">
               <Heading1>
                 <EditablePreview lineHeight="48px" />
@@ -270,6 +273,25 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
               </Heading1>
             </Box>
           </Box>
+          <Box width="4" flex="1 0 auto" />
+          <Tooltip label="Coming soon!" shouldWrapChildren>
+            <Button
+              variant="outline"
+              size="sm"
+              isDisabled
+              leftIcon={
+                <Box
+                  // Adjust the visual balance toward the cloud
+                  marginBottom="-2px"
+                >
+                  <IoCloudUploadOutline />
+                </Box>
+              }
+            >
+              Save
+            </Button>
+          </Tooltip>
+          <Box width="2" />
           <Menu placement="bottom-end">
             <MenuButton
               as={IconButton}
@@ -282,8 +304,13 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
             />
             <Portal>
               <MenuList>
+                {outfitState.id && (
+                  <MenuItem icon={<EditIcon />} isDisabled>
+                    Edit a copy <i>(Coming soon)</i>
+                  </MenuItem>
+                )}
                 <MenuItem
-                  icon={<EditIcon />}
+                  icon={<BiRename />}
                   onClick={() => {
                     // Start the rename after a tick, so finishing up the click
                     // won't just immediately remove focus from the Editable.

yarn.lock

@@ -15237,12 +15237,10 @@ react-focus-lock@2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-icons@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
-  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
-  dependencies:
-    camelcase "^5.0.0"
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"