upgrade to Chakra v1

it's a preview version, but it has a feature I want, so let's get ahead of the curve!

package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
     "@apollographql/graphql-playground-html": "^1.6.24",
-    "@chakra-ui/core": "^0.7.0",
+    "@chakra-ui/core": "^1.0.0-next.6",
-    "@emotion/core": "^10.0.28",
+    "@chakra-ui/icons": "^1.0.0-next.6",
-    "@emotion/styled": "^10.0.27",
+    "@chakra-ui/theme": "^1.0.0-next.6",
     "@loadable/component": "^5.12.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -19,7 +19,6 @@
     "apollo-server-env": "^2.4.3",
     "dataloader": "^2.0.0",
     "emotion": "^10.0.27",
-    "emotion-theming": "^10.0.27",
     "graphql": "^15.0.0",
     "immer": "^6.0.3",
     "mysql2": "^2.1.0",

src/app/App.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { ApolloProvider } from "@apollo/react-hooks";
-import { CSSReset, ThemeProvider, theme } from "@chakra-ui/core";
+import { CSSReset, ChakraProvider } from "@chakra-ui/core";
+import theme from "@chakra-ui/theme";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import loadable from "@loadable/component";
 
@@ -19,7 +20,7 @@ function App() {
   return (
     <Router>
       <ApolloProvider client={apolloClient}>
-        <ThemeProvider theme={theme}>
+        <ChakraProvider theme={theme}>
           <CSSReset />
           <Switch>
             <Route path="/outfits/new">
@@ -29,7 +30,7 @@ function App() {
               <HomePage />
             </Route>
           </Switch>
-        </ThemeProvider>
+        </ChakraProvider>
       </ApolloProvider>
     </Router>
   );

src/app/HomePage.js

@@ -30,7 +30,7 @@ function HomePage() {
         alt=""
         width="200px"
         height="200px"
-        rounded="lg"
+        borderRadius="lg"
         boxShadow="md"
       />
       <Box height="4" />
@@ -94,7 +94,7 @@ function StartOutfitForm() {
         <Box width="4" />
         <Button
           type="submit"
-          variantColor="green"
+          colorScheme="green"
           disabled={!isValid}
           backgroundColor="green.600" // for AA contrast
           _hover={{ backgroundColor: "green.700" }}
@@ -189,7 +189,7 @@ function SubmitPetForm() {
         <Box width="4" />
         <Button
           type="submit"
-          variantColor="green"
+          colorScheme="green"
           isDisabled={!petName}
           isLoading={loading}
           backgroundColor="green.600" // for AA contrast

src/app/Item.js

@@ -9,6 +9,7 @@ import {
   Tooltip,
   useTheme,
 } from "@chakra-ui/core";
+import { DeleteIcon, InfoIcon } from "@chakra-ui/icons";
 
 import { safeImageUrl } from "./util";
 
@@ -42,7 +43,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
       <Box flexGrow="1" />
       <Box>
         <ItemActionButton
-          icon="info"
+          icon={<InfoIcon />}
           label="More info"
           href={`http://impress.openneo.net/items/${
             item.id
@@ -50,7 +51,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
         />
         {isInOutfit && (
           <ItemActionButton
-            icon="delete"
+            icon={<DeleteIcon />}
             label="Remove"
             onClick={() =>
               dispatchToOutfit({ type: "removeItem", itemId: item.id })
@@ -89,7 +90,7 @@ function ItemContainer({ children }) {
     <Box
       p="1"
       my="1"
-      rounded="lg"
+      borderRadius="lg"
       d="flex"
       alignItems="center"
       cursor="pointer"
@@ -126,7 +127,7 @@ function ItemThumbnail({ src, isWorn }) {
   const theme = useTheme();
   return (
     <Box
-      rounded="lg"
+      borderRadius="lg"
       boxShadow="md"
       border="1px"
       width="50px"

src/app/ItemsAndSearchPanels.js

@@ -2,13 +2,13 @@ import React from "react";
 import {
   Box,
   Flex,
-  Icon,
   IconButton,
   Input,
   InputGroup,
   InputLeftElement,
   InputRightElement,
 } from "@chakra-ui/core";
+import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
 
 import ItemsPanel from "./ItemsPanel";
 import SearchPanel from "./SearchPanel";
@@ -106,7 +106,7 @@ function SearchToolbar({
   return (
     <InputGroup>
       <InputLeftElement>
-        <Icon name="search" color="gray.400" />
+        <SearchIcon color="gray.400" />
       </InputLeftElement>
       <Input
         placeholder="Search for items to add…"
@@ -128,10 +128,10 @@ function SearchToolbar({
       {query && (
         <InputRightElement>
           <IconButton
-            icon="close"
+            icon={<CloseIcon />}
             color="gray.400"
             variant="ghost"
-            variantColor="green"
+            colorScheme="green"
             aria-label="Clear search"
             onClick={() => onChange("")}
             // Big style hacks here!

src/app/ItemsPanel.js

@@ -7,10 +7,10 @@ import {
   EditableInput,
   Flex,
   IconButton,
-  PseudoBox,
   Skeleton,
   VisuallyHidden,
 } from "@chakra-ui/core";
+import { EditIcon } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { Delay, Heading1, Heading2 } from "./util";
@@ -178,7 +178,7 @@ function ItemZoneGroupSkeleton({ itemCount }) {
 function OutfitHeading({ outfitState, dispatchToOutfit }) {
   return (
     <Box>
-      <PseudoBox role="group" d="inline-block" position="relative" width="100%">
+      <Box role="group" d="inline-block" position="relative" width="100%">
         <Heading1 mb="6">
           <Editable
             value={outfitState.name}
@@ -187,31 +187,31 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
               dispatchToOutfit({ type: "rename", outfitName: value })
             }
           >
-            {({ isEditing, onRequestEdit }) => (
+            {({ isEditing, onEdit }) => (
               <Flex align="flex-top">
                 <EditablePreview />
                 <EditableInput />
                 {!isEditing && (
-                  <PseudoBox
+                  <Box
                     opacity="0"
                     transition="opacity 0.5s"
                     _groupHover={{ opacity: "1" }}
-                    onClick={onRequestEdit}
+                    onClick={onEdit}
                   >
                     <IconButton
-                      icon="edit"
+                      icon={<EditIcon />}
                       variant="link"
                       color="green.600"
                       aria-label="Edit outfit name"
                       title="Edit outfit name"
                     />
-                  </PseudoBox>
+                  </Box>
                 )}
               </Flex>
             )}
           </Editable>
         </Heading1>
-      </PseudoBox>
+      </Box>
     </Box>
   );
 }

src/app/OutfitControls.js

@@ -4,12 +4,17 @@ import {
   Box,
   Flex,
   IconButton,
-  PseudoBox,
   Stack,
   Tooltip,
   useClipboard,
   useToast,
 } from "@chakra-ui/core";
+import {
+  ArrowBackIcon,
+  CheckIcon,
+  DownloadIcon,
+  LinkIcon,
+} from "@chakra-ui/icons";
 
 import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "./SpeciesColorPicker";
@@ -25,7 +30,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
   const toast = useToast();
 
   return (
-    <PseudoBox
+    <Box
       role="group"
       pos="absolute"
       left="0"
@@ -58,7 +63,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
         <ControlButton
           as={Link}
           to="/"
-          icon="arrow-back"
+          icon={<ArrowBackIcon />}
           aria-label="Leave this outfit"
           d="inline-flex" // Not sure why <a> requires this to style right! ^^`
         />
@@ -115,7 +120,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
           />
         </Flex>
       </Flex>
-    </PseudoBox>
+    </Box>
   );
 }
 
@@ -133,7 +138,7 @@ function DownloadButton({ outfitState }) {
     <Tooltip label="Download" placement="left">
       <Box>
         <ControlButton
-          icon="download"
+          icon={<DownloadIcon />}
           aria-label="Download"
           as="a"
           // eslint-disable-next-line no-script-url
@@ -163,7 +168,7 @@ function CopyLinkButton({ outfitState }) {
     <Tooltip label={hasCopied ? "Copied!" : "Copy link"} placement="left">
       <Box>
         <ControlButton
-          icon={hasCopied ? "check" : "link"}
+          icon={hasCopied ? <CheckIcon /> : <LinkIcon />}
           aria-label="Copy link"
           onClick={onCopy}
         />

src/app/OutfitPreview.js

@@ -2,7 +2,8 @@ import React from "react";
 import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
-import { Box, Flex, Icon, Spinner, Text } from "@chakra-ui/core";
+import { Box, Flex, Spinner, Text } from "@chakra-ui/core";
+import { WarningIcon } from "@chakra-ui/icons";
 
 import useOutfitAppearance from "./useOutfitAppearance";
 
@@ -24,7 +25,7 @@ function OutfitPreview({ outfitState }) {
     return (
       <FullScreenCenter>
         <Text color="gray.50" d="flex" alignItems="center">
-          <Icon name="warning" />
+          <WarningIcon />
           <Box width={2} />
           Could not load preview. Try again?
         </Text>

src/app/PosePicker.js

@@ -255,7 +255,7 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
       />
       <Box
         aria-hidden
-        rounded="full"
+        borderRadius="full"
         boxShadow="md"
         overflow="hidden"
         width="50px"
@@ -281,7 +281,7 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
         `}
       >
         <Box
-          rounded="full"
+          borderRadius="full"
           position="absolute"
           top="0"
           bottom="0"