diff --git a/package.json b/package.json
index 64b180c..5dc93fa 100644
--- a/package.json
+++ b/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",
- "@emotion/core": "^10.0.28",
- "@emotion/styled": "^10.0.27",
+ "@chakra-ui/core": "^1.0.0-next.6",
+ "@chakra-ui/icons": "^1.0.0-next.6",
+ "@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",
diff --git a/src/app/App.js b/src/app/App.js
index e72534a..7aa22bf 100644
--- a/src/app/App.js
+++ b/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 (
-
+
@@ -29,7 +30,7 @@ function App() {
-
+
);
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 5000d36..727fa88 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -30,7 +30,7 @@ function HomePage() {
alt=""
width="200px"
height="200px"
- rounded="lg"
+ borderRadius="lg"
boxShadow="md"
/>
@@ -94,7 +94,7 @@ function StartOutfitForm() {
}
label="More info"
href={`http://impress.openneo.net/items/${
item.id
@@ -50,7 +51,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
/>
{isInOutfit && (
}
label="Remove"
onClick={() =>
dispatchToOutfit({ type: "removeItem", itemId: item.id })
@@ -89,7 +90,7 @@ function ItemContainer({ children }) {
-
+
}
color="gray.400"
variant="ghost"
- variantColor="green"
+ colorScheme="green"
aria-label="Clear search"
onClick={() => onChange("")}
// Big style hacks here!
diff --git a/src/app/ItemsPanel.js b/src/app/ItemsPanel.js
index 72fed98..ee2143b 100644
--- a/src/app/ItemsPanel.js
+++ b/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 (
-
+
- {({ isEditing, onRequestEdit }) => (
+ {({ isEditing, onEdit }) => (
{!isEditing && (
-
}
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
-
+
)}
)}
-
+
);
}
diff --git a/src/app/OutfitControls.js b/src/app/OutfitControls.js
index 08a03ab..5272ea5 100644
--- a/src/app/OutfitControls.js
+++ b/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 (
- }
aria-label="Leave this outfit"
d="inline-flex" // Not sure why requires this to style right! ^^`
/>
@@ -115,7 +120,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
/>
-
+
);
}
@@ -133,7 +138,7 @@ function DownloadButton({ outfitState }) {
}
aria-label="Download"
as="a"
// eslint-disable-next-line no-script-url
@@ -163,7 +168,7 @@ function CopyLinkButton({ outfitState }) {
: }
aria-label="Copy link"
onClick={onCopy}
/>
diff --git a/src/app/OutfitPreview.js b/src/app/OutfitPreview.js
index d3bf6ec..4d3c8bd 100644
--- a/src/app/OutfitPreview.js
+++ b/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 (
-
+
Could not load preview. Try again?
diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js
index 88bd145..efe2550 100644
--- a/src/app/PosePicker.js
+++ b/src/app/PosePicker.js
@@ -255,7 +255,7 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
/>