diff --git a/package-lock.json b/package-lock.json index c4bc3f09f..e400ff786 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1633,103 +1633,185 @@ } }, "@material-ui/core": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz", - "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==", + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.6.0.tgz", + "integrity": "sha512-nzD0oO3R2dcX/+hmi5FUFSddMKySK76Ryuno3J/iOotbKvzXwbf9szzhL8KPNmsj+vizVNfkEfhzOuuCHRBKKQ==", "requires": { - "@babel/runtime": "^7.2.0", - "@material-ui/system": "^3.0.0-alpha.0", - "@material-ui/utils": "^3.0.0-alpha.2", - "@types/jss": "^9.5.6", - "@types/react-transition-group": "^2.0.8", - "brcast": "^3.0.1", - "classnames": "^2.2.5", - "csstype": "^2.5.2", - "debounce": "^1.1.0", - "deepmerge": "^3.0.0", - "dom-helpers": "^3.2.1", + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.6.0", + "@material-ui/system": "^4.5.2", + "@material-ui/types": "^4.1.1", + "@material-ui/utils": "^4.5.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.2", + "convert-css-length": "^2.0.1", "hoist-non-react-statics": "^3.2.1", - "is-plain-object": "^2.0.4", - "jss": "^9.8.7", - "jss-camel-case": "^6.0.0", - "jss-default-unit": "^8.0.2", - "jss-global": "^3.0.0", - "jss-nested": "^6.0.1", - "jss-props-sort": "^6.0.0", - "jss-vendor-prefixer": "^7.0.0", - "normalize-scroll-left": "^0.1.2", + "normalize-scroll-left": "^0.2.0", "popper.js": "^1.14.1", - "prop-types": "^15.6.0", - "react-event-listener": "^0.6.2", - "react-transition-group": "^2.2.1", - "recompose": "0.28.0 - 0.30.0", - "warning": "^4.0.1" - } - }, - "@material-ui/icons": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz", - "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==", - "requires": { - "@babel/runtime": "^7.2.0", - "recompose": "0.28.0 - 0.30.0" - } - }, - "@material-ui/styles": { - "version": "3.0.0-alpha.10", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-3.0.0-alpha.10.tgz", - "integrity": "sha512-qJ5eiupBPRCNlMCDZ2G5h8auBtBtm8uT/oCUAJ/FqhO5oC7POLmmvDN1Cq1cgAmqQnaL6uN5mAM1Gc90GpKr9A==", - "requires": { - "@babel/runtime": "^7.2.0", - "@emotion/hash": "^0.7.1", - "@material-ui/utils": "^3.0.0-alpha.2", - "classnames": "^2.2.5", - "deepmerge": "^3.0.0", - "hoist-non-react-statics": "^3.2.1", - "jss": "^10.0.0-alpha.7", - "jss-plugin-camel-case": "^10.0.0-alpha.7", - "jss-plugin-default-unit": "^10.0.0-alpha.7", - "jss-plugin-global": "^10.0.0-alpha.7", - "jss-plugin-nested": "^10.0.0-alpha.7", - "jss-plugin-props-sort": "^10.0.0-alpha.7", - "jss-plugin-rule-value-function": "^10.0.0-alpha.7", - "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7", - "prop-types": "^15.6.0", - "warning": "^4.0.1" + "prop-types": "^15.7.2", + "react-transition-group": "^4.3.0" }, "dependencies": { + "@material-ui/styles": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.6.0.tgz", + "integrity": "sha512-lqqh4UEMdIYcU1Yth4pQyMTah02uAkg3NOT3MirN9FUexdL8pNA6zCHigEgDSfwmvnXyxHhxTkphfy0DRfnt9w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.7.1", + "@material-ui/types": "^4.1.1", + "@material-ui/utils": "^4.5.2", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.0", + "jss-plugin-camel-case": "^10.0.0", + "jss-plugin-default-unit": "^10.0.0", + "jss-plugin-global": "^10.0.0", + "jss-plugin-nested": "^10.0.0", + "jss-plugin-props-sort": "^10.0.0", + "jss-plugin-rule-value-function": "^10.0.0", + "jss-plugin-vendor-prefixer": "^10.0.0", + "prop-types": "^15.7.2" + } + }, + "css-vendor": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", + "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", + "requires": { + "@babel/runtime": "^7.6.2", + "is-in-browser": "^1.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", + "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "jss": { - "version": "10.0.0-alpha.23", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz", - "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz", + "integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==", "requires": { "@babel/runtime": "^7.3.1", "csstype": "^2.6.5", "is-in-browser": "^1.1.3", "tiny-warning": "^1.0.2" } + }, + "jss-plugin-camel-case": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz", + "integrity": "sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.0.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz", + "integrity": "sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0" + } + }, + "jss-plugin-global": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz", + "integrity": "sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0" + } + }, + "jss-plugin-nested": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz", + "integrity": "sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz", + "integrity": "sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz", + "integrity": "sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz", + "integrity": "sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.6", + "jss": "10.0.0" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" } } }, - "@material-ui/system": { - "version": "3.0.0-alpha.2", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", - "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==", + "@material-ui/icons": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz", + "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==", "requires": { - "@babel/runtime": "^7.2.0", - "deepmerge": "^3.0.0", - "prop-types": "^15.6.0", - "warning": "^4.0.1" + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/system": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.2.tgz", + "integrity": "sha512-h9RWvdM9XKlHHqwiuhyvWdobptQkHli+m2jJFs7i1AI/hmGsIc4reDmS7fInhETgt/Txx7uiAIznfRNIIVHmQw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.5.2", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz", + "integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==", + "requires": { + "@types/react": "*" } }, "@material-ui/utils": { - "version": "3.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz", - "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.5.2.tgz", + "integrity": "sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ==", "requires": { - "@babel/runtime": "^7.2.0", - "prop-types": "^15.6.0", - "react-is": "^16.6.3" + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.6" } }, "@mrmlnc/readdir-enhanced": { @@ -2932,15 +3014,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, - "@types/jss": { - "version": "9.5.8", - "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz", - "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==", - "requires": { - "csstype": "^2.0.0", - "indefinite-observable": "^1.0.1" - } - }, "@types/lodash": { "version": "4.14.136", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.136.tgz", @@ -3098,9 +3171,9 @@ } }, "@types/react-transition-group": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz", - "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz", + "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==", "requires": { "@types/react": "*" } @@ -6504,7 +6577,8 @@ "change-emitter": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz", - "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=" + "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=", + "dev": true }, "character-entities": { "version": "1.2.3", @@ -7196,6 +7270,11 @@ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" }, + "convert-css-length": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz", + "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==" + }, "convert-source-map": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", @@ -7612,11 +7691,6 @@ "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=", "dev": true }, - "debounce": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", - "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==" - }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -7688,11 +7762,6 @@ "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==", "dev": true }, - "deepmerge": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", - "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==" - }, "default-gateway": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", @@ -11153,14 +11222,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "indefinite-observable": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz", - "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==", - "requires": { - "symbol-observable": "1.2.0" - } - }, "indent-string": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", @@ -12831,76 +12892,6 @@ } } }, - "jss-plugin-camel-case": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz", - "integrity": "sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA==", - "requires": { - "@babel/runtime": "^7.0.0", - "hyphenate-style-name": "^1.0.2" - } - }, - "jss-plugin-default-unit": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz", - "integrity": "sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g==", - "requires": { - "@babel/runtime": "^7.0.0" - } - }, - "jss-plugin-global": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz", - "integrity": "sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ==", - "requires": { - "@babel/runtime": "^7.0.0" - } - }, - "jss-plugin-nested": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz", - "integrity": "sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw==", - "requires": { - "@babel/runtime": "^7.0.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz", - "integrity": "sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA==", - "requires": { - "@babel/runtime": "^7.0.0" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz", - "integrity": "sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA==", - "requires": { - "@babel/runtime": "^7.0.0" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz", - "integrity": "sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA==", - "requires": { - "@babel/runtime": "^7.0.0", - "css-vendor": "^1.1.0" - }, - "dependencies": { - "css-vendor": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-1.2.1.tgz", - "integrity": "sha512-ZpwiWxn5jWNJ7NF3DAb/Dc/+c2lRu+fnovej/adCv3VJsULJSjdXEpUwRcq4fnpAAh98Hi7b0GDnlyoNFcdv1g==", - "requires": { - "@babel/runtime": "^7.3.1", - "is-in-browser": "^1.0.2" - } - } - } - }, "jss-preset-default": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz", @@ -14715,9 +14706,9 @@ "dev": true }, "normalize-scroll-left": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz", - "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==" + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz", + "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==" }, "normalize-url": { "version": "2.0.1", @@ -16626,16 +16617,6 @@ "integrity": "sha512-oHf3b1J2Pxu03apiHvP21qBCkj6fG6A3c3ahya3fX0VXEZUTzIRLwZI9eZ/6cuOO+kvnzdVdGBxZlo+Tjh+hfQ==", "dev": true }, - "react-event-listener": { - "version": "0.6.6", - "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz", - "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==", - "requires": { - "@babel/runtime": "^7.2.0", - "prop-types": "^15.6.0", - "warning": "^4.0.1" - } - }, "react-fast-compare": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", @@ -16954,14 +16935,45 @@ } }, "react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", "requires": { - "dom-helpers": "^3.4.0", + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" + "prop-types": "^15.6.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz", + "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==" + }, + "dom-helpers": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz", + "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==", + "requires": { + "@babel/runtime": "^7.6.3", + "csstype": "^2.6.7" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", + "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } } }, "react-virtualized": { @@ -17109,6 +17121,7 @@ "version": "0.30.0", "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz", "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==", + "dev": true, "requires": { "@babel/runtime": "^7.0.0", "change-emitter": "^0.1.2", @@ -17121,7 +17134,8 @@ "hoist-non-react-statics": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==", + "dev": true } } }, @@ -20801,6 +20815,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, "requires": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index 8ffd9892f..db6bc6a6a 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,8 @@ "npm": ">=6.1.0" }, "dependencies": { - "@material-ui/core": "^3.9.3", - "@material-ui/icons": "^3.0.2", - "@material-ui/styles": "^3.0.0-alpha.10", + "@material-ui/core": "^4.5.1", + "@material-ui/icons": "^4.5.1", "apollo": "^2.17.2", "apollo-cache-inmemory": "^1.6.2", "apollo-client": "^2.6.4", diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx index 0cba7c234..9b34c1272 100644 --- a/src/attributes/components/AttributeList/AttributeList.tsx +++ b/src/attributes/components/AttributeList/AttributeList.tsx @@ -1,10 +1,9 @@ -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -21,7 +20,7 @@ export interface AttributeListProps extends ListProps, ListActions { attributes: AttributeList_attributes_edges_node[]; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ [theme.breakpoints.up("lg")]: { colFaceted: { width: 150 diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx index ca47fe3a4..f336e748f 100644 --- a/src/attributes/components/AttributeValues/AttributeValues.tsx +++ b/src/attributes/components/AttributeValues/AttributeValues.tsx @@ -1,13 +1,12 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -30,12 +29,12 @@ export interface AttributeValuesProps { onValueUpdate: (id: string) => void; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ columnAdmin: { width: "50%" }, columnDrag: { - width: 48 + theme.spacing.unit * 1.5 + width: 48 + theme.spacing(1.5) }, columnStore: { width: "50%" @@ -45,9 +44,9 @@ const useStyles = makeStyles((theme: Theme) => ({ }, iconCell: { "&:last-child": { - paddingRight: theme.spacing.unit + paddingRight: theme.spacing() }, - width: 48 + theme.spacing.unit * 1.5 + width: 48 + theme.spacing(1.5) }, link: { cursor: "pointer" diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx index 3d217293b..8a8d9edb7 100644 --- a/src/auth/components/Layout.tsx +++ b/src/auth/components/Layout.tsx @@ -1,5 +1,4 @@ -import { Theme } from "@material-ui/core/styles"; -import { makeStyles } from "@material-ui/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import SVG from "react-inlinesvg"; @@ -9,24 +8,24 @@ import saleorLightLogo from "@assets/images/logo-light.svg"; import useTheme from "@saleor/hooks/useTheme"; const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ logo: { "& svg": { display: "block", height: 40, - marginBottom: theme.spacing.unit * 4 + marginBottom: theme.spacing(4) } }, mainPanel: { [theme.breakpoints.down("sm")]: { - padding: theme.spacing.unit * 2 + padding: theme.spacing(2) }, background: theme.palette.background.paper, display: "flex", flexDirection: "column", height: "100vh", justifyContent: "center", - padding: theme.spacing.unit * 6, + padding: theme.spacing(6), width: "100%" }, mainPanelContent: { diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index eeb409627..554fde389 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -19,7 +19,7 @@ export interface FormData { password: string; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ buttonContainer: { display: "flex", @@ -38,9 +38,9 @@ const styles = (theme: Theme) => color: theme.palette.error.contrastText }, background: theme.palette.error.main, - borderRadius: theme.spacing.unit, - marginBottom: theme.spacing.unit * 3, - padding: theme.spacing.unit * 1.5 + borderRadius: theme.spacing(), + marginBottom: theme.spacing(3), + padding: theme.spacing(1.5) } }); diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index 48aa0ada7..83e003579 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx @@ -1,7 +1,7 @@ import Button from "@material-ui/core/Button"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; -import { makeStyles } from "@material-ui/styles"; 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 38e18d00b..c1bc3f754 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx @@ -1,8 +1,7 @@ import Button from "@material-ui/core/Button"; -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; -import { makeStyles } from "@material-ui/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -11,15 +10,15 @@ import FormSpacer from "@saleor/components/FormSpacer"; import { commonMessages } from "@saleor/intl"; const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ panel: { "& span": { color: theme.palette.error.contrastText }, background: theme.palette.error.main, - borderRadius: theme.spacing.unit, - marginBottom: theme.spacing.unit * 3, - padding: theme.spacing.unit * 1.5 + borderRadius: theme.spacing(), + marginBottom: theme.spacing(3), + padding: theme.spacing(1.5) }, submit: { width: "100%" diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 744737373..52c7697ff 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -1,6 +1,6 @@ import Button from "@material-ui/core/Button"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; -import { makeStyles } from "@material-ui/styles"; 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 2d43de581..ca042996e 100644 --- a/src/categories/components/CategoryBackground/CategoryBackground.tsx +++ b/src/categories/components/CategoryBackground/CategoryBackground.tsx @@ -1,6 +1,5 @@ -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import TextField from "@material-ui/core/TextField"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import Button from "@material-ui/core/Button"; @@ -16,7 +15,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails"; import { FormData } from "../CategoryUpdatePage"; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ fileField: { display: "none" }, @@ -29,11 +28,11 @@ const useStyles = makeStyles((theme: Theme) => ({ imageContainer: { background: "#ffffff", border: "1px solid #eaeaea", - borderRadius: theme.spacing.unit, + borderRadius: theme.spacing(), height: 148, justifySelf: "start", overflow: "hidden", - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), position: "relative", width: 148 } diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx index df277c317..0ca2bf615 100644 --- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx +++ b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx @@ -15,7 +15,7 @@ import { FormattedMessage } from "react-intl"; import { buttonMessages } from "@saleor/intl"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ deleteButton: { "&:hover": { diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx index 5ae05489e..bed629fb4 100644 --- a/src/categories/components/CategoryList/CategoryList.tsx +++ b/src/categories/components/CategoryList/CategoryList.tsx @@ -20,7 +20,7 @@ import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ [theme.breakpoints.up("lg")]: { colName: { diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index 1d7a894a6..e734f1c25 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx @@ -25,7 +25,7 @@ import { ListActions, ListProps } from "@saleor/types"; import React from "react"; import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ [theme.breakpoints.up("lg")]: { colName: { diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index 8162c60b6..df388b051 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/src/collections/components/CollectionImage/CollectionImage.tsx @@ -19,7 +19,7 @@ import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ PhotosIcon: { height: "64px", @@ -27,7 +27,7 @@ const styles = (theme: Theme) => width: "64px" }, PhotosIconContainer: { - margin: `${theme.spacing.unit * 5}px 0`, + margin: theme.spacing(5, 0), textAlign: "center" }, fileField: { @@ -42,11 +42,11 @@ const styles = (theme: Theme) => imageContainer: { background: "#ffffff", border: "1px solid #eaeaea", - borderRadius: theme.spacing.unit, + borderRadius: theme.spacing(), height: 148, justifySelf: "start", overflow: "hidden", - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), position: "relative", width: 148 } diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index aeca0420e..6439a4829 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/src/collections/components/CollectionList/CollectionList.tsx @@ -21,7 +21,7 @@ import { maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; import { CollectionList_collections_edges_node } from "../../types/CollectionList"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ [theme.breakpoints.up("lg")]: { colAvailability: { diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index 8cc81be9f..b34eef03f 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -29,13 +29,13 @@ import { maybe, renderCollection } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ colActions: { "&:last-child": { paddingRight: 0 }, - width: 76 + theme.spacing.unit / 2 + width: 76 + theme.spacing(0.5) }, colName: { paddingLeft: 0, diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx index c695a6663..24ef19b7b 100644 --- a/src/components/AccountPermissions/AccountPermissions.tsx +++ b/src/components/AccountPermissions/AccountPermissions.tsx @@ -15,10 +15,10 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import Skeleton from "@saleor/components/Skeleton"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ checkboxContainer: { - marginTop: theme.spacing.unit + marginTop: theme.spacing() }, hr: { backgroundColor: theme.overrides.MuiCard.root.borderColor, diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx index 24589a852..9515a5496 100644 --- a/src/components/ActionDialog/ActionDialog.tsx +++ b/src/components/ActionDialog/ActionDialog.tsx @@ -18,7 +18,7 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton/ConfirmButton"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ deleteButton: { "&:hover": { diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx index cd62da230..e2f624d94 100644 --- a/src/components/AddressEdit/AddressEdit.tsx +++ b/src/components/AddressEdit/AddressEdit.tsx @@ -16,11 +16,11 @@ import SingleAutocompleteSelectField, { SingleAutocompleteChoiceType } from "../SingleAutocompleteSelectField"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { display: "grid", - gridColumnGap: `${theme.spacing.unit * 2}px`, + gridColumnGap: theme.spacing(2), gridTemplateColumns: "1fr 1fr" } }); diff --git a/src/components/AddressFormatter/AddressFormatter.tsx b/src/components/AddressFormatter/AddressFormatter.tsx index e23c9fe1e..a7f7f59ac 100644 --- a/src/components/AddressFormatter/AddressFormatter.tsx +++ b/src/components/AddressFormatter/AddressFormatter.tsx @@ -18,23 +18,23 @@ const AddressFormatter: React.FC = ({ address }) => { fontStyle: "inherit" }} > - + {address.firstName} {address.lastName} {address.companyName && ( - {address.companyName} + {address.companyName} )} - + {address.streetAddress1}
{address.streetAddress2} - + {" "} {address.postalCode} {address.city} {address.cityArea ? ", " + address.cityArea : ""} - + {address.countryArea ? address.countryArea + ", " + address.country.country : address.country.country} diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx index 1ed5a063b..b9f2f00ee 100644 --- a/src/components/AppHeader/AppHeader.tsx +++ b/src/components/AppHeader/AppHeader.tsx @@ -16,36 +16,36 @@ export interface AppHeaderProps { onBack(); } -const styles = (theme: Theme) => +const styles = theme => createStyles({ backArrow: { fontSize: 30 }, menuButton: { flex: "0 0 auto", - marginLeft: theme.spacing.unit * -2, - marginRight: theme.spacing.unit, - marginTop: -theme.spacing.unit * 2 + marginLeft: -theme.spacing(2), + marginRight: theme.spacing(), + marginTop: -theme.spacing(2) }, root: { "&:hover": { - color: theme.typography.body2.color + color: theme.typography.body1.color }, alignItems: "center", color: theme.palette.grey[500], cursor: "pointer", display: "flex", - marginTop: theme.spacing.unit / 2, + marginTop: theme.spacing(0.5), transition: theme.transitions.duration.standard + "ms" }, skeleton: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), width: "10rem" }, title: { color: "inherit", flex: 1, - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(), textTransform: "uppercase" } }); diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index a379b5350..250ace005 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -8,12 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/MenuList"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; @@ -41,7 +36,7 @@ import createMenuStructure from "./menuStructure"; import ResponsiveDrawer from "./ResponsiveDrawer"; import ThemeSwitch from "./ThemeSwitch"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ appAction: { [theme.breakpoints.down("sm")]: { @@ -56,15 +51,15 @@ const styles = (theme: Theme) => }, appLoader: { height: appLoaderHeight, - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), zIndex: 1201 }, appLoaderPlaceholder: { height: appLoaderHeight, - marginBottom: theme.spacing.unit * 2 + marginBottom: theme.spacing(2) }, arrow: { - marginLeft: theme.spacing.unit * 2, + marginLeft: theme.spacing(2), transition: theme.transitions.duration.standard + "ms" }, content: { @@ -82,12 +77,12 @@ const styles = (theme: Theme) => paddingLeft: drawerWidth }, darkThemeSwitch: { - marginRight: theme.spacing.unit * 2 + marginRight: theme.spacing(2) }, header: { display: "flex", height: 40, - marginBottom: theme.spacing.unit * 3 + marginBottom: theme.spacing(3) }, isMenuSmall: { "& path": { @@ -186,8 +181,8 @@ const styles = (theme: Theme) => borderRadius: "50%", cursor: "pointer", height: 42, - left: theme.spacing.unit, - marginRight: theme.spacing.unit * 2, + left: theme.spacing(), + marginRight: theme.spacing(2), position: "relative", transform: "rotate(0deg)", transition: `${theme.transitions.duration.shorter}ms ease-in-out`, @@ -236,7 +231,7 @@ const styles = (theme: Theme) => padding: 0 }, background: theme.palette.background.paper, - padding: `0 ${theme.spacing.unit * 4}px` + padding: `0 ${theme.spacing(4)}px` }, spacer: { flex: 1 @@ -260,15 +255,13 @@ const styles = (theme: Theme) => flex: 1, flexGrow: 1, marginLeft: 0, - paddingBottom: theme.spacing.unit, + paddingBottom: theme.spacing(), [theme.breakpoints.up("sm")]: { - paddingBottom: theme.spacing.unit * 3 + paddingBottom: theme.spacing(3) } }, viewContainer: { - minHeight: `calc(100vh - ${theme.spacing.unit * 2 + - appLoaderHeight + - 70}px)` + minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)` } }); diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx index bd3e16ca9..f0c633d1e 100644 --- a/src/components/AppLayout/MenuList.tsx +++ b/src/components/AppLayout/MenuList.tsx @@ -24,7 +24,7 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls"; import MenuNested from "./MenuNested"; import { IMenuItem } from "./menuStructure"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ menuIcon: { "& svg": { @@ -78,14 +78,14 @@ const styles = (theme: Theme) => display: "flex", flexDirection: "column", height: "100%", - marginLeft: theme.spacing.unit * 4, - marginTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 3 + marginLeft: theme.spacing(4), + marginTop: theme.spacing(2), + paddingBottom: theme.spacing(3) }, menuListItem: { alignItems: "center", display: "block", - marginBottom: theme.spacing.unit * 5, + marginBottom: theme.spacing(5), paddingLeft: 0, textDecoration: "none", transition: theme.transitions.duration.standard + "ms" diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx index df3b69d9c..26e41739e 100644 --- a/src/components/AppLayout/MenuNested.tsx +++ b/src/components/AppLayout/MenuNested.tsx @@ -17,7 +17,7 @@ import { drawerWidthExpanded } from "./consts"; import { IActiveSubMenu } from "./MenuList"; import { IMenuItem } from "./menuStructure"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ menuListNested: { background: theme.palette.background.paper, @@ -70,7 +70,7 @@ const styles = (theme: Theme) => } }, display: "block", - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), padding: "0px 30px", textDecoration: "none" }, diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx index cf109c53b..976fe3a63 100644 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ b/src/components/AppLayout/ResponsiveDrawer.tsx @@ -9,7 +9,7 @@ import { import React from "react"; import { drawerWidth, drawerWidthExpanded } from "./consts"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ drawerDesktop: { backgroundColor: theme.palette.background.paper, diff --git a/src/components/AppLayout/ThemeSwitch.tsx b/src/components/AppLayout/ThemeSwitch.tsx index 17112caf2..5fcc02e8a 100644 --- a/src/components/AppLayout/ThemeSwitch.tsx +++ b/src/components/AppLayout/ThemeSwitch.tsx @@ -5,7 +5,7 @@ import React from "react"; import MoonIcon from "../../icons/Moon"; import SunIcon from "../../icons/Sun"; -const switchStyles = (theme: Theme) => ({ +const switchStyles = theme => ({ bar: { "$colorPrimary$checked + &": { backgroundColor: theme.palette.background.paper diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx index 209128e4e..51ac89961 100644 --- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx +++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx @@ -43,20 +43,20 @@ const DebounceAutocomplete: React.ComponentType< DebounceProps > = Debounce; -const styles = (theme: Theme) => +const styles = theme => createStyles({ container: { flexGrow: 1, position: "relative" }, menuBack: { - marginLeft: -theme.spacing.unit / 2, - marginRight: theme.spacing.unit + marginLeft: -theme.spacing(.5), + marginRight: theme.spacing(1) }, paper: { left: 0, - marginTop: theme.spacing.unit, - padding: theme.spacing.unit, + marginTop: theme.spacing(), + padding: theme.spacing(), position: "absolute", right: 0, zIndex: 2 diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index 1ce0e9c41..35348e964 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/src/components/CardMenu/CardMenu.tsx @@ -23,7 +23,7 @@ export interface CardMenuProps { menuItems: CardMenuItem[]; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ iconButton: { background: theme.palette.background.paper, diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx index 9f205b573..6daf9a0fa 100644 --- a/src/components/CardSpacer.tsx +++ b/src/components/CardSpacer.tsx @@ -6,13 +6,13 @@ import { } from "@material-ui/core/styles"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ spacer: { [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing.unit + marginTop: theme.spacing(1) }, - marginTop: theme.spacing.unit * 3 + marginTop: theme.spacing(3) } }); diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx index 55b92178d..d8be9e9bb 100644 --- a/src/components/CardTitle/CardTitle.tsx +++ b/src/components/CardTitle/CardTitle.tsx @@ -8,7 +8,7 @@ import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ children: theme.mixins.gutters({}), constantHeight: { @@ -32,7 +32,7 @@ const styles = (theme: Theme) => lineHeight: 1 }, toolbar: { - marginRight: -theme.spacing.unit + marginRight: -theme.spacing(1) } }); diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index c0ebe2025..38d173eed 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -25,7 +25,7 @@ export type CheckboxProps = Omit< onChange?: (event: React.ChangeEvent) => void; }; -const styles = (theme: Theme) => +const styles = theme => createStyles({ box: { "&$checked": { diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0c3b22da9..f409874b9 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -16,12 +16,12 @@ export interface ChipProps { onClose?: () => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ closeIcon: { cursor: "pointer", fontSize: 16, - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(), verticalAlign: "middle" }, label: { @@ -31,7 +31,7 @@ const styles = (theme: Theme) => background: fade(theme.palette.secondary.main, 0.8), borderRadius: 8, display: "inline-block", - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), padding: "6px 12px" } }); diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx index dfef82983..aa1f55275 100644 --- a/src/components/ColumnPicker/ColumnPicker.tsx +++ b/src/components/ColumnPicker/ColumnPicker.tsx @@ -1,9 +1,8 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Grow from "@material-ui/core/Grow"; import Popper from "@material-ui/core/Popper"; -import { Theme } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; -import makeStyles from "@material-ui/styles/makeStyles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import React from "react"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; @@ -26,10 +25,10 @@ export interface ColumnPickerProps } const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ popper: { boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`, - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), zIndex: 1 } }), diff --git a/src/components/ColumnPicker/ColumnPickerButton.tsx b/src/components/ColumnPicker/ColumnPickerButton.tsx index b57b8991e..b4778d0d9 100644 --- a/src/components/ColumnPicker/ColumnPickerButton.tsx +++ b/src/components/ColumnPicker/ColumnPickerButton.tsx @@ -1,8 +1,7 @@ import Button from "@material-ui/core/Button"; -import { Theme } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; -import makeStyles from "@material-ui/styles/makeStyles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -14,16 +13,16 @@ interface ColumnPickerButtonProps { } const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ icon: { - marginLeft: theme.spacing.unit * 2, + marginLeft: theme.spacing(2), transition: theme.transitions.duration.short + "ms" }, root: { "& span": { color: theme.palette.primary.main }, - paddingRight: theme.spacing.unit + paddingRight: theme.spacing(1) }, rootActive: { background: fade(theme.palette.primary.main, 0.1) diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index bffe1bc82..ef4a238dd 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -2,9 +2,8 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import CircularProgress from "@material-ui/core/CircularProgress"; -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; -import makeStyles from "@material-ui/styles/makeStyles"; import classNames from "classnames"; import React from "react"; import InfiniteScroll from "react-infinite-scroller"; @@ -31,7 +30,7 @@ export interface ColumnPickerContentProps extends Partial { onSave: () => void; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ actionBar: { display: "flex", justifyContent: "space-between" @@ -41,16 +40,16 @@ const useStyles = makeStyles((theme: Theme) => ({ transition: theme.transitions.duration.short + "ms" }, cancelButton: { - marginRight: theme.spacing.unit * 2 + marginRight: theme.spacing(2) }, content: { display: "grid", - gridColumnGap: theme.spacing.unit * 3, + gridColumnGap: theme.spacing(3), gridTemplateColumns: "repeat(3, 1fr)", maxHeight: 256, overflowX: "visible", overflowY: "scroll", - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px` + padding: theme.spacing(2, 3) }, contentContainer: { padding: 0 @@ -62,7 +61,7 @@ const useStyles = makeStyles((theme: Theme) => ({ alignItems: "center", display: "flex", gridColumnEnd: "span 3", - height: theme.spacing.unit * 3, + height: theme.spacing(3), justifyContent: "center" }, root: { diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx index e105eafbc..27f046f26 100644 --- a/src/components/ConfirmButton/ConfirmButton.tsx +++ b/src/components/ConfirmButton/ConfirmButton.tsx @@ -19,7 +19,7 @@ export type ConfirmButtonTransitionState = | "error" | "default"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ error: { "&:hover": { diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 289563bc3..47b1311d0 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -7,7 +7,7 @@ import { import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { [theme.breakpoints.up("lg")]: { @@ -16,9 +16,9 @@ const styles = (theme: Theme) => maxWidth: theme.breakpoints.width("lg") }, [theme.breakpoints.up("sm")]: { - padding: `0 ${theme.spacing.unit * 3}px` + padding: theme.spacing(0, 3) }, - padding: `0 ${theme.spacing.unit}px` + padding: theme.spacing(0, 1) } }); diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx index b9d9e6a36..78900c13d 100644 --- a/src/components/ControlledSwitch.tsx +++ b/src/components/ControlledSwitch.tsx @@ -3,10 +3,10 @@ import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ label: { - marginLeft: theme.spacing.unit * 3.5 + marginLeft: theme.spacing(3.5) }, labelText: { fontSize: 14 diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index f7fe18a79..1a1928eed 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/src/components/CountryList/CountryList.tsx @@ -32,24 +32,24 @@ export interface CountryListProps { onCountryUnassign: (country: string) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ iconCell: { "&:last-child": { paddingRight: 0 }, - width: 48 + theme.spacing.unit / 2 + width: 48 + theme.spacing(2) }, indicator: { color: theme.palette.text.disabled, display: "inline-block", left: 0, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(.5), position: "absolute" }, offsetCell: { "&:first-child": { - paddingLeft: theme.spacing.unit * 3 + paddingLeft: theme.spacing(3) }, position: "relative" }, diff --git a/src/components/EditableTableCell/EditableTableCell.tsx b/src/components/EditableTableCell/EditableTableCell.tsx index 594c244ca..75cc7d56c 100644 --- a/src/components/EditableTableCell/EditableTableCell.tsx +++ b/src/components/EditableTableCell/EditableTableCell.tsx @@ -14,7 +14,7 @@ import React from "react"; import useForm from "@saleor/hooks/useForm"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ card: { border: `1px solid ${theme.overrides.MuiCard.root.borderColor}` @@ -33,10 +33,10 @@ const styles = (theme: Theme) => }, root: { left: 0, - minWidth: theme.spacing.unit * 20, + minWidth: theme.spacing(20), position: "absolute", top: 0, - width: `calc(100% + ${4 * theme.spacing.unit}px)`, + width: `calc(100% + ${theme.spacing(4)}px)`, zIndex: 2 }, text: { diff --git a/src/components/ErrorMessageCard/ErrorMessageCard.tsx b/src/components/ErrorMessageCard/ErrorMessageCard.tsx index 585813799..423976bea 100644 --- a/src/components/ErrorMessageCard/ErrorMessageCard.tsx +++ b/src/components/ErrorMessageCard/ErrorMessageCard.tsx @@ -13,7 +13,7 @@ const ErrorMessageCard: React.FC = ({ message }) => ( - {message} + {message} ); diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx index 38b374c22..3314c57ca 100644 --- a/src/components/ErrorPage/ErrorPage.tsx +++ b/src/components/ErrorPage/ErrorPage.tsx @@ -16,20 +16,20 @@ export interface ErrorPageProps extends WithStyles { onBack: () => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ bottomHeader: { fontWeight: 600 as 600, textTransform: "uppercase" }, button: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), padding: 20 }, container: { [theme.breakpoints.down("sm")]: { gridTemplateColumns: "1fr", - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), width: "100%" }, display: "grid", diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx index 7a71d6375..adc7cefdb 100644 --- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx +++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx @@ -7,33 +7,33 @@ import { import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ action: { flex: "0 0 auto" }, grid: { - padding: theme.spacing.unit * 2 + padding: theme.spacing(2) }, menuButton: { flex: "0 0 auto", - marginLeft: theme.spacing.unit * -2, - marginRight: theme.spacing.unit * 3, - marginTop: -theme.spacing.unit * 2 + marginLeft: -theme.spacing(2), + marginRight: theme.spacing(3), + marginTop: -theme.spacing(2) }, root: { alignItems: "center", display: "flex", - marginBottom: theme.spacing.unit * 3 + marginBottom: theme.spacing(3) }, subtitle: { alignItems: "center", display: "flex", - marginBottom: theme.spacing.unit * 2 + marginBottom: theme.spacing(2) }, title: { flex: 1, - paddingBottom: theme.spacing.unit * 2 + paddingBottom: theme.spacing(2) } }); diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index b9d216264..48930357c 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -2,12 +2,7 @@ import ButtonBase from "@material-ui/core/ButtonBase"; import Grow from "@material-ui/core/Grow"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; @@ -26,7 +21,7 @@ export interface FilterProps { onFilterAdd: (filter: FilterContentSubmitData) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ addFilterButton: { "&$filterButton": { @@ -37,7 +32,7 @@ const styles = (theme: Theme) => border: `1px solid ${theme.palette.primary.main}`, cursor: "pointer", marginBottom: 0, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), marginTop: 0, transition: theme.transitions.duration.short + "ms" } @@ -62,20 +57,19 @@ const styles = (theme: Theme) => backgroundColor: fade(theme.palette.primary.main, 0.6), borderRadius: "4px", display: "flex", - height: "45px", + height: 40, justifyContent: "space-around", - margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`, + margin: theme.spacing(2, 1), marginLeft: 0, - padding: "0 16px", - position: "relative", - top: -5 + padding: theme.spacing(0, 2), + position: "relative" }, paper: { "& p": { paddingBottom: 10 }, - marginTop: theme.spacing.unit * 2, - padding: theme.spacing.unit * 2, + marginTop: theme.spacing(2), + padding: theme.spacing(2), width: 240 }, popover: { diff --git a/src/components/Filter/FilterActions.tsx b/src/components/Filter/FilterActions.tsx index 21266ae12..c2331a5ed 100644 --- a/src/components/Filter/FilterActions.tsx +++ b/src/components/Filter/FilterActions.tsx @@ -1,6 +1,6 @@ -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField, { TextFieldProps } from "@material-ui/core/TextField"; -import { makeStyles } from "@material-ui/styles"; +import classNames from "classnames"; import React from "react"; import { FilterContentSubmitData, IFilter } from "../Filter"; @@ -8,7 +8,7 @@ import Filter from "./Filter"; const useInputStyles = makeStyles({ input: { - padding: "10px 12px" + padding: "10.5px 12px" }, root: { flex: 1 @@ -29,13 +29,14 @@ const Search: React.FC = props => { }; const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ actionContainer: { display: "flex", flexWrap: "wrap", - padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px ${ - theme.spacing.unit - }px` + padding: theme.spacing(1, 3) + }, + searchOnly: { + paddingBottom: theme.spacing(1.5) } }), { @@ -62,7 +63,7 @@ export const FilterActionsOnlySearch: React.FC< const classes = useStyles(props); return ( -
+
({ + theme => ({ tabAction: { display: "inline-block" }, @@ -25,8 +24,8 @@ const useStyles = makeStyles( borderBottom: `1px solid ${theme.palette.divider}`, display: "flex", justifyContent: "flex-end", - marginTop: theme.spacing.unit, - padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit}px` + marginTop: theme.spacing(), + padding: theme.spacing(0, 1, 3, 1) } }), { diff --git a/src/components/FormSpacer.tsx b/src/components/FormSpacer.tsx index 0ab94843d..04e7a7368 100644 --- a/src/components/FormSpacer.tsx +++ b/src/components/FormSpacer.tsx @@ -6,10 +6,10 @@ import { } from "@material-ui/core/styles"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ spacer: { - marginTop: theme.spacing.unit * 3 + marginTop: theme.spacing(3) } }); diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 31a58cd47..2d96f6a86 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -14,7 +14,7 @@ export interface GridProps extends WithStyles { variant?: GridVariant; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ default: { gridTemplateColumns: "9fr 4fr" @@ -24,10 +24,10 @@ const styles = (theme: Theme) => }, root: { display: "grid", - gridColumnGap: theme.spacing.unit * 3 + "px", - gridRowGap: theme.spacing.unit * 3 + "px", + gridColumnGap: theme.spacing(3), + gridRowGap: theme.spacing(3), [theme.breakpoints.down("sm")]: { - gridRowGap: theme.spacing.unit + "px", + gridRowGap: theme.spacing(1), gridTemplateColumns: "1fr" } }, diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx index 63694a14b..24fd02828 100644 --- a/src/components/Hr.tsx +++ b/src/components/Hr.tsx @@ -11,7 +11,7 @@ interface HrProps { className?: string; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { backgroundColor: theme.overrides.MuiCard.root.borderColor, diff --git a/src/components/IconButtonTableCell/IconButtonTableCell.tsx b/src/components/IconButtonTableCell/IconButtonTableCell.tsx index 25bf1fed2..f8bbf5f09 100644 --- a/src/components/IconButtonTableCell/IconButtonTableCell.tsx +++ b/src/components/IconButtonTableCell/IconButtonTableCell.tsx @@ -17,14 +17,14 @@ export interface IconButtonTableCellProps { onClick: () => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { "&:last-child": { paddingRight: 0 }, paddingRight: 0, - width: ICONBUTTON_SIZE + theme.spacing.unit / 2 + width: ICONBUTTON_SIZE + theme.spacing(.5) } }); const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })( diff --git a/src/components/ImageTile/ImageTile.tsx b/src/components/ImageTile/ImageTile.tsx index 8becd3fa2..d10f3f0bb 100644 --- a/src/components/ImageTile/ImageTile.tsx +++ b/src/components/ImageTile/ImageTile.tsx @@ -10,7 +10,7 @@ import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ image: { height: "100%", @@ -26,10 +26,10 @@ const styles = (theme: Theme) => }, background: theme.palette.background.paper, border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - borderRadius: theme.spacing.unit, + borderRadius: theme.spacing(), height: 148, overflow: "hidden", - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), position: "relative", width: 148 }, diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx index 5ffc05d7f..4857d0dce 100644 --- a/src/components/ImageUpload/ImageUpload.tsx +++ b/src/components/ImageUpload/ImageUpload.tsx @@ -22,7 +22,7 @@ interface ImageUploadProps { onImageUpload: (file: File) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ containerDragActive: { background: fade(theme.palette.primary.main, 0.1), @@ -34,11 +34,11 @@ const styles = (theme: Theme) => imageContainer: { background: "#ffffff", border: "1px solid #eaeaea", - borderRadius: theme.spacing.unit, + borderRadius: theme.spacing(), height: 148, justifySelf: "start", overflow: "hidden", - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), position: "relative", transition: theme.transitions.duration.standard + "s", width: 148 @@ -49,11 +49,11 @@ const styles = (theme: Theme) => width: "64px" }, photosIconContainer: { - padding: `${theme.spacing.unit * 5}px 0`, + padding: theme.spacing(5, 0), textAlign: "center" }, uploadText: { - color: theme.typography.body2.color, + color: theme.typography.body1.color, fontSize: 12, fontWeight: 600, textTransform: "uppercase" diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index fb0396797..8d0a58831 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -26,28 +26,28 @@ export interface LanguageSwitchProps { onLanguageChange: (lang: LanguageCodeEnum) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ arrow: { color: theme.palette.primary.main, transition: theme.transitions.duration.standard + "ms" }, container: { - paddingBottom: theme.spacing.unit + paddingBottom: theme.spacing(1) }, menuContainer: { cursor: "pointer", display: "flex", justifyContent: "space-between", minWidth: 90, - padding: theme.spacing.unit, + padding: theme.spacing(), position: "relative" }, menuItem: { textAlign: "justify" }, menuPaper: { - maxHeight: `calc(100vh - ${theme.spacing.unit * 2}px)`, + maxHeight: `calc(100vh - ${theme.spacing(2)}px)`, overflow: "scroll" }, popover: { diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 762cd74a8..9c1f1f454 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -8,7 +8,7 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ primary: { color: theme.palette.primary.main diff --git a/src/components/ListField/ListField.tsx b/src/components/ListField/ListField.tsx index 7dee20c3a..2ec8e3c3e 100644 --- a/src/components/ListField/ListField.tsx +++ b/src/components/ListField/ListField.tsx @@ -17,13 +17,13 @@ interface ListFieldState { value: string; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ chip: { - marginBottom: theme.spacing.unit + marginBottom: theme.spacing(1) }, chipContainer: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), width: 552 } }); diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 9181d7b1f..8843fd71d 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -20,7 +20,7 @@ import MultiAutocompleteSelectFieldContent, { MultiAutocompleteChoiceType } from "./MultiAutocompleteSelectFieldContent"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ chip: { width: "100%" @@ -33,7 +33,7 @@ const styles = (theme: Theme) => chipContainer: { display: "flex", flexDirection: "column", - marginTop: theme.spacing.unit + marginTop: theme.spacing(1) }, chipInner: { "& svg": { @@ -45,9 +45,9 @@ const styles = (theme: Theme) => color: theme.palette.primary.contrastText, display: "flex", justifyContent: "space-between", - margin: `${theme.spacing.unit}px 0`, - paddingLeft: theme.spacing.unit * 2, - paddingRight: theme.spacing.unit + margin: theme.spacing(1, 0), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1) }, chipLabel: { color: theme.palette.primary.contrastText diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index 276b7a5b7..cb99854fe 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -1,9 +1,8 @@ import CircularProgress from "@material-ui/core/CircularProgress"; import MenuItem from "@material-ui/core/MenuItem"; import Paper from "@material-ui/core/Paper"; -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import AddIcon from "@material-ui/icons/Add"; -import { makeStyles } from "@material-ui/styles"; import classNames from "classnames"; import { GetItemPropsOptions } from "downshift"; import React from "react"; @@ -37,7 +36,7 @@ export interface MultiAutocompleteSelectFieldContentProps } const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ addIcon: { height: 24, margin: 9, @@ -48,7 +47,10 @@ const useStyles = makeStyles( }, arrowInnerContainer: { alignItems: "center", - background: theme.palette.grey[50], + background: + theme.palette.type === "light" + ? theme.palette.grey[50] + : theme.palette.grey[900], bottom: 0, display: "flex", height: 30, @@ -63,7 +65,7 @@ const useStyles = makeStyles( width: 20 }, content: { - maxHeight: menuItemHeight * maxMenuItems + theme.spacing.unit * 2, + maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2), overflow: "scroll", padding: 8 }, @@ -71,7 +73,7 @@ const useStyles = makeStyles( opacity: 0 }, hr: { - margin: `${theme.spacing.unit}px 0` + margin: theme.spacing(1, 0) }, menuItem: { "&:focus": { @@ -92,7 +94,7 @@ const useStyles = makeStyles( }, borderRadius: 4, display: "grid", - gridColumnGap: theme.spacing.unit + "px", + gridColumnGap: theme.spacing(1), gridTemplateColumns: "30px 1fr", height: "auto", padding: 0, @@ -110,7 +112,7 @@ const useStyles = makeStyles( borderBottomLeftRadius: 8, borderBottomRightRadius: 8, left: 0, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(), overflow: "hidden", position: "absolute", right: 0, diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx index 5bf3743c1..0c7a02dce 100644 --- a/src/components/MultiSelectField/MultiSelectField.tsx +++ b/src/components/MultiSelectField/MultiSelectField.tsx @@ -15,10 +15,10 @@ import { FormattedMessage } from "react-intl"; import Checkbox from "../Checkbox"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ checkbox: { - marginRight: -theme.spacing.unit * 2 + marginRight: -theme.spacing(2) }, formControl: { width: "100%" diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx index cac5306bc..5c795005b 100644 --- a/src/components/NotFoundPage/NotFoundPage.tsx +++ b/src/components/NotFoundPage/NotFoundPage.tsx @@ -12,16 +12,16 @@ import { FormattedMessage } from "react-intl"; import notFoundImage from "@assets/images/not-found-404.svg"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ button: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), padding: 20 }, container: { [theme.breakpoints.down("sm")]: { gridTemplateColumns: "1fr", - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), width: "100%" }, display: "grid", diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 843be5df3..a78a5198b 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -10,7 +10,7 @@ import React from "react"; import ExtendedPageHeader from "../ExtendedPageHeader"; import Skeleton from "../Skeleton"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { display: "flex" @@ -18,7 +18,7 @@ const styles = (theme: Theme) => title: { flex: 1, fontSize: 24, - paddingBottom: theme.spacing.unit * 2 + paddingBottom: theme.spacing(2) } }); diff --git a/src/components/PhoneField/PhoneField.tsx b/src/components/PhoneField/PhoneField.tsx index 0c0267864..126e8d404 100644 --- a/src/components/PhoneField/PhoneField.tsx +++ b/src/components/PhoneField/PhoneField.tsx @@ -9,11 +9,11 @@ import React from "react"; import SingleSelectField from "@saleor/components/SingleSelectField"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { display: "grid", - gridColumnGap: `${theme.spacing.unit * 2}px`, + gridColumnGap: theme.spacing(2), gridTemplateColumns: "5rem 1fr" } }); diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx index 847ac055d..e44602fa9 100644 --- a/src/components/PriceField/PriceField.tsx +++ b/src/components/PriceField/PriceField.tsx @@ -1,15 +1,10 @@ import { InputProps } from "@material-ui/core/Input"; import InputAdornment from "@material-ui/core/InputAdornment"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ currencySymbol: { fontSize: "0.875rem" @@ -19,15 +14,15 @@ const styles = (theme: Theme) => gridTemplateColumns: "1fr 2rem 1fr" }, pullDown: { - marginTop: theme.spacing.unit * 2 + marginTop: theme.spacing(2) }, separator: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), textAlign: "center", width: "100%" }, widgetContainer: { - marginTop: theme.spacing.unit * 2 + marginTop: theme.spacing(2) } }); diff --git a/src/components/RadioGroupField/RadioGroupField.tsx b/src/components/RadioGroupField/RadioGroupField.tsx index 725e982e9..fd13b7d1f 100644 --- a/src/components/RadioGroupField/RadioGroupField.tsx +++ b/src/components/RadioGroupField/RadioGroupField.tsx @@ -5,19 +5,18 @@ import FormLabel from "@material-ui/core/FormLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Radio from "@material-ui/core/Radio"; import RadioGroup from "@material-ui/core/RadioGroup"; -import { Theme } from "@material-ui/core/styles"; -import { makeStyles } from "@material-ui/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ formLabel: { - marginBottom: theme.spacing.unit + marginBottom: theme.spacing(1) }, radioLabel: { - marginBottom: -theme.spacing.unit * 1.5 + marginBottom: -theme.spacing(1.5) }, root: { "& $radioLabel": { @@ -29,7 +28,7 @@ const useStyles = makeStyles( width: "100%" }, rootNoLabel: { - marginTop: -theme.spacing.unit * 1.5 + marginTop: -theme.spacing(1.5) } }), { diff --git a/src/components/RichTextEditor/ImageEntity.tsx b/src/components/RichTextEditor/ImageEntity.tsx index d81beaaed..7b3dd5b10 100644 --- a/src/components/RichTextEditor/ImageEntity.tsx +++ b/src/components/RichTextEditor/ImageEntity.tsx @@ -23,7 +23,7 @@ interface ImageEntityProps { onRemove: (entityKey: string) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ anchor: { display: "inline-block" @@ -40,7 +40,7 @@ const styles = (theme: Theme) => alignItems: "center", display: "flex", minHeight: 72, - padding: theme.spacing.unit * 1.5 + padding: theme.spacing(1.5) } }); diff --git a/src/components/RichTextEditor/LinkEntity.tsx b/src/components/RichTextEditor/LinkEntity.tsx index 436d8451e..890cd422f 100644 --- a/src/components/RichTextEditor/LinkEntity.tsx +++ b/src/components/RichTextEditor/LinkEntity.tsx @@ -27,7 +27,7 @@ interface LinkEntityProps { onRemove: (entityKey: string) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ anchor: { display: "inline-block" @@ -46,15 +46,14 @@ const styles = (theme: Theme) => alignItems: "center", display: "flex", minHeight: 72, - padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * - 1.5}px ${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px` + padding: theme.spacing(1.5, 1.5, 1.5, 3) }, separator: { backgroundColor: theme.palette.grey[300], display: "inline-block", height: 30, - marginLeft: theme.spacing.unit * 2, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(2), + marginRight: theme.spacing(), width: 1 } }); @@ -97,7 +96,7 @@ const LinkEntity = withStyles(styles, {
- + {contentState.getEntity(entityKey).getData().url} diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx index badfabb74..63c18f01e 100644 --- a/src/components/RichTextEditor/RichTextEditor.tsx +++ b/src/components/RichTextEditor/RichTextEditor.tsx @@ -45,13 +45,13 @@ export interface RichTextEditorProps { onChange: (event: React.ChangeEvent) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ error: { color: theme.palette.error.main }, helperText: { - marginTop: theme.spacing.unit * 0.75 + marginTop: theme.spacing(0.75) }, input: { position: "relative" @@ -90,7 +90,7 @@ const styles = (theme: Theme) => position: "relative" }, "&-root": { - ...theme.typography.body2 + ...theme.typography.body1 } }, "& .Draftail": { @@ -140,12 +140,12 @@ const styles = (theme: Theme) => background: "none", border: "none", borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, - color: theme.typography.body2.color, + color: theme.typography.body1.color, cursor: "pointer", display: "inline-flex", height: 36, justifyContent: "center", - padding: theme.spacing.unit + 2, + padding: theme.spacing(1) + 2, transition: theme.transitions.duration.short + "ms", width: 36 }, @@ -163,7 +163,7 @@ const styles = (theme: Theme) => border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, display: "inline-flex", flexWrap: "wrap", - marginBottom: theme.spacing.unit, + marginBottom: theme.spacing(), marginTop: 10, [theme.breakpoints.down(460)]: { width: "min-content" @@ -173,7 +173,7 @@ const styles = (theme: Theme) => "&--blockquote": { borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`, margin: 0, - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px` + padding: theme.spacing(1, 2) } } }, diff --git a/src/components/RowNumberSelect/RowNumberSelect.tsx b/src/components/RowNumberSelect/RowNumberSelect.tsx index 4ae050f80..55e7a473f 100644 --- a/src/components/RowNumberSelect/RowNumberSelect.tsx +++ b/src/components/RowNumberSelect/RowNumberSelect.tsx @@ -1,34 +1,32 @@ import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; -import { Theme } from "@material-ui/core/styles"; -import { createStyles, makeStyles, useTheme } from "@material-ui/styles"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; import { ListSettings } from "../../types"; const useStyles = makeStyles( - (theme: Theme) => - createStyles({ - label: { - fontSize: 14 + theme => ({ + label: { + fontSize: 14 + }, + select: { + "& div": { + "&:focus": { + background: "none" + }, + color: theme.palette.primary.main, + marginLeft: theme.spacing(1) }, - select: { - "& div": { - "&:focus": { - background: "none" - }, - color: theme.palette.primary.main, - padding: "0 10px 0 5px" - }, - "& svg": { - color: theme.palette.primary.main - }, - "&:after, &:before, &:hover": { - border: "none !important" - } + "& svg": { + color: theme.palette.primary.main + }, + "&:after, &:before, &:hover": { + border: "none !important" } - }), + } + }), { name: "RowNumberSelect" } diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 701083526..17dfb27b8 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -19,20 +19,20 @@ import ConfirmButton, { } from "../ConfirmButton/ConfirmButton"; import Container from "../Container"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ button: { - marginRight: theme.spacing.unit + marginRight: theme.spacing(1) }, cancelButton: { - marginRight: theme.spacing.unit * 2 + marginRight: theme.spacing(2) }, container: { display: "flex", - paddingBottom: theme.spacing.unit * 2, - paddingTop: theme.spacing.unit * 2, + paddingBottom: theme.spacing(2), + paddingTop: theme.spacing(2), [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing.unit + marginTop: theme.spacing(1) } }, deleteButton: { diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx index 1673d8c8c..26f9c489a 100644 --- a/src/components/SeoForm/SeoForm.tsx +++ b/src/components/SeoForm/SeoForm.tsx @@ -16,7 +16,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import CardTitle from "../CardTitle"; import FormSpacer from "../FormSpacer"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ addressBar: { color: "#006621", @@ -37,7 +37,7 @@ const styles = (theme: Theme) => overflowWrap: "break-word" }, helperText: { - marginBottom: theme.spacing.unit * 3 + marginBottom: theme.spacing(3) }, label: { flex: 1 @@ -49,7 +49,7 @@ const styles = (theme: Theme) => display: "flex" }, preview: { - minHeight: theme.spacing.unit * 10 + minHeight: theme.spacing(10) }, title: { padding: 0 @@ -124,16 +124,18 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
- - - + {title.length > 0 && ( + + + + )}
} helperText={intl.formatMessage({ @@ -154,16 +156,18 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
- - - + {description.length > 0 && ( + + + + )}
} helperText={intl.formatMessage({ diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 93a012993..35b56e9e9 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -1,9 +1,8 @@ import CircularProgress from "@material-ui/core/CircularProgress"; import MenuItem from "@material-ui/core/MenuItem"; import Paper from "@material-ui/core/Paper"; -import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; -import { makeStyles } from "@material-ui/styles"; import classNames from "classnames"; import { GetItemPropsOptions } from "downshift"; import React from "react"; @@ -38,13 +37,16 @@ export interface SingleAutocompleteSelectFieldContentProps } const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ arrowContainer: { position: "relative" }, arrowInnerContainer: { alignItems: "center", - background: theme.palette.grey[50], + background: + theme.palette.type === "light" + ? theme.palette.grey[50] + : theme.palette.grey[900], bottom: 0, display: "flex", height: 30, @@ -55,7 +57,7 @@ const useStyles = makeStyles( width: "100%" }, content: { - maxHeight: menuItemHeight * maxMenuItems + theme.spacing.unit * 2, + maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2), overflow: "scroll", padding: 8 }, @@ -63,7 +65,7 @@ const useStyles = makeStyles( opacity: 0 }, hr: { - margin: `${theme.spacing.unit}px 0` + margin: theme.spacing(1, 0) }, menuItem: { height: "auto", @@ -78,7 +80,7 @@ const useStyles = makeStyles( borderBottomLeftRadius: 8, borderBottomRightRadius: 8, left: 0, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(), overflow: "hidden", position: "absolute", right: 0, @@ -115,7 +117,6 @@ const SingleAutocompleteSelectFieldContent: React.FC< emptyOption, getItemProps, hasMore, - highlightedIndex, loading, inputValue, isCustomValueSelected, @@ -196,10 +197,7 @@ const SingleAutocompleteSelectFieldContent: React.FC< +const styles = theme => createStyles({ "@keyframes skeleton-animation": { "0%": { diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx index 13843db3b..571b2b588 100644 --- a/src/components/SortableTable/SortableHandle.tsx +++ b/src/components/SortableTable/SortableHandle.tsx @@ -1,18 +1,17 @@ -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import TableCell from "@material-ui/core/TableCell"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; import Draggable from "@saleor/icons/Draggable"; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ columnDrag: { "&:first-child": { - paddingRight: theme.spacing.unit * 2 + paddingRight: theme.spacing(2) }, cursor: "grab", - width: 48 + theme.spacing.unit * 1.5 + width: 48 + theme.spacing(1.5) } })); diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx index 5a07bfb83..047492fd3 100644 --- a/src/components/SortableTable/SortableTableBody.tsx +++ b/src/components/SortableTable/SortableTableBody.tsx @@ -1,6 +1,5 @@ -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import TableBody, { TableBodyProps } from "@material-ui/core/TableBody"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { SortableContainer } from "react-sortable-hoc"; @@ -14,7 +13,7 @@ export interface SortableTableBodyProps { onSortEnd: ReorderAction; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ ghost: { "& td": { borderBottom: "none" diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx index 267dcb89b..3fc6c8103 100644 --- a/src/components/StatusLabel/StatusLabel.tsx +++ b/src/components/StatusLabel/StatusLabel.tsx @@ -9,13 +9,13 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => { +const styles = theme => { const dot = { borderRadius: "100%", content: "''", display: "block", height: 8, - left: -theme.spacing.unit * 2, + left: -theme.spacing(2), position: "absolute" as "absolute", top: "calc(50% - 5px)", width: 8 @@ -29,7 +29,7 @@ const styles = (theme: Theme) => { }, root: { display: "inline-block", - marginLeft: theme.spacing.unit + 8, + marginLeft: theme.spacing(1) + 8, position: "relative" }, span: { diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index 5f7e10e3b..c1b64b5cb 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -9,7 +9,7 @@ import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ active: { color: theme.typography.caption.color @@ -17,7 +17,7 @@ const styles = (theme: Theme) => root: { "&$active": { borderBottomColor: theme.palette.primary.main, - color: theme.typography.body2.color + color: theme.typography.body1.color }, "&:focus": { color: theme.palette.primary.main @@ -30,9 +30,9 @@ const styles = (theme: Theme) => cursor: "pointer", display: "inline-block", fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), minWidth: 40, - padding: `0 ${theme.spacing.unit}px`, + padding: theme.spacing(1), transition: theme.transitions.duration.short + "ms" } }); diff --git a/src/components/Tab/TabContainer.tsx b/src/components/Tab/TabContainer.tsx index e7562069f..53cd063d5 100644 --- a/src/components/Tab/TabContainer.tsx +++ b/src/components/Tab/TabContainer.tsx @@ -10,7 +10,7 @@ export interface TabContainerProps { children: React.ReactNode | React.ReactNodeArray; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ root: { borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}` diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx index e35d9c8d0..10c8cabbc 100644 --- a/src/components/TableCellAvatar/TableCellAvatar.tsx +++ b/src/components/TableCellAvatar/TableCellAvatar.tsx @@ -14,7 +14,7 @@ import Image from "../../icons/Image"; export const AVATAR_MARGIN = 56; -const styles = (theme: Theme) => +const styles = theme => createStyles({ avatar: { background: "none", @@ -22,11 +22,11 @@ const styles = (theme: Theme) => borderRadius: 2, color: "#bdbdbd", display: "inline-flex", - padding: theme.spacing.unit / 2 + padding: theme.spacing(.5) }, children: { alignSelf: "center", - marginLeft: theme.spacing.unit * 2, + marginLeft: theme.spacing(2), width: "100%" }, content: { @@ -34,7 +34,7 @@ const styles = (theme: Theme) => display: "flex" }, root: { - paddingRight: theme.spacing.unit * 3, + paddingRight: theme.spacing(3), width: "1%" } }); diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx index 4da908fae..4a2cd67fc 100644 --- a/src/components/TableCellHeader/TableCellHeader.tsx +++ b/src/components/TableCellHeader/TableCellHeader.tsx @@ -1,12 +1,11 @@ -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import TableCell, { TableCellProps } from "@material-ui/core/TableCell"; -import makeStyles from "@material-ui/styles/makeStyles"; import classNames from "classnames"; import React from "react"; import ArrowSort from "../../icons/ArrowSort"; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ arrow: { transition: theme.transitions.duration.short + "ms" }, diff --git a/src/components/TableFilter/FilterChips.tsx b/src/components/TableFilter/FilterChips.tsx index 6508f9f10..296a6ad7a 100644 --- a/src/components/TableFilter/FilterChips.tsx +++ b/src/components/TableFilter/FilterChips.tsx @@ -1,9 +1,8 @@ import ButtonBase from "@material-ui/core/ButtonBase"; -import { Theme } from "@material-ui/core/styles"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import ClearIcon from "@material-ui/icons/Clear"; -import { makeStyles, useTheme } from "@material-ui/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -18,7 +17,7 @@ export interface Filter { } const useStyles = makeStyles( - (theme: Theme) => ({ + theme => ({ filterButton: { alignItems: "center", backgroundColor: fade(theme.palette.primary.main, 0.8), @@ -26,9 +25,9 @@ const useStyles = makeStyles( display: "flex", height: "38px", justifyContent: "space-around", - margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`, + margin: theme.spacing(2, 1), marginLeft: 0, - padding: `0 ${theme.spacing.unit * 2}px` + padding: theme.spacing(0, 2) }, filterChipContainer: { display: "flex", @@ -37,12 +36,13 @@ const useStyles = makeStyles( }, filterContainer: { "& a": { - paddingBottom: 10 + paddingBottom: 10, + paddingTop: theme.spacing(1) }, borderBottom: `1px solid ${theme.palette.divider}`, display: "flex", - marginTop: theme.spacing.unit, - padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit}px` + marginTop: -theme.spacing(1), + padding: theme.spacing(0, 2) }, filterIcon: { color: theme.palette.common.white, @@ -61,7 +61,7 @@ const useStyles = makeStyles( width: 32 }, filterLabel: { - marginBottom: theme.spacing.unit + marginBottom: theme.spacing(1) }, filterText: { color: theme.palette.common.white, diff --git a/src/components/TableFilter/FilterTab.tsx b/src/components/TableFilter/FilterTab.tsx index 462baf478..83b438807 100644 --- a/src/components/TableFilter/FilterTab.tsx +++ b/src/components/TableFilter/FilterTab.tsx @@ -8,16 +8,16 @@ import Tab from "@material-ui/core/Tab"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ selectedTabLabel: { "&$tabLabel": { - color: theme.typography.body2.color + color: theme.typography.body1.color } }, tabLabel: { "&:hover": { - color: theme.typography.body2.color + color: theme.typography.body1.color }, color: theme.typography.caption.color, fontSize: "1rem", @@ -26,7 +26,7 @@ const styles = (theme: Theme) => tabRoot: { minWidth: "80px", opacity: 1, - paddingTop: `${theme.spacing.unit * 1}px`, + paddingTop: theme.spacing(1), textTransform: "initial" as "initial" } }); @@ -44,10 +44,10 @@ export const FilterTab = withStyles(styles, { name: "FilterTab" })( disableRipple label={label} classes={{ - label: classNames(classes.tabLabel, { + root: classes.tabRoot, + wrapper: classNames(classes.tabLabel, { [classes.selectedTabLabel]: selected - }), - root: classes.tabRoot + }) }} onClick={onClick} value={value} diff --git a/src/components/TableFilter/FilterTabs.tsx b/src/components/TableFilter/FilterTabs.tsx index ca89529ec..a5ca4a9b2 100644 --- a/src/components/TableFilter/FilterTabs.tsx +++ b/src/components/TableFilter/FilterTabs.tsx @@ -7,11 +7,11 @@ import { import Tabs from "@material-ui/core/Tabs"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ tabsRoot: { borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - paddingLeft: `${theme.spacing.unit * 3}px` + paddingLeft: theme.spacing(3) } }); diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 180758eb1..805995afa 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -29,7 +29,7 @@ export interface TableHeadProps extends MuiTableHeadProps { toggleAll?: (items: Node[], selected: number) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ cell: { padding: 0 @@ -58,7 +58,7 @@ const styles = (theme: Theme) => alignItems: "center", display: "flex", height: 47, - marginRight: -theme.spacing.unit * 2 + marginRight: -theme.spacing(2) }, dragRows: { padding: 0, @@ -79,7 +79,7 @@ const styles = (theme: Theme) => }, toolbar: { "& > *": { - marginLeft: theme.spacing.unit + marginLeft: theme.spacing(1) } } }); diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx index e36d93f21..254df9987 100644 --- a/src/components/TablePagination/TablePagination.tsx +++ b/src/components/TablePagination/TablePagination.tsx @@ -16,12 +16,12 @@ import { maybe } from "@saleor/misc"; import { ListSettings } from "../../types"; import TablePaginationActions from "./TablePaginationActions"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ actions: { color: theme.palette.text.secondary, flexShrink: 0, - marginLeft: theme.spacing.unit * 2.5 + marginLeft: theme.spacing(2.5) }, caption: { flexShrink: 0 @@ -36,16 +36,16 @@ const styles = (theme: Theme) => } }, select: { - paddingLeft: theme.spacing.unit, - paddingRight: theme.spacing.unit * 2 + paddingLeft: theme.spacing(), + paddingRight: theme.spacing(2) }, selectIcon: { top: 1 }, selectRoot: { color: theme.palette.text.secondary, - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit * 4 + marginLeft: theme.spacing(), + marginRight: theme.spacing(4) }, spacer: { flex: "1 1 100%" diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx index f22bd3670..3ed70bad3 100644 --- a/src/components/TablePagination/TablePaginationActions.tsx +++ b/src/components/TablePagination/TablePaginationActions.tsx @@ -12,7 +12,7 @@ import useTheme from "@saleor/hooks/useTheme"; import classNames from "classnames"; import React from "react"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ dark: { "& svg": { @@ -51,7 +51,7 @@ const styles = (theme: Theme) => root: { color: theme.palette.text.secondary, flexShrink: 0, - margin: `0 ${theme.spacing.unit * 2.5}px` + margin: theme.spacing(0, 2.5) } }); diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx index cc45447e2..70b578b87 100644 --- a/src/components/Theme/ThemeProvider.tsx +++ b/src/components/Theme/ThemeProvider.tsx @@ -1,6 +1,5 @@ // FIXME: https://github.com/mirumee/saleor/issues/4174 -import OldMuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; -import MuiThemeProvider from "@material-ui/styles/ThemeProvider"; +import { MuiThemeProvider } from "@material-ui/core/styles"; import React from "react"; import Baseline from "../../Baseline"; @@ -40,7 +39,8 @@ const dark: IThemeColors = { }, paperBorder: "#252728", primary: "#13BEBB", - secondary: "#21125E" + secondary: "#21125E", + theme: "dark" }; const light: IThemeColors = { autofill: "#f4f6c5", @@ -76,7 +76,8 @@ const light: IThemeColors = { }, paperBorder: "#EAEAEA", primary: "#06847B", - secondary: "#21125E" + secondary: "#21125E", + theme: "light" }; interface IThemeContext { @@ -108,12 +109,10 @@ const ThemeProvider: React.FC = ({ toggleTheme }} > - - - - {children} - - + + + {children} + ); }; diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index 5489fa695..fbdcc165b 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -13,7 +13,7 @@ import PersonIcon from "@material-ui/icons/Person"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ avatar: { "& span": { @@ -21,10 +21,13 @@ const styles = (theme: Theme) => width: "100%" }, alignSelf: "flex-start", - marginRight: theme.spacing.unit * 3.5 + marginRight: theme.spacing(3.5) + }, + button: { + zIndex: 2 }, cardActionsExpanded: { - maxHeight: theme.spacing.unit * 6 + maxHeight: theme.spacing(6) }, input: { "& > div": { @@ -36,15 +39,16 @@ const styles = (theme: Theme) => "& textarea": { "&::placeholder": { opacity: [[1], "!important"] as any - } + }, + zIndex: 2 }, background: theme.palette.background.paper }, noteRoot: { - left: -theme.spacing.unit * 8.5 - 1, - marginBottom: theme.spacing.unit * 3, + left: -theme.spacing(8.5) - 1, + marginBottom: theme.spacing(3), position: "relative", - width: `calc(100% + ${theme.spacing.unit * 8.5}px)` + width: `calc(100% + ${theme.spacing(8.5)}px)` }, noteTitle: { "&:last-child": { @@ -54,14 +58,14 @@ const styles = (theme: Theme) => alignItems: "center", background: theme.palette.background.default, display: "flex", - paddingLeft: theme.spacing.unit * 3 + paddingLeft: theme.spacing(3) }, root: { borderColor: theme.overrides.MuiCard.root.borderColor, borderStyle: "solid", borderWidth: "0 0 0 2px", marginLeft: 20, - paddingLeft: theme.spacing.unit * 3 + paddingLeft: theme.spacing(3) } }); @@ -112,7 +116,11 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( multiline InputProps={{ endAdornment: ( -
@@ -154,7 +153,7 @@ const SiteSettingsPage: React.FC = props => { description="section header" /> - + @@ -172,7 +171,7 @@ const SiteSettingsPage: React.FC = props => { description="section header" /> - + @@ -194,7 +193,7 @@ const SiteSettingsPage: React.FC = props => { description="section header" /> - + diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx index 054ec83fb..c94c1b06d 100644 --- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx +++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx @@ -37,7 +37,7 @@ const initialForm: FormData = { lastName: "" }; -const styles = (theme: Theme) => +const styles = theme => createStyles({ hr: { backgroundColor: "#eaeaea", @@ -47,12 +47,12 @@ const styles = (theme: Theme) => }, sectionTitle: { fontWeight: 600 as 600, - marginBottom: theme.spacing.unit, - marginTop: theme.spacing.unit * 2 + marginBottom: theme.spacing(), + marginTop: theme.spacing(2) }, textFieldGrid: { display: "grid", - gridColumnGap: `${theme.spacing.unit * 2}px`, + gridColumnGap: theme.spacing(2), gridTemplateColumns: "1fr 1fr" } }); diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx index f359027c6..5f58d6b7b 100644 --- a/src/staff/components/StaffList/StaffList.tsx +++ b/src/staff/components/StaffList/StaffList.tsx @@ -26,7 +26,7 @@ import { import { ListProps } from "@saleor/types"; import { StaffList_staffUsers_edges_node } from "../../types/StaffList"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ avatar: { alignItems: "center", @@ -35,7 +35,7 @@ const styles = (theme: Theme) => float: "left", height: 47, justifyContent: "center", - marginRight: theme.spacing.unit * 1 + "px", + marginRight: theme.spacing(1), overflow: "hidden", width: 47 }, diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx index e80b61a08..7854fe08a 100644 --- a/src/staff/components/StaffProperties/StaffProperties.tsx +++ b/src/staff/components/StaffProperties/StaffProperties.tsx @@ -18,7 +18,7 @@ import { commonMessages } from "@saleor/intl"; import { getUserInitials, maybe } from "../../../misc"; import { StaffMemberDetails_user } from "../../types/StaffMemberDetails"; -const styles = (theme: Theme) => +const styles = theme => createStyles({ avatar: { "& svg": { @@ -62,7 +62,7 @@ const styles = (theme: Theme) => borderRadius: "100%", height: 120, opacity: 0, - padding: `${theme.spacing.unit * 2.5}px 0`, + padding: theme.spacing(2.5, 0), position: "absolute", textAlign: "center", textTransform: "uppercase", @@ -77,12 +77,12 @@ const styles = (theme: Theme) => display: "none" }, prop: { - marginBottom: theme.spacing.unit * 2 + "px" + marginBottom: theme.spacing(2) }, propGrid: { display: "grid", - gridColumnGap: theme.spacing.unit * 2 + "px", - gridRowGap: theme.spacing.unit + "px", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(1), gridTemplateColumns: "1fr 1fr", [theme.breakpoints.down("xs")]: { gridTemplateColumns: "1fr" @@ -90,7 +90,7 @@ const styles = (theme: Theme) => }, root: { display: "grid", - gridColumnGap: theme.spacing.unit * 4 + "px", + gridColumnGap: theme.spacing(4), gridTemplateColumns: "120px 1fr" } }); diff --git a/src/theme.ts b/src/theme.ts index 53faeb902..5083dda0f 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -40,6 +40,8 @@ export type IThemeColors = Record< | "textHover", string >; +} & { + theme: "dark" | "light"; }; const fontFamily = '"Inter", "roboto", "sans-serif"'; @@ -51,23 +53,23 @@ export default (colors: IThemeColors): Theme => 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) } }, - flat: { - "& span": { - color: colors.font.default - } - }, - flatPrimary: { - "& span": { - color: colors.primary - } - }, label: { color: colors.font.button, fontWeight: 600 @@ -77,6 +79,16 @@ export default (colors: IThemeColors): Theme => marginLeft: 8 }, borderRadius: 4 + }, + text: { + "& span": { + color: colors.font.default + } + }, + textPrimary: { + "& span": { + color: colors.primary + } } }, MuiCard: { @@ -173,9 +185,9 @@ export default (colors: IThemeColors): Theme => }, outlined: { "&$shrink": { - transform: "translate(12px, 6px) scale(0.75)" + transform: "translate(12px, 9px) scale(0.75)" }, - transform: "translate(14px, 14px) scale(1)", + transform: "translate(14px, 18px) scale(1)", zIndex: 9 }, root: { @@ -226,7 +238,7 @@ export default (colors: IThemeColors): Theme => }, MuiMenuItem: { root: { - "&$selected, &$selected:focus": { + "&$selected, &$selected:focus, &$selected:hover": { backgroundColor: [colors.background.default, "!important"] as any, color: colors.primary, fontWeight: 700 @@ -262,18 +274,15 @@ export default (colors: IThemeColors): Theme => }, input: { "&:-webkit-autofill": { + borderRadius: 4, boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, - left: 1, - position: "relative", - top: -3, - width: `calc(100% - 26px)`, zIndex: 0 }, "&::placeholder": { opacity: [[0], "!important"] as any }, color: colors.input.text, - padding: "20px 12px 8px 12px" + padding: "23px 12px 10px 12px" }, inputMultiline: { left: -2, @@ -284,7 +293,9 @@ export default (colors: IThemeColors): Theme => "& fieldset": { "&&:not($error)": { borderColor: colors.input.border - } + }, + top: 0, + zIndex: 1 }, "& legend": { display: "none" @@ -304,8 +315,7 @@ export default (colors: IThemeColors): Theme => "&::placeholder": { opacity: [[1], "!important"] as any }, - color: colors.font.default, - zIndex: 2 + color: colors.font.default }, "&&&": { "& fieldset": { @@ -318,8 +328,7 @@ export default (colors: IThemeColors): Theme => }, "&:hover": { "& input": { - color: colors.font.default, - zIndex: 2 + color: colors.font.default }, "&&&": { "& fieldset": { @@ -330,12 +339,8 @@ export default (colors: IThemeColors): Theme => } } }, - borderColor: colors.input.border - } - }, - MuiSelect: { - outlined: { - padding: ["20px 12px 8px 12px", "!important"] as any + borderColor: colors.input.border, + top: 0 } }, MuiSnackbarContent: { @@ -484,7 +489,8 @@ export default (colors: IThemeColors): Theme => hint: colors.font.gray, primary: colors.font.default, secondary: colors.font.gray - } + }, + type: colors.theme }, props: { MuiFormControl: { @@ -523,10 +529,7 @@ export default (colors: IThemeColors): Theme => fontFamily }, body1: { - fontSize: 14 - }, - body2: { - fontSize: "1rem" + color: colors.font.default }, fontFamily, h4: { @@ -534,8 +537,7 @@ export default (colors: IThemeColors): Theme => }, h5: { fontSize: "1.3125rem" - }, - useNextVariants: true + } } }); diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx index a117a0b0d..139dff9ea 100644 --- a/src/translations/components/TranslationFields/TranslationFields.tsx +++ b/src/translations/components/TranslationFields/TranslationFields.tsx @@ -44,18 +44,18 @@ export interface TranslationFieldsProps { onSubmit: (field: string, data: string) => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ cardCaption: { fontSize: 14 }, cardContent: { "&:last-child": { - paddingBottom: theme.spacing.unit + paddingBottom: theme.spacing(1) } }, columnHeader: { - marginBottom: theme.spacing.unit / 2 + marginBottom: theme.spacing(0.5) }, content: { "& a": { @@ -64,24 +64,24 @@ const styles = (theme: Theme) => "& blockquote": { borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`, margin: 0, - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px` + padding: theme.spacing(1, 2) }, "& h2": { fontSize: 22, - marginBottom: theme.spacing.unit + marginBottom: theme.spacing(1) }, "& h3": { fontSize: 19, - marginBottom: theme.spacing.unit + marginBottom: theme.spacing(1) }, "& p": { "&:last-child": { marginBottom: 0 }, - marginBottom: theme.spacing.unit, + marginBottom: theme.spacing(), marginTop: 0 }, - paddingBottom: theme.spacing.unit * 2 + paddingBottom: theme.spacing(2) }, editButtonContainer: { alignItems: "center", @@ -92,8 +92,8 @@ const styles = (theme: Theme) => color: theme.typography.caption.color, fontSize: 14, fontWeight: 500, - marginBottom: theme.spacing.unit, - marginTop: theme.spacing.unit * 2, + marginBottom: theme.spacing(), + marginTop: theme.spacing(2), textTransform: "uppercase" }, grid: { @@ -139,10 +139,10 @@ const TranslationFields = withStyles(styles, { name: "TranslationFields" })( {expanded ? ( - + - + (
- + {field.displayName}
diff --git a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx index fdf6cadab..50142a9a1 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx @@ -19,15 +19,15 @@ interface TranslationFieldsSaveProps { onSave: () => void; } -const styles = (theme: Theme) => +const styles = theme => createStyles({ confirmButton: { - marginLeft: theme.spacing.unit + marginLeft: theme.spacing(1) }, root: { display: "flex", flexDirection: "row-reverse", - marginTop: theme.spacing.unit + marginTop: theme.spacing(1) } }); diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx index 5480e3883..709659a5e 100644 --- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx +++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx @@ -1,8 +1,8 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index 823407bbb..f7901ab43 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { Theme } from "@material-ui/core/styles"; +import makeStyles from "@material-ui/core/styles/makeStyles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; @@ -9,7 +9,6 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; -import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; import { useIntl } from "react-intl"; @@ -24,13 +23,13 @@ export interface WebhooksListProps extends ListProps { onRemove: (id: string) => void; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(theme => ({ [theme.breakpoints.up("lg")]: { colAction: { "& svg": { color: theme.palette.primary.main }, - textAlign: "right" + textAlign: "right" as "right" }, colActive: {}, colName: { @@ -68,98 +67,97 @@ const WebhooksList: React.FC = ({ }) => { const intl = useIntl(); const classes = useStyles({}); + return ( - - - - - - {intl.formatMessage({ - defaultMessage: "Name", - description: "webhook name" - })} - - - {intl.formatMessage({ - defaultMessage: "Service Account", - description: "webhook service account" - })} - - - {intl.formatMessage({ - defaultMessage: "Action", - description: "user action bar" - })} - - - - - - - - - - {renderCollection( - webhooks, - webhook => ( - - - {maybe(() => webhook.name, )} - - - {maybe( - () => webhook.serviceAccount.name, - - )} - - - - - - onRemove(webhook.id)) - : undefined - } - > - - - - - ), - () => ( - - - {intl.formatMessage({ - defaultMessage: "No webhooks found" - })} - - - ) - )} - -
- + + + + + {intl.formatMessage({ + defaultMessage: "Name", + description: "webhook name" + })} + + + {intl.formatMessage({ + defaultMessage: "Service Account", + description: "webhook service account" + })} + + + {intl.formatMessage({ + defaultMessage: "Action", + description: "user action bar" + })} + + + + + + + + + + {renderCollection( + webhooks, + webhook => ( + + + {maybe(() => webhook.name, )} + + + {maybe( + () => webhook.serviceAccount.name, + + )} + + + + + + onRemove(webhook.id)) + : undefined + } + > + + + + + ), + () => ( + + + {intl.formatMessage({ + defaultMessage: "No webhooks found" + })} + + + ) + )} + +
); }; WebhooksList.displayName = "WebhooksList";