Update @material-ui
This commit is contained in:
dominik-zeglen
parent
4ed81f60fb
commit
d84ba84e91
176 changed files with 1003 additions and 1027 deletions
411
package-lock.json
generated
411
package-lock.json
generated
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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%"
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { FormattedMessage } from "react-intl";
|
|||
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
deleteButton: {
|
||||
"&:hover": {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import ConfirmButton, {
|
|||
ConfirmButtonTransitionState
|
||||
} from "../ConfirmButton/ConfirmButton";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
deleteButton: {
|
||||
"&:hover": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,23 +18,23 @@ const AddressFormatter: React.FC<AddressFormatterProps> = ({ address }) => {
|
|||
fontStyle: "inherit"
|
||||
}}
|
||||
>
|
||||
<Typography component="span">
|
||||
<Typography component="p">
|
||||
{address.firstName} {address.lastName}
|
||||
</Typography>
|
||||
{address.companyName && (
|
||||
<Typography component="span">{address.companyName}</Typography>
|
||||
<Typography component="p">{address.companyName}</Typography>
|
||||
)}
|
||||
<Typography component="span">
|
||||
<Typography component="p">
|
||||
{address.streetAddress1}
|
||||
<br />
|
||||
{address.streetAddress2}
|
||||
</Typography>
|
||||
<Typography component="span">
|
||||
<Typography component="p">
|
||||
{" "}
|
||||
{address.postalCode} {address.city}
|
||||
{address.cityArea ? ", " + address.cityArea : ""}
|
||||
</Typography>
|
||||
<Typography component="span">
|
||||
<Typography component="p">
|
||||
{address.countryArea
|
||||
? address.countryArea + ", " + address.country.country
|
||||
: address.country.country}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -43,20 +43,20 @@ const DebounceAutocomplete: React.ComponentType<
|
|||
DebounceProps<string>
|
||||
> = 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
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export interface CardMenuProps {
|
|||
menuItems: CardMenuItem[];
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
iconButton: {
|
||||
background: theme.palette.background.paper,
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export type CheckboxProps = Omit<
|
|||
onChange?: (event: React.ChangeEvent<any>) => void;
|
||||
};
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
box: {
|
||||
"&$checked": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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<FetchMoreProps> {
|
|||
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: {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export type ConfirmButtonTransitionState =
|
|||
| "error"
|
||||
| "default";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
error: {
|
||||
"&:hover": {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const ErrorMessageCard: React.FC<ErrorMessageCardProps> = ({ message }) => (
|
|||
<Typography variant="h5" component="h2">
|
||||
<FormattedMessage defaultMessage="Error" description="header" />
|
||||
</Typography>
|
||||
<Typography variant="body2">{message}</Typography>
|
||||
<Typography variant="body1">{message}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,20 +16,20 @@ export interface ErrorPageProps extends WithStyles<typeof styles> {
|
|||
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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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<TFilterKeys = string> {
|
|||
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: {
|
||||
|
|
|
|||
|
|
@ -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<TextFieldProps> = 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 (
|
||||
<div className={classes.actionContainer}>
|
||||
<div className={classNames(classes.actionContainer, classes.searchOnly)}>
|
||||
<Search
|
||||
fullWidth
|
||||
placeholder={placeholder}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography";
|
|||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import { makeStyles } from "@material-ui/styles";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { getMenuItemByValue, isLeaf, walkToRoot } from "../../utils/menu";
|
||||
import FormSpacer from "../FormSpacer";
|
||||
import SingleSelectField from "../SingleSelectField";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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 { FormattedMessage } from "react-intl";
|
||||
|
||||
|
|
@ -17,7 +16,7 @@ export interface FilterSearchProps extends SearchPageProps {
|
|||
}
|
||||
|
||||
const useStyles = makeStyles(
|
||||
(theme: Theme) => ({
|
||||
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)
|
||||
}
|
||||
}),
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export interface GridProps extends WithStyles<typeof styles> {
|
|||
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"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface HrProps {
|
|||
className?: string;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
root: {
|
||||
backgroundColor: theme.overrides.MuiCard.root.borderColor,
|
||||
|
|
|
|||
|
|
@ -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" })(
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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%"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}),
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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, {
|
|||
<Paper className={classes.root}>
|
||||
<ClickAwayListener onClickAway={disable} mouseEvent="onClick">
|
||||
<div className={classes.container}>
|
||||
<Typography className={classes.inline} variant="body2">
|
||||
<Typography className={classes.inline} variant="body1">
|
||||
{contentState.getEntity(entityKey).getData().url}
|
||||
</Typography>
|
||||
<span className={classes.separator} />
|
||||
|
|
|
|||
|
|
@ -45,13 +45,13 @@ export interface RichTextEditorProps {
|
|||
onChange: (event: React.ChangeEvent<any>) => 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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" })(
|
|||
<div className={classes.label}>
|
||||
<FormattedMessage defaultMessage="Search engine title" />
|
||||
</div>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
|
||||
description="character limit"
|
||||
values={{
|
||||
maxCharacters: 70,
|
||||
numberOfCharacters: title.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
{title.length > 0 && (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
|
||||
description="character limit"
|
||||
values={{
|
||||
maxCharacters: 70,
|
||||
numberOfCharacters: title.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
helperText={intl.formatMessage({
|
||||
|
|
@ -154,16 +156,18 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
|
|||
<div className={classes.label}>
|
||||
<FormattedMessage defaultMessage="Search engine description" />
|
||||
</div>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
|
||||
description="character limit"
|
||||
values={{
|
||||
maxCharacters: 300,
|
||||
numberOfCharacters: description.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
{description.length > 0 && (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
|
||||
description="character limit"
|
||||
values={{
|
||||
maxCharacters: 300,
|
||||
numberOfCharacters: description.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
helperText={intl.formatMessage({
|
||||
|
|
|
|||
|
|
@ -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<
|
|||
<MenuItem
|
||||
className={classes.menuItem}
|
||||
key={JSON.stringify(suggestion)}
|
||||
selected={
|
||||
highlightedIndex === choiceIndex ||
|
||||
selectedItem === suggestion.value
|
||||
}
|
||||
selected={selectedItem === suggestion.value}
|
||||
component="div"
|
||||
{...getItemProps({
|
||||
index: choiceIndex,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
"@keyframes skeleton-animation": {
|
||||
"0%": {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
|
|
|
|||
|
|
@ -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%"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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%"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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<ThemeProviderProps> = ({
|
|||
toggleTheme
|
||||
}}
|
||||
>
|
||||
<OldMuiThemeProvider theme={createTheme(isDark ? dark : light)}>
|
||||
<MuiThemeProvider theme={createTheme(isDark ? dark : light)}>
|
||||
<Baseline />
|
||||
{children}
|
||||
</MuiThemeProvider>
|
||||
</OldMuiThemeProvider>
|
||||
<MuiThemeProvider theme={createTheme(isDark ? dark : light)}>
|
||||
<Baseline />
|
||||
{children}
|
||||
</MuiThemeProvider>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: (
|
||||
<Button color="primary" onClick={e => submit(e)}>
|
||||
<Button
|
||||
className={classes.button}
|
||||
color="primary"
|
||||
onClick={e => submit(e)}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Send"
|
||||
description="add order note, button"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import React from "react";
|
|||
|
||||
import { DateTime } from "../Date";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
date: {
|
||||
color: theme.typography.caption.color,
|
||||
|
|
@ -21,7 +21,7 @@ const styles = (theme: Theme) =>
|
|||
dateExpander:{
|
||||
color: theme.typography.caption.color,
|
||||
position: "absolute",
|
||||
right: theme.spacing.unit * 3
|
||||
right: theme.spacing(3)
|
||||
},
|
||||
dot: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
|
|
@ -36,8 +36,8 @@ const styles = (theme: Theme) =>
|
|||
alignItems: "center",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: theme.spacing.unit,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing(),
|
||||
marginLeft: theme.spacing(3),
|
||||
width: "100%"
|
||||
},
|
||||
panel: {
|
||||
|
|
@ -52,14 +52,14 @@ const styles = (theme: Theme) =>
|
|||
background: theme.palette.background.default,
|
||||
content: "''",
|
||||
height: "calc(50% - 4px)",
|
||||
left: `${-theme.spacing.unit * 3 - 2}px`,
|
||||
left: -theme.spacing(3) - 2,
|
||||
position: "absolute",
|
||||
top: "calc(50% + 4px)",
|
||||
width: "2px"
|
||||
},
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
marginBottom: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing(3),
|
||||
position: "relative",
|
||||
width: "100%"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const palette = [
|
|||
colors.yellow
|
||||
].map(color => color[500]);
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
avatar: {
|
||||
left: -45,
|
||||
|
|
@ -42,8 +42,8 @@ const styles = (theme: Theme) =>
|
|||
top: 0
|
||||
},
|
||||
card: {
|
||||
marginBottom: theme.spacing.unit * 3,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing(3),
|
||||
marginLeft: theme.spacing(3),
|
||||
position: "relative"
|
||||
},
|
||||
cardContent: {
|
||||
|
|
@ -62,8 +62,8 @@ const styles = (theme: Theme) =>
|
|||
alignItems: "center",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: theme.spacing.unit,
|
||||
paddingLeft: theme.spacing.unit * 3
|
||||
marginBottom: theme.spacing(),
|
||||
paddingLeft: theme.spacing(3)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -15,21 +15,21 @@ import CardTitle from "@saleor/components/CardTitle";
|
|||
import RadioSwitchField from "@saleor/components/RadioSwitchField";
|
||||
import { DateContext } from "../Date/DateContext";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
children: {
|
||||
"& button": {
|
||||
margin: "0 9px"
|
||||
},
|
||||
"& label": {
|
||||
marginTop: `${theme.spacing.unit * 2.5}px`
|
||||
marginTop: theme.spacing(2.5)
|
||||
}
|
||||
},
|
||||
date: {
|
||||
"& svg": {
|
||||
fill: theme.palette.primary.main
|
||||
},
|
||||
marginTop: theme.spacing.unit * 3
|
||||
marginTop: theme.spacing(3)
|
||||
},
|
||||
label: {
|
||||
lineHeight: 1,
|
||||
|
|
|
|||
|
|
@ -31,14 +31,14 @@ export interface MenuSection {
|
|||
menuItems: MenuItem[];
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
card: {
|
||||
"&:hover": {
|
||||
boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
|
||||
},
|
||||
cursor: "pointer",
|
||||
marginBottom: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing(3),
|
||||
transition: theme.transitions.duration.standard + "ms"
|
||||
},
|
||||
cardContent: {
|
||||
|
|
@ -47,14 +47,14 @@ const styles = (theme: Theme) =>
|
|||
paddingBottom: 16
|
||||
},
|
||||
display: "grid",
|
||||
gridColumnGap: theme.spacing.unit * 4 + "px",
|
||||
gridColumnGap: theme.spacing(4),
|
||||
gridTemplateColumns: "48px 1fr"
|
||||
},
|
||||
cardDisabled: {
|
||||
"& $icon, & $sectionTitle, & $sectionDescription": {
|
||||
color: theme.palette.text.disabled
|
||||
},
|
||||
marginBottom: theme.spacing.unit * 3
|
||||
marginBottom: theme.spacing(3)
|
||||
},
|
||||
configurationCategory: {
|
||||
[theme.breakpoints.down("md")]: {
|
||||
|
|
@ -62,13 +62,13 @@ const styles = (theme: Theme) =>
|
|||
},
|
||||
borderTop: `solid 1px ${theme.palette.divider}`,
|
||||
display: "grid",
|
||||
gridColumnGap: theme.spacing.unit * 4 + "px",
|
||||
gridColumnGap: theme.spacing(4) + "px",
|
||||
gridTemplateColumns: "1fr 3fr",
|
||||
paddingTop: theme.spacing.unit * 3 + "px"
|
||||
paddingTop: theme.spacing(3)
|
||||
},
|
||||
configurationItem: {
|
||||
display: "grid",
|
||||
gridColumnGap: theme.spacing.unit * 4 + "px",
|
||||
gridColumnGap: theme.spacing(4),
|
||||
gridTemplateColumns: "1fr 1fr"
|
||||
},
|
||||
configurationLabel: {
|
||||
|
|
|
|||
|
|
@ -28,24 +28,24 @@ export interface CustomerAddressListPageProps {
|
|||
onSetAsDefault: (id: string, type: AddressTypeEnum) => void;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
addButton: {
|
||||
marginTop: theme.spacing.unit * 2
|
||||
marginTop: theme.spacing(2)
|
||||
},
|
||||
description: {
|
||||
marginTop: theme.spacing.unit
|
||||
marginTop: theme.spacing(1)
|
||||
},
|
||||
empty: {
|
||||
margin: `${theme.spacing.unit * 13}px auto 0`,
|
||||
margin: `${theme.spacing(13)}px auto 0`,
|
||||
textAlign: "center",
|
||||
width: 600
|
||||
},
|
||||
root: {
|
||||
columnGap: theme.spacing.unit * 3 + "px",
|
||||
columnGap: theme.spacing(3),
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
rowGap: theme.spacing.unit * 3 + "px"
|
||||
rowGap: theme.spacing(3)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ import { buttonMessages } from "@saleor/intl";
|
|||
import { maybe } from "../../../misc";
|
||||
import { CustomerDetails_user } from "../../types/CustomerDetails";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
label: {
|
||||
fontWeight: 600,
|
||||
marginBottom: theme.spacing.unit
|
||||
marginBottom: theme.spacing(1)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ import { commonMessages } from "@saleor/intl";
|
|||
import { FormErrors } from "../../../types";
|
||||
import { CustomerCreatePageFormData } from "../CustomerCreatePage";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: "grid",
|
||||
gridColumnGap: theme.spacing.unit * 2 + "px",
|
||||
gridRowGap: theme.spacing.unit * 3 + "px",
|
||||
gridColumnGap: theme.spacing(2),
|
||||
gridRowGap: theme.spacing(3),
|
||||
gridTemplateColumns: "1fr 1fr"
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import { commonMessages } from "@saleor/intl";
|
||||
import { CustomerDetails_user } from "../../types/CustomerDetails";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
cardTitle: {
|
||||
height: 64
|
||||
},
|
||||
root: {
|
||||
display: "grid" as "grid",
|
||||
gridColumnGap: theme.spacing.unit * 2 + "px",
|
||||
gridRowGap: theme.spacing.unit * 3 + "px",
|
||||
gridColumnGap: theme.spacing(2),
|
||||
gridRowGap: theme.spacing(3),
|
||||
gridTemplateColumns: "1fr 1fr"
|
||||
}
|
||||
});
|
||||
|
|
@ -70,7 +70,7 @@ const CustomerDetails = withStyles(styles, { name: "CustomerDetails" })(
|
|||
<>
|
||||
<FormattedMessage {...commonMessages.generalInformations} />
|
||||
{customer && customer.dateJoined ? (
|
||||
<Typography variant="caption">
|
||||
<Typography variant="caption" component="div">
|
||||
<FormattedMessage
|
||||
defaultMessage="Customer since: {date}"
|
||||
description="section subheader"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc";
|
|||
import { ListActions, ListProps } from "@saleor/types";
|
||||
import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
[theme.breakpoints.up("lg")]: {
|
||||
colEmail: {},
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import { maybe } from "../../../misc";
|
||||
import { CustomerDetails_user } from "../../types/CustomerDetails";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
const styles = theme =>
|
||||
createStyles({
|
||||
label: {
|
||||
marginBottom: theme.spacing.unit
|
||||
marginBottom: theme.spacing(1)
|
||||
},
|
||||
value: {
|
||||
fontSize: 24
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
|
|||
onCategoryUnassign: (id: 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(.5)
|
||||
},
|
||||
tableRow: {
|
||||
cursor: "pointer"
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
|
|||
onCollectionUnassign: (id: 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(.5)
|
||||
},
|
||||
tableRow: {
|
||||
cursor: "pointer"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue