Use MacawUI (#1229)

* Replace withStyleswith useStyles (#1100)

* Replace withStyleswith useStyles

* Update messages

* Use rem as a spacing unit (#1101)

* Use rems as spacing units

* Fix visual bugs

* Update stories

* Use macaw-ui as theme provider (#1108)

* Use macaw ui as a theme provider

* Add react-dom to aliases

* Fix jest module resolution

* Update useTheme hook usage

* Fix test wrapper

* Use macaw from git repo

* Fix CI

* Update stories

* Fix aliasing

* Extract savebar to macaw ui (#1146)

* wip

* Use savebar from macaw

* Use confirm button from macaw

* Improve file structure

* Use sidebar context from macaw

* Update macaw

* Update macaw version

* Remove savebar from storybook

* Update stories

* Use alerts and notifications from macaw (#1166)

* Use alerts from macaw

* Add notifications from macaw

* Update stories

* Pin macaw version

* Encapsulate limit reached in one component

* Remove unused imports

* Use backlinks from macaw (#1183)

* Use backlink from macaw

* Update macaw version

* Use macaw sidebar (#1148)

* Use sidebar from macaw

* Use shipped logo

* Use lowercase

* Update stories

* Use user chip from macaw (#1191)

* Use user chip from macaw

* Use dedicated components for menu items

* Simplify code

* Bump version and fix types (#1210)

* Rename onBack to onClick

* Rename UserChip to UserChipMenu

* Rename IMenuItem to SidebarMenuItem

* Update macaw version

* Fix tables after changes in macaw (#1220)

* Update macaw version

* Update changelog

* Update stories

* Fix after rebase

* Update to macaw 0.2.0

* Lint files

* Update macaw to 0.2.2

CHANGELOG.md

@@ -67,6 +67,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix content type validation in create page view - #1205 by @orzechdev
 - Fix list pagination crash on search - #1230 by @orzechdev
 - Fix positive float number input validation - #1233 by @orzechdev
+- Use MacawUI - #1229 by @dominik-zeglen
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -2130,10 +2130,6 @@
     "context": "button",
     "string": "{languageName} - {languageCode}"
   },
-  "src_dot_components_dot_ListField_dot_3099331554": {
-    "context": "button",
-    "string": "Add"
-  },
   "src_dot_components_dot_Metadata_dot_1148029984": {
     "context": "metadata field value, header",
     "string": "Value"

package-lock.json

@@ -2646,14 +2646,14 @@
       }
     },
     "@material-ui/core": {
-      "version": "4.11.3",
+      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz",
-      "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
+      "integrity": "sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==",
       "requires": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.3",
+        "@material-ui/styles": "^4.11.4",
         "@material-ui/system": "^4.11.3",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "@types/react-transition-group": "^4.2.0",
         "clsx": "^1.0.4",
@@ -2672,14 +2672,26 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.58",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz",
+      "integrity": "sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@material-ui/styles": {
-      "version": "4.11.3",
+      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
-      "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "clsx": "^1.0.4",
         "csstype": "^2.5.2",
@@ -2708,9 +2720,9 @@
           },
           "dependencies": {
             "csstype": {
-              "version": "3.0.7",
+              "version": "3.0.8",
-              "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+              "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-              "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
+              "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
             }
           }
         }
@@ -4170,37 +4182,23 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.1.1-9",
+      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.1.1-9.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.2.tgz",
-      "integrity": "sha512-ryftb0jBs1ghIm4ILwJZ7vfQt90Kab9XlNcEUh4JFDV4+HEABrGpwstLKyCtIjFDzxQf/z9L4vbW25o1m6klmg==",
+      "integrity": "sha512-/YWChXpALyqZSedjvBchR0vQSHCMFOVlejEdHYBkBbF0hJz2M/Xva+56AdFXnPjmM1J1q2hv7QZxGoNNy9md5g==",
       "requires": {
-        "@types/react-inlinesvg": "^0.8.1",
+        "clsx": "^1.1.1",
-        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
-        "downshift": "^1.31.16",
+        "lodash-es": "^4.17.21",
-        "lodash-es": "^4.17.15",
+        "react-inlinesvg": "^2.3.0"
-        "react-helmet": "^5.2.1",
-        "react-inlinesvg": "^1.1.2",
-        "string-similarity": "^1.2.2"
       },
       "dependencies": {
-        "react-helmet": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
-          "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
-          "requires": {
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.5.4",
-            "react-fast-compare": "^2.0.2",
-            "react-side-effect": "^1.1.0"
-          }
-        },
         "react-inlinesvg": {
-          "version": "1.2.0",
+          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz",
-          "integrity": "sha512-IsznU+UzpUwDGzBWbf0bfSRA5Jbqz87xeoqLM/nSIDPkoHksInF1wCGybTSn4sIui+30TqboRQP1wAelNTkdog==",
+          "integrity": "sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==",
           "requires": {
             "exenv": "^1.2.2",
-            "react-from-dom": "^0.3.0"
+            "react-from-dom": "^0.6.0"
           }
         }
       }
@@ -5511,7 +5509,6 @@
       "version": "16.14.5",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
       "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5521,8 +5518,7 @@
         "csstype": {
           "version": "3.0.7",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
-          "dev": true
         }
       }
     },
@@ -5562,31 +5558,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-inlinesvg": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@types/react-inlinesvg/-/react-inlinesvg-0.8.1.tgz",
-      "integrity": "sha512-pONmeCNqot4diXLhxb+jajDWX57rH/JmMu9H4NQWNMl5WUHAHmcrOfDfB05IgYBfRUX1Cvyjl9EZzKHxSxZpAA==",
-      "requires": {
-        "@types/react": "*"
-      },
-      "dependencies": {
-        "@types/react": {
-          "version": "17.0.3",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
-          "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "csstype": {
-          "version": "3.0.7",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
-        }
-      }
-    },
     "@types/react-router": {
       "version": "5.1.13",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -5689,23 +5660,6 @@
       "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
       "requires": {
         "@types/react": "*"
-      },
-      "dependencies": {
-        "@types/react": {
-          "version": "17.0.3",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
-          "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "csstype": {
-          "version": "3.0.7",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
-        }
       }
     },
     "@types/react-virtualized": {
@@ -19028,20 +18982,11 @@
       "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
       "dev": true
     },
-    "lodash.every": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
-      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
-    },
     "lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
-    },
+      "dev": true
-    "lodash.foreach": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
-      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
     },
     "lodash.get": {
       "version": "4.4.2",
@@ -19058,16 +19003,6 @@
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
     },
-    "lodash.map": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
-      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
-    },
-    "lodash.maxby": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.maxby/-/lodash.maxby-4.6.0.tgz",
-      "integrity": "sha1-CCJABo88eiJ6oAqDgOTzjPB4bj0="
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -22574,11 +22509,6 @@
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
       "dev": true
     },
-    "react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
     "react-focus-lock": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.0.tgz",
@@ -22594,9 +22524,9 @@
       }
     },
     "react-from-dom": {
-      "version": "0.3.1",
+      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.1.tgz",
-      "integrity": "sha512-PeNBa8iuzoD7qHA9O7YpGnXFvC+XFFwStmFh2/r2zJAvEIaRg6EwOj+EPcDIFwyYBhqPIItxIx/dGdeWiFivjQ=="
+      "integrity": "sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg=="
     },
     "react-gtm-module": {
       "version": "2.0.11",
@@ -22880,14 +22810,6 @@
         "tiny-warning": "^1.0.0"
       }
     },
-    "react-side-effect": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz",
-      "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==",
-      "requires": {
-        "shallowequal": "^1.0.1"
-      }
-    },
     "react-sizeme": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.12.tgz",
@@ -25057,7 +24979,8 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
     },
     "shebang-command": {
       "version": "1.2.0",
@@ -25849,18 +25772,6 @@
         }
       }
     },
-    "string-similarity": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-1.2.2.tgz",
-      "integrity": "sha512-IoHUjcw3Srl8nsPlW04U3qwWPk3oG2ffLM0tN853d/E/JlIvcmZmDY2Kz5HzKp4lEi2T7QD7Zuvjq/1rDw+XcQ==",
-      "requires": {
-        "lodash.every": "^4.6.0",
-        "lodash.flattendeep": "^4.4.0",
-        "lodash.foreach": "^4.5.0",
-        "lodash.map": "^4.6.0",
-        "lodash.maxby": "^4.6.0"
-      }
-    },
     "string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",

package.json

@@ -23,10 +23,11 @@
     "@editorjs/list": "^1.6.1",
     "@editorjs/paragraph": "^2.8.0",
     "@editorjs/quote": "^2.4.0",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/styles": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.58",
-    "@saleor/macaw-ui": "^0.1.1-9",
+    "@material-ui/styles": "^4.11.4",
+    "@saleor/macaw-ui": "^0.2.2",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "apollo": "^2.32.5",
@@ -207,7 +208,13 @@
       "@assets(.*)$": "<rootDir>/assets/$1",
       "@locale(.*)$": "<rootDir>/locale/$1",
       "@saleor(?!.*macaw)(.*)$": "<rootDir>/src/$1",
-      "@test/(.*)$": "<rootDir>/testUtils/$1"
+      "@test/(.*)$": "<rootDir>/testUtils/$1",
+      "^lodash-es(.*)$": "lodash/$1",
+      "^@material-ui/core$": "<rootDir>/node_modules/@material-ui/core",
+      "^@material-ui/icons$": "<rootDir>/node_modules/@material-ui/icons",
+      "^@material-ui/styles$": "<rootDir>/node_modules/@material-ui/styles",
+      "^react$": "<rootDir>/node_modules/react",
+      "^react-dom$": "<rootDir>/node_modules/react-dom"
     }
   },
   "husky": {

src/Baseline.tsx

@@ -1,23 +0,0 @@
-import { CssBaseline } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import { createStyles, SaleorTheme, withStyles } from "@saleor/theme";
-import React from "react";
-
-const styles = createStyles((theme: SaleorTheme) => ({
-  "@global": {
-    "@import": "url('https://rsms.me/inter/inter.css')",
-
-    // For some reason @import clause must be put on top
-    // eslint-disable-next-line sort-keys
-    "::selection": {
-      background: fade(theme.palette.primary.main, 0.2)
-    }
-  }
-}));
-
-const Baseline = withStyles(styles, {
-  name: "Baseline"
-})(() => <CssBaseline />);
-Baseline.displayName = "Baseline";
-
-export default Baseline;

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -1,5 +1,4 @@
 import { Button, Card, CardContent, Typography } from "@material-ui/core";
-import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -7,6 +6,7 @@ import ExternalLink from "@saleor/components/ExternalLink";
 import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import ReactMarkdown from "react-markdown";
@@ -40,9 +40,9 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
 
   return (
     <Container>
-      <AppHeader onBack={onBack}>
+      <Backlink onClick={onBack}>
         {intl.formatMessage(sectionNames.apps)}
-      </AppHeader>
+      </Backlink>
       <PageHeader
         title={
           <>

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx

@@ -1,11 +1,11 @@
 import { Button, Typography } from "@material-ui/core";
-import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
-import useTheme from "@saleor/hooks/useTheme";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
+import { useTheme } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -41,9 +41,9 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
 
   return (
     <Container>
-      <AppHeader onBack={onBack}>
+      <Backlink onClick={onBack}>
         {intl.formatMessage(sectionNames.apps)}
-      </AppHeader>
+      </Backlink>
       <Grid variant="uniform">
         <div className={classes.breadcrumbContainer}>
           <div className={classes.breadcrumbs}>

src/apps/components/AppDetailsSettingsPage/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({
@@ -18,7 +18,7 @@ export const useStyles = makeStyles(
           content: "'/'",
           display: "block",
           position: "absolute",
-          right: -theme.spacing(2),
+          right: theme.spacing(-2),
           top: 0
         },
         "&:not(:first-child):hover": {

src/apps/components/AppDetailsSettingsPage/useSettingsBreadcrumbs.ts

@@ -6,7 +6,7 @@ import {
   ExtensionMessageType,
   sendMessageToExtension,
   useExtensionMessage
-} from "@saleor/macaw-ui/extensions";
+} from "@saleor/macaw-ui";
 import { useState } from "react";
 
 type UseSettingsBreadcrumbs = [Breadcrumb[], (value: string) => void];

src/apps/components/AppInstallErrorPage/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx

@@ -1,14 +1,14 @@
 import AccountPermissions from "@saleor/components/AccountPermissions";
-import AppHeader from "@saleor/components/AppHeader";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAppErrorMessage from "@saleor/utils/errors/app";
@@ -55,9 +55,9 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
     <Form initial={initialForm} onSubmit={onSubmit} confirmLeave>
       {({ data, change, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.apps)}
-          </AppHeader>
+          </Backlink>
           <PageHeader
             title={intl.formatMessage({
               defaultMessage: "Create New App",
@@ -91,11 +91,11 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
               })}
             />
           </Grid>
-          <SaveButtonBar
+          <Savebar
             disabled={disabled || !hasChanged}
             state={saveButtonBarState}
             onCancel={onBack}
-            onSave={submit}
+            onSubmit={submit}
           />
         </Container>
       )}

src/apps/components/CustomAppDefaultToken/styles.ts

@@ -1,5 +1,5 @@
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({
@@ -10,8 +10,8 @@ export const useStyles = makeStyles(
       display: "flex",
       justifyContent: "flex-end",
       position: "relative",
-      right: -theme.spacing(),
+      right: theme.spacing(-1),
-      top: -theme.spacing(1)
+      top: theme.spacing(-1)
     },
     content: {
       display: "grid",

src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx

@@ -1,17 +1,17 @@
 import { Button } from "@material-ui/core";
 import AccountPermissions from "@saleor/components/AccountPermissions";
-import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAppErrorMessage from "@saleor/utils/errors/app";
@@ -98,9 +98,9 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
     <Form initial={initialForm} onSubmit={onSubmit} confirmLeave>
       {({ data, change, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.apps)}
-          </AppHeader>
+          </Backlink>
           <PageHeader title={app?.name}>
             <Button
               variant="text"
@@ -176,11 +176,11 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
               />
             </div>
           </Grid>
-          <SaveButtonBar
+          <Savebar
             disabled={disabled || !hasChanged}
             state={saveButtonBarState}
             onCancel={onBack}
-            onSave={submit}
+            onSubmit={submit}
           />
         </Container>
       )}

src/apps/components/CustomAppTokens/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/DeactivatedText/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 export interface HorizontalSpacerProps {

src/apps/components/TokenCreateDialog/styles.ts

@@ -1,5 +1,5 @@
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -7,7 +7,7 @@ import SingleSelectField from "@saleor/components/SingleSelectField";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { UseFormResult } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import {
   AttributeEntityTypeEnum,
   AttributeInputTypeEnum
@@ -36,11 +36,11 @@ const entityTypeMessages = defineMessages({
 const useStyles = makeStyles(
   theme => ({
     inputTypeSection: {
-      columnGap: theme.spacing(2) + "px",
+      columnGap: theme.spacing(2),
       display: "flex",
       [theme.breakpoints.down("md")]: {
         flexFlow: "wrap",
-        rowGap: theme.spacing(3) + "px"
+        rowGap: theme.spacing(3)
       }
     }
   }),

src/attributes/components/AttributeDetails/NumericUnits.tsx

@@ -3,7 +3,7 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import SingleSelectField from "@saleor/components/SingleSelectField";
 import { UseFormResult } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { MeasurementUnitsEnum } from "@saleor/types/globalTypes";
 import React, { useEffect, useMemo, useState } from "react";
 import { useIntl } from "react-intl";

src/attributes/components/AttributeList/AttributeList.tsx

@@ -7,8 +7,8 @@ import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { translateBoolean } from "@saleor/intl";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -1,8 +1,8 @@
 import { Button, Card } from "@material-ui/core";
 import { AttributeListUrlSortField } from "@saleor/attributes/urls";
-import AppHeader from "@saleor/components/AppHeader";
 import FilterBar from "@saleor/components/FilterBar";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -54,9 +54,9 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
 
   return (
     <Container>
-      <AppHeader onBack={onBack}>
+      <Backlink onClick={onBack}>
         <FormattedMessage {...sectionNames.configuration} />
-      </AppHeader>
+      </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.attributes)}>
         <Button
           onClick={onAdd}

src/attributes/components/AttributeOrganization/AttributeOrganization.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import RadioGroupField from "@saleor/components/RadioGroupField";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { AttributeTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
@@ -32,7 +32,7 @@ const useStyles = makeStyles(
       overflow: "visible"
     },
     cardSubtitle: {
-      fontSize: "1rem",
+      fontSize: theme.typography.body1.fontSize,
       marginBottom: theme.spacing(0.5)
     },
     label: {

src/attributes/components/AttributePage/AttributePage.tsx

@@ -1,6 +1,5 @@
 import { AttributeDetails_attribute_choices } from "@saleor/attributes/types/AttributeDetails";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@saleor/attributes/utils/data";
-import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
@@ -9,11 +8,12 @@ import Grid from "@saleor/components/Grid";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import { MetadataFormData } from "@saleor/components/Metadata/types";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import { ListSettingsUpdate } from "@saleor/components/TablePagination";
 import { AttributeDetailsFragment } from "@saleor/fragments/types/AttributeDetailsFragment";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { ListSettings, ReorderAction } from "@saleor/types";
 import {
@@ -169,9 +169,9 @@ const AttributePage: React.FC<AttributePageProps> = ({
 
         return (
           <Container>
-            <AppHeader onBack={onBack}>
+            <Backlink onClick={onBack}>
               {intl.formatMessage(sectionNames.attributes)}
-            </AppHeader>
+            </Backlink>
             <PageHeader
               title={
                 attribute === null
@@ -234,11 +234,11 @@ const AttributePage: React.FC<AttributePageProps> = ({
                 />
               </div>
             </Grid>
-            <SaveButtonBar
+            <Savebar
               disabled={disabled || !hasChanged}
               state={saveButtonBarState}
               onCancel={onBack}
-              onSave={submit}
+              onSubmit={submit}
               onDelete={attribute === null ? undefined : onDelete}
             />
           </Container>

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -17,8 +17,8 @@ import {
 } from "@saleor/components/SortableTable";
 import TablePagination from "@saleor/components/TablePagination";
 import { AttributeValueListFragment_edges_node } from "@saleor/fragments/types/AttributeValueListFragment";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { ListProps, ReorderAction } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -39,7 +39,7 @@ const useStyles = makeStyles(
       width: 300
     },
     columnDrag: {
-      width: 48 + theme.spacing(1.5)
+      width: theme.spacing(6 + 1.5)
     },
     columnStore: {
       width: "auto"

src/auth/components/Layout.tsx

@@ -1,8 +1,8 @@
 import backgroundArt from "@assets/images/login-background.svg";
 import saleorDarkLogo from "@assets/images/logo-dark.svg";
 import saleorLightLogo from "@assets/images/logo-light.svg";
-import useTheme from "@saleor/hooks/useTheme";
+import { useTheme } from "@saleor/macaw-ui";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 
@@ -72,7 +72,7 @@ const Layout: React.FC = props => {
   const { children } = props;
 
   const classes = useStyles(props);
-  const { isDark } = useTheme();
+  const { themeType } = useTheme();
 
   return (
     <div className={classes.root}>
@@ -83,7 +83,7 @@ const Layout: React.FC = props => {
         <div className={classes.mainPanelContent}>
           <SVG
             className={classes.logo}
-            src={isDark ? saleorDarkLogo : saleorLightLogo}
+            src={themeType === "dark" ? saleorDarkLogo : saleorLightLogo}
           />
           {children}
         </div>

src/auth/components/LoginLoading/LoginLoading.tsx

@@ -1,5 +1,5 @@
 import { CircularProgress } from "@material-ui/core";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/auth/components/LoginPage/LoginPage.tsx

@@ -9,7 +9,7 @@ import { AvailableExternalAuthentications_shop_availableExternalAuthentications
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -2,7 +2,7 @@ import { Button, TextField, Typography } from "@material-ui/core";
 import { SetPassword_setPassword_errors } from "@saleor/auth/types/SetPassword";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -2,7 +2,7 @@ import { Button, TextField, Typography } from "@material-ui/core";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -1,6 +1,6 @@
 import { Button, Typography } from "@material-ui/core";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -5,7 +5,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
 import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -1,13 +1,13 @@
-import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Metadata from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import SeoForm from "@saleor/components/SeoForm";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -35,9 +35,9 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
     <CategoryCreateForm onSubmit={onSubmit}>
       {({ data, change, handlers, submit, hasChanged }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.categories)}
-          </AppHeader>
+          </Backlink>
           <PageHeader
             title={intl.formatMessage({
               defaultMessage: "Create New Category",
@@ -71,9 +71,9 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
             />
             <CardSpacer />
             <Metadata data={data} onChange={handlers.changeMetadata} />
-            <SaveButtonBar
+            <Savebar
               onCancel={onBack}
-              onSave={submit}
+              onSubmit={submit}
               state={saveButtonBarState}
               disabled={disabled || !hasChanged}
             />

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -7,7 +7,7 @@ import {
   DialogTitle
 } from "@material-ui/core";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/categories/components/CategoryList/CategoryList.tsx

@@ -7,8 +7,8 @@ import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { CategoryFragment } from "@saleor/fragments/types/CategoryFragment";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -8,8 +8,8 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { ChannelProps, ListActions, ListProps } from "@saleor/types";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -1,18 +1,18 @@
 import { Button, Card } from "@material-ui/core";
-import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import SeoForm from "@saleor/components/SeoForm";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -104,9 +104,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
     <CategoryUpdateForm category={category} onSubmit={onSubmit}>
       {({ data, change, handlers, submit, hasChanged }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.categories)}
-          </AppHeader>
+          </Backlink>
           <PageHeader title={category?.name} />
           <CategoryDetailsForm
             data={data}
@@ -224,10 +224,10 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               toolbar={productListToolbar}
             />
           )}
-          <SaveButtonBar
+          <Savebar
             onCancel={onBack}
             onDelete={onDelete}
-            onSave={submit}
+            onSubmit={submit}
             state={saveButtonBarState}
             disabled={disabled || !hasChanged}
           />

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx

@@ -6,12 +6,12 @@ import {
 import { ChannelData } from "@saleor/channels/utils";
 import { Messages } from "@saleor/components/ChannelsAvailabilityCard/types";
 import IconChevronDown from "@saleor/icons/ChevronDown";
+import { makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ProductDetails_product_variants } from "@saleor/products/types/ProductDetails";
 import { ChannelsWithVariantsData } from "@saleor/products/views/ProductUpdate/types";
 import { areAllChannelVariantsSelected } from "@saleor/products/views/ProductUpdate/utils";
-import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 import { defineMessages } from "react-intl";

src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx

@@ -9,12 +9,12 @@ import { ChannelData } from "@saleor/channels/utils";
 import IconCheckboxChecked from "@saleor/icons/CheckboxChecked";
 import IconCheckboxSemiChecked from "@saleor/icons/CheckboxSemiChecked";
 import IconChevronDown from "@saleor/icons/ChevronDown";
+import { makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ProductDetails_product_variants } from "@saleor/products/types/ProductDetails";
 import { ChannelsWithVariantsData } from "@saleor/products/views/ProductUpdate/types";
 import { areAllChannelVariantsSelected } from "@saleor/products/views/ProductUpdate/utils";
-import { makeStyles } from "@saleor/theme";
 import map from "lodash/map";
 import React, { ChangeEvent } from "react";
 import { defineMessages, useIntl } from "react-intl";

src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx

@@ -6,7 +6,7 @@ import {
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 

src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx

@@ -2,7 +2,7 @@ import { ExpansionPanelSummary, Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import { ChannelShippingZones } from "@saleor/channels/pages/ChannelDetailsPage/types";
 import IconChevronDown from "@saleor/icons/ChevronDown";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 

src/channels/components/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -3,7 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
 import { ChannelErrorFragment } from "@saleor/fragments/types/ChannelErrorFragment";
 import { SearchData } from "@saleor/hooks/makeTopLevelSearch";
@@ -163,9 +163,9 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
                 />
               </div>
             </Grid>
-            <SaveButtonBar
+            <Savebar
               onCancel={onBack}
-              onSave={submit}
+              onSubmit={submit}
               onDelete={onDelete}
               state={saveButtonBarState}
               disabled={disabled || formDisabled || !onSubmit || !hasChanged}

src/channels/pages/ChannelsListPage/ChannelsListPage.tsx

@@ -8,15 +8,15 @@ import {
   TableRow
 } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
-import Alert from "@saleor/components/Alert/Alert";
-import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
+import LimitReachedAlert from "@saleor/components/LimitReachedAlert";
 import PageHeader from "@saleor/components/PageHeader";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { hasLimits, isLimitReached } from "@saleor/utils/limits";
 import React from "react";
@@ -51,9 +51,9 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
 
   return (
     <Container>
-      <AppHeader onBack={onBack}>
+      <Backlink onClick={onBack}>
         {intl.formatMessage(sectionNames.configuration)}
-      </AppHeader>
+      </Backlink>
       <PageHeader
         title={intl.formatMessage(sectionNames.channels)}
         limit={
@@ -77,15 +77,16 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
           />
         </Button>
       </PageHeader>
-      <Alert
+      {limitReached && (
-        show={limitReached}
+        <LimitReachedAlert
-        title={intl.formatMessage({
+          title={intl.formatMessage({
-          defaultMessage: "Channel limit reached",
+            defaultMessage: "Channel limit reached",
-          description: "alert"
+            description: "alert"
-        })}
+          })}
-      >
+        >
-        <FormattedMessage defaultMessage="You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits." />
+          <FormattedMessage defaultMessage="You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits." />
-      </Alert>
+        </LimitReachedAlert>
+      )}
       <Card>
         <ResponsiveTable>
           <TableHead>

src/channels/pages/ChannelsListPage/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -1,6 +1,5 @@
 import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
 import { ChannelCreate } from "@saleor/channels/types/ChannelCreate";
-import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -10,6 +9,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
 import currencyCodes from "currency-codes";
 import React from "react";
@@ -83,9 +83,9 @@ export const ChannelCreateView = ({}) => {
         })}
       />
       <Container>
-        <AppHeader onBack={handleBack}>
+        <Backlink onClick={handleBack}>
           {intl.formatMessage(sectionNames.channels)}
-        </AppHeader>
+        </Backlink>
         <PageHeader
           title={intl.formatMessage({
             defaultMessage: "New Channel",

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -2,7 +2,6 @@ import ChannelDeleteDialog from "@saleor/channels/components/ChannelDeleteDialog
 import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
 import { ChannelDelete } from "@saleor/channels/types/ChannelDelete";
 import { getChannelsCurrencyChoices } from "@saleor/channels/utils";
-import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -13,6 +12,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
 import { useChannelShippingZones } from "@saleor/shipping/queries";
 import getChannelsErrorMessage from "@saleor/utils/errors/channels";
@@ -178,9 +178,9 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
         })}
       />
       <Container>
-        <AppHeader onBack={handleBack}>
+        <Backlink onClick={handleBack}>
           {intl.formatMessage(sectionNames.channels)}
-        </AppHeader>
+        </Backlink>
         <PageHeader title={data?.channel?.name} />
         <ChannelDetailsPage
           channelShippingZones={channelShippingZonesData?.shippingZones?.edges?.map(

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -1,5 +1,4 @@
 import { ChannelCollectionData } from "@saleor/channels/utils";
-import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -7,12 +6,13 @@ import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Metadata from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import SeoForm from "@saleor/components/SeoForm";
 import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/CollectionChannelListingErrorFragment";
 import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -56,9 +56,9 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
     >
       {({ change, data, handlers, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.collections)}
-          </AppHeader>
+          </Backlink>
           <PageHeader
             title={intl.formatMessage({
               defaultMessage: "Add Collection",
@@ -153,11 +153,11 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
               />
             </div>
           </Grid>
-          <SaveButtonBar
+          <Savebar
             state={saveButtonBarState}
             disabled={disabled || !hasChanged}
             onCancel={onBack}
-            onSave={submit}
+            onSubmit={submit}
           />
         </Container>
       )}

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -1,5 +1,4 @@
 import { ChannelCollectionData } from "@saleor/channels/utils";
-import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -7,12 +6,13 @@ import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
-import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import Savebar from "@saleor/components/Savebar";
 import SeoForm from "@saleor/components/SeoForm";
 import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/CollectionChannelListingErrorFragment";
 import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { Backlink } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -75,9 +75,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
     >
       {({ change, data, handlers, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>
+          <Backlink onClick={onBack}>
             {intl.formatMessage(sectionNames.collections)}
-          </AppHeader>
+          </Backlink>
           <PageHeader title={collection?.name} />
           <Grid>
             <div>
@@ -148,12 +148,12 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
               </div>
             </div>
           </Grid>
-          <SaveButtonBar
+          <Savebar
             state={saveButtonBarState}
             disabled={disabled || (!hasChanged && !hasChannelChanged)}
             onCancel={onBack}
             onDelete={onCollectionRemove}
-            onSave={submit}
+            onSubmit={submit}
           />
         </Container>
       )}

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -5,7 +5,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
 import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/collections/components/CollectionList/CollectionList.tsx

@@ -7,8 +7,8 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -17,7 +17,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -32,7 +32,7 @@ const useStyles = makeStyles(
       "&:last-child": {
         paddingRight: 0
       },
-      width: 76 + theme.spacing(0.5)
+      width: `calc(76px + ${theme.spacing(0.5)})`
     },
     colName: {
       paddingLeft: 0,

src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Typography } from "@material-ui/core";
 import AddIcon from "@material-ui/icons/Add";
 import RemoveIcon from "@material-ui/icons/Remove";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 

src/components/AccountPermissions/AccountPermissions.tsx

@@ -11,8 +11,8 @@ import {
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import useUser from "@saleor/hooks/useUser";
+import { makeStyles } from "@saleor/macaw-ui";
 import { PermissionData } from "@saleor/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage";
-import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/ActionDialog/ActionDialog.tsx

@@ -2,7 +2,7 @@ import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
 import { DialogProps } from "@saleor/types";
 import React from "react";
 
-import { ConfirmButtonTransitionState } from "../ConfirmButton/ConfirmButton";
+import { ConfirmButtonTransitionState } from "../ConfirmButton";
 import DialogButtons from "./DialogButtons";
 import { ActionDialogVariant } from "./types";
 

src/components/ActionDialog/DialogButtons.tsx

@@ -1,13 +1,11 @@
 import { Button, DialogActions } from "@material-ui/core";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import ConfirmButton, {
+import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
-  ConfirmButtonTransitionState
-} from "../ConfirmButton/ConfirmButton";
 import { ActionDialogVariant } from "./types";
 
 const useStyles = makeStyles(

src/components/AddressEdit/AddressEdit.tsx

@@ -3,7 +3,7 @@ import { AddressTypeInput } from "@saleor/customers/types";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { commonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import getOrderErrorMessage from "@saleor/utils/errors/order";

src/components/Alert/Alert.stories.tsx

@@ -1,13 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Alert from "./Alert";
-
-storiesOf("Generics / Alert", module)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <Alert show={true} title="Title">
-      Content
-    </Alert>
-  ));

src/components/Alert/Alert.tsx

@@ -1,81 +0,0 @@
-import alertIconDark from "@assets/images/alert-dark.svg";
-import alertIcon from "@assets/images/alert.svg";
-import { Card, CardContent, IconButton, Typography } from "@material-ui/core";
-import CloseIcon from "@material-ui/icons/Close";
-import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import useTheme from "@saleor/hooks/useTheme";
-import { makeStyles } from "@saleor/theme";
-import classNames from "classnames";
-import React from "react";
-import SVG from "react-inlinesvg";
-
-const useStyles = makeStyles(
-  theme => ({
-    close: {
-      color: theme.palette.common.black,
-      position: "absolute",
-      right: theme.spacing(-1),
-      top: theme.spacing(-2)
-    },
-    content: {
-      color: theme.palette.getContrastText(theme.palette.alert.paper.warning),
-      columnGap: theme.spacing(2) + "px",
-      display: "grid",
-      gridTemplateColumns: "40px 1fr"
-    },
-    icon: {
-      color: theme.palette.alert.icon.warning
-    },
-    root: {
-      background: theme.palette.alert.paper.warning,
-      marginBottom: theme.spacing(3)
-    },
-    titleBar: {
-      margin: theme.spacing(1, 0),
-      position: "relative"
-    }
-  }),
-  { name: "Alert" }
-);
-
-export interface AlertProps {
-  className?: string;
-  show: boolean;
-  title: string;
-}
-
-const Alert: React.FC<AlertProps> = ({ children, className, show, title }) => {
-  const classes = useStyles({});
-  const [visible, setVisible] = useStateFromProps(show);
-  const { isDark } = useTheme();
-
-  return visible ? (
-    <Card elevation={0} className={classNames(classes.root, className)}>
-      <CardContent>
-        <div className={classes.content}>
-          <div>
-            <SVG
-              className={classes.icon}
-              src={isDark ? alertIconDark : alertIcon}
-            />
-          </div>
-          <div>
-            <div className={classes.titleBar}>
-              <Typography variant="h5">{title}</Typography>
-              <IconButton
-                className={classes.close}
-                onClick={() => setVisible(false)}
-              >
-                <CloseIcon />
-              </IconButton>
-            </div>
-            {children}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  ) : null;
-};
-
-Alert.displayName = "Alert";
-export default Alert;

src/components/Alert/InlineAlert.tsx

@@ -1,5 +1,5 @@
 import { Card } from "@material-ui/core";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/AppHeader/AppHeader.tsx

@@ -1,82 +0,0 @@
-import { Portal, Typography } from "@material-ui/core";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import { makeStyles } from "@saleor/theme";
-import React from "react";
-
-import AppHeaderContext from "../AppLayout/AppHeaderContext";
-import Skeleton from "../Skeleton";
-
-export interface AppHeaderProps {
-  children: React.ReactNode;
-  onBack();
-}
-
-const useStyles = makeStyles(
-  theme => ({
-    backArrow: {
-      fontSize: 30
-    },
-    menuButton: {
-      flex: "0 0 auto",
-      marginLeft: -theme.spacing(2),
-      marginRight: theme.spacing(),
-      marginTop: -theme.spacing(2)
-    },
-    root: {
-      "&:hover": {
-        color: theme.typography.body1.color
-      },
-      alignItems: "center",
-      color: theme.palette.grey[500],
-      cursor: "pointer",
-      display: "flex",
-      marginTop: theme.spacing(0.5),
-      transition: theme.transitions.duration.standard + "ms",
-      [theme.breakpoints.down("sm")]: {
-        margin: theme.spacing(4, 0, 0, 0)
-      }
-    },
-    skeleton: {
-      marginBottom: theme.spacing(2),
-      width: "10rem"
-    },
-    title: {
-      color: "inherit",
-      flex: 1,
-      marginLeft: theme.spacing(),
-      textTransform: "uppercase"
-    }
-  }),
-  { name: "AppHeader" }
-);
-
-const AppHeader: React.FC<AppHeaderProps> = props => {
-  const { children, onBack } = props;
-
-  const classes = useStyles(props);
-
-  return (
-    <AppHeaderContext.Consumer>
-      {anchor =>
-        anchor ? (
-          <Portal container={anchor.current}>
-            <div
-              className={classes.root}
-              onClick={onBack}
-              data-test-id="app-header-back-button"
-            >
-              <ArrowBackIcon className={classes.backArrow} />
-              {children ? (
-                <Typography className={classes.title}>{children}</Typography>
-              ) : (
-                <Skeleton className={classes.skeleton} />
-              )}
-            </div>
-          </Portal>
-        ) : null
-      }
-    </AppHeaderContext.Consumer>
-  );
-};
-AppHeader.displayName = "AppHeader";
-export default AppHeader;

src/components/AppHeader/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./AppHeader";
-export * from "./AppHeader";

src/components/AppLayout/AppActionContext.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-
-interface AppAction {
-  anchor: React.RefObject<HTMLDivElement>;
-  docked: boolean;
-  setDocked: (docked: boolean) => void;
-}
-const AppActionContext = React.createContext<AppAction>({
-  anchor: undefined,
-  docked: true,
-  setDocked: () => undefined
-});
-export const useAppAction = () => React.useContext(AppActionContext);
-
-export default AppActionContext;

src/components/AppLayout/AppChannelSelect.tsx

@@ -1,5 +1,5 @@
 import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { ChannelProps } from "@saleor/types";
 import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";

src/components/AppLayout/AppHeaderContext.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const AppHeaderContext = React.createContext<React.RefObject<HTMLDivElement>>(
-  undefined
-);
-
-export default AppHeaderContext;

src/components/AppLayout/AppLayout.tsx

@@ -1,11 +1,17 @@
 import { LinearProgress, useMediaQuery } from "@material-ui/core";
-import { createConfigurationMenu } from "@saleor/configuration";
 import useAppState from "@saleor/hooks/useAppState";
 import useNavigator from "@saleor/hooks/useNavigator";
-import useTheme from "@saleor/hooks/useTheme";
 import useUser from "@saleor/hooks/useUser";
+import {
+  makeStyles,
+  SaleorTheme,
+  Sidebar,
+  SidebarDrawer,
+  useBacklink,
+  useSavebar,
+  useTheme
+} from "@saleor/macaw-ui";
 import { staffMemberDetailsUrl } from "@saleor/staff/urls";
-import { makeStyles, SaleorTheme } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -15,15 +21,12 @@ import Container from "../Container";
 import ErrorPage from "../ErrorPage";
 import Navigator from "../Navigator";
 import NavigatorButton from "../NavigatorButton/NavigatorButton";
-import SideBar from "../SideBar";
-import SideBarDrawer from "../SideBarDrawer/SideBarDrawer";
 import UserChip from "../UserChip";
-import AppActionContext from "./AppActionContext";
 import useAppChannel from "./AppChannelContext";
 import AppChannelSelect from "./AppChannelSelect";
-import AppHeaderContext from "./AppHeaderContext";
 import { appLoaderHeight } from "./consts";
 import createMenuStructure from "./menuStructure";
+import { isMenuActive } from "./utils";
 
 const useStyles = makeStyles(
   theme => ({
@@ -103,7 +106,7 @@ const useStyles = makeStyles(
       }
     },
     viewContainer: {
-      minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)`
+      minHeight: `calc(100vh + ${appLoaderHeight + 70}px - ${theme.spacing(2)})`
     }
   }),
   {
@@ -117,9 +120,9 @@ interface AppLayoutProps {
 
 const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const classes = useStyles({});
-  const { isDark, toggleTheme } = useTheme();
+  const { themeType, setTheme } = useTheme();
-  const appActionAnchor = React.useRef<HTMLDivElement>();
+  const { anchor: appActionAnchor, docked } = useSavebar();
-  const appHeaderAnchor = React.useRef<HTMLDivElement>();
+  const appHeaderAnchor = useBacklink();
   const { logout, user } = useUser();
   const navigate = useNavigator();
   const intl = useIntl();
@@ -129,7 +132,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const isMdUp = useMediaQuery((theme: SaleorTheme) =>
     theme.breakpoints.up("md")
   );
-  const [docked, setDocked] = React.useState(true);
   const {
     availableChannels,
     channel,
@@ -137,18 +139,10 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     setChannel
   } = useAppChannel(false);
 
-  const menuStructure = createMenuStructure(intl);
+  const menuStructure = createMenuStructure(intl, user);
-  const configurationMenu = createConfigurationMenu(intl);
+  const activeMenu = menuStructure.find(menuItem =>
-  const userPermissions = user?.userPermissions || [];
+    isMenuActive(location.pathname, menuItem)
-
+  )?.id;
-  const renderConfigure = configurationMenu.some(section =>
-    section.menuItems.some(
-      menuItem =>
-        !!userPermissions.find(
-          userPermission => userPermission.code === menuItem.permission
-        )
-    )
-  );
 
   const handleErrorBack = () => {
     navigate("/");
@@ -160,105 +154,88 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     });
   };
 
+  const isDark = themeType === "dark";
+  const toggleTheme = () => setTheme(isDark ? "light" : "dark");
+
   return (
     <>
       <Navigator
         visible={isNavigatorVisible}
         setVisibility={setNavigatorVisibility}
       />
-      <AppHeaderContext.Provider value={appHeaderAnchor}>
+      <div className={classes.root}>
-        <AppActionContext.Provider
+        {isMdUp && (
-          value={{
+          <Sidebar
-            anchor: appActionAnchor,
+            active={activeMenu}
-            docked,
+            menuItems={menuStructure}
-            setDocked
+            onMenuItemClick={navigate}
-          }}
+          />
-        >
+        )}
-          <div className={classes.root}>
+        <div className={classes.content}>
-            {isMdUp && (
+          {appState.loading ? (
-              <SideBar
+            <LinearProgress className={classes.appLoader} color="primary" />
-                menuItems={menuStructure}
+          ) : (
-                location={location.pathname}
+            <div className={classes.appLoaderPlaceholder} />
-                user={user}
+          )}
-                renderConfigure={renderConfigure}
+          <div className={classes.viewContainer}>
-                onMenuItemClick={navigate}
+            <div>
-              />
+              <Container>
-            )}
+                <div className={classes.header}>
-            <div className={classes.content}>
+                  <div className={classes.headerAnchor} ref={appHeaderAnchor} />
-              {appState.loading ? (
+                  <div className={classes.headerToolbar}>
-                <LinearProgress className={classes.appLoader} color="primary" />
+                    {!isMdUp && (
-              ) : (
+                      <SidebarDrawer
-                <div className={classes.appLoaderPlaceholder} />
+                        menuItems={menuStructure}
-              )}
+                        onMenuItemClick={navigate}
-              <div className={classes.viewContainer}>
-                <div>
-                  <Container>
-                    <div className={classes.header}>
-                      <div
-                        className={classes.headerAnchor}
-                        ref={appHeaderAnchor}
                       />
-                      <div className={classes.headerToolbar}>
+                    )}
-                        {!isMdUp && (
+                    <div className={classes.spacer} />
-                          <SideBarDrawer
+                    <div className={classes.userBar}>
-                            menuItems={menuStructure}
+                      <NavigatorButton
-                            location={location.pathname}
+                        isMac={navigator.platform.toLowerCase().includes("mac")}
-                            user={user}
+                        onClick={() => setNavigatorVisibility(true)}
-                            renderConfigure={renderConfigure}
+                      />
-                            onMenuItemClick={navigate}
+                      {channel && (
-                          />
+                        <AppChannelSelect
-                        )}
+                          channels={availableChannels}
-                        <div className={classes.spacer} />
+                          disabled={!isPickerActive}
-                        <div className={classes.userBar}>
+                          selectedChannelId={channel.id}
-                          <NavigatorButton
+                          onChannelSelect={setChannel}
-                            isMac={navigator.platform
-                              .toLowerCase()
-                              .includes("mac")}
-                            onClick={() => setNavigatorVisibility(true)}
-                          />
-                          {channel && (
-                            <AppChannelSelect
-                              channels={availableChannels}
-                              disabled={!isPickerActive}
-                              selectedChannelId={channel.id}
-                              onChannelSelect={setChannel}
-                            />
-                          )}
-                          <UserChip
-                            isDarkThemeEnabled={isDark}
-                            user={user}
-                            onLogout={logout}
-                            onProfileClick={() =>
-                              navigate(staffMemberDetailsUrl(user.id))
-                            }
-                            onThemeToggle={toggleTheme}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </Container>
-                </div>
-                <main className={classes.view}>
-                  {appState.error
-                    ? appState.error.type === "unhandled" && (
-                        <ErrorPage
-                          id={appState.error.id}
-                          onBack={handleErrorBack}
                         />
-                      )
+                      )}
-                    : children}
+                      <UserChip
-                </main>
+                        isDarkThemeEnabled={isDark}
-              </div>
+                        user={user}
-              <div
+                        onLogout={logout}
-                className={classNames(classes.appAction, {
+                        onProfileClick={() =>
-                  [classes.appActionDocked]: docked
+                          navigate(staffMemberDetailsUrl(user.id))
-                })}
+                        }
-                ref={appActionAnchor}
+                        onThemeToggle={toggleTheme}
-              />
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Container>
             </div>
+            <main className={classes.view}>
+              {appState.error
+                ? appState.error.type === "unhandled" && (
+                    <ErrorPage
+                      id={appState.error.id}
+                      onBack={handleErrorBack}
+                    />
+                  )
+                : children}
+            </main>
           </div>
-        </AppActionContext.Provider>
+          <div
-      </AppHeaderContext.Provider>
+            className={classNames(classes.appAction, {
+              [classes.appActionDocked]: docked
+            })}
+            ref={appActionAnchor}
+          />
+        </div>
+      </div>
     </>
   );
 };

src/components/AppLayout/MenuList.tsx

@@ -1,369 +0,0 @@
-import configureIcon from "@assets/images/menu-configure-icon.svg";
-import { Typography } from "@material-ui/core";
-import { User } from "@saleor/fragments/types/User";
-import useTheme from "@saleor/hooks/useTheme";
-import { sectionNames } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
-import classNames from "classnames";
-import React from "react";
-import SVG from "react-inlinesvg";
-import { FormattedMessage, useIntl } from "react-intl";
-import { matchPath } from "react-router";
-
-import {
-  configurationMenuUrl,
-  createConfigurationMenu
-} from "../../configuration";
-import { createHref } from "../../misc";
-import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
-import MenuNested from "./MenuNested";
-import { IMenuItem } from "./menuStructure";
-
-const useStyles = makeStyles(
-  theme => ({
-    menuIcon: {
-      "& svg": {
-        height: 32,
-        width: 32
-      },
-      display: "inline-block",
-      position: "relative",
-      top: 8
-    },
-    menuIconDark: {
-      "& path": {
-        fill: theme.palette.common.white
-      }
-    },
-    menuIconSmall: {
-      left: -5
-    },
-    menuIsActive: {
-      boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
-    },
-    menuItemHover: {
-      "& p": {
-        fontSize: 14,
-        transition: "color 0.5s ease, opacity 0.3s ease-out"
-      },
-      "& path": {
-        transition: "fill 0.5s ease"
-      },
-      "&:hover": {
-        "& p": {
-          color: theme.palette.primary.main
-        },
-        "& path": {
-          fill: theme.palette.primary.main
-        },
-        "&:before": {
-          borderLeft: `solid 2px ${theme.palette.primary.main}`,
-          content: "''",
-          height: 33,
-          left: -20,
-          position: "absolute",
-          top: 8
-        },
-        color: theme.palette.primary.main
-      },
-      cursor: "pointer",
-      position: "relative"
-    },
-    menuList: {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      marginLeft: theme.spacing(4),
-      marginTop: theme.spacing(2),
-      paddingBottom: theme.spacing(3)
-    },
-    menuListItem: {
-      alignItems: "center",
-      display: "block",
-      marginBottom: theme.spacing(5),
-      paddingLeft: 0,
-      textDecoration: "none",
-      transition: theme.transitions.duration.standard + "ms"
-    },
-    menuListItemActive: {
-      "& $menuListItemText": {
-        color: theme.palette.primary.main
-      },
-      "& path": {
-        color: theme.palette.primary.main,
-        fill: theme.palette.primary.main
-      }
-    },
-    menuListItemOpen: {
-      "&:after": {
-        borderBottom: `10px solid transparent`,
-        borderLeft: `10px solid ${theme.palette.background.paper}`,
-        borderTop: `10px solid transparent`,
-        content: "''",
-        height: 0,
-        position: "absolute",
-        right: -30,
-        top: 15,
-        width: 0
-      },
-      "&:before": {
-        borderLeft: `solid 2px ${theme.palette.primary.main}`,
-        content: "''",
-        height: 33,
-        left: -20,
-        position: "absolute",
-        top: 8
-      },
-      position: "relative"
-    },
-    menuListItemText: {
-      "&:hover": {
-        color: theme.palette.primary.main
-      },
-      bottom: 0,
-      cursor: "pointer",
-      fontSize: "1rem",
-      fontWeight: 500,
-      left: 30,
-      opacity: 1,
-      paddingLeft: 16,
-      position: "absolute",
-      textTransform: "uppercase",
-      transition: "opacity 0.5s ease"
-    },
-    menuListItemTextHide: {
-      bottom: 0,
-      left: 30,
-      opacity: 0,
-      position: "absolute"
-    },
-    subMenu: {
-      padding: "0 15px"
-    },
-    subMenuDrawer: {
-      background: "#000",
-      cursor: "pointer",
-      height: "100vh",
-      left: 0,
-      opacity: 0.2,
-      position: "absolute",
-      top: 0,
-      width: 0,
-      zIndex: -2
-    },
-    subMenuDrawerOpen: {
-      width: `100vw`
-    }
-  }),
-  { name: "MenuList" }
-);
-
-interface MenuListProps {
-  className?: string;
-  menuItems: IMenuItem[];
-  isMenuSmall: boolean;
-  location: string;
-  user: User;
-  renderConfigure: boolean;
-  onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
-}
-
-export interface IActiveSubMenu {
-  isActive: boolean;
-  label: string | null;
-}
-
-const MenuList: React.FC<MenuListProps> = props => {
-  const {
-    className,
-    menuItems,
-    isMenuSmall,
-    location,
-    user,
-    renderConfigure,
-    onMenuItemClick
-  } = props;
-
-  const classes = useStyles(props);
-
-  const { isDark } = useTheme();
-  const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
-    isActive: false,
-    label: null
-  });
-  const intl = useIntl();
-
-  const configurationMenu = createConfigurationMenu(intl).map(menu => {
-    menu.menuItems.map(item =>
-      user.userPermissions.map(perm => perm.code).includes(item.permission)
-    );
-  });
-
-  const handleSubMenu = itemLabel => {
-    setActiveSubMenu({
-      isActive:
-        itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true,
-      label: itemLabel
-    });
-  };
-
-  const closeSubMenu = (menuItemUrl, event) => {
-    setActiveSubMenu({
-      isActive: false,
-      label: null
-    });
-    if (menuItemUrl && event) {
-      onMenuItemClick(menuItemUrl, event);
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
-
-  return (
-    <div
-      className={classNames(className, {
-        [classes.menuIsActive]: activeSubMenu.isActive
-      })}
-      data-test="mainMenu"
-    >
-      {/* FIXME: this .split("?")[0] looks gross */}
-      {menuItems.map(menuItem => {
-        const isActive = (menuItem: IMenuItem) =>
-          location.split("?")[0] === orderDraftListUrl().split("?")[0] &&
-          menuItem.url.split("?")[0] === orderListUrl().split("?")[0]
-            ? false
-            : !!matchPath(location.split("?")[0], {
-                exact: menuItem.url.split("?")[0] === "/",
-                path: menuItem.url.split("?")[0]
-              });
-
-        if (
-          menuItem.permission &&
-          !user.userPermissions
-            .map(perm => perm.code)
-            .includes(menuItem.permission)
-        ) {
-          return null;
-        }
-
-        if (!menuItem.url) {
-          const isAnyChildActive = menuItem.children.reduce(
-            (acc, child) => acc || isActive(child),
-            false
-          );
-
-          return (
-            <div
-              className={classNames(classes.menuListItem, {
-                [classes.menuListItemActive]: isAnyChildActive
-              })}
-              key={menuItem.label}
-              data-testid={menuItem.testingContextId}
-              data-test="menuItemEntry"
-            >
-              <div
-                className={classNames(classes.menuItemHover, {
-                  [classes.menuListItemOpen]:
-                    menuItem.ariaLabel === activeSubMenu.label &&
-                    activeSubMenu.isActive
-                })}
-                onClick={() => handleSubMenu(menuItem.ariaLabel)}
-              >
-                <SVG
-                  className={classNames(classes.menuIcon, {
-                    [classes.menuIconDark]: isDark,
-                    [classes.menuIconSmall]: !isMenuSmall
-                  })}
-                  src={menuItem.icon}
-                />
-                <Typography
-                  aria-label={menuItem.ariaLabel}
-                  className={classNames(classes.menuListItemText, {
-                    [classes.menuListItemTextHide]: !isMenuSmall
-                  })}
-                >
-                  {menuItem.label}
-                </Typography>
-              </div>
-              <MenuNested
-                activeItem={activeSubMenu}
-                closeSubMenu={setActiveSubMenu}
-                menuItem={menuItem}
-                onMenuItemClick={onMenuItemClick}
-                handleSubMenu={handleSubMenu}
-                title={menuItem.label}
-                icon={menuItem.icon}
-                ariaLabel={menuItem.ariaLabel}
-              />
-              <div
-                onClick={event => closeSubMenu(null, event)}
-                className={classNames(classes.subMenuDrawer, {
-                  [classes.subMenuDrawerOpen]: activeSubMenu.isActive
-                })}
-              />
-            </div>
-          );
-        }
-
-        return (
-          <a
-            className={classNames(classes.menuListItem, {
-              [classes.menuListItemActive]: isActive(menuItem)
-            })}
-            href={createHref(menuItem.url)}
-            onClick={event => closeSubMenu(menuItem.url, event)}
-            key={menuItem.label}
-            data-testid={menuItem.testingContextId}
-            data-test="menuItemEntry"
-          >
-            <div className={classes.menuItemHover}>
-              <SVG
-                className={classNames(classes.menuIcon, {
-                  [classes.menuIconDark]: isDark,
-                  [classes.menuIconSmall]: !isMenuSmall
-                })}
-                src={menuItem.icon}
-              />
-              <Typography
-                aria-label={menuItem.ariaLabel}
-                className={classNames(classes.menuListItemText, {
-                  [classes.menuListItemTextHide]: !isMenuSmall
-                })}
-              >
-                {menuItem.label}
-              </Typography>
-            </div>
-          </a>
-        );
-      })}
-      {renderConfigure && configurationMenu.length > 0 && (
-        <a
-          className={classes.menuListItem}
-          href={createHref(configurationMenuUrl)}
-          onClick={event => closeSubMenu(configurationMenuUrl, event)}
-        >
-          <div className={classes.menuItemHover}>
-            <SVG
-              className={classNames(classes.menuIcon, {
-                [classes.menuIconDark]: isDark,
-                [classes.menuIconSmall]: !isMenuSmall
-              })}
-              src={configureIcon}
-            />
-            <Typography
-              aria-label="configuration"
-              className={classNames(classes.menuListItemText, {
-                [classes.menuListItemTextHide]: !isMenuSmall
-              })}
-            >
-              <FormattedMessage {...sectionNames.configuration} />
-            </Typography>
-          </div>
-        </a>
-      )}
-    </div>
-  );
-};
-
-MenuList.displayName = "MenuList";
-export default MenuList;

src/components/AppLayout/MenuNested.tsx

@@ -1,193 +0,0 @@
-import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
-import { Hidden, Typography } from "@material-ui/core";
-import useTheme from "@saleor/hooks/useTheme";
-import { createHref } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
-import classNames from "classnames";
-import React from "react";
-import SVG from "react-inlinesvg";
-
-import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
-import { IActiveSubMenu } from "./MenuList";
-import { IMenuItem } from "./menuStructure";
-
-const useStyles = makeStyles(
-  theme => ({
-    menuListNested: {
-      background: theme.palette.background.paper,
-      height: "100vh",
-      position: "absolute",
-      right: 0,
-      top: 0,
-      transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-      width: drawerNestedMenuWidth,
-      zIndex: -1
-    },
-    menuListNestedClose: {
-      "& svg": {
-        fill: theme.palette.primary.main,
-        left: 11,
-        position: "relative",
-        top: 1
-      },
-      border: `solid 1px #EAEAEA`,
-      borderRadius: "100%",
-      cursor: "pointer",
-      height: 32,
-      position: "absolute",
-      right: 32,
-      top: 35,
-      transform: "rotate(180deg)",
-      width: 32
-    },
-    menuListNestedCloseDark: {
-      border: `solid 1px #252728`
-    },
-    menuListNestedHide: {
-      opacity: 0
-    },
-    menuListNestedIcon: {
-      "& path": {
-        fill: "initial"
-      },
-      "& svg": { height: 32, position: "relative", top: 7, width: 32 }
-    },
-    menuListNestedIconDark: {
-      "& path": {
-        fill: theme.palette.common.white
-      }
-    },
-    menuListNestedItem: {
-      "&:hover": {
-        "& p": {
-          color: theme.palette.primary.main
-        }
-      },
-      display: "block",
-      marginBottom: theme.spacing(2),
-      padding: "0px 30px",
-      textDecoration: "none"
-    },
-    menuListNestedOpen: {
-      [theme.breakpoints.down("sm")]: {
-        right: 0,
-        width: drawerWidthExpandedMobile,
-        zIndex: 2
-      },
-      right: -drawerNestedMenuWidth,
-      width: drawerNestedMenuWidth,
-      zIndex: -1
-    },
-    subHeader: {
-      borderBottom: "solid 1px #EAEAEA",
-      margin: "30px",
-      marginBottom: 39,
-      paddingBottom: 22
-    },
-    subHeaderDark: {
-      borderBottom: "solid 1px #252728"
-    },
-    subHeaderTitle: {
-      [theme.breakpoints.up("md")]: {
-        paddingLeft: 0
-      },
-      display: "inline",
-      paddingLeft: 10
-    }
-  }),
-  { name: "MenuNested" }
-);
-
-export interface MenuNestedProps {
-  activeItem: IActiveSubMenu;
-  ariaLabel: string;
-  closeSubMenu: ({ isActive, label }: IActiveSubMenu) => void;
-  icon: string;
-  menuItem: IMenuItem;
-  title: string;
-  handleSubMenu: (itemLabel: string) => void;
-  onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
-}
-
-const MenuNested: React.FC<MenuNestedProps> = props => {
-  const {
-    activeItem,
-    ariaLabel,
-
-    closeSubMenu,
-    icon,
-    menuItem,
-    onMenuItemClick,
-    title
-  } = props;
-  const classes = useStyles(props);
-
-  const menuItems = menuItem.children;
-  const { isDark } = useTheme();
-  const closeMenu = (menuItemUrl, event) => {
-    onMenuItemClick(menuItemUrl, event);
-    closeSubMenu({
-      isActive: false,
-      label: null
-    });
-    event.stopPropagation();
-    event.preventDefault();
-  };
-  return (
-    <>
-      <div
-        className={classNames(classes.menuListNested, {
-          [classes.menuListNestedOpen]:
-            activeItem.label === ariaLabel && activeItem.isActive
-        })}
-      >
-        <Typography
-          className={classNames(classes.subHeader, {
-            [classes.subHeaderDark]: isDark
-          })}
-          variant="h5"
-        >
-          <Hidden mdUp>
-            <SVG
-              className={classNames(classes.menuListNestedIcon, {
-                [classes.menuListNestedIconDark]: isDark
-              })}
-              src={icon}
-            />
-          </Hidden>
-          <div className={classes.subHeaderTitle}>{title}</div>
-          <Hidden mdUp>
-            <div
-              className={classNames(classes.menuListNestedClose, {
-                [classes.menuListNestedCloseDark]: isDark
-              })}
-              data-test={ariaLabel}
-              onClick={() =>
-                closeSubMenu({
-                  isActive: false,
-                  label: null
-                })
-              }
-            >
-              <SVG src={menuArrowIcon} />
-            </div>
-          </Hidden>
-        </Typography>
-        {menuItems.map(item => (
-          <a
-            className={classNames(classes.menuListNestedItem)}
-            href={createHref(item.url)}
-            data-test={ariaLabel}
-            onClick={event => closeMenu(item.url, event)}
-            key={item.label}
-          >
-            <Typography aria-label={item.ariaLabel}>{item.label}</Typography>
-          </a>
-        ))}
-      </div>
-    </>
-  );
-};
-
-MenuNested.displayName = "MenuNested";
-export default MenuNested;

src/components/AppLayout/menuStructure.ts

@@ -1,11 +1,19 @@
 import appsIcon from "@assets/images/menu-apps-icon.svg";
 import catalogIcon from "@assets/images/menu-catalog-icon.svg";
+import configurationIcon from "@assets/images/menu-configure-icon.svg";
 import customerIcon from "@assets/images/menu-customers-icon.svg";
 import discountsIcon from "@assets/images/menu-discounts-icon.svg";
 import homeIcon from "@assets/images/menu-home-icon.svg";
 import ordersIcon from "@assets/images/menu-orders-icon.svg";
 import translationIcon from "@assets/images/menu-translation-icon.svg";
+import {
+  configurationMenuUrl,
+  createConfigurationMenu
+} from "@saleor/configuration";
+import { MenuItem } from "@saleor/configuration/ConfigurationPage";
+import { User } from "@saleor/fragments/types/User";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { SidebarMenuItem } from "@saleor/macaw-ui";
 import { IntlShape } from "react-intl";
 
 import { appsListPath } from "../../apps/urls";
@@ -18,23 +26,20 @@ import { productListUrl } from "../../products/urls";
 import { languageListUrl } from "../../translations/urls";
 import { PermissionEnum } from "../../types/globalTypes";
 
-export interface IMenuItem {
+interface FilterableMenuItem extends Omit<SidebarMenuItem, "children"> {
-  ariaLabel: string;
+  children?: FilterableMenuItem[];
-  children?: IMenuItem[];
+  permissions?: PermissionEnum[];
-  icon?: any;
-  label: string;
-  permission?: PermissionEnum;
-  testingContextId: string;
-  url?: string;
 }
 
-function createMenuStructure(intl: IntlShape): IMenuItem[] {
+function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] {
-  return [
+  const configurationMenu = createConfigurationMenu(intl);
+
+  const menuItems: FilterableMenuItem[] = [
     {
       ariaLabel: "home",
-      icon: homeIcon,
+      iconSrc: homeIcon,
       label: intl.formatMessage(sectionNames.home),
-      testingContextId: "home",
+      id: "home",
       url: "/"
     },
     {
@@ -43,26 +48,26 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
         {
           ariaLabel: "products",
           label: intl.formatMessage(sectionNames.products),
-          testingContextId: "products",
+          id: "products",
           url: productListUrl()
         },
         {
           ariaLabel: "categories",
           label: intl.formatMessage(sectionNames.categories),
-          testingContextId: "categories",
+          id: "categories",
           url: categoryListUrl()
         },
         {
           ariaLabel: "collections",
           label: intl.formatMessage(sectionNames.collections),
-          testingContextId: "collections",
+          id: "collections",
           url: collectionListUrl()
         }
       ],
-      icon: catalogIcon,
+      iconSrc: catalogIcon,
       label: intl.formatMessage(commonMessages.catalog),
-      permission: PermissionEnum.MANAGE_PRODUCTS,
+      permissions: [PermissionEnum.MANAGE_PRODUCTS],
-      testingContextId: "catalogue"
+      id: "catalogue"
     },
     {
       ariaLabel: "orders",
@@ -70,29 +75,29 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
         {
           ariaLabel: "orders",
           label: intl.formatMessage(sectionNames.orders),
-          permission: PermissionEnum.MANAGE_ORDERS,
+          permissions: [PermissionEnum.MANAGE_ORDERS],
-          testingContextId: "orders",
+          id: "orders",
           url: orderListUrl()
         },
         {
           ariaLabel: "order drafts",
           label: intl.formatMessage(commonMessages.drafts),
-          permission: PermissionEnum.MANAGE_ORDERS,
+          permissions: [PermissionEnum.MANAGE_ORDERS],
-          testingContextId: "order drafts",
+          id: "order drafts",
           url: orderDraftListUrl()
         }
       ],
-      icon: ordersIcon,
+      iconSrc: ordersIcon,
       label: intl.formatMessage(sectionNames.orders),
-      permission: PermissionEnum.MANAGE_ORDERS,
+      permissions: [PermissionEnum.MANAGE_ORDERS],
-      testingContextId: "orders"
+      id: "orders"
     },
     {
       ariaLabel: "customers",
-      icon: customerIcon,
+      iconSrc: customerIcon,
       label: intl.formatMessage(sectionNames.customers),
-      permission: PermissionEnum.MANAGE_USERS,
+      permissions: [PermissionEnum.MANAGE_USERS],
-      testingContextId: "customers",
+      id: "customers",
       url: customerListUrl()
     },
 
@@ -102,38 +107,59 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
         {
           ariaLabel: "sales",
           label: intl.formatMessage(sectionNames.sales),
-          testingContextId: "sales",
+          id: "sales",
           url: saleListUrl()
         },
         {
           ariaLabel: "vouchers",
           label: intl.formatMessage(sectionNames.vouchers),
-          testingContextId: "vouchers",
+          id: "vouchers",
           url: voucherListUrl()
         }
       ],
-      icon: discountsIcon,
+      iconSrc: discountsIcon,
       label: intl.formatMessage(commonMessages.discounts),
-      permission: PermissionEnum.MANAGE_DISCOUNTS,
+      permissions: [PermissionEnum.MANAGE_DISCOUNTS],
-      testingContextId: "discounts"
+      id: "discounts"
     },
     {
       ariaLabel: "apps",
-      icon: appsIcon,
+      iconSrc: appsIcon,
       label: intl.formatMessage(sectionNames.apps),
-      permission: PermissionEnum.MANAGE_APPS,
+      permissions: [PermissionEnum.MANAGE_APPS],
-      testingContextId: "apps",
+      id: "apps",
       url: appsListPath
     },
     {
       ariaLabel: "translations",
-      icon: translationIcon,
+      iconSrc: translationIcon,
       label: intl.formatMessage(sectionNames.translations),
-      permission: PermissionEnum.MANAGE_TRANSLATIONS,
+      permissions: [PermissionEnum.MANAGE_TRANSLATIONS],
-      testingContextId: "translations",
+      id: "translations",
       url: languageListUrl
+    },
+    {
+      ariaLabel: "configure",
+      iconSrc: configurationIcon,
+      label: intl.formatMessage(sectionNames.configuration),
+      permissions: configurationMenu
+        .reduce(
+          (sections, section) => [...sections, ...section.menuItems],
+          [] as MenuItem[]
+        )
+        .map(section => section.permission),
+      id: "configure",
+      url: configurationMenuUrl
     }
   ];
+
+  return menuItems.filter(
+    menuItem =>
+      !menuItem.permissions ||
+      (user?.userPermissions || []).some(permission =>
+        menuItem.permissions.includes(permission.code)
+      )
+  );
 }
 
 export default createMenuStructure;

src/components/AppLayout/utils.ts

@@ -1,9 +1,8 @@
+import { SidebarMenuItem } from "@saleor/macaw-ui";
 import { orderDraftListUrl, orderListUrl } from "@saleor/orders/urls";
 import { matchPath } from "react-router";
 
-import { IMenuItem } from "../AppLayout/menuStructure";
+export function isMenuActive(location: string, menuItem: SidebarMenuItem) {
-
-export function isMenuActive(location: string, menuItem: IMenuItem) {
   if (menuItem.children) {
     return menuItem.children.reduce(
       (acc, subMenuItem) => acc || isMenuActive(location, subMenuItem),

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -25,8 +25,8 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
-import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -13,17 +13,15 @@ import {
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/macaw-ui";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
-import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "../Checkbox";
-import ConfirmButton, {
+import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
-  ConfirmButtonTransitionState
-} from "../ConfirmButton/ConfirmButton";
 
 export interface FormData {
   containers: string[];

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -17,10 +17,10 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
-import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";

src/components/Attributes/Attributes.tsx

@@ -7,7 +7,7 @@ import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFr
 import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { FormsetAtomicData } from "@saleor/hooks/useFormset";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,
@@ -95,7 +95,7 @@ const useStyles = makeStyles(
     uploadFileContent: {
       color: theme.palette.primary.main,
       float: "right",
-      fontSize: "1rem"
+      fontSize: theme.typography.body1.fontSize
     }
   }),
   { name: "Attributes" }

src/components/Attributes/BasicAttributeRow.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@material-ui/core";
 import Grid from "@saleor/components/Grid";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/Attributes/ExtendedAttributeRow.tsx

@@ -1,6 +1,6 @@
 import { Button, Typography } from "@material-ui/core";
 import Grid from "@saleor/components/Grid";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -6,7 +6,7 @@ import {
 } from "@material-ui/core";
 import ArrowBack from "@material-ui/icons/ArrowBack";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import Downshift from "downshift";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -48,7 +48,7 @@ const useStyles = makeStyles(
       position: "relative"
     },
     menuBack: {
-      marginLeft: -theme.spacing(0.5),
+      marginLeft: theme.spacing(-0.5),
       marginRight: theme.spacing(1)
     },
     paper: {

src/components/CardMenu/CardMenu.tsx

@@ -8,7 +8,7 @@ import {
   Popper
 } from "@material-ui/core";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const ITEM_HEIGHT = 48;

src/components/CardSpacer.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/CardTitle/CardTitle.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@material-ui/core";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 
@@ -28,7 +28,7 @@ const useStyles = makeStyles(
       lineHeight: 1
     },
     toolbar: {
-      marginRight: -theme.spacing(1)
+      marginRight: theme.spacing(-1)
     }
   }),
   { name: "CardTitle" }

src/components/ChannelsAvailability/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx

@@ -5,7 +5,7 @@ import {
 } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
 import IconChevronDown from "@saleor/icons/ChevronDown";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 import { Messages } from "../types";

src/components/ChannelsAvailabilityCard/styles.ts

@@ -56,7 +56,7 @@ export const useStyles = makeStyles(
     hr: {
       left: theme.spacing(-3),
       position: "relative",
-      width: `calc(100% + ${theme.spacing(6)}px)`
+      width: `calc(100% + ${theme.spacing(6)})`
     },
     label: {
       lineHeight: 1.2,

src/components/ChannelsAvailabilityContent/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import { Channel } from "@saleor/channels/utils";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Hr from "@saleor/components/Hr";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 export const useStyles = makeStyles(

src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx

@@ -1,8 +1,8 @@
 import { TextField, Typography } from "@material-ui/core";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Hr from "@saleor/components/Hr";
+import { makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
-import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 import { defineMessages, FormattedMessage } from "react-intl";

src/components/ChannelsAvailabilityDropdown/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import MuiCheckbox, {
   CheckboxProps as MuiCheckboxProps
 } from "@material-ui/core/Checkbox";
 import FormHelperText from "@material-ui/core/FormHelperText";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/Chip/Chip.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import CloseIcon from "@material-ui/icons/Close";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 

src/components/ColumnPicker/ColumnPicker.tsx

@@ -1,7 +1,7 @@
 import { ClickAwayListener, Grow, Popper } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { toggle } from "@saleor/utils/lists";
 import React from "react";
 

src/components/ColumnPicker/ColumnPickerButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -7,7 +7,7 @@ import {
 } from "@material-ui/core";
 import useElementScroll from "@saleor/hooks/useElementScroll";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import { isSelected } from "@saleor/utils/lists";
 import classNames from "classnames";

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -9,7 +9,7 @@ import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragme
 import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
 import { WarehouseErrorFragment } from "@saleor/fragments/types/WarehouseErrorFragment";
 import { ChangeEvent } from "@saleor/hooks/useForm";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import getShopErrorMessage from "@saleor/utils/errors/shop";

src/components/CompanyAddressInput/CompanyAddressInput.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent } from "@material-ui/core";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 

src/components/ConfirmButton.tsx

@@ -0,0 +1,34 @@
+import { buttonMessages, commonMessages } from "@saleor/intl";
+import {
+  ConfirmButton as MacawConfirmButton,
+  ConfirmButtonLabels,
+  ConfirmButtonProps as MacawConfirmButtonProps
+} from "@saleor/macaw-ui";
+import React from "react";
+import { useIntl } from "react-intl";
+export { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+
+export interface ConfirmButtonProps
+  extends Omit<MacawConfirmButtonProps, "labels"> {
+  labels?: Partial<ConfirmButtonLabels>;
+}
+
+export const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+  labels = {},
+  ...rest
+}) => {
+  const intl = useIntl();
+
+  const defaultLabels: ConfirmButtonLabels = {
+    confirm: intl.formatMessage(buttonMessages.save),
+    error: intl.formatMessage(commonMessages.error)
+  };
+  const componentLabels: ConfirmButtonLabels = {
+    ...defaultLabels,
+    ...labels
+  };
+
+  return <MacawConfirmButton labels={componentLabels} {...rest} />;
+};
+ConfirmButton.displayName = "ConfirmButton";
+export default ConfirmButton;

src/components/ConfirmButton/ConfirmButton.tsx

@@ -1,188 +0,0 @@
-import { Button, CircularProgress } from "@material-ui/core";
-import { ButtonProps } from "@material-ui/core/Button";
-import CheckIcon from "@material-ui/icons/Check";
-import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
-import { buttonMessages } from "@saleor/intl";
-import {
-  createStyles,
-  SaleorTheme,
-  WithStyles,
-  withStyles
-} from "@saleor/theme";
-import classNames from "classnames";
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-export type ConfirmButtonTransitionState =
-  | "loading"
-  | "success"
-  | "error"
-  | "default";
-
-const styles = (theme: SaleorTheme) =>
-  createStyles({
-    error: {
-      "&:hover": {
-        backgroundColor: theme.palette.error.main
-      },
-      backgroundColor: theme.palette.error.main,
-      color: theme.palette.error.contrastText
-    },
-    icon: {
-      marginLeft: "0 !important",
-      position: "absolute",
-      transitionDuration: theme.transitions.duration.standard + "ms"
-    },
-    invisible: {
-      opacity: 0
-    },
-    label: {
-      alignItems: "center",
-      display: "flex",
-      transitionDuration: theme.transitions.duration.standard + "ms"
-    },
-    progress: {
-      "& svg": {
-        color: theme.palette.common.white,
-        margin: 0
-      },
-      position: "absolute",
-      transitionDuration: theme.transitions.duration.standard + "ms"
-    },
-    success: {
-      "&:hover": {
-        backgroundColor: theme.palette.primary.main
-      },
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    }
-  });
-
-export interface ConfirmButtonProps
-  extends Omit<ButtonProps, "classes">,
-    WithStyles<typeof styles> {
-  transitionState: ConfirmButtonTransitionState;
-  onTransitionToDefault?: () => void;
-}
-
-interface ConfirmButtonState {
-  displayCompletedActionState: boolean;
-}
-
-const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
-  class ConfirmButtonComponent extends React.Component<
-    ConfirmButtonProps &
-      WithStyles<
-        "error" | "icon" | "invisible" | "label" | "progress" | "success"
-      >,
-    ConfirmButtonState
-  > {
-    state: ConfirmButtonState = {
-      displayCompletedActionState: false
-    };
-    timeout = null;
-
-    static getDerivedStateFromProps(
-      nextProps: ConfirmButtonProps,
-      prevState: ConfirmButtonState
-    ): ConfirmButtonState {
-      if (nextProps.transitionState === "loading") {
-        return {
-          displayCompletedActionState: true
-        };
-      }
-      return prevState;
-    }
-
-    componentDidUpdate(prevProps: ConfirmButtonProps) {
-      const { transitionState, onTransitionToDefault } = this.props;
-      if (prevProps.transitionState !== transitionState) {
-        if (
-          (["error", "success"] as ConfirmButtonTransitionState[]).includes(
-            transitionState
-          )
-        ) {
-          this.timeout = setTimeout(() => {
-            this.setState({
-              displayCompletedActionState: false
-            });
-            if (onTransitionToDefault) {
-              onTransitionToDefault();
-            }
-          }, DEFAULT_NOTIFICATION_SHOW_TIME);
-        } else if (transitionState === "loading") {
-          clearTimeout(this.timeout);
-        }
-      }
-    }
-
-    componentWillUnmount() {
-      clearTimeout(this.timeout);
-    }
-
-    render() {
-      const {
-        children,
-        classes,
-        className,
-        disabled,
-        transitionState,
-        onClick,
-        onTransitionToDefault: _,
-        ...props
-      } = this.props;
-      const { displayCompletedActionState } = this.state;
-
-      return (
-        <Button
-          variant="contained"
-          onClick={transitionState === "loading" ? undefined : onClick}
-          color="primary"
-          className={classNames({
-            [classes.error]:
-              transitionState === "error" && displayCompletedActionState,
-            [classes.success]:
-              transitionState === "success" && displayCompletedActionState,
-            [className]: true
-          })}
-          disabled={!displayCompletedActionState && disabled}
-          {...props}
-        >
-          <CircularProgress
-            size={24}
-            color="inherit"
-            className={classNames({
-              [classes.progress]: true,
-              [classes.invisible]: transitionState !== "loading"
-            })}
-          />
-          <CheckIcon
-            className={classNames({
-              [classes.icon]: true,
-              [classes.invisible]: !(
-                transitionState === "success" && displayCompletedActionState
-              )
-            })}
-          />
-          <span
-            className={classNames({
-              [classes.label]: true,
-              [classes.invisible]:
-                (transitionState === "loading" ||
-                  transitionState === "success") &&
-                displayCompletedActionState
-            })}
-          >
-            {transitionState === "error" && displayCompletedActionState ? (
-              <FormattedMessage defaultMessage="Error" description="button" />
-            ) : (
-              children || <FormattedMessage {...buttonMessages.confirm} />
-            )}
-          </span>
-        </Button>
-      );
-    }
-  }
-);
-ConfirmButton.displayName = "ConfirmButton";
-export default ConfirmButton;

src/components/ConfirmButton/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ConfirmButton";
-export * from "./ConfirmButton";

src/components/Container.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 

src/components/ControlledSwitch.tsx

@@ -1,5 +1,5 @@
 import { FormControlLabel, Switch } from "@material-ui/core";
-import { makeStyles } from "@saleor/theme";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(