diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c77cfdef..0f74d94b3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index e5709ddc9..6670bf84b 100644 --- a/locale/defaultMessages.json +++ b/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" diff --git a/package-lock.json b/package-lock.json index faec34c16..3f0067b4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2646,14 +2646,14 @@ } }, "@material-ui/core": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz", - "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==", + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", + "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", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", - "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==", + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", + "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", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" } } } @@ -4170,37 +4182,23 @@ } }, "@saleor/macaw-ui": { - "version": "0.1.1-9", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.1.1-9.tgz", - "integrity": "sha512-ryftb0jBs1ghIm4ILwJZ7vfQt90Kab9XlNcEUh4JFDV4+HEABrGpwstLKyCtIjFDzxQf/z9L4vbW25o1m6klmg==", + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.2.tgz", + "integrity": "sha512-/YWChXpALyqZSedjvBchR0vQSHCMFOVlejEdHYBkBbF0hJz2M/Xva+56AdFXnPjmM1J1q2hv7QZxGoNNy9md5g==", "requires": { - "@types/react-inlinesvg": "^0.8.1", - "classnames": "^2.2.6", - "downshift": "^1.31.16", - "lodash-es": "^4.17.15", - "react-helmet": "^5.2.1", - "react-inlinesvg": "^1.1.2", - "string-similarity": "^1.2.2" + "clsx": "^1.1.1", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-inlinesvg": "^2.3.0" }, "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", - "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-1.2.0.tgz", - "integrity": "sha512-IsznU+UzpUwDGzBWbf0bfSRA5Jbqz87xeoqLM/nSIDPkoHksInF1wCGybTSn4sIui+30TqboRQP1wAelNTkdog==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz", + "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==", - "dev": true + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" } } }, @@ -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=" - }, - "lodash.foreach": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz", - "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=" + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", + "dev": true }, "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", - "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.3.1.tgz", - "integrity": "sha512-PeNBa8iuzoD7qHA9O7YpGnXFvC+XFFwStmFh2/r2zJAvEIaRg6EwOj+EPcDIFwyYBhqPIItxIx/dGdeWiFivjQ==" + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.1.tgz", + "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", diff --git a/package.json b/package.json index f7d53abec..c5a368137 100644 --- a/package.json +++ b/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", - "@saleor/macaw-ui": "^0.1.1-9", + "@material-ui/lab": "^4.0.0-alpha.58", + "@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(.*)$": "/assets/$1", "@locale(.*)$": "/locale/$1", "@saleor(?!.*macaw)(.*)$": "/src/$1", - "@test/(.*)$": "/testUtils/$1" + "@test/(.*)$": "/testUtils/$1", + "^lodash-es(.*)$": "lodash/$1", + "^@material-ui/core$": "/node_modules/@material-ui/core", + "^@material-ui/icons$": "/node_modules/@material-ui/icons", + "^@material-ui/styles$": "/node_modules/@material-ui/styles", + "^react$": "/node_modules/react", + "^react-dom$": "/node_modules/react-dom" } }, "husky": { diff --git a/src/Baseline.tsx b/src/Baseline.tsx deleted file mode 100644 index 72b6b882d..000000000 --- a/src/Baseline.tsx +++ /dev/null @@ -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" -})(() => ); -Baseline.displayName = "Baseline"; - -export default Baseline; diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx index 756e5d346..98531f69a 100644 --- a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx +++ b/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 = ({ return ( - + {intl.formatMessage(sectionNames.apps)} - + diff --git a/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx b/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx index 76207cfed..458ca11af 100644 --- a/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx +++ b/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 = ({ return ( - + {intl.formatMessage(sectionNames.apps)} - +
diff --git a/src/apps/components/AppDetailsSettingsPage/styles.ts b/src/apps/components/AppDetailsSettingsPage/styles.ts index 75cddc7bd..3b1d83e73 100644 --- a/src/apps/components/AppDetailsSettingsPage/styles.ts +++ b/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": { diff --git a/src/apps/components/AppDetailsSettingsPage/useSettingsBreadcrumbs.ts b/src/apps/components/AppDetailsSettingsPage/useSettingsBreadcrumbs.ts index 3edcc45ec..8db5f7bf1 100644 --- a/src/apps/components/AppDetailsSettingsPage/useSettingsBreadcrumbs.ts +++ b/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]; diff --git a/src/apps/components/AppInstallErrorPage/styles.ts b/src/apps/components/AppInstallErrorPage/styles.ts index d19a783a1..a71dc440e 100644 --- a/src/apps/components/AppInstallErrorPage/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx b/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx index a51769591..274d3f4b4 100644 --- a/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx +++ b/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 = props => {
{({ data, change, hasChanged, submit }) => ( - + {intl.formatMessage(sectionNames.apps)} - + = props => { })} /> - )} diff --git a/src/apps/components/CustomAppDefaultToken/styles.ts b/src/apps/components/CustomAppDefaultToken/styles.ts index 47c87521b..d06118db4 100644 --- a/src/apps/components/CustomAppDefaultToken/styles.ts +++ b/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(), - top: -theme.spacing(1) + right: theme.spacing(-1), + top: theme.spacing(-1) }, content: { display: "grid", diff --git a/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx b/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx index 10c2f591a..7da24a1e2 100644 --- a/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx +++ b/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 = props => { {({ data, change, hasChanged, submit }) => ( - + {intl.formatMessage(sectionNames.apps)} - +
- )} diff --git a/src/apps/components/CustomAppTokens/styles.ts b/src/apps/components/CustomAppTokens/styles.ts index 583c09877..294c219b7 100644 --- a/src/apps/components/CustomAppTokens/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/DeactivatedText/styles.ts b/src/apps/components/DeactivatedText/styles.ts index 863b6cdd0..58315a5e1 100644 --- a/src/apps/components/DeactivatedText/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx b/src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx index ee7da1f6a..5ff98c087 100644 --- a/src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx +++ b/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 { diff --git a/src/apps/components/TokenCreateDialog/styles.ts b/src/apps/components/TokenCreateDialog/styles.ts index b57ffa77a..3671671f2 100644 --- a/src/apps/components/TokenCreateDialog/styles.ts +++ b/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 => ({ diff --git a/src/apps/styles.ts b/src/apps/styles.ts index 922b7b79c..5d02a2252 100644 --- a/src/apps/styles.ts +++ b/src/apps/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/attributes/components/AttributeDetails/AttributeDetails.tsx b/src/attributes/components/AttributeDetails/AttributeDetails.tsx index dd6bbf7b6..d6653121b 100644 --- a/src/attributes/components/AttributeDetails/AttributeDetails.tsx +++ b/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) } } }), diff --git a/src/attributes/components/AttributeDetails/NumericUnits.tsx b/src/attributes/components/AttributeDetails/NumericUnits.tsx index 302b633da..5d08561f0 100644 --- a/src/attributes/components/AttributeDetails/NumericUnits.tsx +++ b/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"; diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx index f1acae89e..105124d86 100644 --- a/src/attributes/components/AttributeList/AttributeList.tsx +++ b/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"; diff --git a/src/attributes/components/AttributeListPage/AttributeListPage.tsx b/src/attributes/components/AttributeListPage/AttributeListPage.tsx index 009fb2721..6a772b8a8 100644 --- a/src/attributes/components/AttributeListPage/AttributeListPage.tsx +++ b/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 = ({ return ( - + - +
- diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx index 4d79a6f38..239def80a 100644 --- a/src/attributes/components/AttributeValues/AttributeValues.tsx +++ b/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" diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx index 44e86b53b..94c9b658d 100644 --- a/src/auth/components/Layout.tsx +++ b/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 { makeStyles } from "@saleor/theme"; +import { useTheme } from "@saleor/macaw-ui"; +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 (
@@ -83,7 +83,7 @@ const Layout: React.FC = props => {
{children}
diff --git a/src/auth/components/LoginLoading/LoginLoading.tsx b/src/auth/components/LoginLoading/LoginLoading.tsx index 3b3bf365b..db016f333 100644 --- a/src/auth/components/LoginLoading/LoginLoading.tsx +++ b/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( diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 04aaffa61..ff3678ef6 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/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"; diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index 00af9f178..d2470e794 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/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"; diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx index 45f23557f..9e852525b 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/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"; diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index ed40cdc75..768665c78 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/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"; diff --git a/src/categories/components/CategoryBackground/CategoryBackground.tsx b/src/categories/components/CategoryBackground/CategoryBackground.tsx index 12a53fec0..706e77d44 100644 --- a/src/categories/components/CategoryBackground/CategoryBackground.tsx +++ b/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"; diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx index 91b91d136..fb67c8581 100644 --- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx +++ b/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 = ({ {({ data, change, handlers, submit, hasChanged }) => ( - + {intl.formatMessage(sectionNames.categories)} - + = ({ /> - diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx index 162f70ae7..62347944b 100644 --- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx +++ b/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"; diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx index 63fe5e30e..e938fddc5 100644 --- a/src/categories/components/CategoryList/CategoryList.tsx +++ b/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"; diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index 044a4b895..a9c2d2226 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/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"; diff --git a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx index fc3d64e89..c43e2de16 100644 --- a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx +++ b/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 = ({ {({ data, change, handlers, submit, hasChanged }) => ( - + {intl.formatMessage(sectionNames.categories)} - + = ({ toolbar={productListToolbar} /> )} - diff --git a/src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx b/src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx index 9bbc25a46..b9246da6c 100644 --- a/src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx +++ b/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"; diff --git a/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx b/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx index 916d3b646..6cea5b7c9 100644 --- a/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx +++ b/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"; diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx index bbd3d73fb..090e050f2 100644 --- a/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx +++ b/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"; diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx index 03c701459..effe91434 100644 --- a/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx +++ b/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"; diff --git a/src/channels/components/styles.ts b/src/channels/components/styles.ts index 20f4733ab..86e1c824c 100644 --- a/src/channels/components/styles.ts +++ b/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 => ({ diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx index 05e9b55ac..9a7700bbb 100644 --- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx +++ b/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 = ({ />
- = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - + = ({ /> - - - + {limitReached && ( + + + + )} diff --git a/src/channels/pages/ChannelsListPage/styles.ts b/src/channels/pages/ChannelsListPage/styles.ts index d7e7866f1..229f7e5c4 100644 --- a/src/channels/pages/ChannelsListPage/styles.ts +++ b/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 => ({ diff --git a/src/channels/views/ChannelCreate/ChannelCreate.tsx b/src/channels/views/ChannelCreate/ChannelCreate.tsx index e3cbf9d46..8fcb2d956 100644 --- a/src/channels/views/ChannelCreate/ChannelCreate.tsx +++ b/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 = ({}) => { })} /> - + {intl.formatMessage(sectionNames.channels)} - + = ({ })} /> - + {intl.formatMessage(sectionNames.channels)} - + = ({ > {({ change, data, handlers, hasChanged, submit }) => ( - + {intl.formatMessage(sectionNames.collections)} - + = ({ /> - )} diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx index d9bd1a0b0..555bbb717 100644 --- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx +++ b/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 = ({ > {({ change, data, handlers, hasChanged, submit }) => ( - + {intl.formatMessage(sectionNames.collections)} - +
@@ -148,12 +148,12 @@ const CollectionDetailsPage: React.FC = ({
- )} diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index e7ecef40a..cc63e3d74 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/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"; diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index 199f038af..062a5946a 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/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"; diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index a37655f3b..4593fa54c 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/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, diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 152473695..4ebb05829 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/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"; diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx index 33a2eaf30..b646ce4b7 100644 --- a/src/components/AccountPermissions/AccountPermissions.tsx +++ b/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"; diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx index fadd4c5d1..187dd76e3 100644 --- a/src/components/ActionDialog/ActionDialog.tsx +++ b/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"; diff --git a/src/components/ActionDialog/DialogButtons.tsx b/src/components/ActionDialog/DialogButtons.tsx index b58f61663..c8b30ca6a 100644 --- a/src/components/ActionDialog/DialogButtons.tsx +++ b/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, { - ConfirmButtonTransitionState -} from "../ConfirmButton/ConfirmButton"; +import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton"; import { ActionDialogVariant } from "./types"; const useStyles = makeStyles( diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx index 19cd1dde7..bda6b69f2 100644 --- a/src/components/AddressEdit/AddressEdit.tsx +++ b/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"; diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx deleted file mode 100644 index 836cd50eb..000000000 --- a/src/components/Alert/Alert.stories.tsx +++ /dev/null @@ -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", () => ( - - Content - - )); diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx deleted file mode 100644 index f4dd2ce8f..000000000 --- a/src/components/Alert/Alert.tsx +++ /dev/null @@ -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 = ({ children, className, show, title }) => { - const classes = useStyles({}); - const [visible, setVisible] = useStateFromProps(show); - const { isDark } = useTheme(); - - return visible ? ( - - -
-
- -
-
-
- {title} - setVisible(false)} - > - - -
- {children} -
-
- - - ) : null; -}; - -Alert.displayName = "Alert"; -export default Alert; diff --git a/src/components/Alert/InlineAlert.tsx b/src/components/Alert/InlineAlert.tsx index a1deed47e..df5e71093 100644 --- a/src/components/Alert/InlineAlert.tsx +++ b/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( diff --git a/src/components/Alert/index.ts b/src/components/Alert/index.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx deleted file mode 100644 index bb890ffd4..000000000 --- a/src/components/AppHeader/AppHeader.tsx +++ /dev/null @@ -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 = props => { - const { children, onBack } = props; - - const classes = useStyles(props); - - return ( - - {anchor => - anchor ? ( - -
- - {children ? ( - {children} - ) : ( - - )} -
- - ) : null - } - - ); -}; -AppHeader.displayName = "AppHeader"; -export default AppHeader; diff --git a/src/components/AppHeader/index.ts b/src/components/AppHeader/index.ts deleted file mode 100644 index a54b9f38a..000000000 --- a/src/components/AppHeader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./AppHeader"; -export * from "./AppHeader"; diff --git a/src/components/AppLayout/AppActionContext.tsx b/src/components/AppLayout/AppActionContext.tsx deleted file mode 100644 index ad7e71990..000000000 --- a/src/components/AppLayout/AppActionContext.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -interface AppAction { - anchor: React.RefObject; - docked: boolean; - setDocked: (docked: boolean) => void; -} -const AppActionContext = React.createContext({ - anchor: undefined, - docked: true, - setDocked: () => undefined -}); -export const useAppAction = () => React.useContext(AppActionContext); - -export default AppActionContext; diff --git a/src/components/AppLayout/AppChannelSelect.tsx b/src/components/AppLayout/AppChannelSelect.tsx index 6760b7fde..ff075ac07 100644 --- a/src/components/AppLayout/AppChannelSelect.tsx +++ b/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"; diff --git a/src/components/AppLayout/AppHeaderContext.tsx b/src/components/AppLayout/AppHeaderContext.tsx deleted file mode 100644 index 902655496..000000000 --- a/src/components/AppLayout/AppHeaderContext.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const AppHeaderContext = React.createContext>( - undefined -); - -export default AppHeaderContext; diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 7a9717637..eff93ddcd 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/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 = ({ children }) => { const classes = useStyles({}); - const { isDark, toggleTheme } = useTheme(); - const appActionAnchor = React.useRef(); - const appHeaderAnchor = React.useRef(); + const { themeType, setTheme } = useTheme(); + const { anchor: appActionAnchor, docked } = useSavebar(); + const appHeaderAnchor = useBacklink(); const { logout, user } = useUser(); const navigate = useNavigator(); const intl = useIntl(); @@ -129,7 +132,6 @@ const AppLayout: React.FC = ({ 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 = ({ children }) => { setChannel } = useAppChannel(false); - const menuStructure = createMenuStructure(intl); - const configurationMenu = createConfigurationMenu(intl); - const userPermissions = user?.userPermissions || []; - - const renderConfigure = configurationMenu.some(section => - section.menuItems.some( - menuItem => - !!userPermissions.find( - userPermission => userPermission.code === menuItem.permission - ) - ) - ); + const menuStructure = createMenuStructure(intl, user); + const activeMenu = menuStructure.find(menuItem => + isMenuActive(location.pathname, menuItem) + )?.id; const handleErrorBack = () => { navigate("/"); @@ -160,105 +154,88 @@ const AppLayout: React.FC = ({ children }) => { }); }; + const isDark = themeType === "dark"; + const toggleTheme = () => setTheme(isDark ? "light" : "dark"); + return ( <> - - -
- {isMdUp && ( - - )} -
- {appState.loading ? ( - - ) : ( -
- )} -
-
- -
-
+ {isMdUp && ( + + )} +
+ {appState.loading ? ( + + ) : ( +
+ )} +
+
+ +
+
+
+ {!isMdUp && ( + -
- {!isMdUp && ( - - )} -
-
- setNavigatorVisibility(true)} - /> - {channel && ( - - )} - - navigate(staffMemberDetailsUrl(user.id)) - } - onThemeToggle={toggleTheme} - /> -
-
-
- -
-
- {appState.error - ? appState.error.type === "unhandled" && ( - +
+ setNavigatorVisibility(true)} + /> + {channel && ( + - ) - : children} -
-
-
+ )} + + navigate(staffMemberDetailsUrl(user.id)) + } + onThemeToggle={toggleTheme} + /> +
+
+
+
+
+ {appState.error + ? appState.error.type === "unhandled" && ( + + ) + : children} +
- - +
+
+
); }; diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx deleted file mode 100644 index 793e34451..000000000 --- a/src/components/AppLayout/MenuList.tsx +++ /dev/null @@ -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) => void; -} - -export interface IActiveSubMenu { - isActive: boolean; - label: string | null; -} - -const MenuList: React.FC = props => { - const { - className, - menuItems, - isMenuSmall, - location, - user, - renderConfigure, - onMenuItemClick - } = props; - - const classes = useStyles(props); - - const { isDark } = useTheme(); - const [activeSubMenu, setActiveSubMenu] = React.useState({ - 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 ( -
- {/* 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 ( -
-
handleSubMenu(menuItem.ariaLabel)} - > - - - {menuItem.label} - -
- -
closeSubMenu(null, event)} - className={classNames(classes.subMenuDrawer, { - [classes.subMenuDrawerOpen]: activeSubMenu.isActive - })} - /> -
- ); - } - - return ( - closeSubMenu(menuItem.url, event)} - key={menuItem.label} - data-testid={menuItem.testingContextId} - data-test="menuItemEntry" - > -
- - - {menuItem.label} - -
- - ); - })} - {renderConfigure && configurationMenu.length > 0 && ( - closeSubMenu(configurationMenuUrl, event)} - > -
- - - - -
- - )} -
- ); -}; - -MenuList.displayName = "MenuList"; -export default MenuList; diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx deleted file mode 100644 index d74434ee0..000000000 --- a/src/components/AppLayout/MenuNested.tsx +++ /dev/null @@ -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) => void; -} - -const MenuNested: React.FC = 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 ( - <> -
- - - - -
{title}
- -
- closeSubMenu({ - isActive: false, - label: null - }) - } - > - -
- - - {menuItems.map(item => ( - closeMenu(item.url, event)} - key={item.label} - > - {item.label} - - ))} -
- - ); -}; - -MenuNested.displayName = "MenuNested"; -export default MenuNested; diff --git a/src/components/AppLayout/menuStructure.ts b/src/components/AppLayout/menuStructure.ts index b39d99161..d12fd2d33 100644 --- a/src/components/AppLayout/menuStructure.ts +++ b/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 { - ariaLabel: string; - children?: IMenuItem[]; - icon?: any; - label: string; - permission?: PermissionEnum; - testingContextId: string; - url?: string; +interface FilterableMenuItem extends Omit { + children?: FilterableMenuItem[]; + permissions?: PermissionEnum[]; } -function createMenuStructure(intl: IntlShape): IMenuItem[] { - return [ +function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] { + 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, - testingContextId: "catalogue" + permissions: [PermissionEnum.MANAGE_PRODUCTS], + id: "catalogue" }, { ariaLabel: "orders", @@ -70,29 +75,29 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] { { ariaLabel: "orders", label: intl.formatMessage(sectionNames.orders), - permission: PermissionEnum.MANAGE_ORDERS, - testingContextId: "orders", + permissions: [PermissionEnum.MANAGE_ORDERS], + id: "orders", url: orderListUrl() }, { ariaLabel: "order drafts", label: intl.formatMessage(commonMessages.drafts), - permission: PermissionEnum.MANAGE_ORDERS, - testingContextId: "order drafts", + permissions: [PermissionEnum.MANAGE_ORDERS], + id: "order drafts", url: orderDraftListUrl() } ], - icon: ordersIcon, + iconSrc: ordersIcon, label: intl.formatMessage(sectionNames.orders), - permission: PermissionEnum.MANAGE_ORDERS, - testingContextId: "orders" + permissions: [PermissionEnum.MANAGE_ORDERS], + id: "orders" }, { ariaLabel: "customers", - icon: customerIcon, + iconSrc: customerIcon, label: intl.formatMessage(sectionNames.customers), - permission: PermissionEnum.MANAGE_USERS, - testingContextId: "customers", + permissions: [PermissionEnum.MANAGE_USERS], + 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, - testingContextId: "discounts" + permissions: [PermissionEnum.MANAGE_DISCOUNTS], + id: "discounts" }, { ariaLabel: "apps", - icon: appsIcon, + iconSrc: appsIcon, label: intl.formatMessage(sectionNames.apps), - permission: PermissionEnum.MANAGE_APPS, - testingContextId: "apps", + permissions: [PermissionEnum.MANAGE_APPS], + id: "apps", url: appsListPath }, { ariaLabel: "translations", - icon: translationIcon, + iconSrc: translationIcon, label: intl.formatMessage(sectionNames.translations), - permission: PermissionEnum.MANAGE_TRANSLATIONS, - testingContextId: "translations", + permissions: [PermissionEnum.MANAGE_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; diff --git a/src/components/SideBar/utils.ts b/src/components/AppLayout/utils.ts similarity index 82% rename from src/components/SideBar/utils.ts rename to src/components/AppLayout/utils.ts index 06827a7ac..386ae5929 100644 --- a/src/components/SideBar/utils.ts +++ b/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: IMenuItem) { +export function isMenuActive(location: string, menuItem: SidebarMenuItem) { if (menuItem.children) { return menuItem.children.reduce( (acc, subMenuItem) => acc || isMenuActive(location, subMenuItem), diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx index ecfd0e662..b03ceccfb 100644 --- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx +++ b/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"; diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx index b0a94b451..e7a5a79b1 100644 --- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx +++ b/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, { - ConfirmButtonTransitionState -} from "../ConfirmButton/ConfirmButton"; +import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton"; export interface FormData { containers: string[]; diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx index 444d1ad4f..9d9fdc61f 100644 --- a/src/components/AssignProductDialog/AssignProductDialog.tsx +++ b/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"; diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx index b74d856b5..ac5c1c23e 100644 --- a/src/components/Attributes/Attributes.tsx +++ b/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" } diff --git a/src/components/Attributes/BasicAttributeRow.tsx b/src/components/Attributes/BasicAttributeRow.tsx index 55cceea40..6bc2a2917 100644 --- a/src/components/Attributes/BasicAttributeRow.tsx +++ b/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( diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx index 56ec065bb..013741a4f 100644 --- a/src/components/Attributes/ExtendedAttributeRow.tsx +++ b/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( diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx index a51849070..7457243a0 100644 --- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx +++ b/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: { diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index 886a71bc3..0690e3aa6 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/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; diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx index ab3955efa..0f29f683a 100644 --- a/src/components/CardSpacer.tsx +++ b/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( diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx index 91d4fd6a8..6f4cad33c 100644 --- a/src/components/CardTitle/CardTitle.tsx +++ b/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" } diff --git a/src/components/ChannelsAvailability/styles.ts b/src/components/ChannelsAvailability/styles.ts index 07d7a268b..858759635 100644 --- a/src/components/ChannelsAvailability/styles.ts +++ b/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 => ({ diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx index a26cf5792..74980abe3 100644 --- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx +++ b/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"; diff --git a/src/components/ChannelsAvailabilityCard/styles.ts b/src/components/ChannelsAvailabilityCard/styles.ts index e07503248..7bdeb49eb 100644 --- a/src/components/ChannelsAvailabilityCard/styles.ts +++ b/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, diff --git a/src/components/ChannelsAvailabilityContent/styles.ts b/src/components/ChannelsAvailabilityContent/styles.ts index 67e4bef06..df5b4e26b 100644 --- a/src/components/ChannelsAvailabilityContent/styles.ts +++ b/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 => ({ diff --git a/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx b/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx index 5b29f4697..d352d9b86 100644 --- a/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx +++ b/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( diff --git a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx b/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx index 200f1c468..d16da5ff3 100644 --- a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx +++ b/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"; diff --git a/src/components/ChannelsAvailabilityDropdown/styles.ts b/src/components/ChannelsAvailabilityDropdown/styles.ts index 6fe419d13..4b7b3151e 100644 --- a/src/components/ChannelsAvailabilityDropdown/styles.ts +++ b/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 => ({ diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 1149463db..52f34c4e1 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/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( diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index b6f4760df..b845eec9a 100644 --- a/src/components/Chip/Chip.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx index 0db816ef2..072d26b15 100644 --- a/src/components/ColumnPicker/ColumnPicker.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPickerButton.tsx b/src/components/ColumnPicker/ColumnPickerButton.tsx index 1d6bba26d..325bac1cd 100644 --- a/src/components/ColumnPicker/ColumnPickerButton.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index 84260a12e..7b6e9d705 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/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"; diff --git a/src/components/CompanyAddressInput/CompanyAddressForm.tsx b/src/components/CompanyAddressInput/CompanyAddressForm.tsx index 10bd26cbc..d721c9725 100644 --- a/src/components/CompanyAddressInput/CompanyAddressForm.tsx +++ b/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"; diff --git a/src/components/CompanyAddressInput/CompanyAddressInput.tsx b/src/components/CompanyAddressInput/CompanyAddressInput.tsx index e93b73f33..53ce5024d 100644 --- a/src/components/CompanyAddressInput/CompanyAddressInput.tsx +++ b/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"; diff --git a/src/components/ConfirmButton.tsx b/src/components/ConfirmButton.tsx new file mode 100644 index 000000000..7f117d6db --- /dev/null +++ b/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 { + labels?: Partial; +} + +export const ConfirmButton: React.FC = ({ + labels = {}, + ...rest +}) => { + const intl = useIntl(); + + const defaultLabels: ConfirmButtonLabels = { + confirm: intl.formatMessage(buttonMessages.save), + error: intl.formatMessage(commonMessages.error) + }; + const componentLabels: ConfirmButtonLabels = { + ...defaultLabels, + ...labels + }; + + return ; +}; +ConfirmButton.displayName = "ConfirmButton"; +export default ConfirmButton; diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx deleted file mode 100644 index 450f617c9..000000000 --- a/src/components/ConfirmButton/ConfirmButton.tsx +++ /dev/null @@ -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, - WithStyles { - 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 ( - - ); - } - } -); -ConfirmButton.displayName = "ConfirmButton"; -export default ConfirmButton; diff --git a/src/components/ConfirmButton/index.ts b/src/components/ConfirmButton/index.ts deleted file mode 100644 index 4fe09023d..000000000 --- a/src/components/ConfirmButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ConfirmButton"; -export * from "./ConfirmButton"; diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 19c9aaaaf..e9c072bf7 100644 --- a/src/components/Container.tsx +++ b/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"; diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx index 0f24b2e22..46b98bd0c 100644 --- a/src/components/ControlledSwitch.tsx +++ b/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( diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index 2418f2bc9..0903d5006 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/src/components/CountryList/CountryList.tsx @@ -13,7 +13,7 @@ import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { CountryFragment } from "@saleor/fragments/types/CountryFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -35,7 +35,7 @@ const useStyles = makeStyles( "&:last-child": { paddingRight: 0 }, - width: 48 + theme.spacing(2) + width: `calc(48px + ${theme.spacing(2)})` }, indicator: { color: theme.palette.text.disabled, diff --git a/src/components/CreatorSteps/CreatorSteps.tsx b/src/components/CreatorSteps/CreatorSteps.tsx index 7500cf25f..172b789c8 100644 --- a/src/components/CreatorSteps/CreatorSteps.tsx +++ b/src/components/CreatorSteps/CreatorSteps.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"; diff --git a/src/components/DeleteButton/DeleteButton.tsx b/src/components/DeleteButton/DeleteButton.tsx index 63789a37d..406f6e900 100644 --- a/src/components/DeleteButton/DeleteButton.tsx +++ b/src/components/DeleteButton/DeleteButton.tsx @@ -1,6 +1,6 @@ import { Button } 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 { useIntl } from "react-intl"; diff --git a/src/components/EditableTableCell/EditableTableCell.tsx b/src/components/EditableTableCell/EditableTableCell.tsx index 7c24d07c8..164eec078 100644 --- a/src/components/EditableTableCell/EditableTableCell.tsx +++ b/src/components/EditableTableCell/EditableTableCell.tsx @@ -7,7 +7,7 @@ import { } from "@material-ui/core"; import { TextFieldProps } from "@material-ui/core/TextField"; import useForm from "@saleor/hooks/useForm"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx index e65d38327..ee2f4babb 100644 --- a/src/components/ErrorPage/ErrorPage.tsx +++ b/src/components/ErrorPage/ErrorPage.tsx @@ -1,6 +1,6 @@ import notFoundImage from "@assets/images/what.svg"; import { Button, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import SVG from "react-inlinesvg"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx index 8eabf42f7..4153fcb76 100644 --- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx +++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; @@ -22,9 +22,9 @@ const useStyles = makeStyles( }, menuButton: { flex: "0 0 auto", - marginLeft: -theme.spacing(2), + marginLeft: theme.spacing(-2), marginRight: theme.spacing(3), - marginTop: -theme.spacing(2) + marginTop: theme.spacing(-2) }, root: { alignItems: "center", diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx index ba32de58e..f645858bf 100644 --- a/src/components/ExternalLink/ExternalLink.tsx +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { TypographyProps } from "@material-ui/core/Typography"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx index b7446df6b..c3c7760bb 100644 --- a/src/components/FileUploadField/FileUploadField.tsx +++ b/src/components/FileUploadField/FileUploadField.tsx @@ -2,7 +2,7 @@ import { Button, IconButton, Typography } from "@material-ui/core"; import DeleteIcon from "@material-ui/icons/Delete"; import { FileFragment } from "@saleor/fragments/types/FileFragment"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -45,7 +45,7 @@ const useStyles = makeStyles( alignItems: "center", color: theme.palette.primary.main, display: "flex", - fontSize: "1rem" + fontSize: theme.typography.body1.fontSize }, uploadFileName: { minWidth: "6rem" diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index 9dc28728b..8fd731def 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -6,7 +6,7 @@ import { Typography } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/Filter/FilterAutocompleteField.tsx b/src/components/Filter/FilterAutocompleteField.tsx index dfd87e325..372a8a163 100644 --- a/src/components/Filter/FilterAutocompleteField.tsx +++ b/src/components/Filter/FilterAutocompleteField.tsx @@ -1,5 +1,5 @@ import { FormControlLabel, TextField, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { toggle } from "@saleor/utils/lists"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -38,7 +38,7 @@ const useStyles = makeStyles( marginTop: theme.spacing(1) }, option: { - left: -theme.spacing(0.5), + left: theme.spacing(-0.5), position: "relative" }, showMore: { diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx index 544acfbe9..f5077669b 100644 --- a/src/components/Filter/FilterContent/FilterContentHeader.tsx +++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx @@ -1,6 +1,6 @@ import { Button, Typography } 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"; diff --git a/src/components/Filter/FilterContent/FilterGroupLabel.tsx b/src/components/Filter/FilterContent/FilterGroupLabel.tsx index e8332947f..a3da1b197 100644 --- a/src/components/Filter/FilterContent/FilterGroupLabel.tsx +++ b/src/components/Filter/FilterContent/FilterGroupLabel.tsx @@ -1,5 +1,5 @@ import { Checkbox, FormControlLabel } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FilterReducerAction } from "../reducer"; diff --git a/src/components/Filter/FilterContent/styles.ts b/src/components/Filter/FilterContent/styles.ts index d79662d6f..edf9def3a 100644 --- a/src/components/Filter/FilterContent/styles.ts +++ b/src/components/Filter/FilterContent/styles.ts @@ -1,5 +1,5 @@ import { fade } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; const useStyles = makeStyles( theme => ({ @@ -19,11 +19,11 @@ const useStyles = makeStyles( }, option: { - left: -theme.spacing(0.5), + left: theme.spacing(-0.5), position: "relative" }, optionRadio: { - left: -theme.spacing(0.25) + left: theme.spacing(-0.25) }, fieldInput: { diff --git a/src/components/Filter/FilterOptionField.tsx b/src/components/Filter/FilterOptionField.tsx index 3c39a06ce..fd8eeeaa3 100644 --- a/src/components/Filter/FilterOptionField.tsx +++ b/src/components/Filter/FilterOptionField.tsx @@ -1,5 +1,5 @@ import { FormControlLabel, Radio } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { toggle } from "@saleor/utils/lists"; import classNames from "classnames"; import React from "react"; @@ -10,11 +10,11 @@ import { FilterBaseFieldProps } from "./types"; const useStyles = makeStyles( theme => ({ option: { - left: -theme.spacing(0.5), + left: theme.spacing(-0.5), position: "relative" }, optionRadio: { - left: -theme.spacing(0.25) + left: theme.spacing(-0.25) }, root: {} }), diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx index f25e75cc2..908004090 100644 --- a/src/components/FilterBar/FilterBar.tsx +++ b/src/components/FilterBar/FilterBar.tsx @@ -1,5 +1,5 @@ import { Button } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/FormSpacer.tsx b/src/components/FormSpacer.tsx index c297265ef..377d1dd0f 100644 --- a/src/components/FormSpacer.tsx +++ b/src/components/FormSpacer.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 20e7fce83..3750e9bc1 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx index 21e879869..9aa6ccb26 100644 --- a/src/components/Hr.tsx +++ b/src/components/Hr.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/IconButtonTableCell/IconButtonTableCell.tsx b/src/components/IconButtonTableCell/IconButtonTableCell.tsx index 577223148..370db3a9d 100644 --- a/src/components/IconButtonTableCell/IconButtonTableCell.tsx +++ b/src/components/IconButtonTableCell/IconButtonTableCell.tsx @@ -1,10 +1,9 @@ import { IconButton, TableCell } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { ICONBUTTON_SIZE, makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { stopPropagation } from "../../misc"; -import { ICONBUTTON_SIZE } from "../../theme"; export interface IconButtonTableCellProps { children: React.ReactNode; @@ -20,7 +19,7 @@ const useStyles = makeStyles( paddingRight: 0 }, paddingRight: 0, - width: ICONBUTTON_SIZE + theme.spacing(0.5) + width: `calc(${ICONBUTTON_SIZE}px + ${theme.spacing(0.5)})` } }), { name: "IconButtonTableCell" } diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx index fa7d1c00b..32a5089ab 100644 --- a/src/components/ImageUpload/ImageUpload.tsx +++ b/src/components/ImageUpload/ImageUpload.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index 26c853cb6..8ae29c151 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -9,7 +9,7 @@ import { Typography } from "@material-ui/core"; import ArrowDropDown 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"; diff --git a/src/components/LimitReachedAlert.tsx b/src/components/LimitReachedAlert.tsx new file mode 100644 index 000000000..6277fcbdc --- /dev/null +++ b/src/components/LimitReachedAlert.tsx @@ -0,0 +1,22 @@ +import { Alert, AlertProps, makeStyles } from "@saleor/macaw-ui"; +import React from "react"; + +const useStyles = makeStyles( + theme => ({ + root: { + marginBottom: theme.spacing(3) + } + }), + { name: "LimitReachedAlert" } +); + +export type LimitReachedAlertProps = Omit; + +const LimitReachedAlert: React.FC = props => { + const classes = useStyles(); + + return ; +}; + +LimitReachedAlert.displayName = "LimitReachedAlert"; +export default LimitReachedAlert; diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 35b684ecf..5215595ad 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { TypographyProps } from "@material-ui/core/Typography"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/LinkChoice/LinkChoice.tsx b/src/components/LinkChoice/LinkChoice.tsx index 6cb732939..149297b28 100644 --- a/src/components/LinkChoice/LinkChoice.tsx +++ b/src/components/LinkChoice/LinkChoice.tsx @@ -2,7 +2,7 @@ import { ClickAwayListener, MenuItem, Paper, Popper } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; import { FormChange } from "@saleor/hooks/useForm"; import ArrowDropdown from "@saleor/icons/ArrowDropdown"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import { codes } from "keycode"; import React from "react"; diff --git a/src/components/ListField/ListField.tsx b/src/components/ListField/ListField.tsx deleted file mode 100644 index 126a8c831..000000000 --- a/src/components/ListField/ListField.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { Button, TextField } from "@material-ui/core"; -import { StandardTextFieldProps } from "@material-ui/core/TextField"; -import { - createStyles, - SaleorTheme, - WithStyles, - withStyles -} from "@saleor/theme"; -import React from "react"; -import { FormattedMessage } from "react-intl"; - -import Chip from "../Chip"; - -interface ListFieldState { - newValueCounter: number; - value: string; -} - -const styles = (theme: SaleorTheme) => - createStyles({ - chip: { - marginBottom: theme.spacing(1) - }, - chipContainer: { - marginTop: theme.spacing(2), - width: 552 - } - }); - -interface ListFieldProps - extends Omit, - WithStyles { - values: Array<{ - label: string; - value: string; - }>; -} - -const ListField = withStyles(styles, { name: "ListField" })( - class ListFieldComponent extends React.Component< - ListFieldProps, - ListFieldState - > { - state: ListFieldState = { - newValueCounter: 0, - value: "" - }; - handleFieldChange = (event: React.ChangeEvent) => - this.setState({ - value: event.target.value - }); - - handleFieldSubmit = (event: React.KeyboardEvent) => { - // Check if pressed 'enter' key - if (event.keyCode === 13) { - if (this.state.value !== "") { - event.preventDefault(); - event.stopPropagation(); - this.handleValueAdd(); - } - } - }; - - handleValueAdd = () => { - if (this.state.value !== "") { - this.props.onChange({ - target: { - name: this.props.name, - value: [ - ...this.props.values, - { - label: this.state.value, - value: "generated-" + this.state.newValueCounter - } - ] - } - } as any); - this.setState({ - newValueCounter: this.state.newValueCounter + 1, - value: "" - }); - } - }; - - handleValueRemove = (index: number) => - this.props.onChange({ - target: { - name: this.props.name, - value: this.props.values - .slice(0, index) - .concat(this.props.values.slice(index + 1)) - } - } as any); - - render() { - const { classes, values, onChange, ...props } = this.props; - return ( -
- - - - ) - }} - value={this.state.value} - onChange={this.handleFieldChange} - onKeyDown={this.handleFieldSubmit} - /> -
- {values.map((value, valueIndex) => ( - this.handleValueRemove(valueIndex)} - /> - ))} -
-
- ); - } - } -); -ListField.displayName = "ListField"; -export default ListField; diff --git a/src/components/ListField/index.ts b/src/components/ListField/index.ts deleted file mode 100644 index 85b671d73..000000000 --- a/src/components/ListField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ListField"; -export * from "./ListField"; diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx index f3c34a05e..0d66fd946 100644 --- a/src/components/MediaTile/MediaTile.tsx +++ b/src/components/MediaTile/MediaTile.tsx @@ -1,7 +1,7 @@ import { CircularProgress, IconButton } from "@material-ui/core"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/Metadata/styles.ts b/src/components/Metadata/styles.ts index c45f08b12..c49f40989 100644 --- a/src/components/Metadata/styles.ts +++ b/src/components/Metadata/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; const useStyles = makeStyles( theme => { diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 3c26f3ec5..a90617612 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -3,7 +3,7 @@ import { fade } from "@material-ui/core/styles/colorManipulator"; import CloseIcon from "@material-ui/icons/Close"; import Debounce, { DebounceProps } from "@saleor/components/Debounce"; import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { FetchMoreProps } from "@saleor/types"; import Downshift, { ControllerStateAndHelpers } from "downshift"; import { filter } from "fuzzaldrin"; diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index abcb7c58b..50b8fd362 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -10,7 +10,7 @@ import Checkbox from "@saleor/components/Checkbox"; import useElementScroll, { isScrolledToBottom } from "@saleor/hooks/useElementScroll"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; import { GetItemPropsOptions } from "downshift"; @@ -82,7 +82,9 @@ const useStyles = makeStyles( width: 20 }, content: { - maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2), + maxHeight: `calc(${menuItemHeight * maxMenuItems}px + ${theme.spacing( + 2 + )})`, overflowY: "scroll", padding: 8 }, diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx index d360c18e2..0feb571e8 100644 --- a/src/components/MultiSelectField/MultiSelectField.tsx +++ b/src/components/MultiSelectField/MultiSelectField.tsx @@ -7,7 +7,7 @@ import { Select } from "@material-ui/core"; import { SelectProps } from "@material-ui/core/Select"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -16,7 +16,7 @@ import Checkbox from "../Checkbox"; const useStyles = makeStyles( theme => ({ checkbox: { - marginRight: -theme.spacing(2) + marginRight: theme.spacing(-2) }, formControl: { width: "100%" diff --git a/src/components/Navigator/Navigator.tsx b/src/components/Navigator/Navigator.tsx index f6acde56d..9764e1b17 100644 --- a/src/components/Navigator/Navigator.tsx +++ b/src/components/Navigator/Navigator.tsx @@ -2,8 +2,8 @@ import { Fade, Modal, Paper } from "@material-ui/core"; import { APP_VERSION } from "@saleor/config"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import useNotifier from "@saleor/hooks/useNotifier"; -import { useTheme } from "@saleor/theme"; -import { makeStyles } from "@saleor/theme"; +import { useTheme } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import Downshift from "downshift"; import hotkeys from "hotkeys-js"; import React from "react"; diff --git a/src/components/Navigator/NavigatorInput.tsx b/src/components/Navigator/NavigatorInput.tsx index 6d63fa844..27aa990ca 100644 --- a/src/components/Navigator/NavigatorInput.tsx +++ b/src/components/Navigator/NavigatorInput.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/components/Navigator/NavigatorSection.tsx b/src/components/Navigator/NavigatorSection.tsx index d2d1df1c7..0e46d9fd1 100644 --- a/src/components/Navigator/NavigatorSection.tsx +++ b/src/components/Navigator/NavigatorSection.tsx @@ -1,5 +1,5 @@ import { MenuItem, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { GetItemPropsOptions } from "downshift"; import React from "react"; diff --git a/src/components/NavigatorButton/NavigatorButton.tsx b/src/components/NavigatorButton/NavigatorButton.tsx index c36b0e22a..40421fe0b 100644 --- a/src/components/NavigatorButton/NavigatorButton.tsx +++ b/src/components/NavigatorButton/NavigatorButton.tsx @@ -1,7 +1,7 @@ import navigatorIcon from "@assets/images/navigator.svg"; import { Grow, IconButton, Paper, Popper } from "@material-ui/core"; import { IconButtonProps } from "@material-ui/core/IconButton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import ReactSVG from "react-inlinesvg"; @@ -39,16 +39,16 @@ const useStyles = makeStyles( "&:after": { ...triangle(theme.palette.background.paper, 7), content: "''", - left: theme.spacing(2) + 2, + left: 18, position: "absolute", - top: -theme.spacing() + 1 + top: -7 }, "&:before": { ...triangle(theme.palette.divider, 8), content: "''", - left: theme.spacing(2) + 1, + left: `calc(1px + ${theme.spacing(2)})`, position: "absolute", - top: -theme.spacing() + top: theme.spacing(-1) }, border: `1px solid ${theme.palette.divider}`, borderRadius: 6, diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx index 291307ee0..c9c172961 100644 --- a/src/components/NotFoundPage/NotFoundPage.tsx +++ b/src/components/NotFoundPage/NotFoundPage.tsx @@ -1,6 +1,6 @@ import notFoundImage from "@assets/images/not-found-404.svg"; import { Button, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import SVG from "react-inlinesvg"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index a54136ba3..db72467c0 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { LimitInfoFragment } from "@saleor/fragments/types/LimitInfoFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import ExtendedPageHeader from "../ExtendedPageHeader"; diff --git a/src/components/PhoneField/PhoneField.tsx b/src/components/PhoneField/PhoneField.tsx index 3fc57ffca..a67b21ec6 100644 --- a/src/components/PhoneField/PhoneField.tsx +++ b/src/components/PhoneField/PhoneField.tsx @@ -1,6 +1,6 @@ import { TextField } from "@material-ui/core"; import SingleSelectField from "@saleor/components/SingleSelectField"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx index 14d6c79be..0082a1b0c 100644 --- a/src/components/PriceField/PriceField.tsx +++ b/src/components/PriceField/PriceField.tsx @@ -1,6 +1,6 @@ import { InputAdornment, TextField } from "@material-ui/core"; import { InputProps } from "@material-ui/core/Input"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/RadioGroupField/RadioGroupField.tsx b/src/components/RadioGroupField/RadioGroupField.tsx index 55e3e446d..f9158baa9 100644 --- a/src/components/RadioGroupField/RadioGroupField.tsx +++ b/src/components/RadioGroupField/RadioGroupField.tsx @@ -7,7 +7,7 @@ import { Radio, RadioGroup } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -26,7 +26,7 @@ const useStyles = makeStyles( flexDirection: "row" }, radioLabel: { - marginBottom: -theme.spacing(0.5) + marginBottom: theme.spacing(-0.5) }, radioLabelInline: { marginRight: theme.spacing(4) @@ -41,7 +41,7 @@ const useStyles = makeStyles( width: "100%" }, rootNoLabel: { - marginTop: -theme.spacing(1.5) + marginTop: theme.spacing(-1.5) } }), { diff --git a/src/components/RadioSwitchField/RadioSwitchField.tsx b/src/components/RadioSwitchField/RadioSwitchField.tsx index 57e74b482..3e75a84b2 100644 --- a/src/components/RadioSwitchField/RadioSwitchField.tsx +++ b/src/components/RadioSwitchField/RadioSwitchField.tsx @@ -4,7 +4,7 @@ import { Radio, RadioGroup } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx index b0523e096..2f870a1d8 100644 --- a/src/components/ResponsiveTable/ResponsiveTable.tsx +++ b/src/components/ResponsiveTable/ResponsiveTable.tsx @@ -1,5 +1,5 @@ import { Table } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/RichTextEditor/styles.ts b/src/components/RichTextEditor/styles.ts index 5a7936aa6..2c58d0b0c 100644 --- a/src/components/RichTextEditor/styles.ts +++ b/src/components/RichTextEditor/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"; const useStyles = makeStyles( theme => { diff --git a/src/components/RowNumberSelect/RowNumberSelect.tsx b/src/components/RowNumberSelect/RowNumberSelect.tsx index 2f8a118a5..7b3557939 100644 --- a/src/components/RowNumberSelect/RowNumberSelect.tsx +++ b/src/components/RowNumberSelect/RowNumberSelect.tsx @@ -1,5 +1,5 @@ import { MenuItem, Select } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx deleted file mode 100644 index 6808e55da..000000000 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { Button, Card, CardContent, Portal } from "@material-ui/core"; -import useWindowScroll from "@saleor/hooks/useWindowScroll"; -import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; -import React from "react"; -import { useIntl } from "react-intl"; - -import { useAppAction } from "../AppLayout/AppActionContext"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "../ConfirmButton/ConfirmButton"; -import Container from "../Container"; - -const useStyles = makeStyles( - theme => ({ - button: { - marginRight: theme.spacing(1) - }, - cancelButton: { - marginRight: theme.spacing(2) - }, - content: { - "&:last-child": { - paddingBottom: theme.spacing(2) - }, - display: "flex", - paddingBottom: theme.spacing(2), - paddingTop: theme.spacing(2), - [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing(1) - } - }, - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.dark - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - }, - paper: { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0 - }, - root: { - height: 70 - }, - spacer: { - flex: "1" - } - }), - { name: "SaveButtonBar" } -); - -interface SaveButtonBarProps { - disabled: boolean; - state: ConfirmButtonTransitionState; - labels?: { - cancel?: string; - delete?: string; - save?: string; - }; - onCancel: () => void; - onDelete?: () => void; - onSave(event: any); -} - -export const SaveButtonBar: React.FC = props => { - const { - disabled, - labels, - state, - onCancel, - onDelete, - onSave, - ...rest - } = props; - const classes = useStyles(props); - - const appAction = useAppAction(); - const intl = useIntl(); - const scrollPosition = useWindowScroll(); - - React.useEffect(() => { - if (!disabled && state !== "loading") { - appAction.setDocked(false); - } - }, [disabled]); - React.useEffect(() => () => appAction.setDocked(true), []); - - const scrolledToBottom = - scrollPosition.y + window.innerHeight >= document.body.scrollHeight; - - return appAction.anchor ? ( - -
- - - - {!!onDelete && ( - - )} -
- - appAction.setDocked(true)} - > - {labels?.save || intl.formatMessage(buttonMessages.save)} - - - - -
- - ) : null; -}; -SaveButtonBar.displayName = "SaveButtonBar"; -export default SaveButtonBar; diff --git a/src/components/SaveButtonBar/index.ts b/src/components/SaveButtonBar/index.ts deleted file mode 100644 index edc3e6397..000000000 --- a/src/components/SaveButtonBar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./SaveButtonBar"; -export * from "./SaveButtonBar"; diff --git a/src/components/Savebar.tsx b/src/components/Savebar.tsx new file mode 100644 index 000000000..309a7774a --- /dev/null +++ b/src/components/Savebar.tsx @@ -0,0 +1,31 @@ +import { buttonMessages, commonMessages } from "@saleor/intl"; +import { + Savebar as MacawSavebar, + SavebarLabels, + SavebarProps as MacawSavebarProps +} from "@saleor/macaw-ui"; +import React from "react"; +import { useIntl } from "react-intl"; + +export interface SavebarProps extends Omit { + labels?: Partial; +} + +export const Savebar: React.FC = ({ labels = {}, ...rest }) => { + const intl = useIntl(); + + const defaultLabels: SavebarLabels = { + cancel: intl.formatMessage(buttonMessages.back), + confirm: intl.formatMessage(buttonMessages.save), + delete: intl.formatMessage(buttonMessages.delete), + error: intl.formatMessage(commonMessages.error) + }; + const componentLabels: SavebarLabels = { + ...defaultLabels, + ...labels + }; + + return ; +}; +Savebar.displayName = "SaveBar"; +export default Savebar; diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 26c017be0..bda926d19 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -1,5 +1,5 @@ import { Button } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { SearchPageProps, TabPageProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/SearchBar/SearchInput.tsx b/src/components/SearchBar/SearchInput.tsx index 0e0b377b8..f1c95cbe4 100644 --- a/src/components/SearchBar/SearchInput.tsx +++ b/src/components/SearchBar/SearchInput.tsx @@ -1,5 +1,5 @@ import { TextField } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { SearchPageProps } from "../../types"; diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx index ab7a12063..a8991e53a 100644 --- a/src/components/SeoForm/SeoForm.tsx +++ b/src/components/SeoForm/SeoForm.tsx @@ -8,7 +8,7 @@ import { import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment"; import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors"; import getPageErrorMessage from "@saleor/utils/errors/page"; import classNames from "classnames"; diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx deleted file mode 100644 index 1ae72717b..000000000 --- a/src/components/SideBar/ExpandButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { ButtonProps } from "@material-ui/core/Button"; -import ArrowIcon from "@material-ui/icons/ArrowBack"; -import { makeStyles } from "@saleor/theme"; -import classNames from "classnames"; -import React from "react"; - -import SquareButton from "../SquareButton"; - -const useStyles = makeStyles( - theme => ({ - arrow: { - transition: theme.transitions.duration.shortest + "ms" - }, - shrunk: { - transform: "scaleX(-1)" - } - }), - { - name: "ExpandButton" - } -); - -export interface ExpandButtonProps extends ButtonProps { - isShrunk: boolean; -} - -const ExpandButton: React.FC = ({ isShrunk, ...rest }) => { - const classes = useStyles({}); - - return ( - - - - ); -}; - -ExpandButton.displayName = "ExpandButton"; -export default ExpandButton; diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx deleted file mode 100644 index c43b408d2..000000000 --- a/src/components/SideBar/MenuItem.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import { - ClickAwayListener, - Paper, - Popper, - Typography -} from "@material-ui/core"; -import { fade } from "@material-ui/core/styles/colorManipulator"; -import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; -import { makeStyles } from "@saleor/theme"; -import classNames from "classnames"; -import React from "react"; -import SVG from "react-inlinesvg"; - -import { IMenuItem } from "../AppLayout/menuStructure"; - -export interface MenuItemProps { - active: boolean; - isMenuShrunk: boolean; - menuItem: IMenuItem; - onClick: UseNavigatorResult; -} - -export const menuWidth = 210; -export const shrunkMenuWidth = 72; - -const useStyles = makeStyles( - theme => ({ - hideLabel: { - "&$label": { - opacity: 0 - } - }, - icon: { - "& svg": { - height: 24, - width: 24 - }, - marginRight: theme.spacing(1.5), - transition: theme.transitions.duration.shortest + "ms" - }, - label: { - cursor: "pointer", - display: "block", - fontSize: 16, - fontWeight: "bold", - opacity: 1, - transition: theme.transitions.duration.shortest + "ms" - }, - menuItemBtn: { - "&:focus": { - color: theme.palette.primary.main, - outline: 0 - }, - background: "none", - border: "none", - color: "inherit", - cursor: "pointer", - display: "inline-flex", - margin: 0, - padding: 0 - }, - paper: { - borderRadius: 16, - boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)", - cursor: "default", - padding: theme.spacing(3), - textAlign: "left" - }, - popper: { - marginLeft: theme.spacing(3), - zIndex: 2 - }, - root: { - "&:hover, &:focus": { - color: theme.palette.primary.main, - outline: 0 - }, - borderBottomRightRadius: 100, - borderTopRightRadius: 100, - color: fade(theme.palette.text.primary, 0.6), - cursor: "pointer", - display: "flex", - height: 56, - marginBottom: theme.spacing(), - overflow: "hidden", - padding: theme.spacing(2, 3, 2, 3.5), - transition: theme.transitions.duration.shortest + "ms", - width: shrunkMenuWidth - }, - rootActive: { - "&$root": { - background: theme.palette.background.paper, - boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)", - color: theme.palette.primary.main - } - }, - rootExpanded: { - width: menuWidth - }, - subMenuLabel: { - "&$label": { - "&:not(:last-child)": { - marginBottom: theme.spacing(2) - } - }, - "&:hover, &:focus": { - color: theme.palette.primary.main, - outline: 0 - }, - background: "none", - border: "none", - color: fade(theme.palette.text.primary, 0.6), - textAlign: "left", - whiteSpace: "nowrap" - } - }), - { - name: "MenuItem" - } -); - -const MenuItem: React.FC = ({ - active, - menuItem, - isMenuShrunk, - onClick -}) => { - const classes = useStyles({}); - const [open, setOpen] = React.useState(false); - const anchor = React.useRef(null); - - const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { - event.stopPropagation(); - if (menuItem.children) { - setOpen(true); - } else { - onClick(menuItem.url); - setOpen(false); - } - }; - - return ( -
handleClick(event, menuItem)} - > - - {menuItem.children && ( - - setOpen(false)}> - - {menuItem.children.map(subMenuItem => ( - handleClick(event, subMenuItem)} - data-test="submenu-item-label" - data-test-id={subMenuItem.testingContextId} - variant="body2" - > - {subMenuItem.label} - - ))} - - - - )} -
- ); -}; - -MenuItem.displayName = "MenuItem"; -export default MenuItem; diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx deleted file mode 100644 index 8c7d6b465..000000000 --- a/src/components/SideBar/SideBar.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import logoDark from "@assets/images/logo-sidebar-dark.svg"; -import logoLight from "@assets/images/logo-sidebar-light.svg"; -import configurationIcon from "@assets/images/menu-configure-icon.svg"; -import { configurationMenuUrl } from "@saleor/configuration"; -import { User } from "@saleor/fragments/types/User"; -import useLocalStorage from "@saleor/hooks/useLocalStorage"; -import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; -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 { IntlShape, useIntl } from "react-intl"; - -import { IMenuItem } from "../AppLayout/menuStructure"; -import ExpandButton from "./ExpandButton"; -import MenuItem, { menuWidth, shrunkMenuWidth } from "./MenuItem"; -import { isMenuActive } from "./utils"; - -const useStyles = makeStyles( - theme => ({ - expandButton: { - marginLeft: theme.spacing(2) - }, - float: { - position: "fixed" - }, - logo: { - margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px` - }, - root: { - transition: "width 0.5s ease", - width: menuWidth, - zIndex: 100 - }, - rootShrink: { - width: shrunkMenuWidth - } - }), - { - name: "SideBar" - } -); - -export interface SideBarProps { - className?: string; - menuItems: IMenuItem[]; - location: string; - user: User; - renderConfigure: boolean; - onMenuItemClick: UseNavigatorResult; -} - -export interface IActiveSubMenu { - isActive: boolean; - label: string | null; -} - -export const getConfigureMenuItem = (intl: IntlShape): IMenuItem => ({ - ariaLabel: "configure", - icon: configurationIcon, - label: intl.formatMessage(sectionNames.configuration), - testingContextId: "configure", - url: configurationMenuUrl -}); - -const SideBar: React.FC = ({ - location, - menuItems, - renderConfigure, - user, - onMenuItemClick -}) => { - const classes = useStyles({}); - const [isShrunk, setShrink] = useLocalStorage("isMenuSmall", false); - const intl = useIntl(); - const configureMenuItem = getConfigureMenuItem(intl); - const { isDark } = useTheme(); - - return ( -
-
-
- -
- {menuItems.map(menuItem => { - const isActive = isMenuActive(location, menuItem); - - if ( - menuItem.permission && - !user.userPermissions - .map(perm => perm.code) - .includes(menuItem.permission) - ) { - return null; - } - - return ( - - ); - })} - {renderConfigure && ( - acc || isMenuActive(location, menuItem), - false - ) - } - isMenuShrunk={isShrunk} - menuItem={configureMenuItem} - onClick={onMenuItemClick} - /> - )} - setShrink(!isShrunk)} - /> -
-
- ); -}; - -SideBar.displayName = "SideBar"; -export default SideBar; diff --git a/src/components/SideBar/SubMenu.tsx b/src/components/SideBar/SubMenu.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/SideBar/index.ts b/src/components/SideBar/index.ts deleted file mode 100644 index df08bddc7..000000000 --- a/src/components/SideBar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./SideBar"; -export { default } from "./SideBar"; diff --git a/src/components/SideBarDrawer/MenuItemBtn.tsx b/src/components/SideBarDrawer/MenuItemBtn.tsx deleted file mode 100644 index f703542b7..000000000 --- a/src/components/SideBarDrawer/MenuItemBtn.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Typography } from "@material-ui/core"; -import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; -import React from "react"; -import SVG from "react-inlinesvg"; - -import { IMenuItem } from "../AppLayout/menuStructure"; -import useStyles from "./styles"; - -export interface MenuItemBtnProps { - menuItem: IMenuItem; - onClick: UseNavigatorResult; -} -const MenuItemBtn: React.FC = ({ menuItem, onClick }) => { - const classes = useStyles({}); - - return ( - - ); -}; - -MenuItemBtn.displayName = "MenuItemBtn"; -export default MenuItemBtn; diff --git a/src/components/SideBarDrawer/SideBarDrawer.stories.tsx b/src/components/SideBarDrawer/SideBarDrawer.stories.tsx deleted file mode 100644 index 057ee7b90..000000000 --- a/src/components/SideBarDrawer/SideBarDrawer.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { staffMember } from "@saleor/staff/fixtures"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import { config } from "@test/intl"; -import React from "react"; -import { createIntl } from "react-intl"; - -import createMenuStructure from "../AppLayout/menuStructure"; -import SideBarDrawer from "./SideBarDrawer"; - -const intl = createIntl(config); -const user = { - __typename: staffMember.__typename, - avatar: { - __typename: staffMember.avatar.__typename, - url: staffMember.avatar.url - }, - email: staffMember.email, - firstName: "Adam Evan", - id: staffMember.id, - isStaff: true, - lastName: "Newton", - note: null, - userPermissions: staffMember.userPermissions -}; - -storiesOf("Generics / Mobile Side Menu", module) - .addDecorator(Decorator) - .add("default", () => ( - undefined} - renderConfigure={true} - user={user} - /> - )); diff --git a/src/components/SideBarDrawer/SideBarDrawer.tsx b/src/components/SideBarDrawer/SideBarDrawer.tsx deleted file mode 100644 index b43a931da..000000000 --- a/src/components/SideBarDrawer/SideBarDrawer.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import logoDark from "@assets/images/logo-sidebar-dark.svg"; -import logoLight from "@assets/images/logo-sidebar-light.svg"; -import { Drawer, Typography } from "@material-ui/core"; -import ArrowLeftIcon from "@material-ui/icons/ArrowLeft"; -import MenuIcon from "@material-ui/icons/Menu"; -import useTheme from "@saleor/hooks/useTheme"; -import classNames from "classnames"; -import React from "react"; -import SVG from "react-inlinesvg"; -import { useIntl } from "react-intl"; - -import { IMenuItem } from "../AppLayout/menuStructure"; -import { getConfigureMenuItem, SideBarProps } from "../SideBar/SideBar"; -import SquareButton from "../SquareButton"; -import MenuItemBtn from "./MenuItemBtn"; -import useStyles from "./styles"; - -export type SideBarDrawerProps = SideBarProps; - -const SideBarDrawer: React.FC = ({ - menuItems, - onMenuItemClick, - renderConfigure, - user -}) => { - const [isOpened, setOpened] = React.useState(false); - const classes = useStyles({}); - const intl = useIntl(); - const [activeMenu, setActiveMenu] = React.useState(null); - const [showSubmenu, setShowSubmenu] = React.useState(false); - const container = React.useRef(null); - - const configureMenuItem = getConfigureMenuItem(intl); - - const { isDark } = useTheme(); - - const handleMenuItemClick = (url: string) => { - setOpened(false); - setShowSubmenu(false); - onMenuItemClick(url); - }; - - const handleMenuItemWithChildrenClick = (menuItem: IMenuItem) => { - setActiveMenu(menuItem); - setShowSubmenu(true); - container.current.scrollTo({ - top: 0 - }); - }; - - return ( - <> - setOpened(true)}> - - - setOpened(false)} - > -
-
-
- - {menuItems.map(menuItem => { - if ( - menuItem.permission && - !user.userPermissions - .map(perm => perm.code) - .includes(menuItem.permission) - ) { - return null; - } - - return ( - handleMenuItemWithChildrenClick(menuItem) - : handleMenuItemClick - } - key={menuItem.ariaLabel} - /> - ); - })} - {renderConfigure && ( - - )} -
- {activeMenu && ( -
-
-
- - - {activeMenu.label} - -
- setShowSubmenu(false)}> - - -
- {activeMenu.children.map(subMenuItem => ( - - ))} -
- )} -
-
- - - ); -}; - -SideBarDrawer.displayName = "SideBarDrawer"; -export default SideBarDrawer; diff --git a/src/components/SideBarDrawer/index.ts b/src/components/SideBarDrawer/index.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/SideBarDrawer/styles.ts b/src/components/SideBarDrawer/styles.ts deleted file mode 100644 index af1164cce..000000000 --- a/src/components/SideBarDrawer/styles.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { makeStyles } from "@saleor/theme"; - -const useStyles = makeStyles( - theme => ({ - activeMenuLabel: { - display: "flex" - }, - container: { - overflowX: "hidden", - width: "100%" - }, - containerSubMenu: { - "&$container": { - overflow: "hidden" - } - }, - content: { - width: "50%" - }, - icon: { - marginRight: theme.spacing(2) - }, - innerContainer: { - display: "flex", - position: "relative", - right: 0, - transition: theme.transitions.duration.short + "ms", - width: "200%" - }, - label: { - fontWeight: "bold" - }, - logo: { - display: "block", - marginBottom: theme.spacing(4) - }, - menuItemBtn: { - alignItems: "center", - background: "none", - border: "none", - color: theme.palette.text.secondary, - display: "flex", - marginBottom: theme.spacing(3), - padding: 0 - }, - root: { - background: theme.palette.background.default, - borderBottomRightRadius: 32, - borderTopRightRadius: 32, - padding: theme.spacing(3), - width: 260 - }, - secondaryContentActive: { - right: "100%" - }, - subMenuTopBar: { - alignItems: "center", - display: "flex", - justifyContent: "space-between", - marginBottom: theme.spacing(3) - } - }), - { - name: "SideBarDrawer" - } -); - -export default useStyles; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 10df39c8a..0dca2a71b 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -1,7 +1,7 @@ import { InputBase, TextField } from "@material-ui/core"; import { InputProps } from "@material-ui/core/Input"; import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; import Downshift from "downshift"; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 5e26d0f8f..3d83e27f8 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -9,7 +9,7 @@ import Add from "@material-ui/icons/Add"; import useElementScroll, { isScrolledToBottom } from "@saleor/hooks/useElementScroll"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; import { GetItemPropsOptions } from "downshift"; @@ -76,7 +76,9 @@ const useStyles = makeStyles( width: "100%" }, content: { - maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2), + maxHeight: `calc(${menuItemHeight * maxMenuItems}px + ${theme.spacing( + 2 + )})`, overflow: "scroll", padding: 8 }, diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx index 8acb4877e..92a545118 100644 --- a/src/components/SingleSelectField/SingleSelectField.tsx +++ b/src/components/SingleSelectField/SingleSelectField.tsx @@ -8,7 +8,7 @@ import { } from "@material-ui/core"; import { InputProps } from "@material-ui/core/Input"; import { SelectProps } from "@material-ui/core/Select"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx index f9f0995d7..d6ba349a6 100644 --- a/src/components/Skeleton.tsx +++ b/src/components/Skeleton.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/SortableChip/SortableChip.tsx b/src/components/SortableChip/SortableChip.tsx index 904fdf65f..46406b543 100644 --- a/src/components/SortableChip/SortableChip.tsx +++ b/src/components/SortableChip/SortableChip.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; 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"; import { SortableElement, SortableElementProps } from "react-sortable-hoc"; diff --git a/src/components/SortableChip/SortableHandle.tsx b/src/components/SortableChip/SortableHandle.tsx index 34786b38f..27c6bfb17 100644 --- a/src/components/SortableChip/SortableHandle.tsx +++ b/src/components/SortableChip/SortableHandle.tsx @@ -1,5 +1,5 @@ import Draggable from "@saleor/icons/Draggable"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; diff --git a/src/components/SortableChipsField/SortableChipsField.tsx b/src/components/SortableChipsField/SortableChipsField.tsx index abe688e1f..163b422f1 100644 --- a/src/components/SortableChipsField/SortableChipsField.tsx +++ b/src/components/SortableChipsField/SortableChipsField.tsx @@ -1,5 +1,5 @@ import { Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { ReorderAction } from "@saleor/types"; import React from "react"; import { SortableContainerProps } from "react-sortable-hoc"; diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx index 56a61a082..04691e500 100644 --- a/src/components/SortableTable/SortableHandle.tsx +++ b/src/components/SortableTable/SortableHandle.tsx @@ -1,6 +1,6 @@ import { TableCell } from "@material-ui/core"; import Draggable from "@saleor/icons/Draggable"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; @@ -11,7 +11,7 @@ const useStyles = makeStyles( paddingRight: theme.spacing(2) }, cursor: "grab", - width: 48 + theme.spacing(1.5) + width: `calc(48px + ${theme.spacing(1.5)})` } }), { name: "SortableHandle" } diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx index e28c718b6..f7ac455fc 100644 --- a/src/components/SortableTable/SortableTableBody.tsx +++ b/src/components/SortableTable/SortableTableBody.tsx @@ -1,6 +1,6 @@ import { TableBody } from "@material-ui/core"; import { TableBodyProps } from "@material-ui/core/TableBody"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { ReorderAction } from "@saleor/types"; import React from "react"; import { SortableContainer } from "react-sortable-hoc"; diff --git a/src/components/SquareButton/SquareButton.stories.tsx b/src/components/SquareButton/SquareButton.stories.tsx deleted file mode 100644 index 2458c5d9f..000000000 --- a/src/components/SquareButton/SquareButton.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import CloseIcon from "@material-ui/icons/Close"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import SquareButton from "./SquareButton"; - -storiesOf("Generics / Square Button", module) - .addDecorator(Decorator) - .add("default", () => ( - - - - )); diff --git a/src/components/SquareButton/SquareButton.tsx b/src/components/SquareButton/SquareButton.tsx deleted file mode 100644 index 7b64cfe16..000000000 --- a/src/components/SquareButton/SquareButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { ButtonBase } from "@material-ui/core"; -import { ButtonBaseProps } from "@material-ui/core/ButtonBase"; -import { makeStyles } from "@saleor/theme"; -import classNames from "classnames"; -import React from "react"; - -const useStyles = makeStyles( - theme => ({ - root: { - "&:hover, &:focus": { - background: "#daedeb" - }, - background: theme.palette.background.paper, - borderRadius: 16, - color: theme.palette.primary.main, - height: 48, - transition: theme.transitions.duration.shortest + "ms", - width: 48 - } - }), - { - name: "ExpandButton" - } -); - -const SquareButton: React.FC = ({ className, ...rest }) => { - const classes = useStyles({}); - - return ( - - ); -}; - -SquareButton.displayName = "SquareButton"; -export default SquareButton; diff --git a/src/components/SquareButton/index.ts b/src/components/SquareButton/index.ts deleted file mode 100644 index 7f406f96b..000000000 --- a/src/components/SquareButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./SquareButton"; -export { default } from "./SquareButton"; diff --git a/src/components/StatusChip/StatusChip.tsx b/src/components/StatusChip/StatusChip.tsx index 268abcad5..900607ff9 100644 --- a/src/components/StatusChip/StatusChip.tsx +++ b/src/components/StatusChip/StatusChip.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"; @@ -40,7 +40,7 @@ const StatusChipStyles = { const useStyles = makeStyles( theme => ({ label: { - fontSize: "1rem", + fontSize: theme.typography.body1.fontSize, fontWeight: theme.typography.fontWeightBold, textTransform: "uppercase" }, diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx index 90e1ceaa1..a87d4845c 100644 --- a/src/components/StatusLabel/StatusLabel.tsx +++ b/src/components/StatusLabel/StatusLabel.tsx @@ -1,8 +1,8 @@ import { Typography } from "@material-ui/core"; import grey from "@material-ui/core/colors/grey"; import yellow from "@material-ui/core/colors/yellow"; +import { makeStyles } from "@saleor/macaw-ui"; import Label from "@saleor/orders/components/OrderHistory/Label"; -import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index b88b25040..e7ef8ce51 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/Tab/TabContainer.tsx b/src/components/Tab/TabContainer.tsx index 7f541f9ed..1755ab828 100644 --- a/src/components/Tab/TabContainer.tsx +++ b/src/components/Tab/TabContainer.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; export interface TabContainerProps { diff --git a/src/components/TableCellAvatar/Avatar.tsx b/src/components/TableCellAvatar/Avatar.tsx index 99e0bdf84..043dc93e9 100644 --- a/src/components/TableCellAvatar/Avatar.tsx +++ b/src/components/TableCellAvatar/Avatar.tsx @@ -1,6 +1,6 @@ import { Avatar as MuiAvatar } from "@material-ui/core"; import Cached from "@material-ui/icons/Cached"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx index 9b3f21bb7..7aa77cbfa 100644 --- a/src/components/TableCellAvatar/TableCellAvatar.tsx +++ b/src/components/TableCellAvatar/TableCellAvatar.tsx @@ -1,6 +1,6 @@ import { TableCell } from "@material-ui/core"; import { TableCellProps } from "@material-ui/core/TableCell"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx index 35c6aea6a..9a68def78 100644 --- a/src/components/TableCellHeader/TableCellHeader.tsx +++ b/src/components/TableCellHeader/TableCellHeader.tsx @@ -1,6 +1,6 @@ import { TableCell } from "@material-ui/core"; import { TableCellProps } from "@material-ui/core/TableCell"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableFilter/FilterTab.tsx b/src/components/TableFilter/FilterTab.tsx index 488d45dff..0a432b42b 100644 --- a/src/components/TableFilter/FilterTab.tsx +++ b/src/components/TableFilter/FilterTab.tsx @@ -1,5 +1,5 @@ import { Tab } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; @@ -15,7 +15,7 @@ const useStyles = makeStyles( color: theme.typography.body1.color }, color: theme.typography.caption.color, - fontSize: "1rem", + fontSize: theme.typography.body1.fontSize, fontWeight: 400 }, tabRoot: { diff --git a/src/components/TableFilter/FilterTabs.tsx b/src/components/TableFilter/FilterTabs.tsx index 69220297b..b5fd27579 100644 --- a/src/components/TableFilter/FilterTabs.tsx +++ b/src/components/TableFilter/FilterTabs.tsx @@ -1,5 +1,5 @@ import { Tabs } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 77508c0e3..5510f684b 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -6,7 +6,7 @@ import { } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; import { TableHeadProps as MuiTableHeadProps } from "@material-ui/core/TableHead"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -36,7 +36,7 @@ const useStyles = makeStyles( alignItems: "center", display: "flex", height: 47, - marginRight: -theme.spacing(2) + marginRight: theme.spacing(-2) }, dragRows: { padding: 0, diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx index 912ce9dd4..843713807 100644 --- a/src/components/TablePagination/TablePagination.tsx +++ b/src/components/TablePagination/TablePagination.tsx @@ -1,8 +1,8 @@ import { TableCell, Toolbar } from "@material-ui/core"; import { IconButtonProps } from "@material-ui/core/IconButton"; import RowNumberSelect from "@saleor/components/RowNumberSelect"; +import { makeStyles } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import React from "react"; import { ListSettings } from "../../types"; diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx index f1b33c57d..68b32761a 100644 --- a/src/components/TablePagination/TablePaginationActions.tsx +++ b/src/components/TablePagination/TablePaginationActions.tsx @@ -2,8 +2,7 @@ import { IconButton } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; import ArrowLeft from "@material-ui/icons/ArrowLeft"; import ArrowRight from "@material-ui/icons/ArrowRight"; -import useTheme from "@saleor/hooks/useTheme"; -import { makeStyles, useTheme as useSaleorTheme } from "@saleor/theme"; +import { makeStyles, useTheme } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; @@ -75,8 +74,9 @@ export const TablePaginationActions: React.FC = pro } = props; const classes = useStyles(props); - const { isDark } = useTheme(); - const { direction } = useSaleorTheme(); + const { direction, themeType } = useTheme(); + + const isDark = themeType === "dark"; return (
diff --git a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx index 563546b40..e45efe377 100644 --- a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx +++ b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx @@ -10,7 +10,7 @@ import { } from "@material-ui/core"; import { TextFieldProps } from "@material-ui/core/TextField"; import DropdownIcon from "@material-ui/icons/ArrowDropDown"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import MenuToggle from "../MenuToggle"; diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx deleted file mode 100644 index e4db1eb4e..000000000 --- a/src/components/Theme/ThemeProvider.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { MuiThemeProvider } from "@material-ui/core/styles"; -import { - ExtensionMessageType, - sendMessageToExtension, - ThemeChangeMessage -} from "@saleor/macaw-ui/extensions"; -import React, { useEffect } from "react"; -import Helmet from "react-helmet"; - -import Baseline from "../../Baseline"; -import createTheme from "../../theme"; -import { dark, light } from "./themes"; - -interface IThemeContext { - isDark: boolean; - sendThemeToExtension: () => void; - toggleTheme: () => void; -} -export const ThemeContext = React.createContext({ - isDark: false, - sendThemeToExtension: () => undefined, - toggleTheme: () => undefined -}); - -interface ThemeProviderProps { - isDefaultDark?: boolean; -} -const ThemeProvider: React.FC = ({ - children, - isDefaultDark -}) => { - const [isDark, setDark] = React.useState(isDefaultDark); - const sendThemeToExtension = () => - sendMessageToExtension( - { - theme: isDark ? "dark" : "light", - type: ExtensionMessageType.THEME - }, - "*" - ); - - const toggleTheme = () => { - setDark(!isDark); - localStorage.setItem("theme", (!isDark).toString()); - }; - - useEffect(() => { - sendThemeToExtension(); - }, [isDark]); - - const theme = createTheme(isDark ? dark : light); - - return ( - - - - - - - {children} - - - ); -}; -ThemeProvider.defaultProps = { - isDefaultDark: false -}; -export default ThemeProvider; diff --git a/src/components/Theme/index.ts b/src/components/Theme/index.ts deleted file mode 100644 index 337b9a0d3..000000000 --- a/src/components/Theme/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ThemeProvider"; -export * from "./ThemeProvider"; diff --git a/src/components/Theme/themes.ts b/src/components/Theme/themes.ts deleted file mode 100644 index 9b78cb221..000000000 --- a/src/components/Theme/themes.ts +++ /dev/null @@ -1,147 +0,0 @@ -import { AlertColors } from "@saleor/theme"; - -export type IThemeColors = Record< - "primary" | "secondary" | "error" | "paperBorder" | "autofill", - string -> & { - highlightInactive: Record<"default", string>; -} & { - background: Record<"default" | "paper", string>; -} & { - checkbox: Record<"default", string>; -} & { - divider: string; -} & { - font: Record< - "default" | "gray" | "button" | "textButton" | "textDisabled", - string - >; -} & { - gray: Record<"default" | "disabled", string>; -} & { - input: Record< - | "default" - | "border" - | "disabled" - | "disabledBackground" - | "disabledText" - | "error" - | "text" - | "textHover", - string - >; -} & { - alert: AlertColors; -} & { - theme: "dark" | "light"; -}; - -export const dark: IThemeColors = { - alert: { - paper: { - error: "#E0444E", - info: "#2E2F31", - success: "#5DC292", - warning: "#E29A2E" - }, - icon: { - error: "#FE6E76", - info: "#FAFAFA", - success: "#5DC292", - warning: "#FFB84E" - } - }, - highlightInactive: { - default: "#78797A" - }, - autofill: "#5D5881", - background: { - default: "#1D1E1F", - paper: "#2E2F31" - }, - checkbox: { - default: "#FFFFFF" - }, - divider: "#252728", - error: "#C22D74", - font: { - button: "#202124", - default: "#FCFCFC", - gray: "#9E9D9D", - textButton: "#FFFFFF", - textDisabled: "#FCFCFC" - }, - gray: { - default: "#202124", - disabled: "rgba(32, 33, 36, 0.6)" - }, - input: { - border: "#9d9d9d", - default: "#25262A", - disabled: "#393939", - disabledBackground: "#292A2D", - disabledText: "#9D9D9D", - error: "#8C2054", - text: "#FCFCFC", - textHover: "#616161" - }, - paperBorder: "#252728", - primary: "#13BEBB", - secondary: "#21125E", - theme: "dark" -}; -export const light: IThemeColors = { - alert: { - paper: { - error: "#FFD6D9", - info: "#FFFFFF", - success: "#DFF3E9", - warning: "#FFF4E4" - }, - icon: { - error: "#FE6E76", - info: "#28234A", - success: "#5DC292", - warning: "#FFB84E" - } - }, - highlightInactive: { - default: "#C8C8C8" - }, - autofill: "#f4f6c5", - background: { - default: "#EFF5F8", - paper: "#FFFFFF" - }, - checkbox: { - default: "#616161" - }, - divider: "#EAEAEA", - error: "#FE6D76", - font: { - button: "#FFFFFF", - default: "#3D3D3D", - gray: "#616161", - textButton: "#06847B", - textDisabled: "#616161" - }, - gray: { - default: "#C8C8C8", - disabled: "rgba(216, 216, 216, 0.3)" - }, - - input: { - border: "#BDBDBD", - default: "#FFFFFF", - disabled: "#EAEAEA", - disabledBackground: "#F4F4F4", - disabledText: "#9D9D9D", - error: "#8C2054", - text: "#3D3D3D", - textHover: "#616161" - }, - paperBorder: "#EAEAEA", - primary: "#06847B", - secondary: "#21125E", - theme: "light" -}; diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index f8219951b..6232e5533 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -1,7 +1,7 @@ import { Avatar, Button, CardContent, TextField } from "@material-ui/core"; import deepPurple from "@material-ui/core/colors/deepPurple"; import PersonIcon from "@material-ui/icons/Person"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -34,10 +34,10 @@ const useStyles = makeStyles( background: theme.palette.background.paper }, noteRoot: { - left: -theme.spacing(8.5) - 1, + left: theme.spacing(-8.5), marginBottom: theme.spacing(3), position: "relative", - width: `calc(100% + ${theme.spacing(8.5)}px)` + width: `calc(100% + ${theme.spacing(8.5)})` }, noteTitle: { "&:last-child": { diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx index a3bd1cff5..92321f155 100644 --- a/src/components/Timeline/TimelineEvent.tsx +++ b/src/components/Timeline/TimelineEvent.tsx @@ -5,7 +5,7 @@ import { Typography } from "@material-ui/core"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import TimelineEventHeader, { TitleElement } from "./TimelineEventHeader"; @@ -60,7 +60,7 @@ const useStyles = makeStyles( background: theme.palette.background.default, content: "''", height: "calc(50% - 4px)", - left: -theme.spacing(3) - 2, + left: -26, position: "absolute", top: "calc(50% + 4px)", width: "2px" diff --git a/src/components/Timeline/TimelineEventHeader.tsx b/src/components/Timeline/TimelineEventHeader.tsx index 5911cd37a..cf697430b 100644 --- a/src/components/Timeline/TimelineEventHeader.tsx +++ b/src/components/Timeline/TimelineEventHeader.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import useNavigator from "@saleor/hooks/useNavigator"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { DateTime } from "../Date"; @@ -31,7 +31,7 @@ const useStyles = makeStyles( marginTop: theme.spacing(2) }, titleElement: { - marginRight: "0.5rem" + marginRight: theme.spacing(0.5) } }), { name: "TimelineEventHeader" } diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx index 8a96801c0..9605b2b7a 100644 --- a/src/components/Timeline/TimelineNote.tsx +++ b/src/components/Timeline/TimelineNote.tsx @@ -1,7 +1,7 @@ import { Avatar, Card, CardContent, Typography } from "@material-ui/core"; import * as colors from "@material-ui/core/colors"; import PersonIcon from "@material-ui/icons/Person"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import CRC from "crc-32"; import React from "react"; diff --git a/src/components/TypeDeleteWarningDialog/styles.ts b/src/components/TypeDeleteWarningDialog/styles.ts index 0e5e83c14..87bffe23b 100644 --- a/src/components/TypeDeleteWarningDialog/styles.ts +++ b/src/components/TypeDeleteWarningDialog/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useTypeDeleteWarningDialogStyles = makeStyles( theme => ({ diff --git a/src/components/UserChip/UserChip.tsx b/src/components/UserChip/UserChip.tsx index 9cb95556a..ea456c145 100644 --- a/src/components/UserChip/UserChip.tsx +++ b/src/components/UserChip/UserChip.tsx @@ -1,80 +1,16 @@ -import { - Avatar, - Chip, - ClickAwayListener, - FormControlLabel, - Grow, - Hidden, - MenuItem, - MenuList as Menu, - Paper, - Popper, - Switch -} from "@material-ui/core"; +import { FormControlLabel, Switch } from "@material-ui/core"; import { User } from "@saleor/fragments/types/User"; -import ArrowDropdown from "@saleor/icons/ArrowDropdown"; +import { makeStyles, UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui"; import { getUserInitials, getUserName } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; -import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; const useStyles = makeStyles( - theme => ({ - arrow: { - [theme.breakpoints.down("sm")]: { - marginLeft: 0 - }, - marginLeft: theme.spacing(2), - transition: theme.transitions.duration.standard + "ms" - }, - avatar: { - "&&": { - [theme.breakpoints.down("sm")]: { - height: 40, - width: 40 - }, - height: 32, - width: 32 - } - }, - avatarInitials: { - color: theme.palette.primary.contrastText - }, - avatarPlaceholder: { - alignItems: "center", - background: theme.palette.primary.main, - borderRadius: "100%", - display: "flex", - justifyContent: "center" - }, - popover: { - marginTop: theme.spacing(2), - zIndex: 10 - }, - rotate: { - transform: "rotate(180deg)" - }, + () => ({ switch: { "&&:hover": { background: "transparent" } - }, - userChip: { - [theme.breakpoints.down("sm")]: { - height: 48 - }, - backgroundColor: theme.palette.background.paper, - borderRadius: 24, - color: theme.palette.text.primary, - height: 40, - padding: theme.spacing(0.5) - }, - userMenuContainer: { - position: "relative" - }, - userMenuItem: { - textAlign: "right" } }), { @@ -98,122 +34,50 @@ const UserChip: React.FC = ({ onThemeToggle }) => { const classes = useStyles({}); - const [isMenuOpened, setMenuState] = React.useState(false); - const anchor = React.useRef(); const intl = useIntl(); - const handleLogout = () => { - setMenuState(false); - onLogout(); - }; - - const handleViewerProfile = () => { - setMenuState(false); - onProfileClick(); - }; - return ( -
- - ) : ( -
-
- {getUserInitials(user)} -
-
- ) - } - classes={{ - avatar: classes.avatar - }} - className={classes.userChip} - label={ - <> - {getUserName(user, true)} - - - } - onClick={() => setMenuState(!isMenuOpened)} - data-test="userMenu" - /> - + - {({ TransitionProps, placement }) => ( - - - setMenuState(false)} - mouseEvent="onClick" - > - - - - - - - - - - } - label={intl.formatMessage({ - defaultMessage: "Enable Dark Mode", - description: "button" - })} - onChange={onThemeToggle} - /> - - - - - - )} - -
+ + + + + + + + } + label={intl.formatMessage({ + defaultMessage: "Enable Dark Mode", + description: "button" + })} + onChange={onThemeToggle} + /> + + ); }; UserChip.displayName = "UserChip"; diff --git a/src/components/VisibilityCard/DateVisibilitySelector.tsx b/src/components/VisibilityCard/DateVisibilitySelector.tsx index 583495d71..21afd4327 100644 --- a/src/components/VisibilityCard/DateVisibilitySelector.tsx +++ b/src/components/VisibilityCard/DateVisibilitySelector.tsx @@ -1,6 +1,6 @@ import closeIcon from "@assets/images/close-thin.svg"; import { Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React, { useState } from "react"; import FormSpacer from "../FormSpacer"; diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index e065dda0e..494118cca 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -5,7 +5,7 @@ import Hr from "@saleor/components/Hr"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { ChangeEvent } from "@saleor/hooks/useForm"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { UserError } from "@saleor/types"; import { getFieldError } from "@saleor/utils/errors"; import classNames from "classnames"; diff --git a/src/components/messages/MessageManager.tsx b/src/components/messages/MessageManager.tsx deleted file mode 100644 index 130f60dcf..000000000 --- a/src/components/messages/MessageManager.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import { - Button, - IconButton, - SnackbarContent, - Typography -} from "@material-ui/core"; -import CloseIcon from "@material-ui/icons/Close"; -import classNames from "classnames"; -import React, { useState } from "react"; -import { FormattedMessage } from "react-intl"; - -import { INotification } from "./"; -import { useStyles } from "./styles"; - -export interface IMessageManagerProps extends INotification { - onMouseEnter?: () => void; - onMouseLeave?: () => void; -} - -export const MessageManagerTemplate: React.FC = props => { - const { - close, - onMouseEnter, - onMouseLeave, - message: { actionBtn, expandText, status = "info", title, text, onUndo }, - timeout - } = props; - - const [expand, setExpand] = useState(false); - - const classes = useStyles({}); - const id = props.id.toString(); - - return ( -
- - {title && ( - - {title} - - )} - - {text} - - - } - action={[ - !!expandText ? ( -
-
-

{expandText}

-
- -
- ) : ( - undefined - ), -
- {!!onUndo && ( - - )} - {!!actionBtn && ( - - )} -
, - - - , -
-
-
- ]} - /> -
- ); -}; diff --git a/src/components/messages/MessageManagerProvider.tsx b/src/components/messages/MessageManagerProvider.tsx index 280ff0a5b..15bd859f9 100644 --- a/src/components/messages/MessageManagerProvider.tsx +++ b/src/components/messages/MessageManagerProvider.tsx @@ -1,33 +1,23 @@ import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config"; +import { Notification } from "@saleor/macaw-ui"; import React, { useCallback, useEffect, useRef, useState } from "react"; -import { createPortal } from "react-dom"; import { TransitionGroup } from "react-transition-group"; -import { - INotification, - ITimer, - MessageContext, - MessageManagerTemplate -} from "."; +import { INotification, ITimer, MessageContext } from "."; import Container from "./Container"; +import { useStyles } from "./styles"; import Transition from "./Transition"; const MessageManagerProvider = ({ children }) => { - const root = useRef(null); + const classes = useStyles(); const timersArr = useRef([]); const [notifications, setNotifications] = useState([]); useEffect(() => { - root.current = document.createElement("div"); - root.current.id = "__message-manager__"; - document.body.appendChild(root.current); const timersArrRef = timersArr.current; return () => { timersArrRef.forEach(timer => clearTimeout(timer.timeoutId)); - if (root.current) { - document.body.removeChild(root.current); - } }; }, []); @@ -101,33 +91,43 @@ const MessageManagerProvider = ({ children }) => { }; return ( - - {children} - {root.current && - createPortal( - - {!!notifications.length && - notifications.map(notification => ( - - pauseTimer(notification), - onMouseLeave: () => resumeTimer(notification) - } - : {})} - /> - - ))} - , - root.current - )} - + <> + + {children} + + + {!!notifications.length && + notifications.map(notification => ( + + pauseTimer(notification), + onMouseLeave: () => resumeTimer(notification) + } + : {})} + onClose={notification.close} + title={notification.message.title} + type={notification.message.status || "info"} + content={notification.message.text} + {...(!!notification.message.actionBtn + ? { + action: { + label: notification.message.actionBtn.label, + onClick: notification.message.actionBtn.action + } + } + : {})} + className={classes.notification} + /> + + ))} + + ); }; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index f2e574ae3..7de8863e3 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -43,6 +43,5 @@ export interface INotificationContext { export type IMessageContext = (message: IMessage) => void; export const MessageContext = createContext(null); -export * from "./MessageManager"; export * from "./MessageManagerProvider"; export { default } from "./MessageManagerProvider"; diff --git a/src/components/messages/styles.ts b/src/components/messages/styles.ts index da7c70052..6116f08e7 100644 --- a/src/components/messages/styles.ts +++ b/src/components/messages/styles.ts @@ -1,38 +1,7 @@ -import errorIcon from "@assets/images/error-icon.svg"; -import infoIcon from "@assets/images/info-icon.svg"; -import successIcon from "@assets/images/success-icon.svg"; -import warningIcon from "@assets/images/warning-icon.svg"; -import { darken } from "@material-ui/core/styles/colorManipulator"; -import { makeStyles } from "@saleor/theme"; - -const successColor = "#60DAA0"; -const warningColor = "#FFB84E"; -const infoColor = "#CAD8DF"; -const errorColor = "#FE6E76"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( - theme => ({ - "@keyframes bar": { - from: { transform: "translateX(-100%)" }, - to: { transform: "translateX(0)" } - }, - actionContainer: { - marginLeft: -8 - }, - closeBtn: { - "& svg": { - maxHeight: 18, - maxWidth: 18 - }, - color: "#fff", - padding: 10, - position: "absolute", - right: 5, - top: 7 - }, - closeBtnInfo: { - color: theme.palette.text.primary - }, + () => ({ container: { display: "grid", gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr))", @@ -44,169 +13,10 @@ export const useStyles = makeStyles( width: "100%", zIndex: 10000 }, - error: { - "& > div": { - "& button span": { - color: "#fff" - } - }, - "& > div:first-child": { - "&:before": { - backgroundImage: `url(${errorIcon})` - } - }, - backgroundColor: errorColor, - color: "#fff" - }, - expandBtn: { - "&:before": { - borderLeft: "4px solid transparent", - borderRight: "4px solid transparent", - borderTop: "8px solid #fff", - content: "''", - display: "block", - height: 0, - position: "absolute", - right: 0, - top: "50%", - transform: "translateY(-50%)", - width: 0 - }, - background: "transparent", - border: "none", - color: "#fff", - cursor: "pointer", - fontSize: theme.spacing(2), - outline: "none", - padding: 0, - paddingRight: 15, - position: "relative" - }, - expandBtnInfo: { - "&:before": { - borderTop: `8px solid ${theme.palette.text.primary}` - }, - color: theme.palette.text.primary - }, - expandedContainer: { - "& p": { - margin: theme.spacing(1, 0) - }, - color: "#fff", - marginBottom: 5 - }, - expandedContainerContent: { - overflow: "hidden", - transition: "max-height .6s ease" - }, - expandedContainerInfo: { - color: theme.palette.text.secondary - }, - expandedText: { - maxHeight: 500 - }, - hiddenText: { - maxHeight: 0 - }, - info: { - "& > div:first-child": { - "&:before": { - backgroundImage: `url(${infoIcon})` - } - } - }, - progressBar: { - animation: `$bar var(--animationTime) ease both`, - backgroundColor: infoColor, - height: 8, - transform: "translateX(-100%)", - width: "100%" - }, - progressBarContainer: { - borderRadius: "0 0 4px 4px", - bottom: 0, - left: 0, - overflow: "hidden", - position: "absolute", - width: "calc(100%)" - }, - progressBarError: { - backgroundColor: darken(errorColor, 0.2) - }, - progressBarSuccess: { - backgroundColor: darken(successColor, 0.2) - }, - progressBarWarning: { - backgroundColor: darken(warningColor, 0.2) - }, - snackbar: { - "& > div": { - paddingLeft: 60 - }, - "& > div:first-child": { - "&:before": { - backgroundRepeat: "no-repeat", - backgroundSize: "contain", - content: "''", - display: "block", - height: 32, - left: 15, - position: "absolute", - top: 13, - width: 32 - }, - paddingTop: 16, - position: "relative" - }, - "&:hover": { - "& [class*='progressBar']": { - animationPlayState: "paused" - } - }, - borderRadius: 4, - paddingBottom: 15, - paddingLeft: 5, - paddingRight: 45, - position: "relative" - }, - snackbarContainer: { - borderRadius: 4, - display: "block", - margin: theme.spacing(2, 2, 0, 2), - maxWidth: 450, - pointerEvents: "all", - position: "relative" - }, - success: { - "& > div:first-child": { - "&:before": { - backgroundImage: `url(${successIcon})` - } - }, - "& button span": { - color: "#fff" - }, - backgroundColor: successColor, - color: "#fff" - }, - text: { - color: "#fff", - paddingTop: 5 - }, - textInfo: { - paddingTop: 5 - }, - warning: { - "& > div:first-child": { - "&:before": { - backgroundImage: `url(${warningIcon})` - } - }, - "& button span": { - color: "#fff" - }, - backgroundColor: warningColor, - color: "#fff" + notification: { + // Parent container has disabled pointer events so we need to turn them on + // for action and timer pausing to work + pointerEvents: "all" } }), { name: "MessageManager" } diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx index 677e5c7da..0285f320d 100644 --- a/src/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.tsx @@ -2,7 +2,7 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import { IconProps } from "@material-ui/core/Icon"; import { User } from "@saleor/fragments/types/User"; import { sectionNames } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -56,7 +56,7 @@ const useStyles = makeStyles( }, borderTop: `solid 1px ${theme.palette.divider}`, display: "grid", - gridColumnGap: theme.spacing(4) + "px", + gridColumnGap: theme.spacing(4), gridTemplateColumns: "1fr 3fr", paddingTop: theme.spacing(3) }, diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx index 76d9931ba..2e60aad73 100644 --- a/src/customers/components/CustomerAddress/CustomerAddress.tsx +++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx @@ -3,7 +3,7 @@ import AddressFormatter from "@saleor/components/AddressFormatter"; import CardMenu from "@saleor/components/CardMenu"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerAddressChoiceCard/styles.ts b/src/customers/components/CustomerAddressChoiceCard/styles.ts index 2bc78adff..de30654a1 100644 --- a/src/customers/components/CustomerAddressChoiceCard/styles.ts +++ b/src/customers/components/CustomerAddressChoiceCard/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx index 13114da02..5de7c58c4 100644 --- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx +++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx @@ -16,7 +16,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; -import { createStyles, WithStyles, withStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { AddressInput } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { mapCountriesToChoices } from "@saleor/utils/maps"; @@ -37,116 +37,114 @@ export interface CustomerAddressDialogProps { onConfirm: (data: AddressInput) => void; } -const styles = createStyles({ - overflow: { - overflowY: "visible" - } -}); - -const CustomerAddressDialog = withStyles( - styles, - {} -)( - ({ - address, - classes, - confirmButtonState, - countries, - errors, - open, - variant, - onClose, - onConfirm - }: CustomerAddressDialogProps & WithStyles) => { - const [countryDisplayName, setCountryDisplayName] = useStateFromProps( - address?.country.country || "" - ); - const { - errors: validationErrors, - submit: handleSubmit - } = useAddressValidation(onConfirm); - const dialogErrors = useModalDialogErrors( - [...errors, ...validationErrors], - open - ); - - const initialForm: AddressTypeInput = { - city: address?.city || "", - cityArea: address?.cityArea || "", - companyName: address?.companyName || "", - country: address?.country.code || "", - countryArea: address?.countryArea || "", - firstName: address?.firstName || "", - lastName: address?.lastName || "", - phone: address?.phone || "", - postalCode: address?.postalCode || "", - streetAddress1: address?.streetAddress1 || "", - streetAddress2: address?.streetAddress2 || "" - }; - - const countryChoices = mapCountriesToChoices(countries || []); - - return ( - - - {({ change, data }) => { - const handleCountrySelect = createSingleAutocompleteSelectHandler( - change, - setCountryDisplayName, - countryChoices - ); - - return ( - <> - - {variant === "create" ? ( - - ) : ( - - )} - - - - - - - - - - - - ); - }} - - - ); - } +const useStyles = makeStyles( + { + overflow: { + overflowY: "visible" + } + }, + { name: "CustomerAddressDialog" } ); + +const CustomerAddressDialog: React.FC = ({ + address, + confirmButtonState, + countries, + errors, + open, + variant, + onClose, + onConfirm +}) => { + const classes = useStyles(); + const [countryDisplayName, setCountryDisplayName] = useStateFromProps( + address?.country.country || "" + ); + const { + errors: validationErrors, + submit: handleSubmit + } = useAddressValidation(onConfirm); + const dialogErrors = useModalDialogErrors( + [...errors, ...validationErrors], + open + ); + + const initialForm: AddressTypeInput = { + city: address?.city || "", + cityArea: address?.cityArea || "", + companyName: address?.companyName || "", + country: address?.country.code || "", + countryArea: address?.countryArea || "", + firstName: address?.firstName || "", + lastName: address?.lastName || "", + phone: address?.phone || "", + postalCode: address?.postalCode || "", + streetAddress1: address?.streetAddress1 || "", + streetAddress2: address?.streetAddress2 || "" + }; + + const countryChoices = mapCountriesToChoices(countries || []); + + return ( + +
+ {({ change, data }) => { + const handleCountrySelect = createSingleAutocompleteSelectHandler( + change, + setCountryDisplayName, + countryChoices + ); + + return ( + <> + + {variant === "create" ? ( + + ) : ( + + )} + + + + + + + + + + + + ); + }} +
+ + ); +}; CustomerAddressDialog.displayName = "CustomerAddressDialog"; export default CustomerAddressDialog; diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx index 6fecf97e6..f29acc629 100644 --- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx +++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx @@ -1,9 +1,9 @@ import { Button, Typography } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; +import { Backlink } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import { getStringOrPlaceholder, renderCollection } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; @@ -92,9 +92,9 @@ const CustomerAddressListPage: React.FC = props => return ( - + {intl.formatMessage(messages.fullNameDetail, { fullName })} - + {!isEmpty && ( = ({ return ( - + - + = ({ />
- diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx index aebf42761..7ff55ce5c 100644 --- a/src/customers/components/CustomerDetails/CustomerDetails.tsx +++ b/src/customers/components/CustomerDetails/CustomerDetails.tsx @@ -3,8 +3,8 @@ import CardTitle from "@saleor/components/CardTitle"; import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import Skeleton from "@saleor/components/Skeleton"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import moment from "moment-timezone"; diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx index cc85f9e74..3f52167ab 100644 --- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx +++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx @@ -1,4 +1,3 @@ -import AppHeader from "@saleor/components/AppHeader"; import { CardSpacer } from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; @@ -7,10 +6,11 @@ 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 { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; @@ -80,9 +80,9 @@ const CustomerDetailsPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.customers)} - +
@@ -119,10 +119,10 @@ const CustomerDetailsPage: React.FC = ({
- diff --git a/src/customers/components/CustomerInfo/CustomerInfo.tsx b/src/customers/components/CustomerInfo/CustomerInfo.tsx index 9292f2c02..e4bd44639 100644 --- a/src/customers/components/CustomerInfo/CustomerInfo.tsx +++ b/src/customers/components/CustomerInfo/CustomerInfo.tsx @@ -4,7 +4,7 @@ import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; 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 React from "react"; diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx index 1317ee827..67873aeed 100644 --- a/src/customers/components/CustomerList/CustomerList.tsx +++ b/src/customers/components/CustomerList/CustomerList.tsx @@ -6,8 +6,8 @@ import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { CustomerListUrlSortField } from "@saleor/customers/urls"; +import { makeStyles } from "@saleor/macaw-ui"; import { getUserName, 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"; diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx index db916fcda..79e791a90 100644 --- a/src/customers/components/CustomerOrders/CustomerOrders.tsx +++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx @@ -12,7 +12,7 @@ import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerStats/CustomerStats.tsx b/src/customers/components/CustomerStats/CustomerStats.tsx index 699e320f0..cf224e438 100644 --- a/src/customers/components/CustomerStats/CustomerStats.tsx +++ b/src/customers/components/CustomerStats/CustomerStats.tsx @@ -3,7 +3,7 @@ import CardTitle from "@saleor/components/CardTitle"; import { DateTime } from "@saleor/components/Date"; import { Hr } from "@saleor/components/Hr"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx index 0bc04990b..08381506d 100644 --- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx +++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx @@ -14,7 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; 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"; diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx index a6df42221..a819273f8 100644 --- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx +++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx @@ -14,7 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; 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"; diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx index b73699d85..9b701c865 100644 --- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx +++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx @@ -21,7 +21,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; // tslint:disable no-submodule-imports import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { filter } from "fuzzaldrin"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx index 2d2ea6d9e..53bb5f444 100644 --- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx +++ b/src/discounts/components/DiscountProducts/DiscountProducts.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"; @@ -40,14 +40,14 @@ const useStyles = makeStyles( "&:last-child": { paddingRight: 0 }, - width: 76 + theme.spacing(0.5) + width: `calc(76px + ${theme.spacing(0.5)})` }, colName: { paddingLeft: 0, width: "auto" }, colNameLabel: { - marginLeft: AVATAR_MARGIN + theme.spacing(3) + marginLeft: `calc(${AVATAR_MARGIN}px + ${theme.spacing(3)})` }, colPublished: { width: 150 diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx index a1a28934d..6a4292b25 100644 --- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx @@ -1,5 +1,4 @@ import { ChannelSaleData } 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,10 +6,11 @@ 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 { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import React from "react"; import { useIntl } from "react-intl"; @@ -85,9 +85,9 @@ const SaleCreatePage: React.FC = ({ ); return ( - + {intl.formatMessage(sectionNames.sales)} - + = ({ />
- diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index edceb442b..866d86305 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -1,5 +1,4 @@ import { ChannelSaleData } 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,11 +6,12 @@ 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 { Tab, TabContainer } from "@saleor/components/Tab"; import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import React from "react"; import { useIntl } from "react-intl"; @@ -151,9 +151,9 @@ const SaleDetailsPage: React.FC = ({ ); return ( - + {intl.formatMessage(sectionNames.sales)} - + sale.name)} />
@@ -308,13 +308,13 @@ const SaleDetailsPage: React.FC = ({ />
- diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx index f6d650a56..45d87cd63 100644 --- a/src/discounts/components/SaleList/SaleList.tsx +++ b/src/discounts/components/SaleList/SaleList.tsx @@ -10,8 +10,8 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { SaleListUrlSortField } from "@saleor/discounts/urls"; import { canBeSorted } from "@saleor/discounts/views/SaleList/sort"; +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 { SaleType } from "@saleor/types/globalTypes"; import { getArrowDirection } from "@saleor/utils/sort"; diff --git a/src/discounts/components/SaleType/SaleType.tsx b/src/discounts/components/SaleType/SaleType.tsx index 7cdeb8e08..cc5e21e1d 100644 --- a/src/discounts/components/SaleType/SaleType.tsx +++ b/src/discounts/components/SaleType/SaleType.tsx @@ -4,7 +4,7 @@ import RadioGroupField, { RadioGroupFieldChoice } from "@saleor/components/RadioGroupField"; import { FormChange } from "@saleor/hooks/useForm"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { SaleType as SaleTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { IntlShape, useIntl } from "react-intl"; diff --git a/src/discounts/components/SaleValue/styles.ts b/src/discounts/components/SaleValue/styles.ts index 2e1aef9a2..8ede8e140 100644 --- a/src/discounts/components/SaleValue/styles.ts +++ b/src/discounts/components/SaleValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx index 3f88d51d7..f5b246f54 100644 --- a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx +++ b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx @@ -1,5 +1,4 @@ import { ChannelVoucherData } 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,13 +6,14 @@ 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 { createChannelsChangeHandler, createDiscountTypeChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import React from "react"; import { useIntl } from "react-intl"; @@ -115,9 +115,9 @@ const VoucherCreatePage: React.FC = ({ ); return ( - + {intl.formatMessage(sectionNames.vouchers)} - + = ({ />
- diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index 639fb6c30..99d939d1b 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx @@ -1,6 +1,5 @@ import { Typography } from "@material-ui/core"; import { ChannelVoucherData } 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"; @@ -9,7 +8,7 @@ import CountryList from "@saleor/components/CountryList"; 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 { Tab, TabContainer } from "@saleor/components/Tab"; import { createChannelsChangeHandler, @@ -18,6 +17,7 @@ import { import { DiscountTypeEnum, RequirementsPicker } from "@saleor/discounts/types"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -211,9 +211,9 @@ const VoucherDetailsPage: React.FC = ({ ); return ( - + {intl.formatMessage(sectionNames.vouchers)} - +
@@ -421,13 +421,13 @@ const VoucherDetailsPage: React.FC = ({ />
- diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx index 6e21214b6..071dfd3be 100644 --- a/src/discounts/components/VoucherList/VoucherList.tsx +++ b/src/discounts/components/VoucherList/VoucherList.tsx @@ -10,8 +10,8 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { VoucherListUrlSortField } from "@saleor/discounts/urls"; import { canBeSorted } from "@saleor/discounts/views/VoucherList/sort"; +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 { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import { getArrowDirection } from "@saleor/utils/sort"; diff --git a/src/discounts/components/VoucherRequirements/styles.ts b/src/discounts/components/VoucherRequirements/styles.ts index ef2642b77..a78ce9b87 100644 --- a/src/discounts/components/VoucherRequirements/styles.ts +++ b/src/discounts/components/VoucherRequirements/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/discounts/components/VoucherValue/styles.ts b/src/discounts/components/VoucherValue/styles.ts index d4934216a..d82e4a66a 100644 --- a/src/discounts/components/VoucherValue/styles.ts +++ b/src/discounts/components/VoucherValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/home/components/HomeActivityCard/HomeActivityCard.tsx b/src/home/components/HomeActivityCard/HomeActivityCard.tsx index aaba7fd66..626a04c1b 100644 --- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx +++ b/src/home/components/HomeActivityCard/HomeActivityCard.tsx @@ -8,7 +8,7 @@ import { import CardTitle from "@saleor/components/CardTitle"; import { DateTime } from "@saleor/components/Date"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx index 315acf725..1de38e8c0 100644 --- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx +++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx @@ -1,6 +1,6 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import { IconProps } from "@material-ui/core/Icon"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx index 5f6b41a7e..5e3ca02eb 100644 --- a/src/home/components/HomeHeader/HomeHeader.tsx +++ b/src/home/components/HomeHeader/HomeHeader.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index 8cc93a5e2..239755709 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -9,7 +9,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; import RequirePermissions from "@saleor/components/RequirePermissions"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 07d68e9f2..88afce424 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -4,7 +4,7 @@ import Grid from "@saleor/components/Grid"; import Money from "@saleor/components/Money"; import RequirePermissions from "@saleor/components/RequirePermissions"; import Skeleton from "@saleor/components/Skeleton"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx index 935520209..76cce9922 100644 --- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx +++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx @@ -10,7 +10,7 @@ import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; -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"; diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts deleted file mode 100644 index e945a468a..000000000 --- a/src/hooks/useTheme.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ThemeContext } from "@saleor/components/Theme"; -import { useContext } from "react"; - -function useTheme() { - const themeInfo = useContext(ThemeContext); - return themeInfo; -} -export default useTheme; diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx index 90242ae47..a6f3717b6 100644 --- a/src/icons/ChevronDown.tsx +++ b/src/icons/ChevronDown.tsx @@ -1,8 +1,8 @@ -import useTheme from "@saleor/hooks/useTheme"; +import { useTheme } from "@saleor/macaw-ui"; import React from "react"; const ChevronDown: React.FC = () => { - const { isDark } = useTheme(); + const { themeType } = useTheme(); return ( { > diff --git a/src/icons/Trash.tsx b/src/icons/Trash.tsx index 8d881a028..106a56a4d 100644 --- a/src/icons/Trash.tsx +++ b/src/icons/Trash.tsx @@ -1,9 +1,9 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; -import useTheme from "@saleor/hooks/useTheme"; +import { useTheme } from "@saleor/macaw-ui"; import React from "react"; const Trash: React.FC = () => { - const { isDark } = useTheme(); + const { themeType } = useTheme(); const TrashComponent = createSvgIcon( { fill-rule="evenodd" clip-rule="evenodd" d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z" - fill={isDark ? "#FAFAFA" : "#28234A"} + fill={themeType === "dark" ? "#FAFAFA" : "#28234A"} fill-opacity="0.6" /> , diff --git a/src/index.tsx b/src/index.tsx index ca36d9d1a..fd8449795 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ import useAppState from "@saleor/hooks/useAppState"; +import { ThemeProvider } from "@saleor/macaw-ui"; import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory"; import { ApolloClient } from "apollo-client"; import { ApolloLink } from "apollo-link"; @@ -34,7 +35,6 @@ import { DateProvider } from "./components/Date"; import { LocaleProvider } from "./components/Locale"; import MessageManagerProvider from "./components/messages"; import { ShopProvider } from "./components/Shop"; -import ThemeProvider from "./components/Theme"; import { WindowTitle } from "./components/WindowTitle"; import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config"; import ConfigurationSection, { createConfigurationMenu } from "./configuration"; @@ -60,6 +60,7 @@ import ShippingSection from "./shipping"; import SiteSettingsSection from "./siteSettings"; import StaffSection from "./staff"; import TaxesSection from "./taxes"; +import themeOverrides from "./themeOverrides"; import TranslationsSection from "./translations"; import { PermissionEnum } from "./types/globalTypes"; import WarehouseSection from "./warehouses"; @@ -104,36 +105,32 @@ const apolloClient = new ApolloClient({ link: authLink.concat(link) }); -const App: React.FC = () => { - const isDark = localStorage.getItem("theme") === "true"; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; +const App: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + +); const Routes: React.FC = () => { const intl = useIntl(); diff --git a/src/intl.ts b/src/intl.ts index 5420f009f..b9fd7c3cc 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -43,6 +43,9 @@ export const commonMessages = defineMessages({ endHour: { defaultMessage: "End Hour" }, + error: { + defaultMessage: "Error" + }, firstName: { defaultMessage: "First Name" }, diff --git a/src/misc.ts b/src/misc.ts index bde1e26b8..e1c9a28d7 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -3,7 +3,7 @@ import { MutationFunction, MutationResult } from "react-apollo"; import { defineMessages, IntlShape } from "react-intl"; import urlJoin from "url-join"; -import { ConfirmButtonTransitionState } from "./components/ConfirmButton/ConfirmButton"; +import { ConfirmButtonTransitionState } from "./components/ConfirmButton"; import { StatusType } from "./components/StatusChip/types"; import { StatusLabelProps } from "./components/StatusLabel"; import { APP_MOUNT_URI } from "./config"; diff --git a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx index f7c28f379..2c212b51a 100644 --- a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx +++ b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx @@ -1,14 +1,14 @@ import { Typography } from "@material-ui/core"; -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 SaveButtonBar from "@saleor/components/SaveButtonBar"; +import Savebar from "@saleor/components/Savebar"; import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment"; 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"; @@ -85,9 +85,9 @@ const MenuDetailsPage: React.FC = ({
{({ change, data, hasChanged, submit }) => ( - + {intl.formatMessage(sectionNames.navigation)} - +
@@ -125,11 +125,11 @@ const MenuDetailsPage: React.FC = ({ />
- diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx index 2f4c20aae..51173c1e3 100644 --- a/src/navigation/components/MenuItems/MenuItems.tsx +++ b/src/navigation/components/MenuItems/MenuItems.tsx @@ -10,9 +10,9 @@ import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; -import useTheme from "@saleor/hooks/useTheme"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { useTheme } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -213,7 +213,7 @@ const MenuItems: React.FC = props => { const classes = useStyles(props); const intl = useIntl(); - const { isDark } = useTheme(); + const { themeType } = useTheme(); return ( @@ -231,7 +231,7 @@ const MenuItems: React.FC = props => { />
= ({ const intl = useIntl(); return ( - + {intl.formatMessage(sectionNames.configuration)} - + - - - + {isLimitReached(limits, "orders") && ( + + + + )} = props => { return ( - + {order?.number ? intl.formatMessage( { @@ -85,7 +85,7 @@ const OrderRefundPage: React.FC = props => { defaultMessage: "Order", description: "page header" })} - + = props => { return ( - + {intl.formatMessage(messages.appTitle, { orderNumber: order?.number })} - + = props => { {({ data, submit, hasChanged, change }) => ( - + {intl.formatMessage(sectionNames.orders)} - + = props => {
- diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx index 7713527ff..e9aa9c8a6 100644 --- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx +++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx @@ -16,7 +16,7 @@ import { SingleSelectField } from "@saleor/components/SingleSelectField"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx index aad536452..7b8487dd2 100644 --- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx +++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx @@ -1,8 +1,8 @@ import { Button, Card, CardActions, TableBody } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx index d91dd1de1..8ffa7b96f 100644 --- a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx +++ b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx @@ -15,9 +15,9 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableHead from "@saleor/components/TableHead"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import { PageTypeDetails_pageType_attributes } from "@saleor/pageTypes/types/PageTypeDetails"; -import { makeStyles } from "@saleor/theme"; import { ListActions, ReorderAction } from "@saleor/types"; import { AttributeTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx index 731df2a8e..a311b4799 100644 --- a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx +++ b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx @@ -1,5 +1,4 @@ import { Typography } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; @@ -7,10 +6,10 @@ import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import Metadata, { MetadataFormData } from "@saleor/components/Metadata"; import PageHeader from "@saleor/components/PageHeader"; -import SaveButtonBar from "@saleor/components/SaveButtonBar"; +import Savebar from "@saleor/components/Savebar"; import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment"; import { commonMessages, sectionNames } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { Backlink, makeStyles } from "@saleor/macaw-ui"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -62,9 +61,9 @@ const PageTypeCreatePage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.pageTypes)} - + = props => {
- diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx index c63135460..1df872100 100644 --- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx +++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx @@ -1,5 +1,4 @@ import { Typography } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; @@ -8,12 +7,13 @@ import Hr from "@saleor/components/Hr"; 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 { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField"; import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment"; import { commonMessages, sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import { PageTypeDetails_pageType } from "@saleor/pageTypes/types/PageTypeDetails"; -import { makeStyles } from "@saleor/theme"; import { ListActions, ReorderEvent } from "@saleor/types"; import { AttributeTypeEnum } from "@saleor/types/globalTypes"; import { mapMetadataItemToInput } from "@saleor/utils/maps"; @@ -112,9 +112,9 @@ const PageTypeDetailsPage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.pageTypes)} - +
@@ -166,10 +166,10 @@ const PageTypeDetailsPage: React.FC = props => {
- diff --git a/src/pageTypes/components/PageTypeList/PageTypeList.tsx b/src/pageTypes/components/PageTypeList/PageTypeList.tsx index f8c560751..b0fbccda5 100644 --- a/src/pageTypes/components/PageTypeList/PageTypeList.tsx +++ b/src/pageTypes/components/PageTypeList/PageTypeList.tsx @@ -5,9 +5,9 @@ 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 { PageTypeList_pageTypes_edges_node } from "@saleor/pageTypes/types/PageTypeList"; import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; -import { makeStyles } from "@saleor/theme"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx index dc87cdf0d..af3e0e85f 100644 --- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx +++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx @@ -1,9 +1,9 @@ import { Button, Card } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import SearchBar from "@saleor/components/SearchBar"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { PageTypeList_pageTypes_edges_node } from "@saleor/pageTypes/types/PageTypeList"; import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; import React from "react"; @@ -44,9 +44,9 @@ const PageTypeListPage: React.FC = ({ const intl = useIntl(); return ( - + {intl.formatMessage(sectionNames.configuration)} - +
- {canOpenAssignReferencesAttributeDialog && ( = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - +
- ); diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx index f16e913ec..dc1efa77b 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx @@ -4,7 +4,7 @@ import CollectionWithDividers from "@saleor/components/CollectionWithDividers"; import StatusLabel from "@saleor/components/StatusLabel"; import { statusLabelMessages } from "@saleor/components/StatusLabel/messages"; import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx index 7fec54acc..b3b0ad6fb 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx @@ -1,7 +1,7 @@ import { Card, Popper } from "@material-ui/core"; import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { isPluginGlobal } from "@saleor/plugins/views/utils"; -import { makeStyles } from "@saleor/theme"; import React from "react"; import ChannelConfigPluginPopupBody from "./ChannelConfigPluginPopupBody"; diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx index 33e48c47d..def7945ba 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx @@ -1,5 +1,5 @@ import { List } from "@material-ui/core"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx index e07985cd4..e963a2786 100644 --- a/src/plugins/components/PluginsList/PluginsList.tsx +++ b/src/plugins/components/PluginsList/PluginsList.tsx @@ -3,9 +3,9 @@ import EditIcon from "@material-ui/icons/Edit"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TablePagination from "@saleor/components/TablePagination"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import { PluginListUrlSortField } from "@saleor/plugins/urls"; -import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/plugins/components/PluginsListPage/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.tsx index ecd1d01d2..3d4e75ac5 100644 --- a/src/plugins/components/PluginsListPage/PluginsListPage.tsx +++ b/src/plugins/components/PluginsListPage/PluginsListPage.tsx @@ -1,9 +1,9 @@ import { Card } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { PluginListUrlSortField } from "@saleor/plugins/urls"; import { FilterPageProps, @@ -53,9 +53,9 @@ const PluginsListPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - + = ({ return ( - + {intl.formatMessage(sectionNames.productTypes)} - +
@@ -122,9 +122,9 @@ const ProductTypeCreatePage: React.FC = ({ />
- diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx index 383f3de9c..64085347e 100644 --- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx +++ b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx @@ -1,7 +1,7 @@ import { Card, CardContent, TextField } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { UserError } from "@saleor/types"; import { getFieldError } from "@saleor/utils/errors"; import React from "react"; diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx index 9b18ba4a1..ade316b14 100644 --- a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx +++ b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx @@ -1,4 +1,3 @@ -import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; @@ -8,10 +7,11 @@ 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 { ChangeEvent, FormChange, SubmitPromise } from "@saleor/hooks/useForm"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; import { ListActions, ReorderEvent, UserError } from "@saleor/types"; import { @@ -158,9 +158,9 @@ const ProductTypeDetailsPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.productTypes)} - +
@@ -240,10 +240,10 @@ const ProductTypeDetailsPage: React.FC = ({ />
- diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx index 062bf89a4..bc09fc2dc 100644 --- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx @@ -11,8 +11,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 { ProductTypeListUrlSortField } from "@saleor/productTypes/urls"; -import { makeStyles } from "@saleor/theme"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx index 5a3764643..2b1c82db7 100644 --- a/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx +++ b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx @@ -1,9 +1,9 @@ import { Button, Card } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -54,9 +54,9 @@ const ProductTypeListPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - + - - - + {limitReached && ( + + + + )} = props => { > {({ change, data, hasChanged, submit }) => ( - {product} + {product}
@@ -159,12 +159,12 @@ const ProductMediaPage: React.FC = props => {
- )} diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx index 9a072eb44..9180c3d30 100644 --- a/src/products/components/ProductOrganization/ProductOrganization.tsx +++ b/src/products/components/ProductOrganization/ProductOrganization.tsx @@ -11,8 +11,8 @@ import SingleAutocompleteSelectField, { } from "@saleor/components/SingleAutocompleteSelectField"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { ChangeEvent } from "@saleor/hooks/useForm"; +import { makeStyles } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; import React from "react"; @@ -30,7 +30,7 @@ const useStyles = makeStyles( overflow: "visible" }, cardSubtitle: { - fontSize: "1rem", + fontSize: theme.typography.body1.fontSize, marginBottom: theme.spacing(0.5) }, label: { diff --git a/src/products/components/ProductStocks/CardAddItemsFooter.tsx b/src/products/components/ProductStocks/CardAddItemsFooter.tsx index 4881a0431..afe16c7d4 100644 --- a/src/products/components/ProductStocks/CardAddItemsFooter.tsx +++ b/src/products/components/ProductStocks/CardAddItemsFooter.tsx @@ -1,7 +1,7 @@ import { IconButton } from "@material-ui/core"; import AddIcon from "@material-ui/icons/Add"; import Link from "@saleor/components/Link"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React, { MutableRefObject } from "react"; import { MessageDescriptor, useIntl } from "react-intl"; diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index bb294539a..abb2f0fc3 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -27,9 +27,9 @@ import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragme import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { FormChange } from "@saleor/hooks/useForm"; import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset"; +import { makeStyles } from "@saleor/macaw-ui"; +import { ICONBUTTON_SIZE } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; -import { ICONBUTTON_SIZE } from "@saleor/theme"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; import React from "react"; @@ -65,7 +65,7 @@ const useStyles = makeStyles( theme => ({ colAction: { padding: 0, - width: ICONBUTTON_SIZE + theme.spacing() + width: `calc(${ICONBUTTON_SIZE}px + ${theme.spacing(1)})` }, colName: {}, colQuantity: { @@ -73,7 +73,7 @@ const useStyles = makeStyles( width: 150 }, editWarehouses: { - marginRight: -theme.spacing() + marginRight: theme.spacing(-1) }, input: { padding: theme.spacing(1.5), @@ -105,7 +105,7 @@ const useStyles = makeStyles( }, skuInputContainer: { display: "grid", - gridColumnGap: theme.spacing(3) + "px", + gridColumnGap: theme.spacing(3), gridTemplateColumns: "repeat(2, 1fr)" } }), diff --git a/src/products/components/ProductTaxes/ProductTaxes.tsx b/src/products/components/ProductTaxes/ProductTaxes.tsx index e37032c24..d6eb29499 100644 --- a/src/products/components/ProductTaxes/ProductTaxes.tsx +++ b/src/products/components/ProductTaxes/ProductTaxes.tsx @@ -6,7 +6,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment"; import { FormChange } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index c7bc1ec69..971d05933 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -4,7 +4,6 @@ import { mergeAttributeValues } from "@saleor/attributes/utils/data"; import { ChannelData } from "@saleor/channels/utils"; -import AppHeader from "@saleor/components/AppHeader"; import AssignAttributeValueDialog from "@saleor/components/AssignAttributeValueDialog"; import Attributes, { AttributeInput } from "@saleor/components/Attributes"; import CardSpacer from "@saleor/components/CardSpacer"; @@ -14,7 +13,7 @@ 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 { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment"; @@ -25,6 +24,7 @@ import { SubmitPromise } from "@saleor/hooks/useForm"; import { FormsetData } from "@saleor/hooks/useFormset"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; import ProductExternalMediaDialog from "@saleor/products/components/ProductExternalMediaDialog"; import ProductVariantPrice from "@saleor/products/components/ProductVariantPrice"; @@ -278,9 +278,9 @@ export const ProductUpdatePage: React.FC = ({ }) => ( <> - + {intl.formatMessage(sectionNames.products)} - +
@@ -469,10 +469,10 @@ export const ProductUpdatePage: React.FC = ({ />
- = ({ submit }) => ( - {product?.name} + {product?.name}
@@ -244,15 +244,15 @@ const ProductVariantCreatePage: React.FC = ({
- {canOpenAssignReferencesAttributeDialog && ( ({ attrInputsContainer: { display: "grid", - gap: theme.spacing(2) + "px", + gap: theme.spacing(2), gridTemplateColumns: "minmax(80px, 150px) repeat(auto-fit, minmax(150px, 250px))" }, @@ -47,7 +47,7 @@ const useStyles = makeStyles( }, inputsContainer: { display: "grid", - gap: theme.spacing(2) + "px", + gap: theme.spacing(2), gridTemplateColumns: "repeat(auto-fit, minmax(150px, 250px))" }, label: { diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx index 4428f12e9..02ac67932 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx @@ -14,8 +14,8 @@ import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import SingleSelectField from "@saleor/components/SingleSelectField"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails"; -import { makeStyles } from "@saleor/theme"; import { isSelected } from "@saleor/utils/lists"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -29,11 +29,11 @@ import { getStockAttributeValues } from "./utils"; const useStyles = makeStyles( theme => ({ attributeStockContainer: { - columnGap: theme.spacing(3) + "px", + columnGap: theme.spacing(3), display: "grid", gridTemplateColumns: ({ data }: ProductVariantCreatorStockProps) => `150px repeat(${data.warehouses.length}, 288px)`, - rowGap: theme.spacing(2) + "px" + rowGap: theme.spacing(2) }, attributeStockScroll: { overflowX: "scroll", @@ -53,20 +53,20 @@ const useStyles = makeStyles( width: "33%" }, stockContainer: { - columnGap: theme.spacing(3) + "px", + columnGap: theme.spacing(3), display: "grid", gridTemplateColumns: "repeat(3, 288px)", marginTop: theme.spacing(2), - rowGap: theme.spacing(2) + "px" + rowGap: theme.spacing(2) }, stockHeader: { marginBottom: theme.spacing() }, warehouseContainer: { - columnGap: theme.spacing(3) + "px", + columnGap: theme.spacing(3), display: "grid", gridTemplateColumns: "repeat(4, 1fr)", - rowGap: theme.spacing(2) + "px" + rowGap: theme.spacing(2) }, warehouseHeader: { marginBottom: theme.spacing() diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx index fe2568404..d0ce0f504 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx @@ -10,8 +10,8 @@ import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import PriceField from "@saleor/components/PriceField"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate"; -import { makeStyles } from "@saleor/theme"; import { ProductVariantBulkCreateInput } from "@saleor/types/globalTypes"; import { getFormErrors } from "@saleor/utils/errors"; import { getBulkProductErrorMessage } from "@saleor/utils/errors/product"; @@ -103,7 +103,7 @@ const useStyles = makeStyles( props.data.variants[0].stocks .length}, minmax(180px, auto)) 140px 64px`, overflowX: "scroll", - rowGap: theme.spacing() + "px" + rowGap: theme.spacing() } }), { diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx index db699162a..48fd522e8 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx @@ -1,8 +1,8 @@ import { Card, CardContent } from "@material-ui/core"; -import Alert from "@saleor/components/Alert/Alert"; import { getMultiChoices } from "@saleor/components/Attributes/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; +import LimitReachedAlert from "@saleor/components/LimitReachedAlert"; import MultiAutocompleteSelectField from "@saleor/components/MultiAutocompleteSelectField"; import Skeleton from "@saleor/components/Skeleton"; import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment"; @@ -91,9 +91,8 @@ const ProductVariantCreatorValues: React.FC = return ( <> - {variantsLeft !== null && ( - variantsLeft} + {variantsLeft !== null && variantsNumber > variantsLeft && ( + = aboveLimitVariantsNumber: variantsNumber - variantsLeft }} /> - + )} {attributes.map(attribute => ( diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx index 7229014f6..61a780e6a 100644 --- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx +++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx @@ -10,7 +10,7 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; 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"; diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx index ca85736cd..bee315894 100644 --- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx +++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx @@ -7,7 +7,7 @@ import { } from "@material-ui/core"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; 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 } from "react-intl"; diff --git a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx index 8a22ecb44..16810f9b3 100644 --- a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx +++ b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx @@ -2,7 +2,7 @@ import { Button, Card, CardContent, Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index 879fc3436..b73f3d0c3 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -8,7 +8,7 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { ReorderAction } from "@saleor/types"; import classNames from "classnames"; import React from "react"; diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index 322bbc9d7..2655466b3 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -3,7 +3,6 @@ import { mergeAttributeValues } from "@saleor/attributes/utils/data"; import { ChannelPriceData } from "@saleor/channels/utils"; -import AppHeader from "@saleor/components/AppHeader"; import AssignAttributeValueDialog from "@saleor/components/AssignAttributeValueDialog"; import Attributes, { AttributeInput, @@ -16,11 +15,12 @@ import Grid from "@saleor/components/Grid"; import { MetadataFormData } from "@saleor/components/Metadata"; 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 { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment"; import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment"; import { ProductVariant } from "@saleor/fragments/types/ProductVariant"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; +import { Backlink } from "@saleor/macaw-ui"; import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate"; import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues"; import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages"; @@ -176,7 +176,7 @@ const ProductVariantPage: React.FC = ({ return ( <> - {variant?.product?.name} + {variant?.product?.name} {variant?.product?.defaultVariant?.id !== variant?.id && ( = ({
- {canOpenAssignReferencesAttributeDialog && ( = props => { } /> - - - + {limitReached && ( + + + + )} {variants.length > 0 ? ( diff --git a/src/shipping/components/OrderValue/styles.ts b/src/shipping/components/OrderValue/styles.ts index 0f16e5070..f6aba2f4c 100644 --- a/src/shipping/components/OrderValue/styles.ts +++ b/src/shipping/components/OrderValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/OrderWeight/styles.ts b/src/shipping/components/OrderWeight/styles.ts index 64d3d6f4d..7c0128004 100644 --- a/src/shipping/components/OrderWeight/styles.ts +++ b/src/shipping/components/OrderWeight/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/PricingCard/styles.ts b/src/shipping/components/PricingCard/styles.ts index 9e79dc429..37b33ba71 100644 --- a/src/shipping/components/PricingCard/styles.ts +++ b/src/shipping/components/PricingCard/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx index 47222b02e..69cdb2b56 100644 --- a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx +++ b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx @@ -16,9 +16,9 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import { ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node } from "@saleor/shipping/types/ShippingZone"; -import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx index 8fcb63b0a..f0fff39fb 100644 --- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx +++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx @@ -19,10 +19,10 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts"; import { ShippingPriceExcludeProduct } from "@saleor/shipping/types/ShippingPriceExcludeProduct"; -import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import React from "react"; import { MutationFetchResult } from "react-apollo"; diff --git a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx index 0e36aaf85..50d3cd2a1 100644 --- a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx +++ b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx @@ -7,7 +7,7 @@ import RichTextEditor, { } from "@saleor/components/RichTextEditor"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getShippingErrorMessage from "@saleor/utils/errors/shipping"; import React from "react"; diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx index 1468d7830..8440eb37b 100644 --- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx +++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx @@ -21,7 +21,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { DialogProps } from "@saleor/types"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { mapCountriesToChoices } from "@saleor/utils/maps"; diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx index 303844462..ac02c11fb 100644 --- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx +++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx @@ -20,7 +20,7 @@ import Hr from "@saleor/components/Hr"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { filter } from "fuzzaldrin"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx index c221a5c1c..92318b28e 100644 --- a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx +++ b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx @@ -1,4 +1,3 @@ -import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; @@ -6,10 +5,11 @@ import CountryList from "@saleor/components/CountryList"; 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 { CountryFragment } from "@saleor/fragments/types/CountryFragment"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; @@ -75,9 +75,9 @@ const ShippingZoneCreatePage: React.FC = ({ {({ change, data, hasChanged, submit }) => ( <> - + {intl.formatMessage(sectionNames.shipping)} - +
@@ -113,10 +113,10 @@ const ShippingZoneCreatePage: React.FC = ({ />
- diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx index d41e2c460..9321ae4ce 100644 --- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx +++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx @@ -1,5 +1,4 @@ import { BaseChannels_channels } from "@saleor/channels/types/BaseChannels"; -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,12 +8,13 @@ import Grid from "@saleor/components/Grid"; import Metadata from "@saleor/components/Metadata/Metadata"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; import PageHeader from "@saleor/components/PageHeader"; -import SaveButtonBar from "@saleor/components/SaveButtonBar"; +import Savebar from "@saleor/components/Savebar"; import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { ShippingZoneDetailsFragment_warehouses } from "@saleor/fragments/types/ShippingZoneDetailsFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; +import { Backlink } from "@saleor/macaw-ui"; import { ShippingZone_shippingZone } from "@saleor/shipping/types/ShippingZone"; import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler"; import { mapNodeToChoice } from "@saleor/utils/maps"; @@ -147,9 +147,9 @@ const ShippingZoneDetailsPage: React.FC = ({ return ( - + - +
@@ -220,11 +220,11 @@ const ShippingZoneDetailsPage: React.FC = ({ />
- diff --git a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx index e13a72ad0..db614861f 100644 --- a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx +++ b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx @@ -3,7 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getShippingErrorMessage from "@saleor/utils/errors/shipping"; import React from "react"; diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx index 6736f43e5..298d108e4 100644 --- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx +++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx @@ -13,7 +13,7 @@ import ConfirmButton, { import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import { buttonMessages, commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { DialogProps, MinMax } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx index 88fa9ad56..623b898f8 100644 --- a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx +++ b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx @@ -16,8 +16,8 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment"; import ArrowDropdown from "@saleor/icons/ArrowDropdown"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import { PostalCodeRuleInclusionTypeEnum } from "@saleor/types/globalTypes"; import classNames from "classnames"; import React from "react"; diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx index 11e7f88a8..159a61e0e 100644 --- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx +++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx @@ -16,13 +16,13 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import WeightRange from "@saleor/components/WeightRange"; import { ShippingZoneDetailsFragment_shippingMethods } from "@saleor/fragments/types/ShippingZoneDetailsFragment"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; +import { ICONBUTTON_SIZE } from "@saleor/macaw-ui"; import { ChannelProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { maybe, renderCollection } from "../../../misc"; -import { ICONBUTTON_SIZE } from "../../../theme"; export interface ShippingZoneRatesProps extends ChannelProps { disabled: boolean; @@ -38,7 +38,7 @@ const useStyles = makeStyles( theme => ({ alignRight: { paddingRight: 24, - width: ICONBUTTON_SIZE + theme.spacing(0.5) + width: `calc(${ICONBUTTON_SIZE}px + ${theme.spacing(0.5)})` }, buttonColumn: { padding: "4px 0", diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx index 3974f7fd2..fb05c6caf 100644 --- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx +++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx @@ -1,6 +1,5 @@ import { OutputData } from "@editorjs/editorjs"; import { ChannelShippingData } 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"; @@ -8,10 +7,11 @@ 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 { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import OrderValue from "@saleor/shipping/components/OrderValue"; import OrderWeight from "@saleor/shipping/components/OrderWeight"; @@ -113,9 +113,9 @@ export const ShippingZoneRatesCreatePage: React.FC - + - +
- diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx index f99a5617d..3b5564d6b 100644 --- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx +++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx @@ -1,6 +1,5 @@ import { OutputData } from "@editorjs/editorjs"; import { ChannelShippingData } 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"; @@ -10,10 +9,11 @@ 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 { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment"; +import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import OrderValue from "@saleor/shipping/components/OrderValue"; import OrderWeight from "@saleor/shipping/components/OrderWeight"; @@ -143,9 +143,9 @@ export const ShippingZoneRatesPage: React.FC = ({ return ( - + - +
@@ -215,11 +215,11 @@ export const ShippingZoneRatesPage: React.FC = ({ />
- diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx index f2aee671a..bd47e4e5c 100644 --- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx +++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx @@ -15,8 +15,8 @@ import Skeleton from "@saleor/components/Skeleton"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps } from "@saleor/types"; import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables"; import React from "react"; diff --git a/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx index 39ecadbd5..7fbe2ccee 100644 --- a/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx +++ b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx @@ -1,10 +1,10 @@ -import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import RequirePermissions from "@saleor/components/RequirePermissions"; import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { ListActions, PageListProps, UserPermissionProps } from "@saleor/types"; import { PermissionEnum, WeightUnitsEnum } from "@saleor/types/globalTypes"; import React from "react"; @@ -36,9 +36,9 @@ const ShippingZonesListPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - + = props => { return ( - + {intl.formatMessage(sectionNames.configuration)} - + @@ -184,11 +184,11 @@ const SiteSettingsPage: React.FC = props => { onCountryChange={handleCountryChange} /> - ); diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx index 1c835e9e4..c42e5d681 100644 --- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx +++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx @@ -14,8 +14,8 @@ import FormSpacer from "@saleor/components/FormSpacer"; import { StaffErrorFragment } from "@saleor/fragments/types/StaffErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages, commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/macaw-ui"; import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups"; -import { makeStyles } from "@saleor/theme"; import { FetchMoreProps, SearchPageProps } from "@saleor/types"; import { getFormErrors } from "@saleor/utils/errors"; import getStaffErrorMessage from "@saleor/utils/errors/staff"; diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx index 3eab80409..64ce5961e 100644 --- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx +++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx @@ -1,6 +1,5 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import AccountPermissionGroups from "@saleor/components/AccountPermissionGroups"; -import AppHeader from "@saleor/components/AppHeader"; import AccountStatus from "@saleor/components/AppStatus"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; @@ -10,12 +9,13 @@ import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; import PageHeader from "@saleor/components/PageHeader"; -import SaveButtonBar from "@saleor/components/SaveButtonBar"; +import Savebar from "@saleor/components/Savebar"; import { StaffErrorFragment } from "@saleor/fragments/types/StaffErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useLocale from "@saleor/hooks/useLocale"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { getUserName } from "@saleor/misc"; import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups"; import { FetchMoreProps, SearchPageProps } from "@saleor/types"; @@ -111,9 +111,9 @@ const StaffDetailsPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.staff)} - +
@@ -185,11 +185,11 @@ const StaffDetailsPage: React.FC = ({ )}
- diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx index f61d3cfb4..b8e29ac2c 100644 --- a/src/staff/components/StaffList/StaffList.tsx +++ b/src/staff/components/StaffList/StaffList.tsx @@ -10,6 +10,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TablePagination from "@saleor/components/TablePagination"; +import { makeStyles } from "@saleor/macaw-ui"; import { getUserInitials, getUserName, @@ -17,7 +18,6 @@ import { renderCollection } from "@saleor/misc"; import { StaffListUrlSortField } from "@saleor/staff/urls"; -import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import classNames from "classnames"; diff --git a/src/staff/components/StaffListPage/StaffListPage.tsx b/src/staff/components/StaffListPage/StaffListPage.tsx index 25c04b345..efc9dc13f 100644 --- a/src/staff/components/StaffListPage/StaffListPage.tsx +++ b/src/staff/components/StaffListPage/StaffListPage.tsx @@ -1,11 +1,11 @@ import { Button, Card } from "@material-ui/core"; -import Alert from "@saleor/components/Alert/Alert"; -import AppHeader from "@saleor/components/AppHeader"; import { Container } from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; +import LimitReachedAlert from "@saleor/components/LimitReachedAlert"; import PageHeader from "@saleor/components/PageHeader"; import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { StaffListUrlSortField } from "@saleor/staff/urls"; import { FilterPageProps, @@ -59,9 +59,9 @@ const StaffListPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.configuration)} - + = ({ /> - - - + {reachedLimit && ( + + + + )} ( > - +
- @@ -940,13 +935,8 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -1672,18 +1662,8 @@ exports[`Storyshots Attributes / Attributes selected 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -2123,13 +2103,8 @@ exports[`Storyshots Channels / Channels with variants availability card default focusable="false" viewBox="0 0 24 24" > - @@ -2493,13 +2468,8 @@ exports[`Storyshots Channels / Channels with variants availability card default focusable="false" viewBox="0 0 24 24" > - @@ -3555,58 +3525,6 @@ exports[`Storyshots Generics / AddressFormatter when loading 1`] = `
`; -exports[`Storyshots Generics / Alert default 1`] = ` -
-
-
-
-
-
-
-
- Title -
- -
- Content -
-
-
-
-
-`; - exports[`Storyshots Generics / Assign attributes dialog default 1`] = `
- @@ -4737,18 +4645,8 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -4859,18 +4757,8 @@ exports[`Storyshots Generics / Checkbox checked 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -4912,13 +4800,8 @@ exports[`Storyshots Generics / Checkbox disabled 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -4959,13 +4842,8 @@ exports[`Storyshots Generics / Checkbox interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -5006,13 +4884,8 @@ exports[`Storyshots Generics / Checkbox unchecked 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -5052,20 +4925,8 @@ exports[`Storyshots Generics / Checkbox undeterminate 1`] = ` focusable="false" viewBox="0 0 24 24" > - - @@ -5838,18 +5699,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6093,13 +5944,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6187,18 +6033,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6238,18 +6074,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6288,13 +6114,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6353,13 +6174,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6604,18 +6420,8 @@ exports[`Storyshots Generics / Filter default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -6938,18 +6744,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7193,13 +6989,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7287,18 +7078,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7338,18 +7119,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7388,13 +7159,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7453,13 +7219,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -7704,18 +7465,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -8032,34 +7783,6 @@ exports[`Storyshots Generics / Global messages with error status 1`] = `
`; -exports[`Storyshots Generics / Global messages with expandText 1`] = ` -
-
-
- -
-
-
-`; - exports[`Storyshots Generics / Global messages with success status 1`] = `
`; -exports[`Storyshots Generics / Global messages with undo action 1`] = ` -
-
-
- -
-
-
-`; - exports[`Storyshots Generics / Global messages with warning status 1`] = `
`; -exports[`Storyshots Generics / Mobile Side Menu default 1`] = ` -
- -
-`; - exports[`Storyshots Generics / Money formatting default 1`] = `
- @@ -9887,13 +9549,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -9929,13 +9586,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -9971,13 +9623,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10013,13 +9660,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10055,13 +9697,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10097,13 +9734,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10139,13 +9771,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10181,13 +9808,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10223,13 +9845,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10265,13 +9882,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 focusable="false" viewBox="0 0 24 24" > - @@ -10366,18 +9978,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10416,13 +10018,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10458,13 +10055,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10500,13 +10092,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10542,13 +10129,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10584,13 +10166,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10626,13 +10203,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10668,13 +10240,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10710,13 +10277,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10752,13 +10314,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -10794,13 +10351,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -11333,18 +10885,8 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -12228,48 +11770,6 @@ exports[`Storyshots Generics / Save filter tab default 1`] = ` /> `; -exports[`Storyshots Generics / SaveButtonBar disabled 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar error 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar idle 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar interactive error 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar interactive success 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar loading 1`] = ` -
-`; - -exports[`Storyshots Generics / SaveButtonBar success 1`] = ` -
-`; - exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
`; -exports[`Storyshots Generics / Square Button default 1`] = ` -
- -
-`; - exports[`Storyshots Generics / Status Chip alert 1`] = `
- @@ -18168,13 +17640,8 @@ exports[`Storyshots Shipping / Order value rates loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -18404,13 +17871,8 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -18553,13 +18015,8 @@ exports[`Storyshots Shipping / Order weight rates form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -18714,13 +18171,8 @@ exports[`Storyshots Shipping / Order weight rates loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -18865,13 +18317,8 @@ exports[`Storyshots Shipping / Order weight rates new 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -19319,18 +18766,8 @@ exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -19454,13 +18891,8 @@ exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -19772,13 +19204,8 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`] focusable="false" viewBox="0 0 24 24" > - @@ -20692,13 +20119,8 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1` focusable="false" viewBox="0 0 24 24" > - @@ -21618,13 +21040,8 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25263,13 +24680,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25306,13 +24718,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25347,13 +24754,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25388,13 +24790,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25429,13 +24826,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25470,13 +24862,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25511,13 +24898,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25552,13 +24934,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25593,13 +24970,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25634,13 +25006,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25675,13 +25042,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25716,13 +25078,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25757,13 +25114,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25798,13 +25150,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25839,13 +25186,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25880,13 +25222,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25921,13 +25258,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -25962,13 +25294,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26003,13 +25330,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26044,13 +25366,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26085,13 +25402,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26126,13 +25438,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26167,13 +25474,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26208,13 +25510,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26249,13 +25546,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26290,13 +25582,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26331,13 +25618,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26372,13 +25654,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26413,13 +25690,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26454,13 +25726,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26495,13 +25762,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26536,13 +25798,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26610,13 +25867,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26883,13 +26135,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26926,13 +26173,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -26967,13 +26209,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27008,13 +26245,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27049,13 +26281,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27090,13 +26317,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27131,13 +26353,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27172,13 +26389,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27213,13 +26425,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27254,13 +26461,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27295,13 +26497,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27336,13 +26533,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27377,13 +26569,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27418,13 +26605,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27459,13 +26641,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27500,13 +26677,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27541,13 +26713,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27582,13 +26749,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27623,13 +26785,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27664,13 +26821,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27705,13 +26857,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27746,13 +26893,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27787,13 +26929,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27828,13 +26965,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27869,13 +27001,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27910,13 +27037,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27951,13 +27073,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -27992,13 +27109,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28033,13 +27145,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28074,13 +27181,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28115,13 +27217,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28156,13 +27253,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28230,13 +27322,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28503,13 +27590,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28548,13 +27630,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28591,13 +27668,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28634,13 +27706,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28677,13 +27744,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28720,13 +27782,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28763,13 +27820,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28806,13 +27858,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28849,13 +27896,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28892,13 +27934,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28935,13 +27972,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -28978,13 +28010,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29021,13 +28048,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29064,13 +28086,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29107,13 +28124,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29150,13 +28162,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29193,13 +28200,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29236,13 +28238,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29279,13 +28276,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29322,13 +28314,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29365,13 +28352,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29408,13 +28390,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29451,13 +28428,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29494,13 +28466,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29537,13 +28504,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29580,13 +28542,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29623,13 +28580,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29666,13 +28618,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29709,13 +28656,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29752,13 +28694,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29795,13 +28732,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29838,13 +28770,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -29914,13 +28841,8 @@ exports[`Storyshots Views / Apps / Webhooks / Create webhook loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30194,13 +29116,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30237,13 +29154,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30278,13 +29190,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30319,13 +29226,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30360,13 +29262,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30401,13 +29298,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30442,13 +29334,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30483,13 +29370,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30524,13 +29406,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30565,13 +29442,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30606,13 +29478,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30647,13 +29514,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30688,13 +29550,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30729,13 +29586,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30770,13 +29622,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30811,13 +29658,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30852,13 +29694,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30893,13 +29730,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30934,13 +29766,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -30975,13 +29802,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31016,13 +29838,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31057,13 +29874,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31098,13 +29910,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31139,13 +29946,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31180,13 +29982,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31221,13 +30018,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31262,13 +30054,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31303,13 +30090,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31344,13 +30126,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31385,13 +30162,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31426,13 +30198,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31467,13 +30234,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31542,18 +30304,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -31820,13 +30572,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -31863,13 +30610,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -31904,13 +30646,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -31945,13 +30682,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -31986,13 +30718,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32027,13 +30754,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32068,13 +30790,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32109,13 +30826,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32150,13 +30862,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32191,13 +30898,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32232,13 +30934,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32273,13 +30970,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32314,13 +31006,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32355,13 +31042,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32396,13 +31078,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32437,13 +31114,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32478,13 +31150,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32519,13 +31186,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32560,13 +31222,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32601,13 +31258,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32642,13 +31294,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32683,13 +31330,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32724,13 +31366,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32765,13 +31402,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32806,13 +31438,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32847,13 +31474,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32888,13 +31510,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32929,13 +31546,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -32970,13 +31582,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -33011,13 +31618,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -33052,13 +31654,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -33093,13 +31690,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -33168,18 +31760,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = focusable="false" viewBox="0 0 24 24" > - @@ -33446,13 +32028,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33491,13 +32068,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33534,13 +32106,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33577,13 +32144,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33620,13 +32182,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33663,13 +32220,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33706,13 +32258,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33749,13 +32296,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33792,13 +32334,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33835,13 +32372,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33878,13 +32410,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33921,13 +32448,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -33964,13 +32486,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34007,13 +32524,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34050,13 +32562,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34093,13 +32600,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34136,13 +32638,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34179,13 +32676,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34222,13 +32714,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34265,13 +32752,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34308,13 +32790,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34351,13 +32828,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34394,13 +32866,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34437,13 +32904,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34480,13 +32942,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34523,13 +32980,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34566,13 +33018,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34609,13 +33056,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34652,13 +33094,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34695,13 +33132,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34738,13 +33170,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34781,13 +33208,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -34857,13 +33279,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35125,13 +33542,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35168,13 +33580,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35209,13 +33616,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35250,13 +33652,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35291,13 +33688,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35332,13 +33724,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35373,13 +33760,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35414,13 +33796,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35455,13 +33832,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35496,13 +33868,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35537,13 +33904,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35578,13 +33940,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35619,13 +33976,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35660,13 +34012,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35701,13 +34048,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35742,13 +34084,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35783,13 +34120,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35824,13 +34156,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35865,13 +34192,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35906,13 +34228,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35947,13 +34264,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -35988,13 +34300,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36029,13 +34336,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36070,13 +34372,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36111,13 +34408,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36152,13 +34444,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36193,13 +34480,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36234,13 +34516,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36275,13 +34552,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36316,13 +34588,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36357,13 +34624,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36398,13 +34660,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36473,18 +34730,8 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -36720,18 +34967,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -37363,18 +35600,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -37503,18 +35730,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -37556,18 +35773,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -37808,18 +36015,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -38500,18 +36697,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -38639,13 +36826,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -38687,18 +36869,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -38944,18 +37116,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -39636,18 +37798,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -39780,13 +37932,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -39828,18 +37975,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -40089,13 +38226,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -40513,18 +38645,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -40658,18 +38780,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -40713,18 +38825,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -40965,18 +39067,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input focusable="false" viewBox="0 0 24 24" > - @@ -41657,18 +39749,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input focusable="false" viewBox="0 0 24 24" > - @@ -41796,13 +39878,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input focusable="false" viewBox="0 0 24 24" > - @@ -41844,18 +39921,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input focusable="false" viewBox="0 0 24 24" > - @@ -42096,18 +40163,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -42724,18 +40781,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -42863,13 +40910,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -42911,18 +40953,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43107,13 +41139,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43305,13 +41332,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43377,13 +41399,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43449,13 +41466,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43521,13 +41533,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43593,13 +41600,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43665,13 +41667,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43737,13 +41734,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43809,13 +41801,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43881,13 +41868,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -43953,13 +41935,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -44025,13 +42002,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -44097,13 +42069,8 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -44313,13 +42280,8 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -44513,13 +42475,8 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46224,13 +44181,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46431,13 +44383,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46486,13 +44433,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46541,13 +44483,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46596,13 +44533,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46651,13 +44583,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -46706,13 +44633,8 @@ exports[`Storyshots Views / Categories / Category list default 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -47200,13 +45122,8 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -47406,13 +45323,8 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -50247,13 +48159,8 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -50401,13 +48308,8 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53400,13 +51302,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53536,13 +51433,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53634,13 +51526,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53732,13 +51619,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53830,13 +51712,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -53928,13 +51805,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -54026,13 +51898,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -54124,13 +51991,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -54222,13 +52084,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -54320,13 +52177,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -54418,13 +52270,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = ` focusable="false" viewBox="0 0 24 24" > - @@ -58321,16 +56168,19 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
-
+
@@ -58340,7 +56190,8 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = ` Channel limit reached
-
+
@@ -210135,7 +205827,8 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = ` SKU limit reached
-
+
@@ -243321,7 +238397,8 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = ` Staff Member limit reached
-
+
@@ -250496,7 +245541,8 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = ` Warehouse limit reached
- )} diff --git a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx index 7ffb0d031..e156e8328 100644 --- a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx +++ b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx @@ -5,14 +5,14 @@ import { TableHead, TableRow } from "@material-ui/core"; -import AppHeader from "@saleor/components/AppHeader"; import { Container } from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { sectionNames } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { Backlink } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -42,9 +42,9 @@ const CountryTaxesPage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.taxes)} - + ({ - MuiButton: { - contained: { - "&$disabled": { - backgroundColor: fade(colors.primary, 0.12) - }, - "&:active": { - boxShadow: null - }, - "&:hover": { - boxShadow: null - }, - boxShadow: null - }, - containedPrimary: { - "&:active": { - backgroundColor: darken(colors.primary, 0.4) - }, - "&:hover": { - backgroundColor: darken(colors.primary, 0.1) - } - }, - label: { - color: colors.font.button, - fontWeight: 600 - }, - outlined: { - "& span": { - color: colors.primary - } - }, - root: { - "& svg": { - marginLeft: 8 - }, - borderRadius: 4 - }, - text: { - "& span": { - color: colors.font.default - } - }, - textPrimary: { - "&:not($disabled) span": { - color: colors.primary - } - } - }, - MuiIconButton: { - root: { - "&:hover": { - backgroundColor: fade(colors.primary, 0.12) - } - } - }, - MuiSwitch: { - colorPrimary: { - "&$checked": { - color: colors.background.paper - } - }, - root: { - "&$disabled": { - "&$switchBase": { - "& + $thumb": { - backgroundColor: colors.gray.disabled - } - } - }, - height: 48, - width: 72 - }, - switchBase: { - "&$checked": { - transform: "translateX(23px)" - }, - boxShadow: "none", - left: 1, - marginLeft: 4, - top: 5 - }, - thumb: { - boxShadow: "none" - }, - track: { - "$colorPrimary$checked + &": { - backgroundColor: colors.primary - }, - backgroundColor: colors.gray.default, - borderRadius: 12, - height: 24, - opacity: [["1"], "!important"] as any, - width: 48 - } - } -}); - -export default buttonOverrides; diff --git a/src/theme/createSaleorTheme.ts b/src/theme/createSaleorTheme.ts deleted file mode 100644 index 7aefc33cc..000000000 --- a/src/theme/createSaleorTheme.ts +++ /dev/null @@ -1,226 +0,0 @@ -import { createMuiTheme } from "@material-ui/core/styles"; -import { fade } from "@material-ui/core/styles/colorManipulator"; -import { TypographyProps } from "@material-ui/core/Typography"; -import { createElement } from "react"; - -import { IThemeColors } from "../components/Theme/themes"; -import CheckboxIcon from "../icons/Checkbox"; -import CheckboxCheckedIcon from "../icons/CheckboxChecked"; -import CheckboxIndeterminateIcon from "../icons/CheckboxIndeterminate"; -import buttonOverrides from "./buttons"; -import inputOverrides from "./inputs"; -import createPalette from "./palette"; -import shadows from "./shadows"; -import tableOverrides from "./tables"; -import { SaleorTheme } from "./types"; - -export const ICONBUTTON_SIZE = 48; - -const fontFamily = '"Inter", "roboto", "sans-serif"'; - -const createTheme = (colors: IThemeColors): SaleorTheme => - createMuiTheme({ - overrides: { - ...inputOverrides(colors), - ...tableOverrides(colors, fontFamily), - ...buttonOverrides(colors), - MuiCard: { - root: { - borderColor: colors.paperBorder, - borderRadius: 8, - borderStyle: "solid", - borderWidth: 1, - overflow: "visible" - } - }, - MuiCardActions: { - root: { - flexDirection: "row-reverse" as "row-reverse" - } - }, - MuiCardContent: { - root: { - padding: "24px" - } - }, - MuiChip: { - avatar: { - height: 32, - left: -5, - position: "relative", - width: 32 - } - }, - MuiDialogActions: { - root: { - borderTop: `1px solid ${colors.divider}`, - padding: `16px 24px` - } - }, - MuiDialogContent: { - root: { - "& label": { - overflowX: "hidden" - }, - padding: 24 - } - }, - MuiDialogContentText: { - root: { - "&:last-child": { - marginBottom: 0 - } - } - }, - MuiDialogTitle: { - root: { - borderBottom: `1px solid ${colors.divider}` - } - }, - MuiFormControlLabel: { - label: { - lineHeight: 1.2, - marginLeft: 4 - } - }, - MuiFormLabel: { - filled: { - "&&:not($error)": { - color: colors.primary - } - }, - root: { - "&&$focused:not($error)": { - color: colors.font.gray - } - } - }, - MuiList: { - root: { - display: "grid", - gridRowGap: 8 + "px", - padding: "8px !important" - } - }, - MuiListItem: { - button: { - "&:focus": { - backgroundColor: colors.input.default - } - }, - root: { - "&$selected": { - "&:hover": { - backgroundColor: colors.input.default - }, - backgroundColor: colors.input.default - } - } - }, - MuiMenu: { - paper: { - borderRadius: 8 - } - }, - MuiMenuItem: { - root: { - "&$selected, &$selected:focus, &$selected:hover": { - backgroundColor: [colors.background.default, "!important"] as any, - color: colors.primary, - fontWeight: 700 - }, - "&:hover": { - backgroundColor: [colors.background.default, "!important"] as any, - color: colors.font.default, - fontWeight: 400 - }, - borderRadius: 4 - } - }, - MuiSelect: { - root: { - "&$disabled": { - backgroundColor: colors.input.disabledBackground - } - } - }, - MuiSnackbarContent: { - action: { - "& $MuiIconButton": { - "& svg": { - color: colors.font.default - } - }, - display: "block", - paddingBottom: 10, - paddingLeft: 0, - paddingRight: 45 - }, - message: { - fontSize: 16 - }, - root: { - backgroundColor: colors.background.paper, - boxShadow: - "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)", - color: colors.font.default, - display: "block", - maxWidth: 480 - } - }, - MuiTouchRipple: { - child: { - backgroundColor: fade(colors.primary, 0.2) - }, - childLeaving: { - backgroundColor: fade(colors.primary, 0.2) - }, - ripple: { - "&$rippleVisible": { - backgroundColor: fade(colors.primary, 0.2) - }, - borderRadius: "100%" - } - } - }, - palette: createPalette(colors), - props: { - MuiFormControl: { - variant: "filled" - }, - MuiTextField: { - variant: "outlined" - }, - MuiCard: { - elevation: 0 - }, - MuiTypography: { - component: "div" - } as TypographyProps, - MuiCheckbox: { - checkedIcon: createElement(CheckboxCheckedIcon), - color: "primary", - icon: createElement(CheckboxIcon), - indeterminateIcon: createElement(CheckboxIndeterminateIcon) - } - }, - shadows, - typography: { - allVariants: { - fontFamily - }, - body1: { - color: colors.font.default - }, - fontFamily, - h4: { - color: colors.font.default - }, - h5: { - fontSize: "1.3125rem", - fontWeight: 500 - } - } - }); - -export default createTheme; diff --git a/src/theme/index.ts b/src/theme/index.ts deleted file mode 100644 index 99154b40b..000000000 --- a/src/theme/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./createSaleorTheme"; -export { default } from "./createSaleorTheme"; -export * from "./types"; -export * from "./styles"; diff --git a/src/theme/inputs.ts b/src/theme/inputs.ts deleted file mode 100644 index 538795162..000000000 --- a/src/theme/inputs.ts +++ /dev/null @@ -1,160 +0,0 @@ -import { fade } from "@material-ui/core/styles/colorManipulator"; -import { Overrides } from "@material-ui/core/styles/overrides"; -import { IThemeColors } from "@saleor/components/Theme/themes"; - -const inputOverrides = (colors: IThemeColors): Overrides => ({ - MuiInput: { - input: { - "&:-webkit-autofill": { - WebkitTextFillColor: colors.font.default, - boxShadow: `inset 0 0 0px 9999px ${colors.autofill}` - }, - "&::placeholder": { - opacity: "1 !important" as any - }, - color: colors.font.default - }, - underline: { - "&:after": { - borderBottomColor: colors.primary - } - } - }, - MuiInputBase: { - input: { - "&$disabled": { - color: colors.input.disabledText - }, - "&::placeholder": { - color: colors.font.gray, - opacity: "1 !important" as any - }, - zIndex: 2 - } - }, - MuiInputLabel: { - filled: { - zIndex: 2 - }, - formControl: { - transform: "translate(0, 1.5px) scale(0.75)", - transformOrigin: "top left" as "top left", - width: "100%" - }, - outlined: { - "&$shrink": { - transform: "translate(12px, 9px) scale(0.75)" - }, - transform: "translate(14px, 18px) scale(1)", - zIndex: 9 - }, - root: { - "&$disabled": { - color: `${fade(colors.primary, 0.4)} !important` as any - }, - "&$error": { - "&$focused": { - color: colors.error - }, - color: colors.error - }, - "&&$focused": { - "&:not($error)": { - color: colors.primary - } - }, - color: fade(colors.input.text, 0.6) - }, - shrink: { - // Negates x0.75 scale - width: "133%" - } - }, - MuiOutlinedInput: { - input: { - "&:-webkit-autofill": { - borderRadius: 4, - boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, - zIndex: 0 - }, - color: colors.input.text, - padding: "23px 12px 10px 12px" - }, - inputMultiline: { - left: -2, - padding: "10px 0", - position: "relative" - }, - root: { - "& fieldset": { - "&&:not($error)": { - borderColor: colors.input.border - }, - top: 0, - zIndex: 1 - }, - "& legend": { - display: "none" - }, - "&$disabled": { - "& fieldset": { - borderColor: [[colors.input.disabled], "!important"] as any - }, - "& input": { - backgroundColor: colors.input.disabledBackground, - color: colors.input.disabledText, - zIndex: 2 - } - }, - "&$error": { - "&$focused": { - "& fieldset": { - borderColor: colors.error - }, - "& input": { - color: colors.error, - zIndex: 2 - } - }, - "&:hover": { - "& fieldset": { - borderColor: colors.error - }, - "& input": { - color: colors.error, - zIndex: 2 - } - } - }, - "&$focused": { - "& input": { - "& fieldset": { - borderColor: colors.primary - }, - "&::placeholder": { - opacity: [[1], "!important"] as any - }, - color: colors.font.default - } - }, - "&:hover": { - "& input": { - color: colors.font.default - }, - "&&&": { - "& fieldset": { - borderColor: colors.primary - }, - "&$error fieldset": { - borderColor: colors.input.error - } - } - }, - backgroundColor: colors.background.paper, - borderColor: colors.input.border, - top: 0 - } - } -}); - -export default inputOverrides; diff --git a/src/theme/palette.ts b/src/theme/palette.ts deleted file mode 100644 index 73b7e6592..000000000 --- a/src/theme/palette.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { IThemeColors } from "@saleor/components/Theme/themes"; - -import { SaleorPaletteOptions } from "./types"; - -const createPalette = (colors: IThemeColors): SaleorPaletteOptions => ({ - action: { - active: colors.checkbox.default - }, - alert: colors.alert, - background: colors.background, - divider: colors.divider, - error: { - main: colors.error - }, - primary: { - contrastText: "#ffffff", - dark: colors.font.textDisabled, - main: colors.primary - }, - secondary: { - contrastText: "#ffffff", - main: colors.secondary - }, - text: { - disabled: colors.font.gray, - hint: colors.font.gray, - primary: colors.font.default, - secondary: colors.font.gray - }, - textHighlighted: { - active: colors.primary, - inactive: colors.highlightInactive.default - }, - type: colors.theme -}); - -export default createPalette; diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts deleted file mode 100644 index acabb800c..000000000 --- a/src/theme/shadows.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Shadows } from "@material-ui/core/styles/shadows"; - -const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => - [ - `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.2)`, - `0 ${uv}px ${ub}px ${us}px rgba(0, 0, 0, 0.14)`, - `0 ${av}px ${ab}px ${as}px rgba(0, 0, 0, 0.12)` - ].join(","); - -const shadows: Shadows = [ - "none", - createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0), - createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0), - createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0), - createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1), - createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1), - createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1), - createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2), - createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3), - createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4), - createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4), - createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4), - createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4), - createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4), - createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5), - createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5), - createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5), - createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4), - createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3), - createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1), - createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1), - createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1), - createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2), - createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2), - createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3) -]; - -export default shadows; diff --git a/src/theme/styles.ts b/src/theme/styles.ts deleted file mode 100644 index d349442a4..000000000 --- a/src/theme/styles.ts +++ /dev/null @@ -1,57 +0,0 @@ -import muiMakeStyles from "@material-ui/core/styles/makeStyles"; -import useMuiTheme from "@material-ui/core/styles/useTheme"; -import muiWithStyles from "@material-ui/core/styles/withStyles"; -import { StyleRules } from "@material-ui/styles/withStyles"; -import { - ClassKeyOfStyles, - ClassNameMap, - StyledComponentProps, - Styles, - WithStylesOptions -} from "@material-ui/styles/withStyles"; -import { PropInjector } from "@material-ui/types"; - -import { SaleorTheme } from "./types"; - -export function makeStyles< - Props extends Record = {}, - ClassKey extends string = string ->( - styles: Styles, - options?: Omit, "withTheme"> -): keyof Props extends never - ? (props?: any) => ClassNameMap - : (props: Props) => ClassNameMap { - return muiMakeStyles(styles, options); -} - -export type WithStyles< - StylesOrClassKey extends string | Styles = string, - IncludeTheme extends boolean | undefined = false -> = (IncludeTheme extends true ? { theme: SaleorTheme } : {}) & { - classes: ClassNameMap>; -}; - -export function withStyles< - ClassKey extends string, - Options extends WithStylesOptions = {}, - Props extends Record = {} ->( - style: Styles, - options?: Options -): PropInjector< - WithStyles, - StyledComponentProps & Props -> { - return muiWithStyles(style, options); -} - -export function useTheme(): SaleorTheme { - return useMuiTheme(); -} - -export function createStyles( - styles: StyleRules -): StyleRules { - return styles; -} diff --git a/src/theme/tables.ts b/src/theme/tables.ts deleted file mode 100644 index bd75718fa..000000000 --- a/src/theme/tables.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { fade } from "@material-ui/core/styles/colorManipulator"; -import { Overrides } from "@material-ui/core/styles/overrides"; -import { IThemeColors } from "@saleor/components/Theme/themes"; - -const tableOverrides = ( - colors: IThemeColors, - fontFamily: string -): Overrides => ({ - MuiTable: { - root: { - fontFamily, - fontFeatureSettings: '"tnum"' - } - }, - MuiTableCell: { - body: { - fontSize: "1rem", - paddingBottom: 8, - paddingTop: 8 - }, - head: { - fontSize: "1rem" - }, - paddingCheckbox: { - "&:first-child": { - padding: "0 12px", - width: 72 - }, - "&:not(first-child)": { - padding: 0, - width: 52 - } - }, - root: { - "&:first-child": { - "&:not($paddingCheckbox)": { - paddingLeft: 24 + "px", - textAlign: "left" as "left" - } - }, - borderBottomColor: colors.paperBorder, - height: 56, - padding: "4px 24px" - } - }, - MuiTableRow: { - footer: { - "$root$hover&:hover": { - background: "none" - } - }, - head: { - "$root$hover&:hover": { - background: "none" - } - }, - hover: { - "$root&:hover": { - backgroundColor: fade(colors.primary, 0.3) - } - }, - root: { - "&$selected": { - backgroundColor: fade(colors.primary, 0.05) - } - } - } -}); - -export default tableOverrides; diff --git a/src/theme/types.ts b/src/theme/types.ts deleted file mode 100644 index c218a4b64..000000000 --- a/src/theme/types.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Theme } from "@material-ui/core/styles"; -import { ThemeOptions } from "@material-ui/core/styles/createMuiTheme"; -import { - Palette, - PaletteOptions -} from "@material-ui/core/styles/createPalette"; - -export type AlertPalette = Record< - "success" | "error" | "warning" | "info", - string ->; -export type AlertColors = Record<"paper" | "icon", AlertPalette>; -interface ExtraPaletteOptions { - alert?: AlertColors; - textHighlighted?: { - active: string; - inactive: string; - }; -} - -export interface SaleorPalette extends Palette, ExtraPaletteOptions {} - -export interface SaleorPaletteOptions - extends PaletteOptions, - ExtraPaletteOptions {} - -export interface SaleorTheme extends Theme { - palette: SaleorPalette; -} - -export interface SaleorThemeOptions extends ThemeOptions { - palette: SaleorPaletteOptions; -} diff --git a/src/themeOverrides.ts b/src/themeOverrides.ts new file mode 100644 index 000000000..1acfab1ad --- /dev/null +++ b/src/themeOverrides.ts @@ -0,0 +1,17 @@ +import { Theme } from "@material-ui/core/styles"; + +const themeOverrides: Partial = { + overrides: { + MuiTableCell: { + body: { + paddingBottom: 8, + paddingTop: 8 + }, + root: { + height: 56, + padding: "4px 24px" + } + } + } +}; +export default themeOverrides; diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx index 92a1bc312..05093fa63 100644 --- a/src/translations/components/TranslationFields/TranslationFields.tsx +++ b/src/translations/components/TranslationFields/TranslationFields.tsx @@ -14,7 +14,7 @@ import Hr from "@saleor/components/Hr"; import Skeleton from "@saleor/components/Skeleton"; import TablePagination from "@saleor/components/TablePagination"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { ListProps } from "@saleor/types"; import classNames from "classnames"; import React from "react"; diff --git a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx index 0c4ae5d99..1ccc61303 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx @@ -3,7 +3,7 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; 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"; diff --git a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx index 1f882cbfe..b25494c26 100644 --- a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx +++ b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx @@ -1,10 +1,10 @@ -import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import LanguageSwitch from "@saleor/components/LanguageSwitch"; import PageHeader from "@saleor/components/PageHeader"; import { CategoryTranslationFragment } from "@saleor/fragments/types/CategoryTranslationFragment"; import { commonMessages, sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import { TranslationInputFieldName, @@ -38,9 +38,9 @@ const TranslationsCategoriesPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.translations)} - + = return ( - + {intl.formatMessage(sectionNames.translations)} - + return ( - + {intl.formatMessage({ defaultMessage: "Languages" })} - + = ({ return ( - + {intl.formatMessage(sectionNames.translations)} - + return ( - + {intl.formatMessage(sectionNames.translations)} - + = ({ return ( - + {intl.formatMessage(sectionNames.translations)} - + = ({ return ( - + {intl.formatMessage(sectionNames.translations)} - + - + {intl.formatMessage(sectionNames.translations)} - + = ({ return ( - + {intl.formatMessage(sectionNames.translations)} - + = ({ return ( - + - + = ({ />
- diff --git a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx index d4ae8ff51..c5338bcf0 100644 --- a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx +++ b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx @@ -1,4 +1,3 @@ -import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import CompanyAddressInput from "@saleor/components/CompanyAddressInput"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -6,7 +5,7 @@ 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_countries } from "@saleor/components/Shop/types/ShopInfo"; import { AddressTypeInput } from "@saleor/customers/types"; import { WarehouseErrorFragment } from "@saleor/fragments/types/WarehouseErrorFragment"; @@ -14,6 +13,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { findValueInEnum, maybe } from "@saleor/misc"; import { CountryCode } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; @@ -87,9 +87,9 @@ const WarehouseDetailsPage: React.FC = ({ return ( - + - +
@@ -121,11 +121,11 @@ const WarehouseDetailsPage: React.FC = ({ />
- diff --git a/src/warehouses/components/WarehouseList/WarehouseList.tsx b/src/warehouses/components/WarehouseList/WarehouseList.tsx index ea82fe75c..e78b8c307 100644 --- a/src/warehouses/components/WarehouseList/WarehouseList.tsx +++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx @@ -13,8 +13,8 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TablePagination from "@saleor/components/TablePagination"; import { WarehouseWithShippingFragment } from "@saleor/fragments/types/WarehouseWithShippingFragment"; +import { makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; -import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { getArrowDirection } from "@saleor/utils/sort"; @@ -40,7 +40,7 @@ const useStyles = makeStyles( display: "flex", justifyContent: "flex-end", position: "relative", - right: -theme.spacing(2) + right: theme.spacing(-2) }, colActions: { textAlign: "right" diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx index e0726ed0f..9ec7134dc 100644 --- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx +++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx @@ -1,12 +1,12 @@ import { Button, Card } from "@material-ui/core"; -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 SearchBar from "@saleor/components/SearchBar"; import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { WarehouseWithShippingFragment } from "@saleor/fragments/types/WarehouseWithShippingFragment"; import { sectionNames } from "@saleor/intl"; +import { Backlink } from "@saleor/macaw-ui"; import { PageListProps, SearchPageProps, @@ -60,9 +60,9 @@ export const WarehouseListPage: React.FC = ({ return ( - + - + = ({ /> - - - + {limitReached && ( + + + + )} = ({ {({ data, hasChanged, submit, change }) => ( - {appName} + {appName} = ({ />
- )} diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx index 859a24c90..350bb134d 100644 --- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx +++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx @@ -4,7 +4,7 @@ import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import { WebhookErrorFragment } from "@saleor/fragments/types/WebhookErrorFragment"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getWebhookErrorMessage from "@saleor/utils/errors/webhooks"; import React from "react"; diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx index 1c5b3fd59..a823243d9 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx +++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx @@ -1,12 +1,12 @@ -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 FormSpacer from "@saleor/components/FormSpacer"; 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 { WebhookErrorFragment } from "@saleor/fragments/types/WebhookErrorFragment"; +import { Backlink } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import WebhookEvents from "@saleor/webhooks/components/WebhookEvents"; @@ -64,7 +64,7 @@ const WebhooksDetailsPage: React.FC = ({ {({ data, hasChanged, submit, change }) => ( - {appName} + {appName} = ({ />
- )} diff --git a/src/webhooks/components/WebhooksList/styles.ts b/src/webhooks/components/WebhooksList/styles.ts index b57e1ce91..b5c969bf6 100644 --- a/src/webhooks/components/WebhooksList/styles.ts +++ b/src/webhooks/components/WebhooksList/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@saleor/theme"; +import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ diff --git a/testUtils/wrapper.tsx b/testUtils/wrapper.tsx index 24cfda94d..0abd89851 100644 --- a/testUtils/wrapper.tsx +++ b/testUtils/wrapper.tsx @@ -1,7 +1,7 @@ import { Provider as DateProvider } from "@saleor/components/Date/DateContext"; import { Locale, RawLocaleProvider } from "@saleor/components/Locale"; -import ThemeProvider from "@saleor/components/Theme"; import { TimezoneProvider } from "@saleor/components/Timezone"; +import { ThemeProvider } from "@saleor/macaw-ui"; import React from "react"; import { IntlProvider } from "react-intl"; @@ -15,7 +15,7 @@ const Wrapper: React.FC = ({ children }) => ( > - {children} + {children} diff --git a/webpack.config.js b/webpack.config.js index 5870b8644..22ac093ff 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -151,6 +151,17 @@ module.exports = speedMeasureWrapper((env, argv) => { bundleAnalyzerPlugin ].filter(Boolean), resolve: { + // Resolve macaw ui's peer dependencies to our own node_modules + // to make it work with npm link + alias: { + react: path.resolve("./node_modules/react"), + "react-dom": path.resolve("./node_modules/react-dom"), + "@material-ui/core": path.resolve("./node_modules/@material-ui/core"), + "@material-ui/icons": path.resolve("./node_modules/@material-ui/icons"), + "@material-ui/styles": path.resolve( + "./node_modules/@material-ui/styles" + ) + }, extensions: [".js", ".jsx", ".ts", ".tsx"], plugins: [pathsPlugin] }