djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update @material-ui

Browse source
This commit is contained in:
dominik-zeglen 2019-10-28 17:16:49 +01:00
parent 4ed81f60fb
commit d84ba84e91
176 changed files with 1003 additions and 1027 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

411
package-lock.json generated
View file

@ -1633,103 +1633,185 @@
} }
}, },
"@material-ui/core": { "@material-ui/core": {
"version": "3.9.3", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.6.0.tgz",
"integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==", "integrity": "sha512-nzD0oO3R2dcX/+hmi5FUFSddMKySK76Ryuno3J/iOotbKvzXwbf9szzhL8KPNmsj+vizVNfkEfhzOuuCHRBKKQ==",
"requires": { "requires": {
"@babel/runtime": "^7.2.0", "@babel/runtime": "^7.4.4",
"@material-ui/system": "^3.0.0-alpha.0", "@material-ui/styles": "^4.6.0",
"@material-ui/utils": "^3.0.0-alpha.2", "@material-ui/system": "^4.5.2",
"@types/jss": "^9.5.6", "@material-ui/types": "^4.1.1",
"@types/react-transition-group": "^2.0.8", "@material-ui/utils": "^4.5.2",
"brcast": "^3.0.1", "@types/react-transition-group": "^4.2.0",
"classnames": "^2.2.5", "clsx": "^1.0.2",
"csstype": "^2.5.2", "convert-css-length": "^2.0.1",
"debounce": "^1.1.0",
"deepmerge": "^3.0.0",
"dom-helpers": "^3.2.1",
"hoist-non-react-statics": "^3.2.1", "hoist-non-react-statics": "^3.2.1",
"is-plain-object": "^2.0.4", "normalize-scroll-left": "^0.2.0",
"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",
"popper.js": "^1.14.1", "popper.js": "^1.14.1",
"prop-types": "^15.6.0", "prop-types": "^15.7.2",
"react-event-listener": "^0.6.2", "react-transition-group": "^4.3.0"
"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"
}, },
"dependencies": { "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": { "jss": {
"version": "10.0.0-alpha.23", "version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz", "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz",
"integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==", "integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==",
"requires": { "requires": {
"@babel/runtime": "^7.3.1", "@babel/runtime": "^7.3.1",
"csstype": "^2.6.5", "csstype": "^2.6.5",
"is-in-browser": "^1.1.3", "is-in-browser": "^1.1.3",
"tiny-warning": "^1.0.2" "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": { "@material-ui/icons": {
"version": "3.0.0-alpha.2", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
"integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==", "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
"requires": { "requires": {
"@babel/runtime": "^7.2.0", "@babel/runtime": "^7.4.4"
"deepmerge": "^3.0.0", }
"prop-types": "^15.6.0", },
"warning": "^4.0.1" "@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": { "@material-ui/utils": {
"version": "3.0.0-alpha.3", "version": "4.5.2",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz", "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.5.2.tgz",
"integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==", "integrity": "sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ==",
"requires": { "requires": {
"@babel/runtime": "^7.2.0", "@babel/runtime": "^7.4.4",
"prop-types": "^15.6.0", "prop-types": "^15.7.2",
"react-is": "^16.6.3" "react-is": "^16.8.6"
} }
}, },
"@mrmlnc/readdir-enhanced": { "@mrmlnc/readdir-enhanced": {
@ -2932,15 +3014,6 @@
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
"dev": true "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": { "@types/lodash": {
"version": "4.14.136", "version": "4.14.136",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.136.tgz", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.136.tgz",
@ -3098,9 +3171,9 @@
} }
}, },
"@types/react-transition-group": { "@types/react-transition-group": {
"version": "2.9.2", "version": "4.2.3",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
"integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==", "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
} }
@ -6504,7 +6577,8 @@
"change-emitter": { "change-emitter": {
"version": "0.1.6", "version": "0.1.6",
"resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz", "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": { "character-entities": {
"version": "1.2.3", "version": "1.2.3",
@ -7196,6 +7270,11 @@
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" "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": { "convert-source-map": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
@ -7612,11 +7691,6 @@
"integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=", "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
"dev": true "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": { "debug": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -7688,11 +7762,6 @@
"integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==", "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==",
"dev": true "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": { "default-gateway": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@ -11153,14 +11222,6 @@
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
"dev": true "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": { "indent-string": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", "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": { "jss-preset-default": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz", "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
@ -14715,9 +14706,9 @@
"dev": true "dev": true
}, },
"normalize-scroll-left": { "normalize-scroll-left": {
"version": "0.1.2", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz", "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
"integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==" "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
}, },
"normalize-url": { "normalize-url": {
"version": "2.0.1", "version": "2.0.1",
@ -16626,16 +16617,6 @@
"integrity": "sha512-oHf3b1J2Pxu03apiHvP21qBCkj6fG6A3c3ahya3fX0VXEZUTzIRLwZI9eZ/6cuOO+kvnzdVdGBxZlo+Tjh+hfQ==", "integrity": "sha512-oHf3b1J2Pxu03apiHvP21qBCkj6fG6A3c3ahya3fX0VXEZUTzIRLwZI9eZ/6cuOO+kvnzdVdGBxZlo+Tjh+hfQ==",
"dev": true "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": { "react-fast-compare": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
@ -16954,14 +16935,45 @@
} }
}, },
"react-transition-group": { "react-transition-group": {
"version": "2.9.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
"requires": { "requires": {
"dom-helpers": "^3.4.0", "@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
"prop-types": "^15.6.2", "prop-types": "^15.6.2"
"react-lifecycles-compat": "^3.0.4" },
"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": { "react-virtualized": {
@ -17109,6 +17121,7 @@
"version": "0.30.0", "version": "0.30.0",
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz", "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
"integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==", "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
"dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.0.0", "@babel/runtime": "^7.0.0",
"change-emitter": "^0.1.2", "change-emitter": "^0.1.2",
@ -17121,7 +17134,8 @@
"hoist-non-react-statics": { "hoist-non-react-statics": {
"version": "2.5.5", "version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", "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", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dev": true,
"requires": { "requires": {
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }

5
package.json
View file

@ -17,9 +17,8 @@
"npm": ">=6.1.0" "npm": ">=6.1.0"
}, },
"dependencies": { "dependencies": {
"@material-ui/core": "^3.9.3", "@material-ui/core": "^4.5.1",
"@material-ui/icons": "^3.0.2", "@material-ui/icons": "^4.5.1",
"@material-ui/styles": "^3.0.0-alpha.10",
"apollo": "^2.17.2", "apollo": "^2.17.2",
"apollo-cache-inmemory": "^1.6.2", "apollo-cache-inmemory": "^1.6.2",
"apollo-client": "^2.6.4", "apollo-client": "^2.6.4",

5
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -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 Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter"; import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -21,7 +20,7 @@ export interface AttributeListProps extends ListProps, ListActions {
attributes: AttributeList_attributes_edges_node[]; attributes: AttributeList_attributes_edges_node[];
} }
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
colFaceted: { colFaceted: {
width: 150 width: 150

11
src/attributes/components/AttributeValues/AttributeValues.tsx
View file

@ -1,13 +1,12 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton"; 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 Table from "@material-ui/core/Table";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -30,12 +29,12 @@ export interface AttributeValuesProps {
onValueUpdate: (id: string) => void; onValueUpdate: (id: string) => void;
} }
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
columnAdmin: { columnAdmin: {
width: "50%" width: "50%"
}, },
columnDrag: { columnDrag: {
width: 48 + theme.spacing.unit * 1.5 width: 48 + theme.spacing(1.5)
}, },
columnStore: { columnStore: {
width: "50%" width: "50%"
@ -45,9 +44,9 @@ const useStyles = makeStyles((theme: Theme) => ({
}, },
iconCell: { iconCell: {
"&:last-child": { "&:last-child": {
paddingRight: theme.spacing.unit paddingRight: theme.spacing()
}, },
width: 48 + theme.spacing.unit * 1.5 width: 48 + theme.spacing(1.5)
}, },
link: { link: {
cursor: "pointer" cursor: "pointer"

11
src/auth/components/Layout.tsx
View file

@ -1,5 +1,4 @@
import { Theme } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import SVG from "react-inlinesvg"; import SVG from "react-inlinesvg";
@ -9,24 +8,24 @@ import saleorLightLogo from "@assets/images/logo-light.svg";
import useTheme from "@saleor/hooks/useTheme"; import useTheme from "@saleor/hooks/useTheme";
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
logo: { logo: {
"& svg": { "& svg": {
display: "block", display: "block",
height: 40, height: 40,
marginBottom: theme.spacing.unit * 4 marginBottom: theme.spacing(4)
} }
}, },
mainPanel: { mainPanel: {
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
padding: theme.spacing.unit * 2 padding: theme.spacing(2)
}, },
background: theme.palette.background.paper, background: theme.palette.background.paper,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100vh", height: "100vh",
justifyContent: "center", justifyContent: "center",
padding: theme.spacing.unit * 6, padding: theme.spacing(6),
width: "100%" width: "100%"
}, },
mainPanelContent: { mainPanelContent: {

8
src/auth/components/LoginPage/LoginPage.tsx
View file

@ -19,7 +19,7 @@ export interface FormData {
password: string; password: string;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
buttonContainer: { buttonContainer: {
display: "flex", display: "flex",
@ -38,9 +38,9 @@ const styles = (theme: Theme) =>
color: theme.palette.error.contrastText color: theme.palette.error.contrastText
}, },
background: theme.palette.error.main, background: theme.palette.error.main,
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
padding: theme.spacing.unit * 1.5 padding: theme.spacing(1.5)
} }
}); });

2
src/auth/components/NewPasswordPage/NewPasswordPage.tsx
View file

@ -1,7 +1,7 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";

11
src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
View file

@ -1,8 +1,7 @@
import Button from "@material-ui/core/Button"; 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 TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -11,15 +10,15 @@ import FormSpacer from "@saleor/components/FormSpacer";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
panel: { panel: {
"& span": { "& span": {
color: theme.palette.error.contrastText color: theme.palette.error.contrastText
}, },
background: theme.palette.error.main, background: theme.palette.error.main,
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
padding: theme.spacing.unit * 1.5 padding: theme.spacing(1.5)
}, },
submit: { submit: {
width: "100%" width: "100%"

2
src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
View file

@ -1,6 +1,6 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";

9
src/categories/components/CategoryBackground/CategoryBackground.tsx
View file

@ -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 TextField from "@material-ui/core/TextField";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import Button from "@material-ui/core/Button"; 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 { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails";
import { FormData } from "../CategoryUpdatePage"; import { FormData } from "../CategoryUpdatePage";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
fileField: { fileField: {
display: "none" display: "none"
}, },
@ -29,11 +28,11 @@ const useStyles = makeStyles((theme: Theme) => ({
imageContainer: { imageContainer: {
background: "#ffffff", background: "#ffffff",
border: "1px solid #eaeaea", border: "1px solid #eaeaea",
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
height: 148, height: 148,
justifySelf: "start", justifySelf: "start",
overflow: "hidden", overflow: "hidden",
padding: theme.spacing.unit * 2, padding: theme.spacing(2),
position: "relative", position: "relative",
width: 148 width: 148
} }

2
src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
View file

@ -15,7 +15,7 @@ import { FormattedMessage } from "react-intl";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
deleteButton: { deleteButton: {
"&:hover": { "&:hover": {

2
src/categories/components/CategoryList/CategoryList.tsx
View file

@ -20,7 +20,7 @@ import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
colName: { colName: {

2
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -25,7 +25,7 @@ import { ListActions, ListProps } from "@saleor/types";
import React from "react"; import React from "react";
import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails"; import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
colName: { colName: {

8
src/collections/components/CollectionImage/CollectionImage.tsx
View file

@ -19,7 +19,7 @@ import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails"; import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
PhotosIcon: { PhotosIcon: {
height: "64px", height: "64px",
@ -27,7 +27,7 @@ const styles = (theme: Theme) =>
width: "64px" width: "64px"
}, },
PhotosIconContainer: { PhotosIconContainer: {
margin: `${theme.spacing.unit * 5}px 0`, margin: theme.spacing(5, 0),
textAlign: "center" textAlign: "center"
}, },
fileField: { fileField: {
@ -42,11 +42,11 @@ const styles = (theme: Theme) =>
imageContainer: { imageContainer: {
background: "#ffffff", background: "#ffffff",
border: "1px solid #eaeaea", border: "1px solid #eaeaea",
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
height: 148, height: 148,
justifySelf: "start", justifySelf: "start",
overflow: "hidden", overflow: "hidden",
padding: theme.spacing.unit * 2, padding: theme.spacing(2),
position: "relative", position: "relative",
width: 148 width: 148
} }

2
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -21,7 +21,7 @@ import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import { CollectionList_collections_edges_node } from "../../types/CollectionList"; import { CollectionList_collections_edges_node } from "../../types/CollectionList";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
colAvailability: { colAvailability: {

4
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -29,13 +29,13 @@ import { maybe, renderCollection } from "../../../misc";
import { ListActions, PageListProps } from "../../../types"; import { ListActions, PageListProps } from "../../../types";
import { CollectionDetails_collection } from "../../types/CollectionDetails"; import { CollectionDetails_collection } from "../../types/CollectionDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
colActions: { colActions: {
"&:last-child": { "&:last-child": {
paddingRight: 0 paddingRight: 0
}, },
width: 76 + theme.spacing.unit / 2 width: 76 + theme.spacing(0.5)
}, },
colName: { colName: {
paddingLeft: 0, paddingLeft: 0,

4
src/components/AccountPermissions/AccountPermissions.tsx
View file

@ -15,10 +15,10 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
checkboxContainer: { checkboxContainer: {
marginTop: theme.spacing.unit marginTop: theme.spacing()
}, },
hr: { hr: {
backgroundColor: theme.overrides.MuiCard.root.borderColor, backgroundColor: theme.overrides.MuiCard.root.borderColor,

2
src/components/ActionDialog/ActionDialog.tsx
View file

@ -18,7 +18,7 @@ import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton"; } from "../ConfirmButton/ConfirmButton";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
deleteButton: { deleteButton: {
"&:hover": { "&:hover": {

4
src/components/AddressEdit/AddressEdit.tsx
View file

@ -16,11 +16,11 @@ import SingleAutocompleteSelectField, {
SingleAutocompleteChoiceType SingleAutocompleteChoiceType
} from "../SingleAutocompleteSelectField"; } from "../SingleAutocompleteSelectField";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
display: "grid", display: "grid",
gridColumnGap: `${theme.spacing.unit * 2}px`, gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr" gridTemplateColumns: "1fr 1fr"
} }
}); });

10
src/components/AddressFormatter/AddressFormatter.tsx
View file

@ -18,23 +18,23 @@ const AddressFormatter: React.FC<AddressFormatterProps> = ({ address }) => {
fontStyle: "inherit" fontStyle: "inherit"
}} }}
> >
<Typography component="span"> <Typography component="p">
{address.firstName} {address.lastName} {address.firstName} {address.lastName}
</Typography> </Typography>
{address.companyName && ( {address.companyName && (
<Typography component="span">{address.companyName}</Typography> <Typography component="p">{address.companyName}</Typography>
)} )}
<Typography component="span"> <Typography component="p">
{address.streetAddress1} {address.streetAddress1}
<br /> <br />
{address.streetAddress2} {address.streetAddress2}
</Typography> </Typography>
<Typography component="span"> <Typography component="p">
{" "} {" "}
{address.postalCode} {address.city} {address.postalCode} {address.city}
{address.cityArea ? ", " + address.cityArea : ""} {address.cityArea ? ", " + address.cityArea : ""}
</Typography> </Typography>
<Typography component="span"> <Typography component="p">
{address.countryArea {address.countryArea
? address.countryArea + ", " + address.country.country ? address.countryArea + ", " + address.country.country
: address.country.country} : address.country.country}

16
src/components/AppHeader/AppHeader.tsx
View file

@ -16,36 +16,36 @@ export interface AppHeaderProps {
onBack(); onBack();
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
backArrow: { backArrow: {
fontSize: 30 fontSize: 30
}, },
menuButton: { menuButton: {
flex: "0 0 auto", flex: "0 0 auto",
marginLeft: theme.spacing.unit * -2, marginLeft: -theme.spacing(2),
marginRight: theme.spacing.unit, marginRight: theme.spacing(),
marginTop: -theme.spacing.unit * 2 marginTop: -theme.spacing(2)
}, },
root: { root: {
"&:hover": { "&:hover": {
color: theme.typography.body2.color color: theme.typography.body1.color
}, },
alignItems: "center", alignItems: "center",
color: theme.palette.grey[500], color: theme.palette.grey[500],
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
marginTop: theme.spacing.unit / 2, marginTop: theme.spacing(0.5),
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"
}, },
skeleton: { skeleton: {
marginBottom: theme.spacing.unit * 2, marginBottom: theme.spacing(2),
width: "10rem" width: "10rem"
}, },
title: { title: {
color: "inherit", color: "inherit",
flex: 1, flex: 1,
marginLeft: theme.spacing.unit, marginLeft: theme.spacing(),
textTransform: "uppercase" textTransform: "uppercase"
} }
}); });

33
src/components/AppLayout/AppLayout.tsx
View file

@ -8,12 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/MenuList"; import Menu from "@material-ui/core/MenuList";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper"; import Popper from "@material-ui/core/Popper";
import { import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import SVG from "react-inlinesvg"; import SVG from "react-inlinesvg";
@ -41,7 +36,7 @@ import createMenuStructure from "./menuStructure";
import ResponsiveDrawer from "./ResponsiveDrawer"; import ResponsiveDrawer from "./ResponsiveDrawer";
import ThemeSwitch from "./ThemeSwitch"; import ThemeSwitch from "./ThemeSwitch";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
appAction: { appAction: {
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
@ -56,15 +51,15 @@ const styles = (theme: Theme) =>
}, },
appLoader: { appLoader: {
height: appLoaderHeight, height: appLoaderHeight,
marginBottom: theme.spacing.unit * 2, marginBottom: theme.spacing(2),
zIndex: 1201 zIndex: 1201
}, },
appLoaderPlaceholder: { appLoaderPlaceholder: {
height: appLoaderHeight, height: appLoaderHeight,
marginBottom: theme.spacing.unit * 2 marginBottom: theme.spacing(2)
}, },
arrow: { arrow: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing(2),
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"
}, },
content: { content: {
@ -82,12 +77,12 @@ const styles = (theme: Theme) =>
paddingLeft: drawerWidth paddingLeft: drawerWidth
}, },
darkThemeSwitch: { darkThemeSwitch: {
marginRight: theme.spacing.unit * 2 marginRight: theme.spacing(2)
}, },
header: { header: {
display: "flex", display: "flex",
height: 40, height: 40,
marginBottom: theme.spacing.unit * 3 marginBottom: theme.spacing(3)
}, },
isMenuSmall: { isMenuSmall: {
"& path": { "& path": {
@ -186,8 +181,8 @@ const styles = (theme: Theme) =>
borderRadius: "50%", borderRadius: "50%",
cursor: "pointer", cursor: "pointer",
height: 42, height: 42,
left: theme.spacing.unit, left: theme.spacing(),
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(2),
position: "relative", position: "relative",
transform: "rotate(0deg)", transform: "rotate(0deg)",
transition: `${theme.transitions.duration.shorter}ms ease-in-out`, transition: `${theme.transitions.duration.shorter}ms ease-in-out`,
@ -236,7 +231,7 @@ const styles = (theme: Theme) =>
padding: 0 padding: 0
}, },
background: theme.palette.background.paper, background: theme.palette.background.paper,
padding: `0 ${theme.spacing.unit * 4}px` padding: `0 ${theme.spacing(4)}px`
}, },
spacer: { spacer: {
flex: 1 flex: 1
@ -260,15 +255,13 @@ const styles = (theme: Theme) =>
flex: 1, flex: 1,
flexGrow: 1, flexGrow: 1,
marginLeft: 0, marginLeft: 0,
paddingBottom: theme.spacing.unit, paddingBottom: theme.spacing(),
[theme.breakpoints.up("sm")]: { [theme.breakpoints.up("sm")]: {
paddingBottom: theme.spacing.unit * 3 paddingBottom: theme.spacing(3)
} }
}, },
viewContainer: { viewContainer: {
minHeight: `calc(100vh - ${theme.spacing.unit * 2 + minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)`
appLoaderHeight +
70}px)`
} }
}); });

10
src/components/AppLayout/MenuList.tsx
View file

@ -24,7 +24,7 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
import MenuNested from "./MenuNested"; import MenuNested from "./MenuNested";
import { IMenuItem } from "./menuStructure"; import { IMenuItem } from "./menuStructure";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
menuIcon: { menuIcon: {
"& svg": { "& svg": {
@ -78,14 +78,14 @@ const styles = (theme: Theme) =>
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100%", height: "100%",
marginLeft: theme.spacing.unit * 4, marginLeft: theme.spacing(4),
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
paddingBottom: theme.spacing.unit * 3 paddingBottom: theme.spacing(3)
}, },
menuListItem: { menuListItem: {
alignItems: "center", alignItems: "center",
display: "block", display: "block",
marginBottom: theme.spacing.unit * 5, marginBottom: theme.spacing(5),
paddingLeft: 0, paddingLeft: 0,
textDecoration: "none", textDecoration: "none",
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"

4
src/components/AppLayout/MenuNested.tsx
View file

@ -17,7 +17,7 @@ import { drawerWidthExpanded } from "./consts";
import { IActiveSubMenu } from "./MenuList"; import { IActiveSubMenu } from "./MenuList";
import { IMenuItem } from "./menuStructure"; import { IMenuItem } from "./menuStructure";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
menuListNested: { menuListNested: {
background: theme.palette.background.paper, background: theme.palette.background.paper,
@ -70,7 +70,7 @@ const styles = (theme: Theme) =>
} }
}, },
display: "block", display: "block",
marginBottom: theme.spacing.unit * 2, marginBottom: theme.spacing(2),
padding: "0px 30px", padding: "0px 30px",
textDecoration: "none" textDecoration: "none"
}, },

2
src/components/AppLayout/ResponsiveDrawer.tsx
View file

@ -9,7 +9,7 @@ import {
import React from "react"; import React from "react";
import { drawerWidth, drawerWidthExpanded } from "./consts"; import { drawerWidth, drawerWidthExpanded } from "./consts";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
drawerDesktop: { drawerDesktop: {
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,

2
src/components/AppLayout/ThemeSwitch.tsx
View file

@ -5,7 +5,7 @@ import React from "react";
import MoonIcon from "../../icons/Moon"; import MoonIcon from "../../icons/Moon";
import SunIcon from "../../icons/Sun"; import SunIcon from "../../icons/Sun";
const switchStyles = (theme: Theme) => ({ const switchStyles = theme => ({
bar: { bar: {
"$colorPrimary$checked + &": { "$colorPrimary$checked + &": {
backgroundColor: theme.palette.background.paper backgroundColor: theme.palette.background.paper

10
src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
View file

@ -43,20 +43,20 @@ const DebounceAutocomplete: React.ComponentType<
DebounceProps<string> DebounceProps<string>
> = Debounce; > = Debounce;
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
container: { container: {
flexGrow: 1, flexGrow: 1,
position: "relative" position: "relative"
}, },
menuBack: { menuBack: {
marginLeft: -theme.spacing.unit / 2, marginLeft: -theme.spacing(.5),
marginRight: theme.spacing.unit marginRight: theme.spacing(1)
}, },
paper: { paper: {
left: 0, left: 0,
marginTop: theme.spacing.unit, marginTop: theme.spacing(),
padding: theme.spacing.unit, padding: theme.spacing(),
position: "absolute", position: "absolute",
right: 0, right: 0,
zIndex: 2 zIndex: 2

2
src/components/CardMenu/CardMenu.tsx
View file

@ -23,7 +23,7 @@ export interface CardMenuProps {
menuItems: CardMenuItem[]; menuItems: CardMenuItem[];
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
iconButton: { iconButton: {
background: theme.palette.background.paper, background: theme.palette.background.paper,

6
src/components/CardSpacer.tsx
View file

@ -6,13 +6,13 @@ import {
} from "@material-ui/core/styles"; } from "@material-ui/core/styles";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
spacer: { spacer: {
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
marginTop: theme.spacing.unit marginTop: theme.spacing(1)
}, },
marginTop: theme.spacing.unit * 3 marginTop: theme.spacing(3)
} }
}); });

4
src/components/CardTitle/CardTitle.tsx
View file

@ -8,7 +8,7 @@ import Typography from "@material-ui/core/Typography";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
children: theme.mixins.gutters({}), children: theme.mixins.gutters({}),
constantHeight: { constantHeight: {
@ -32,7 +32,7 @@ const styles = (theme: Theme) =>
lineHeight: 1 lineHeight: 1
}, },
toolbar: { toolbar: {
marginRight: -theme.spacing.unit marginRight: -theme.spacing(1)
} }
}); });

2
src/components/Checkbox/Checkbox.tsx
View file

@ -25,7 +25,7 @@ export type CheckboxProps = Omit<
onChange?: (event: React.ChangeEvent<any>) => void; onChange?: (event: React.ChangeEvent<any>) => void;
}; };
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
box: { box: {
"&$checked": { "&$checked": {

6
src/components/Chip/Chip.tsx
View file

@ -16,12 +16,12 @@ export interface ChipProps {
onClose?: () => void; onClose?: () => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
closeIcon: { closeIcon: {
cursor: "pointer", cursor: "pointer",
fontSize: 16, fontSize: 16,
marginLeft: theme.spacing.unit, marginLeft: theme.spacing(),
verticalAlign: "middle" verticalAlign: "middle"
}, },
label: { label: {
@ -31,7 +31,7 @@ const styles = (theme: Theme) =>
background: fade(theme.palette.secondary.main, 0.8), background: fade(theme.palette.secondary.main, 0.8),
borderRadius: 8, borderRadius: 8,
display: "inline-block", display: "inline-block",
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(2),
padding: "6px 12px" padding: "6px 12px"
} }
}); });

7
src/components/ColumnPicker/ColumnPicker.tsx
View file

@ -1,9 +1,8 @@
import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow"; import Grow from "@material-ui/core/Grow";
import Popper from "@material-ui/core/Popper"; import Popper from "@material-ui/core/Popper";
import { Theme } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator"; 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 React from "react";
import useStateFromProps from "@saleor/hooks/useStateFromProps"; import useStateFromProps from "@saleor/hooks/useStateFromProps";
@ -26,10 +25,10 @@ export interface ColumnPickerProps
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
popper: { popper: {
boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`, boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
zIndex: 1 zIndex: 1
} }
}), }),

9
src/components/ColumnPicker/ColumnPickerButton.tsx
View file

@ -1,8 +1,7 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import { Theme } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator"; import { fade } from "@material-ui/core/styles/colorManipulator";
import makeStyles from "@material-ui/core/styles/makeStyles";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import makeStyles from "@material-ui/styles/makeStyles";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -14,16 +13,16 @@ interface ColumnPickerButtonProps {
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
icon: { icon: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing(2),
transition: theme.transitions.duration.short + "ms" transition: theme.transitions.duration.short + "ms"
}, },
root: { root: {
"& span": { "& span": {
color: theme.palette.primary.main color: theme.palette.primary.main
}, },
paddingRight: theme.spacing.unit paddingRight: theme.spacing(1)
}, },
rootActive: { rootActive: {
background: fade(theme.palette.primary.main, 0.1) background: fade(theme.palette.primary.main, 0.1)

13
src/components/ColumnPicker/ColumnPickerContent.tsx
View file

@ -2,9 +2,8 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import CircularProgress from "@material-ui/core/CircularProgress"; 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 Typography from "@material-ui/core/Typography";
import makeStyles from "@material-ui/styles/makeStyles";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import InfiniteScroll from "react-infinite-scroller"; import InfiniteScroll from "react-infinite-scroller";
@ -31,7 +30,7 @@ export interface ColumnPickerContentProps extends Partial<FetchMoreProps> {
onSave: () => void; onSave: () => void;
} }
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
actionBar: { actionBar: {
display: "flex", display: "flex",
justifyContent: "space-between" justifyContent: "space-between"
@ -41,16 +40,16 @@ const useStyles = makeStyles((theme: Theme) => ({
transition: theme.transitions.duration.short + "ms" transition: theme.transitions.duration.short + "ms"
}, },
cancelButton: { cancelButton: {
marginRight: theme.spacing.unit * 2 marginRight: theme.spacing(2)
}, },
content: { content: {
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 3, gridColumnGap: theme.spacing(3),
gridTemplateColumns: "repeat(3, 1fr)", gridTemplateColumns: "repeat(3, 1fr)",
maxHeight: 256, maxHeight: 256,
overflowX: "visible", overflowX: "visible",
overflowY: "scroll", overflowY: "scroll",
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px` padding: theme.spacing(2, 3)
}, },
contentContainer: { contentContainer: {
padding: 0 padding: 0
@ -62,7 +61,7 @@ const useStyles = makeStyles((theme: Theme) => ({
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
gridColumnEnd: "span 3", gridColumnEnd: "span 3",
height: theme.spacing.unit * 3, height: theme.spacing(3),
justifyContent: "center" justifyContent: "center"
}, },
root: { root: {

2
src/components/ConfirmButton/ConfirmButton.tsx
View file

@ -19,7 +19,7 @@ export type ConfirmButtonTransitionState =
| "error" | "error"
| "default"; | "default";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
error: { error: {
"&:hover": { "&:hover": {

6
src/components/Container.tsx
View file

@ -7,7 +7,7 @@ import {
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
@ -16,9 +16,9 @@ const styles = (theme: Theme) =>
maxWidth: theme.breakpoints.width("lg") maxWidth: theme.breakpoints.width("lg")
}, },
[theme.breakpoints.up("sm")]: { [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)
} }
}); });

4
src/components/ControlledSwitch.tsx
View file

@ -3,10 +3,10 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch"; import Switch from "@material-ui/core/Switch";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
label: { label: {
marginLeft: theme.spacing.unit * 3.5 marginLeft: theme.spacing(3.5)
}, },
labelText: { labelText: {
fontSize: 14 fontSize: 14

8
src/components/CountryList/CountryList.tsx
View file

@ -32,24 +32,24 @@ export interface CountryListProps {
onCountryUnassign: (country: string) => void; onCountryUnassign: (country: string) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
iconCell: { iconCell: {
"&:last-child": { "&:last-child": {
paddingRight: 0 paddingRight: 0
}, },
width: 48 + theme.spacing.unit / 2 width: 48 + theme.spacing(2)
}, },
indicator: { indicator: {
color: theme.palette.text.disabled, color: theme.palette.text.disabled,
display: "inline-block", display: "inline-block",
left: 0, left: 0,
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(.5),
position: "absolute" position: "absolute"
}, },
offsetCell: { offsetCell: {
"&:first-child": { "&:first-child": {
paddingLeft: theme.spacing.unit * 3 paddingLeft: theme.spacing(3)
}, },
position: "relative" position: "relative"
}, },

6
src/components/EditableTableCell/EditableTableCell.tsx
View file

@ -14,7 +14,7 @@ import React from "react";
import useForm from "@saleor/hooks/useForm"; import useForm from "@saleor/hooks/useForm";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
card: { card: {
border: `1px solid ${theme.overrides.MuiCard.root.borderColor}` border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
@ -33,10 +33,10 @@ const styles = (theme: Theme) =>
}, },
root: { root: {
left: 0, left: 0,
minWidth: theme.spacing.unit * 20, minWidth: theme.spacing(20),
position: "absolute", position: "absolute",
top: 0, top: 0,
width: `calc(100% + ${4 * theme.spacing.unit}px)`, width: `calc(100% + ${theme.spacing(4)}px)`,
zIndex: 2 zIndex: 2
}, },
text: { text: {

2
src/components/ErrorMessageCard/ErrorMessageCard.tsx
View file

@ -13,7 +13,7 @@ const ErrorMessageCard: React.FC<ErrorMessageCardProps> = ({ message }) => (
<Typography variant="h5" component="h2"> <Typography variant="h5" component="h2">
<FormattedMessage defaultMessage="Error" description="header" /> <FormattedMessage defaultMessage="Error" description="header" />
</Typography> </Typography>
<Typography variant="body2">{message}</Typography> <Typography variant="body1">{message}</Typography>
</CardContent> </CardContent>
</Card> </Card>
); );

6
src/components/ErrorPage/ErrorPage.tsx
View file

@ -16,20 +16,20 @@ export interface ErrorPageProps extends WithStyles<typeof styles> {
onBack: () => void; onBack: () => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
bottomHeader: { bottomHeader: {
fontWeight: 600 as 600, fontWeight: 600 as 600,
textTransform: "uppercase" textTransform: "uppercase"
}, },
button: { button: {
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
padding: 20 padding: 20
}, },
container: { container: {
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr", gridTemplateColumns: "1fr",
padding: theme.spacing.unit * 3, padding: theme.spacing(3),
width: "100%" width: "100%"
}, },
display: "grid", display: "grid",

16
src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
View file

@ -7,33 +7,33 @@ import {
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
action: { action: {
flex: "0 0 auto" flex: "0 0 auto"
}, },
grid: { grid: {
padding: theme.spacing.unit * 2 padding: theme.spacing(2)
}, },
menuButton: { menuButton: {
flex: "0 0 auto", flex: "0 0 auto",
marginLeft: theme.spacing.unit * -2, marginLeft: -theme.spacing(2),
marginRight: theme.spacing.unit * 3, marginRight: theme.spacing(3),
marginTop: -theme.spacing.unit * 2 marginTop: -theme.spacing(2)
}, },
root: { root: {
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
marginBottom: theme.spacing.unit * 3 marginBottom: theme.spacing(3)
}, },
subtitle: { subtitle: {
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
marginBottom: theme.spacing.unit * 2 marginBottom: theme.spacing(2)
}, },
title: { title: {
flex: 1, flex: 1,
paddingBottom: theme.spacing.unit * 2 paddingBottom: theme.spacing(2)
} }
}); });

24
src/components/Filter/Filter.tsx
View file

@ -2,12 +2,7 @@ import ButtonBase from "@material-ui/core/ButtonBase";
import Grow from "@material-ui/core/Grow"; import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper"; import Popper from "@material-ui/core/Popper";
import { import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator"; import { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
@ -26,7 +21,7 @@ export interface FilterProps<TFilterKeys = string> {
onFilterAdd: (filter: FilterContentSubmitData) => void; onFilterAdd: (filter: FilterContentSubmitData) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
addFilterButton: { addFilterButton: {
"&$filterButton": { "&$filterButton": {
@ -37,7 +32,7 @@ const styles = (theme: Theme) =>
border: `1px solid ${theme.palette.primary.main}`, border: `1px solid ${theme.palette.primary.main}`,
cursor: "pointer", cursor: "pointer",
marginBottom: 0, marginBottom: 0,
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(2),
marginTop: 0, marginTop: 0,
transition: theme.transitions.duration.short + "ms" transition: theme.transitions.duration.short + "ms"
} }
@ -62,20 +57,19 @@ const styles = (theme: Theme) =>
backgroundColor: fade(theme.palette.primary.main, 0.6), backgroundColor: fade(theme.palette.primary.main, 0.6),
borderRadius: "4px", borderRadius: "4px",
display: "flex", display: "flex",
height: "45px", height: 40,
justifyContent: "space-around", justifyContent: "space-around",
margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`, margin: theme.spacing(2, 1),
marginLeft: 0, marginLeft: 0,
padding: "0 16px", padding: theme.spacing(0, 2),
position: "relative", position: "relative"
top: -5
}, },
paper: { paper: {
"& p": { "& p": {
paddingBottom: 10 paddingBottom: 10
}, },
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
padding: theme.spacing.unit * 2, padding: theme.spacing(2),
width: 240 width: 240
}, },
popover: { popover: {

17
src/components/Filter/FilterActions.tsx
View file

@ -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 TextField, { TextFieldProps } from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/styles"; import classNames from "classnames";
import React from "react"; import React from "react";
import { FilterContentSubmitData, IFilter } from "../Filter"; import { FilterContentSubmitData, IFilter } from "../Filter";
@ -8,7 +8,7 @@ import Filter from "./Filter";
const useInputStyles = makeStyles({ const useInputStyles = makeStyles({
input: { input: {
padding: "10px 12px" padding: "10.5px 12px"
}, },
root: { root: {
flex: 1 flex: 1
@ -29,13 +29,14 @@ const Search: React.FC<TextFieldProps> = props => {
}; };
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
actionContainer: { actionContainer: {
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px ${ padding: theme.spacing(1, 3)
theme.spacing.unit },
}px` searchOnly: {
paddingBottom: theme.spacing(1.5)
} }
}), }),
{ {
@ -62,7 +63,7 @@ export const FilterActionsOnlySearch: React.FC<
const classes = useStyles(props); const classes = useStyles(props);
return ( return (
<div className={classes.actionContainer}> <div className={classNames(classes.actionContainer, classes.searchOnly)}>
<Search <Search
fullWidth fullWidth
placeholder={placeholder} placeholder={placeholder}

2
src/components/Filter/FilterContent.tsx
View file

@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; 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 { getMenuItemByValue, isLeaf, walkToRoot } from "../../utils/menu";
import FormSpacer from "../FormSpacer"; import FormSpacer from "../FormSpacer";
import SingleSelectField from "../SingleSelectField"; import SingleSelectField from "../SingleSelectField";

2
src/components/Filter/FilterElement.tsx
View file

@ -1,6 +1,6 @@
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";

9
src/components/Filter/FilterSearch.tsx
View file

@ -1,5 +1,4 @@
import { Theme } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -17,7 +16,7 @@ export interface FilterSearchProps extends SearchPageProps {
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
tabAction: { tabAction: {
display: "inline-block" display: "inline-block"
}, },
@ -25,8 +24,8 @@ const useStyles = makeStyles(
borderBottom: `1px solid ${theme.palette.divider}`, borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex", display: "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
marginTop: theme.spacing.unit, marginTop: theme.spacing(),
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit}px` padding: theme.spacing(0, 1, 3, 1)
} }
}), }),
{ {

4
src/components/FormSpacer.tsx
View file

@ -6,10 +6,10 @@ import {
} from "@material-ui/core/styles"; } from "@material-ui/core/styles";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
spacer: { spacer: {
marginTop: theme.spacing.unit * 3 marginTop: theme.spacing(3)
} }
}); });

8
src/components/Grid/Grid.tsx
View file

@ -14,7 +14,7 @@ export interface GridProps extends WithStyles<typeof styles> {
variant?: GridVariant; variant?: GridVariant;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
default: { default: {
gridTemplateColumns: "9fr 4fr" gridTemplateColumns: "9fr 4fr"
@ -24,10 +24,10 @@ const styles = (theme: Theme) =>
}, },
root: { root: {
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 3 + "px", gridColumnGap: theme.spacing(3),
gridRowGap: theme.spacing.unit * 3 + "px", gridRowGap: theme.spacing(3),
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
gridRowGap: theme.spacing.unit + "px", gridRowGap: theme.spacing(1),
gridTemplateColumns: "1fr" gridTemplateColumns: "1fr"
} }
}, },

2
src/components/Hr.tsx
View file

@ -11,7 +11,7 @@ interface HrProps {
className?: string; className?: string;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
backgroundColor: theme.overrides.MuiCard.root.borderColor, backgroundColor: theme.overrides.MuiCard.root.borderColor,

4
src/components/IconButtonTableCell/IconButtonTableCell.tsx
View file

@ -17,14 +17,14 @@ export interface IconButtonTableCellProps {
onClick: () => void; onClick: () => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
"&:last-child": { "&:last-child": {
paddingRight: 0 paddingRight: 0
}, },
paddingRight: 0, paddingRight: 0,
width: ICONBUTTON_SIZE + theme.spacing.unit / 2 width: ICONBUTTON_SIZE + theme.spacing(.5)
} }
}); });
const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })( const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(

6
src/components/ImageTile/ImageTile.tsx
View file

@ -10,7 +10,7 @@ import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
image: { image: {
height: "100%", height: "100%",
@ -26,10 +26,10 @@ const styles = (theme: Theme) =>
}, },
background: theme.palette.background.paper, background: theme.palette.background.paper,
border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
height: 148, height: 148,
overflow: "hidden", overflow: "hidden",
padding: theme.spacing.unit * 2, padding: theme.spacing(2),
position: "relative", position: "relative",
width: 148 width: 148
}, },

10
src/components/ImageUpload/ImageUpload.tsx
View file

@ -22,7 +22,7 @@ interface ImageUploadProps {
onImageUpload: (file: File) => void; onImageUpload: (file: File) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
containerDragActive: { containerDragActive: {
background: fade(theme.palette.primary.main, 0.1), background: fade(theme.palette.primary.main, 0.1),
@ -34,11 +34,11 @@ const styles = (theme: Theme) =>
imageContainer: { imageContainer: {
background: "#ffffff", background: "#ffffff",
border: "1px solid #eaeaea", border: "1px solid #eaeaea",
borderRadius: theme.spacing.unit, borderRadius: theme.spacing(),
height: 148, height: 148,
justifySelf: "start", justifySelf: "start",
overflow: "hidden", overflow: "hidden",
padding: theme.spacing.unit * 2, padding: theme.spacing(2),
position: "relative", position: "relative",
transition: theme.transitions.duration.standard + "s", transition: theme.transitions.duration.standard + "s",
width: 148 width: 148
@ -49,11 +49,11 @@ const styles = (theme: Theme) =>
width: "64px" width: "64px"
}, },
photosIconContainer: { photosIconContainer: {
padding: `${theme.spacing.unit * 5}px 0`, padding: theme.spacing(5, 0),
textAlign: "center" textAlign: "center"
}, },
uploadText: { uploadText: {
color: theme.typography.body2.color, color: theme.typography.body1.color,
fontSize: 12, fontSize: 12,
fontWeight: 600, fontWeight: 600,
textTransform: "uppercase" textTransform: "uppercase"

8
src/components/LanguageSwitch/LanguageSwitch.tsx
View file

@ -26,28 +26,28 @@ export interface LanguageSwitchProps {
onLanguageChange: (lang: LanguageCodeEnum) => void; onLanguageChange: (lang: LanguageCodeEnum) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
arrow: { arrow: {
color: theme.palette.primary.main, color: theme.palette.primary.main,
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"
}, },
container: { container: {
paddingBottom: theme.spacing.unit paddingBottom: theme.spacing(1)
}, },
menuContainer: { menuContainer: {
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
minWidth: 90, minWidth: 90,
padding: theme.spacing.unit, padding: theme.spacing(),
position: "relative" position: "relative"
}, },
menuItem: { menuItem: {
textAlign: "justify" textAlign: "justify"
}, },
menuPaper: { menuPaper: {
maxHeight: `calc(100vh - ${theme.spacing.unit * 2}px)`, maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
overflow: "scroll" overflow: "scroll"
}, },
popover: { popover: {

2
src/components/Link.tsx
View file

@ -8,7 +8,7 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
primary: { primary: {
color: theme.palette.primary.main color: theme.palette.primary.main

6
src/components/ListField/ListField.tsx
View file

@ -17,13 +17,13 @@ interface ListFieldState {
value: string; value: string;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
chip: { chip: {
marginBottom: theme.spacing.unit marginBottom: theme.spacing(1)
}, },
chipContainer: { chipContainer: {
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
width: 552 width: 552
} }
}); });

10
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -20,7 +20,7 @@ import MultiAutocompleteSelectFieldContent, {
MultiAutocompleteChoiceType MultiAutocompleteChoiceType
} from "./MultiAutocompleteSelectFieldContent"; } from "./MultiAutocompleteSelectFieldContent";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
chip: { chip: {
width: "100%" width: "100%"
@ -33,7 +33,7 @@ const styles = (theme: Theme) =>
chipContainer: { chipContainer: {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
marginTop: theme.spacing.unit marginTop: theme.spacing(1)
}, },
chipInner: { chipInner: {
"& svg": { "& svg": {
@ -45,9 +45,9 @@ const styles = (theme: Theme) =>
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
margin: `${theme.spacing.unit}px 0`, margin: theme.spacing(1, 0),
paddingLeft: theme.spacing.unit * 2, paddingLeft: theme.spacing(2),
paddingRight: theme.spacing.unit paddingRight: theme.spacing(1)
}, },
chipLabel: { chipLabel: {
color: theme.palette.primary.contrastText color: theme.palette.primary.contrastText

18
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
View file

@ -1,9 +1,8 @@
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@material-ui/core/CircularProgress";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import Paper from "@material-ui/core/Paper"; 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 AddIcon from "@material-ui/icons/Add";
import { makeStyles } from "@material-ui/styles";
import classNames from "classnames"; import classNames from "classnames";
import { GetItemPropsOptions } from "downshift"; import { GetItemPropsOptions } from "downshift";
import React from "react"; import React from "react";
@ -37,7 +36,7 @@ export interface MultiAutocompleteSelectFieldContentProps
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
addIcon: { addIcon: {
height: 24, height: 24,
margin: 9, margin: 9,
@ -48,7 +47,10 @@ const useStyles = makeStyles(
}, },
arrowInnerContainer: { arrowInnerContainer: {
alignItems: "center", alignItems: "center",
background: theme.palette.grey[50], background:
theme.palette.type === "light"
? theme.palette.grey[50]
: theme.palette.grey[900],
bottom: 0, bottom: 0,
display: "flex", display: "flex",
height: 30, height: 30,
@ -63,7 +65,7 @@ const useStyles = makeStyles(
width: 20 width: 20
}, },
content: { content: {
maxHeight: menuItemHeight * maxMenuItems + theme.spacing.unit * 2, maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2),
overflow: "scroll", overflow: "scroll",
padding: 8 padding: 8
}, },
@ -71,7 +73,7 @@ const useStyles = makeStyles(
opacity: 0 opacity: 0
}, },
hr: { hr: {
margin: `${theme.spacing.unit}px 0` margin: theme.spacing(1, 0)
}, },
menuItem: { menuItem: {
"&:focus": { "&:focus": {
@ -92,7 +94,7 @@ const useStyles = makeStyles(
}, },
borderRadius: 4, borderRadius: 4,
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit + "px", gridColumnGap: theme.spacing(1),
gridTemplateColumns: "30px 1fr", gridTemplateColumns: "30px 1fr",
height: "auto", height: "auto",
padding: 0, padding: 0,
@ -110,7 +112,7 @@ const useStyles = makeStyles(
borderBottomLeftRadius: 8, borderBottomLeftRadius: 8,
borderBottomRightRadius: 8, borderBottomRightRadius: 8,
left: 0, left: 0,
marginTop: theme.spacing.unit, marginTop: theme.spacing(),
overflow: "hidden", overflow: "hidden",
position: "absolute", position: "absolute",
right: 0, right: 0,

4
src/components/MultiSelectField/MultiSelectField.tsx
View file

@ -15,10 +15,10 @@ import { FormattedMessage } from "react-intl";
import Checkbox from "../Checkbox"; import Checkbox from "../Checkbox";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
checkbox: { checkbox: {
marginRight: -theme.spacing.unit * 2 marginRight: -theme.spacing(2)
}, },
formControl: { formControl: {
width: "100%" width: "100%"

6
src/components/NotFoundPage/NotFoundPage.tsx
View file

@ -12,16 +12,16 @@ import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/not-found-404.svg"; import notFoundImage from "@assets/images/not-found-404.svg";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
button: { button: {
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing(2),
padding: 20 padding: 20
}, },
container: { container: {
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr", gridTemplateColumns: "1fr",
padding: theme.spacing.unit * 3, padding: theme.spacing(3),
width: "100%" width: "100%"
}, },
display: "grid", display: "grid",

4
src/components/PageHeader/PageHeader.tsx
View file

@ -10,7 +10,7 @@ import React from "react";
import ExtendedPageHeader from "../ExtendedPageHeader"; import ExtendedPageHeader from "../ExtendedPageHeader";
import Skeleton from "../Skeleton"; import Skeleton from "../Skeleton";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
display: "flex" display: "flex"
@ -18,7 +18,7 @@ const styles = (theme: Theme) =>
title: { title: {
flex: 1, flex: 1,
fontSize: 24, fontSize: 24,
paddingBottom: theme.spacing.unit * 2 paddingBottom: theme.spacing(2)
} }
}); });

4
src/components/PhoneField/PhoneField.tsx
View file

@ -9,11 +9,11 @@ import React from "react";
import SingleSelectField from "@saleor/components/SingleSelectField"; import SingleSelectField from "@saleor/components/SingleSelectField";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
display: "grid", display: "grid",
gridColumnGap: `${theme.spacing.unit * 2}px`, gridColumnGap: theme.spacing(2),
gridTemplateColumns: "5rem 1fr" gridTemplateColumns: "5rem 1fr"
} }
}); });

15
src/components/PriceField/PriceField.tsx
View file

@ -1,15 +1,10 @@
import { InputProps } from "@material-ui/core/Input"; import { InputProps } from "@material-ui/core/Input";
import InputAdornment from "@material-ui/core/InputAdornment"; import InputAdornment from "@material-ui/core/InputAdornment";
import { import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
currencySymbol: { currencySymbol: {
fontSize: "0.875rem" fontSize: "0.875rem"
@ -19,15 +14,15 @@ const styles = (theme: Theme) =>
gridTemplateColumns: "1fr 2rem 1fr" gridTemplateColumns: "1fr 2rem 1fr"
}, },
pullDown: { pullDown: {
marginTop: theme.spacing.unit * 2 marginTop: theme.spacing(2)
}, },
separator: { separator: {
marginTop: theme.spacing.unit * 3, marginTop: theme.spacing(3),
textAlign: "center", textAlign: "center",
width: "100%" width: "100%"
}, },
widgetContainer: { widgetContainer: {
marginTop: theme.spacing.unit * 2 marginTop: theme.spacing(2)
} }
}); });

11
src/components/RadioGroupField/RadioGroupField.tsx
View file

@ -5,19 +5,18 @@ import FormLabel from "@material-ui/core/FormLabel";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import Radio from "@material-ui/core/Radio"; import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup"; import RadioGroup from "@material-ui/core/RadioGroup";
import { Theme } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/styles";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
formLabel: { formLabel: {
marginBottom: theme.spacing.unit marginBottom: theme.spacing(1)
}, },
radioLabel: { radioLabel: {
marginBottom: -theme.spacing.unit * 1.5 marginBottom: -theme.spacing(1.5)
}, },
root: { root: {
"& $radioLabel": { "& $radioLabel": {
@ -29,7 +28,7 @@ const useStyles = makeStyles(
width: "100%" width: "100%"
}, },
rootNoLabel: { rootNoLabel: {
marginTop: -theme.spacing.unit * 1.5 marginTop: -theme.spacing(1.5)
} }
}), }),
{ {

4
src/components/RichTextEditor/ImageEntity.tsx
View file

@ -23,7 +23,7 @@ interface ImageEntityProps {
onRemove: (entityKey: string) => void; onRemove: (entityKey: string) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
anchor: { anchor: {
display: "inline-block" display: "inline-block"
@ -40,7 +40,7 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
minHeight: 72, minHeight: 72,
padding: theme.spacing.unit * 1.5 padding: theme.spacing(1.5)
} }
}); });

11
src/components/RichTextEditor/LinkEntity.tsx
View file

@ -27,7 +27,7 @@ interface LinkEntityProps {
onRemove: (entityKey: string) => void; onRemove: (entityKey: string) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
anchor: { anchor: {
display: "inline-block" display: "inline-block"
@ -46,15 +46,14 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
minHeight: 72, minHeight: 72,
padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * padding: theme.spacing(1.5, 1.5, 1.5, 3)
1.5}px ${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px`
}, },
separator: { separator: {
backgroundColor: theme.palette.grey[300], backgroundColor: theme.palette.grey[300],
display: "inline-block", display: "inline-block",
height: 30, height: 30,
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing(2),
marginRight: theme.spacing.unit, marginRight: theme.spacing(),
width: 1 width: 1
} }
}); });
@ -97,7 +96,7 @@ const LinkEntity = withStyles(styles, {
<Paper className={classes.root}> <Paper className={classes.root}>
<ClickAwayListener onClickAway={disable} mouseEvent="onClick"> <ClickAwayListener onClickAway={disable} mouseEvent="onClick">
<div className={classes.container}> <div className={classes.container}>
<Typography className={classes.inline} variant="body2"> <Typography className={classes.inline} variant="body1">
{contentState.getEntity(entityKey).getData().url} {contentState.getEntity(entityKey).getData().url}
</Typography> </Typography>
<span className={classes.separator} /> <span className={classes.separator} />

14
src/components/RichTextEditor/RichTextEditor.tsx
View file

@ -45,13 +45,13 @@ export interface RichTextEditorProps {
onChange: (event: React.ChangeEvent<any>) => void; onChange: (event: React.ChangeEvent<any>) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
error: { error: {
color: theme.palette.error.main color: theme.palette.error.main
}, },
helperText: { helperText: {
marginTop: theme.spacing.unit * 0.75 marginTop: theme.spacing(0.75)
}, },
input: { input: {
position: "relative" position: "relative"
@ -90,7 +90,7 @@ const styles = (theme: Theme) =>
position: "relative" position: "relative"
}, },
"&-root": { "&-root": {
...theme.typography.body2 ...theme.typography.body1
} }
}, },
"& .Draftail": { "& .Draftail": {
@ -140,12 +140,12 @@ const styles = (theme: Theme) =>
background: "none", background: "none",
border: "none", border: "none",
borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
color: theme.typography.body2.color, color: theme.typography.body1.color,
cursor: "pointer", cursor: "pointer",
display: "inline-flex", display: "inline-flex",
height: 36, height: 36,
justifyContent: "center", justifyContent: "center",
padding: theme.spacing.unit + 2, padding: theme.spacing(1) + 2,
transition: theme.transitions.duration.short + "ms", transition: theme.transitions.duration.short + "ms",
width: 36 width: 36
}, },
@ -163,7 +163,7 @@ const styles = (theme: Theme) =>
border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
display: "inline-flex", display: "inline-flex",
flexWrap: "wrap", flexWrap: "wrap",
marginBottom: theme.spacing.unit, marginBottom: theme.spacing(),
marginTop: 10, marginTop: 10,
[theme.breakpoints.down(460)]: { [theme.breakpoints.down(460)]: {
width: "min-content" width: "min-content"
@ -173,7 +173,7 @@ const styles = (theme: Theme) =>
"&--blockquote": { "&--blockquote": {
borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`, borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`,
margin: 0, margin: 0,
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px` padding: theme.spacing(1, 2)
} }
} }
}, },

40
src/components/RowNumberSelect/RowNumberSelect.tsx
View file

@ -1,34 +1,32 @@
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select"; import Select from "@material-ui/core/Select";
import { Theme } from "@material-ui/core/styles"; import { makeStyles, useTheme } from "@material-ui/core/styles";
import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import { ListSettings } from "../../types"; import { ListSettings } from "../../types";
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => theme => ({
createStyles({ label: {
label: { fontSize: 14
fontSize: 14 },
select: {
"& div": {
"&:focus": {
background: "none"
},
color: theme.palette.primary.main,
marginLeft: theme.spacing(1)
}, },
select: { "& svg": {
"& div": { color: theme.palette.primary.main
"&:focus": { },
background: "none" "&:after, &:before, &:hover": {
}, border: "none !important"
color: theme.palette.primary.main,
padding: "0 10px 0 5px"
},
"& svg": {
color: theme.palette.primary.main
},
"&:after, &:before, &:hover": {
border: "none !important"
}
} }
}), }
}),
{ {
name: "RowNumberSelect" name: "RowNumberSelect"
} }

12
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -19,20 +19,20 @@ import ConfirmButton, {
} from "../ConfirmButton/ConfirmButton"; } from "../ConfirmButton/ConfirmButton";
import Container from "../Container"; import Container from "../Container";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
button: { button: {
marginRight: theme.spacing.unit marginRight: theme.spacing(1)
}, },
cancelButton: { cancelButton: {
marginRight: theme.spacing.unit * 2 marginRight: theme.spacing(2)
}, },
container: { container: {
display: "flex", display: "flex",
paddingBottom: theme.spacing.unit * 2, paddingBottom: theme.spacing(2),
paddingTop: theme.spacing.unit * 2, paddingTop: theme.spacing(2),
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
marginTop: theme.spacing.unit marginTop: theme.spacing(1)
} }
}, },
deleteButton: { deleteButton: {

50
src/components/SeoForm/SeoForm.tsx
View file

@ -16,7 +16,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "../CardTitle"; import CardTitle from "../CardTitle";
import FormSpacer from "../FormSpacer"; import FormSpacer from "../FormSpacer";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
addressBar: { addressBar: {
color: "#006621", color: "#006621",
@ -37,7 +37,7 @@ const styles = (theme: Theme) =>
overflowWrap: "break-word" overflowWrap: "break-word"
}, },
helperText: { helperText: {
marginBottom: theme.spacing.unit * 3 marginBottom: theme.spacing(3)
}, },
label: { label: {
flex: 1 flex: 1
@ -49,7 +49,7 @@ const styles = (theme: Theme) =>
display: "flex" display: "flex"
}, },
preview: { preview: {
minHeight: theme.spacing.unit * 10 minHeight: theme.spacing(10)
}, },
title: { title: {
padding: 0 padding: 0
@ -124,16 +124,18 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
<div className={classes.label}> <div className={classes.label}>
<FormattedMessage defaultMessage="Search engine title" /> <FormattedMessage defaultMessage="Search engine title" />
</div> </div>
<span> {title.length > 0 && (
<FormattedMessage <span>
defaultMessage="{numberOfCharacters} of {maxCharacters} characters" <FormattedMessage
description="character limit" defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
values={{ description="character limit"
maxCharacters: 70, values={{
numberOfCharacters: title.length maxCharacters: 70,
}} numberOfCharacters: title.length
/> }}
</span> />
</span>
)}
</div> </div>
} }
helperText={intl.formatMessage({ helperText={intl.formatMessage({
@ -154,16 +156,18 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
<div className={classes.label}> <div className={classes.label}>
<FormattedMessage defaultMessage="Search engine description" /> <FormattedMessage defaultMessage="Search engine description" />
</div> </div>
<span> {description.length > 0 && (
<FormattedMessage <span>
defaultMessage="{numberOfCharacters} of {maxCharacters} characters" <FormattedMessage
description="character limit" defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
values={{ description="character limit"
maxCharacters: 300, values={{
numberOfCharacters: description.length maxCharacters: 300,
}} numberOfCharacters: description.length
/> }}
</span> />
</span>
)}
</div> </div>
} }
helperText={intl.formatMessage({ helperText={intl.formatMessage({

22
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -1,9 +1,8 @@
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@material-ui/core/CircularProgress";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import Paper from "@material-ui/core/Paper"; 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 Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import classNames from "classnames"; import classNames from "classnames";
import { GetItemPropsOptions } from "downshift"; import { GetItemPropsOptions } from "downshift";
import React from "react"; import React from "react";
@ -38,13 +37,16 @@ export interface SingleAutocompleteSelectFieldContentProps
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
arrowContainer: { arrowContainer: {
position: "relative" position: "relative"
}, },
arrowInnerContainer: { arrowInnerContainer: {
alignItems: "center", alignItems: "center",
background: theme.palette.grey[50], background:
theme.palette.type === "light"
? theme.palette.grey[50]
: theme.palette.grey[900],
bottom: 0, bottom: 0,
display: "flex", display: "flex",
height: 30, height: 30,
@ -55,7 +57,7 @@ const useStyles = makeStyles(
width: "100%" width: "100%"
}, },
content: { content: {
maxHeight: menuItemHeight * maxMenuItems + theme.spacing.unit * 2, maxHeight: menuItemHeight * maxMenuItems + theme.spacing(2),
overflow: "scroll", overflow: "scroll",
padding: 8 padding: 8
}, },
@ -63,7 +65,7 @@ const useStyles = makeStyles(
opacity: 0 opacity: 0
}, },
hr: { hr: {
margin: `${theme.spacing.unit}px 0` margin: theme.spacing(1, 0)
}, },
menuItem: { menuItem: {
height: "auto", height: "auto",
@ -78,7 +80,7 @@ const useStyles = makeStyles(
borderBottomLeftRadius: 8, borderBottomLeftRadius: 8,
borderBottomRightRadius: 8, borderBottomRightRadius: 8,
left: 0, left: 0,
marginTop: theme.spacing.unit, marginTop: theme.spacing(),
overflow: "hidden", overflow: "hidden",
position: "absolute", position: "absolute",
right: 0, right: 0,
@ -115,7 +117,6 @@ const SingleAutocompleteSelectFieldContent: React.FC<
emptyOption, emptyOption,
getItemProps, getItemProps,
hasMore, hasMore,
highlightedIndex,
loading, loading,
inputValue, inputValue,
isCustomValueSelected, isCustomValueSelected,
@ -196,10 +197,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<
<MenuItem <MenuItem
className={classes.menuItem} className={classes.menuItem}
key={JSON.stringify(suggestion)} key={JSON.stringify(suggestion)}
selected={ selected={selectedItem === suggestion.value}
highlightedIndex === choiceIndex ||
selectedItem === suggestion.value
}
component="div" component="div"
{...getItemProps({ {...getItemProps({
index: choiceIndex, index: choiceIndex,

2
src/components/Skeleton.tsx
View file

@ -7,7 +7,7 @@ import {
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
"@keyframes skeleton-animation": { "@keyframes skeleton-animation": {
"0%": { "0%": {

9
src/components/SortableTable/SortableHandle.tsx
View file

@ -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 TableCell from "@material-ui/core/TableCell";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
import Draggable from "@saleor/icons/Draggable"; import Draggable from "@saleor/icons/Draggable";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
columnDrag: { columnDrag: {
"&:first-child": { "&:first-child": {
paddingRight: theme.spacing.unit * 2 paddingRight: theme.spacing(2)
}, },
cursor: "grab", cursor: "grab",
width: 48 + theme.spacing.unit * 1.5 width: 48 + theme.spacing(1.5)
} }
})); }));

5
src/components/SortableTable/SortableTableBody.tsx
View file

@ -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 TableBody, { TableBodyProps } from "@material-ui/core/TableBody";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import { SortableContainer } from "react-sortable-hoc"; import { SortableContainer } from "react-sortable-hoc";
@ -14,7 +13,7 @@ export interface SortableTableBodyProps {
onSortEnd: ReorderAction; onSortEnd: ReorderAction;
} }
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
ghost: { ghost: {
"& td": { "& td": {
borderBottom: "none" borderBottom: "none"

6
src/components/StatusLabel/StatusLabel.tsx
View file

@ -9,13 +9,13 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => { const styles = theme => {
const dot = { const dot = {
borderRadius: "100%", borderRadius: "100%",
content: "''", content: "''",
display: "block", display: "block",
height: 8, height: 8,
left: -theme.spacing.unit * 2, left: -theme.spacing(2),
position: "absolute" as "absolute", position: "absolute" as "absolute",
top: "calc(50% - 5px)", top: "calc(50% - 5px)",
width: 8 width: 8
@ -29,7 +29,7 @@ const styles = (theme: Theme) => {
}, },
root: { root: {
display: "inline-block", display: "inline-block",
marginLeft: theme.spacing.unit + 8, marginLeft: theme.spacing(1) + 8,
position: "relative" position: "relative"
}, },
span: { span: {

8
src/components/Tab/Tab.tsx
View file

@ -9,7 +9,7 @@ import Typography from "@material-ui/core/Typography";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
active: { active: {
color: theme.typography.caption.color color: theme.typography.caption.color
@ -17,7 +17,7 @@ const styles = (theme: Theme) =>
root: { root: {
"&$active": { "&$active": {
borderBottomColor: theme.palette.primary.main, borderBottomColor: theme.palette.primary.main,
color: theme.typography.body2.color color: theme.typography.body1.color
}, },
"&:focus": { "&:focus": {
color: theme.palette.primary.main color: theme.palette.primary.main
@ -30,9 +30,9 @@ const styles = (theme: Theme) =>
cursor: "pointer", cursor: "pointer",
display: "inline-block", display: "inline-block",
fontWeight: theme.typography.fontWeightRegular, fontWeight: theme.typography.fontWeightRegular,
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(2),
minWidth: 40, minWidth: 40,
padding: `0 ${theme.spacing.unit}px`, padding: theme.spacing(1),
transition: theme.transitions.duration.short + "ms" transition: theme.transitions.duration.short + "ms"
} }
}); });

2
src/components/Tab/TabContainer.tsx
View file

@ -10,7 +10,7 @@ export interface TabContainerProps {
children: React.ReactNode | React.ReactNodeArray; children: React.ReactNode | React.ReactNodeArray;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}` borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`

8
src/components/TableCellAvatar/TableCellAvatar.tsx
View file

@ -14,7 +14,7 @@ import Image from "../../icons/Image";
export const AVATAR_MARGIN = 56; export const AVATAR_MARGIN = 56;
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
avatar: { avatar: {
background: "none", background: "none",
@ -22,11 +22,11 @@ const styles = (theme: Theme) =>
borderRadius: 2, borderRadius: 2,
color: "#bdbdbd", color: "#bdbdbd",
display: "inline-flex", display: "inline-flex",
padding: theme.spacing.unit / 2 padding: theme.spacing(.5)
}, },
children: { children: {
alignSelf: "center", alignSelf: "center",
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing(2),
width: "100%" width: "100%"
}, },
content: { content: {
@ -34,7 +34,7 @@ const styles = (theme: Theme) =>
display: "flex" display: "flex"
}, },
root: { root: {
paddingRight: theme.spacing.unit * 3, paddingRight: theme.spacing(3),
width: "1%" width: "1%"
} }
}); });

5
src/components/TableCellHeader/TableCellHeader.tsx
View file

@ -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 TableCell, { TableCellProps } from "@material-ui/core/TableCell";
import makeStyles from "@material-ui/styles/makeStyles";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import ArrowSort from "../../icons/ArrowSort"; import ArrowSort from "../../icons/ArrowSort";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles(theme => ({
arrow: { arrow: {
transition: theme.transitions.duration.short + "ms" transition: theme.transitions.duration.short + "ms"
}, },

18
src/components/TableFilter/FilterChips.tsx
View file

@ -1,9 +1,8 @@
import ButtonBase from "@material-ui/core/ButtonBase"; 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 { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import ClearIcon from "@material-ui/icons/Clear"; import ClearIcon from "@material-ui/icons/Clear";
import { makeStyles, useTheme } from "@material-ui/styles";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -18,7 +17,7 @@ export interface Filter {
} }
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
filterButton: { filterButton: {
alignItems: "center", alignItems: "center",
backgroundColor: fade(theme.palette.primary.main, 0.8), backgroundColor: fade(theme.palette.primary.main, 0.8),
@ -26,9 +25,9 @@ const useStyles = makeStyles(
display: "flex", display: "flex",
height: "38px", height: "38px",
justifyContent: "space-around", justifyContent: "space-around",
margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`, margin: theme.spacing(2, 1),
marginLeft: 0, marginLeft: 0,
padding: `0 ${theme.spacing.unit * 2}px` padding: theme.spacing(0, 2)
}, },
filterChipContainer: { filterChipContainer: {
display: "flex", display: "flex",
@ -37,12 +36,13 @@ const useStyles = makeStyles(
}, },
filterContainer: { filterContainer: {
"& a": { "& a": {
paddingBottom: 10 paddingBottom: 10,
paddingTop: theme.spacing(1)
}, },
borderBottom: `1px solid ${theme.palette.divider}`, borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex", display: "flex",
marginTop: theme.spacing.unit, marginTop: -theme.spacing(1),
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit}px` padding: theme.spacing(0, 2)
}, },
filterIcon: { filterIcon: {
color: theme.palette.common.white, color: theme.palette.common.white,
@ -61,7 +61,7 @@ const useStyles = makeStyles(
width: 32 width: 32
}, },
filterLabel: { filterLabel: {
marginBottom: theme.spacing.unit marginBottom: theme.spacing(1)
}, },
filterText: { filterText: {
color: theme.palette.common.white, color: theme.palette.common.white,

14
src/components/TableFilter/FilterTab.tsx
View file

@ -8,16 +8,16 @@ import Tab from "@material-ui/core/Tab";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
selectedTabLabel: { selectedTabLabel: {
"&$tabLabel": { "&$tabLabel": {
color: theme.typography.body2.color color: theme.typography.body1.color
} }
}, },
tabLabel: { tabLabel: {
"&:hover": { "&:hover": {
color: theme.typography.body2.color color: theme.typography.body1.color
}, },
color: theme.typography.caption.color, color: theme.typography.caption.color,
fontSize: "1rem", fontSize: "1rem",
@ -26,7 +26,7 @@ const styles = (theme: Theme) =>
tabRoot: { tabRoot: {
minWidth: "80px", minWidth: "80px",
opacity: 1, opacity: 1,
paddingTop: `${theme.spacing.unit * 1}px`, paddingTop: theme.spacing(1),
textTransform: "initial" as "initial" textTransform: "initial" as "initial"
} }
}); });
@ -44,10 +44,10 @@ export const FilterTab = withStyles(styles, { name: "FilterTab" })(
disableRipple disableRipple
label={label} label={label}
classes={{ classes={{
label: classNames(classes.tabLabel, { root: classes.tabRoot,
wrapper: classNames(classes.tabLabel, {
[classes.selectedTabLabel]: selected [classes.selectedTabLabel]: selected
}), })
root: classes.tabRoot
}} }}
onClick={onClick} onClick={onClick}
value={value} value={value}

4
src/components/TableFilter/FilterTabs.tsx
View file

@ -7,11 +7,11 @@ import {
import Tabs from "@material-ui/core/Tabs"; import Tabs from "@material-ui/core/Tabs";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
tabsRoot: { tabsRoot: {
borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
paddingLeft: `${theme.spacing.unit * 3}px` paddingLeft: theme.spacing(3)
} }
}); });

6
src/components/TableHead/TableHead.tsx
View file

@ -29,7 +29,7 @@ export interface TableHeadProps extends MuiTableHeadProps {
toggleAll?: (items: Node[], selected: number) => void; toggleAll?: (items: Node[], selected: number) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
cell: { cell: {
padding: 0 padding: 0
@ -58,7 +58,7 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
height: 47, height: 47,
marginRight: -theme.spacing.unit * 2 marginRight: -theme.spacing(2)
}, },
dragRows: { dragRows: {
padding: 0, padding: 0,
@ -79,7 +79,7 @@ const styles = (theme: Theme) =>
}, },
toolbar: { toolbar: {
"& > *": { "& > *": {
marginLeft: theme.spacing.unit marginLeft: theme.spacing(1)
} }
} }
}); });

12
src/components/TablePagination/TablePagination.tsx
View file

@ -16,12 +16,12 @@ import { maybe } from "@saleor/misc";
import { ListSettings } from "../../types"; import { ListSettings } from "../../types";
import TablePaginationActions from "./TablePaginationActions"; import TablePaginationActions from "./TablePaginationActions";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
actions: { actions: {
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
flexShrink: 0, flexShrink: 0,
marginLeft: theme.spacing.unit * 2.5 marginLeft: theme.spacing(2.5)
}, },
caption: { caption: {
flexShrink: 0 flexShrink: 0
@ -36,16 +36,16 @@ const styles = (theme: Theme) =>
} }
}, },
select: { select: {
paddingLeft: theme.spacing.unit, paddingLeft: theme.spacing(),
paddingRight: theme.spacing.unit * 2 paddingRight: theme.spacing(2)
}, },
selectIcon: { selectIcon: {
top: 1 top: 1
}, },
selectRoot: { selectRoot: {
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
marginLeft: theme.spacing.unit, marginLeft: theme.spacing(),
marginRight: theme.spacing.unit * 4 marginRight: theme.spacing(4)
}, },
spacer: { spacer: {
flex: "1 1 100%" flex: "1 1 100%"

4
src/components/TablePagination/TablePaginationActions.tsx
View file

@ -12,7 +12,7 @@ import useTheme from "@saleor/hooks/useTheme";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
dark: { dark: {
"& svg": { "& svg": {
@ -51,7 +51,7 @@ const styles = (theme: Theme) =>
root: { root: {
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
flexShrink: 0, flexShrink: 0,
margin: `0 ${theme.spacing.unit * 2.5}px` margin: theme.spacing(0, 2.5)
} }
}); });

19
src/components/Theme/ThemeProvider.tsx
View file

@ -1,6 +1,5 @@
// FIXME: https://github.com/mirumee/saleor/issues/4174 // FIXME: https://github.com/mirumee/saleor/issues/4174
import OldMuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; import { MuiThemeProvider } from "@material-ui/core/styles";
import MuiThemeProvider from "@material-ui/styles/ThemeProvider";
import React from "react"; import React from "react";
import Baseline from "../../Baseline"; import Baseline from "../../Baseline";
@ -40,7 +39,8 @@ const dark: IThemeColors = {
}, },
paperBorder: "#252728", paperBorder: "#252728",
primary: "#13BEBB", primary: "#13BEBB",
secondary: "#21125E" secondary: "#21125E",
theme: "dark"
}; };
const light: IThemeColors = { const light: IThemeColors = {
autofill: "#f4f6c5", autofill: "#f4f6c5",
@ -76,7 +76,8 @@ const light: IThemeColors = {
}, },
paperBorder: "#EAEAEA", paperBorder: "#EAEAEA",
primary: "#06847B", primary: "#06847B",
secondary: "#21125E" secondary: "#21125E",
theme: "light"
}; };
interface IThemeContext { interface IThemeContext {
@ -108,12 +109,10 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({
toggleTheme toggleTheme
}} }}
> >
<OldMuiThemeProvider theme={createTheme(isDark ? dark : light)}> <MuiThemeProvider theme={createTheme(isDark ? dark : light)}>
<MuiThemeProvider theme={createTheme(isDark ? dark : light)}> <Baseline />
<Baseline /> {children}
{children} </MuiThemeProvider>
</MuiThemeProvider>
</OldMuiThemeProvider>
</ThemeContext.Provider> </ThemeContext.Provider>
); );
}; };

28
src/components/Timeline/Timeline.tsx
View file

@ -13,7 +13,7 @@ import PersonIcon from "@material-ui/icons/Person";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
avatar: { avatar: {
"& span": { "& span": {
@ -21,10 +21,13 @@ const styles = (theme: Theme) =>
width: "100%" width: "100%"
}, },
alignSelf: "flex-start", alignSelf: "flex-start",
marginRight: theme.spacing.unit * 3.5 marginRight: theme.spacing(3.5)
},
button: {
zIndex: 2
}, },
cardActionsExpanded: { cardActionsExpanded: {
maxHeight: theme.spacing.unit * 6 maxHeight: theme.spacing(6)
}, },
input: { input: {
"& > div": { "& > div": {
@ -36,15 +39,16 @@ const styles = (theme: Theme) =>
"& textarea": { "& textarea": {
"&::placeholder": { "&::placeholder": {
opacity: [[1], "!important"] as any opacity: [[1], "!important"] as any
} },
zIndex: 2
}, },
background: theme.palette.background.paper background: theme.palette.background.paper
}, },
noteRoot: { noteRoot: {
left: -theme.spacing.unit * 8.5 - 1, left: -theme.spacing(8.5) - 1,
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
position: "relative", position: "relative",
width: `calc(100% + ${theme.spacing.unit * 8.5}px)` width: `calc(100% + ${theme.spacing(8.5)}px)`
}, },
noteTitle: { noteTitle: {
"&:last-child": { "&:last-child": {
@ -54,14 +58,14 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
background: theme.palette.background.default, background: theme.palette.background.default,
display: "flex", display: "flex",
paddingLeft: theme.spacing.unit * 3 paddingLeft: theme.spacing(3)
}, },
root: { root: {
borderColor: theme.overrides.MuiCard.root.borderColor, borderColor: theme.overrides.MuiCard.root.borderColor,
borderStyle: "solid", borderStyle: "solid",
borderWidth: "0 0 0 2px", borderWidth: "0 0 0 2px",
marginLeft: 20, marginLeft: 20,
paddingLeft: theme.spacing.unit * 3 paddingLeft: theme.spacing(3)
} }
}); });
@ -112,7 +116,11 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
multiline multiline
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<Button color="primary" onClick={e => submit(e)}> <Button
className={classes.button}
color="primary"
onClick={e => submit(e)}
>
<FormattedMessage <FormattedMessage
defaultMessage="Send" defaultMessage="Send"
description="add order note, button" description="add order note, button"

12
src/components/Timeline/TimelineEvent.tsx
View file

@ -13,7 +13,7 @@ import React from "react";
import { DateTime } from "../Date"; import { DateTime } from "../Date";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
date: { date: {
color: theme.typography.caption.color, color: theme.typography.caption.color,
@ -21,7 +21,7 @@ const styles = (theme: Theme) =>
dateExpander:{ dateExpander:{
color: theme.typography.caption.color, color: theme.typography.caption.color,
position: "absolute", position: "absolute",
right: theme.spacing.unit * 3 right: theme.spacing(3)
}, },
dot: { dot: {
backgroundColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.main,
@ -36,8 +36,8 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
marginBottom: theme.spacing.unit, marginBottom: theme.spacing(),
marginLeft: theme.spacing.unit * 3, marginLeft: theme.spacing(3),
width: "100%" width: "100%"
}, },
panel: { panel: {
@ -52,14 +52,14 @@ const styles = (theme: Theme) =>
background: theme.palette.background.default, background: theme.palette.background.default,
content: "''", content: "''",
height: "calc(50% - 4px)", height: "calc(50% - 4px)",
left: `${-theme.spacing.unit * 3 - 2}px`, left: -theme.spacing(3) - 2,
position: "absolute", position: "absolute",
top: "calc(50% + 4px)", top: "calc(50% + 4px)",
width: "2px" width: "2px"
}, },
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
position: "relative", position: "relative",
width: "100%" width: "100%"
} }

10
src/components/Timeline/TimelineNote.tsx
View file

@ -34,7 +34,7 @@ const palette = [
colors.yellow colors.yellow
].map(color => color[500]); ].map(color => color[500]);
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
avatar: { avatar: {
left: -45, left: -45,
@ -42,8 +42,8 @@ const styles = (theme: Theme) =>
top: 0 top: 0
}, },
card: { card: {
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
marginLeft: theme.spacing.unit * 3, marginLeft: theme.spacing(3),
position: "relative" position: "relative"
}, },
cardContent: { cardContent: {
@ -62,8 +62,8 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
marginBottom: theme.spacing.unit, marginBottom: theme.spacing(),
paddingLeft: theme.spacing.unit * 3 paddingLeft: theme.spacing(3)
} }
}); });

6
src/components/VisibilityCard/VisibilityCard.tsx
View file

@ -15,21 +15,21 @@ import CardTitle from "@saleor/components/CardTitle";
import RadioSwitchField from "@saleor/components/RadioSwitchField"; import RadioSwitchField from "@saleor/components/RadioSwitchField";
import { DateContext } from "../Date/DateContext"; import { DateContext } from "../Date/DateContext";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
children: { children: {
"& button": { "& button": {
margin: "0 9px" margin: "0 9px"
}, },
"& label": { "& label": {
marginTop: `${theme.spacing.unit * 2.5}px` marginTop: theme.spacing(2.5)
} }
}, },
date: { date: {
"& svg": { "& svg": {
fill: theme.palette.primary.main fill: theme.palette.primary.main
}, },
marginTop: theme.spacing.unit * 3 marginTop: theme.spacing(3)
}, },
label: { label: {
lineHeight: 1, lineHeight: 1,

14
src/configuration/ConfigurationPage.tsx
View file

@ -31,14 +31,14 @@ export interface MenuSection {
menuItems: MenuItem[]; menuItems: MenuItem[];
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
card: { card: {
"&:hover": { "&:hover": {
boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);" boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
}, },
cursor: "pointer", cursor: "pointer",
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing(3),
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"
}, },
cardContent: { cardContent: {
@ -47,14 +47,14 @@ const styles = (theme: Theme) =>
paddingBottom: 16 paddingBottom: 16
}, },
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 4 + "px", gridColumnGap: theme.spacing(4),
gridTemplateColumns: "48px 1fr" gridTemplateColumns: "48px 1fr"
}, },
cardDisabled: { cardDisabled: {
"& $icon, & $sectionTitle, & $sectionDescription": { "& $icon, & $sectionTitle, & $sectionDescription": {
color: theme.palette.text.disabled color: theme.palette.text.disabled
}, },
marginBottom: theme.spacing.unit * 3 marginBottom: theme.spacing(3)
}, },
configurationCategory: { configurationCategory: {
[theme.breakpoints.down("md")]: { [theme.breakpoints.down("md")]: {
@ -62,13 +62,13 @@ const styles = (theme: Theme) =>
}, },
borderTop: `solid 1px ${theme.palette.divider}`, borderTop: `solid 1px ${theme.palette.divider}`,
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 4 + "px", gridColumnGap: theme.spacing(4) + "px",
gridTemplateColumns: "1fr 3fr", gridTemplateColumns: "1fr 3fr",
paddingTop: theme.spacing.unit * 3 + "px" paddingTop: theme.spacing(3)
}, },
configurationItem: { configurationItem: {
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 4 + "px", gridColumnGap: theme.spacing(4),
gridTemplateColumns: "1fr 1fr" gridTemplateColumns: "1fr 1fr"
}, },
configurationLabel: { configurationLabel: {

12
src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
View file

@ -28,24 +28,24 @@ export interface CustomerAddressListPageProps {
onSetAsDefault: (id: string, type: AddressTypeEnum) => void; onSetAsDefault: (id: string, type: AddressTypeEnum) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
addButton: { addButton: {
marginTop: theme.spacing.unit * 2 marginTop: theme.spacing(2)
}, },
description: { description: {
marginTop: theme.spacing.unit marginTop: theme.spacing(1)
}, },
empty: { empty: {
margin: `${theme.spacing.unit * 13}px auto 0`, margin: `${theme.spacing(13)}px auto 0`,
textAlign: "center", textAlign: "center",
width: 600 width: 600
}, },
root: { root: {
columnGap: theme.spacing.unit * 3 + "px", columnGap: theme.spacing(3),
display: "grid", display: "grid",
gridTemplateColumns: "repeat(3, 1fr)", gridTemplateColumns: "repeat(3, 1fr)",
rowGap: theme.spacing.unit * 3 + "px" rowGap: theme.spacing(3)
} }
}); });

4
src/customers/components/CustomerAddresses/CustomerAddresses.tsx
View file

@ -18,11 +18,11 @@ import { buttonMessages } from "@saleor/intl";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
label: { label: {
fontWeight: 600, fontWeight: 600,
marginBottom: theme.spacing.unit marginBottom: theme.spacing(1)
} }
}); });

6
src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
View file

@ -15,12 +15,12 @@ import { commonMessages } from "@saleor/intl";
import { FormErrors } from "../../../types"; import { FormErrors } from "../../../types";
import { CustomerCreatePageFormData } from "../CustomerCreatePage"; import { CustomerCreatePageFormData } from "../CustomerCreatePage";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
root: { root: {
display: "grid", display: "grid",
gridColumnGap: theme.spacing.unit * 2 + "px", gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing.unit * 3 + "px", gridRowGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr" gridTemplateColumns: "1fr 1fr"
} }
}); });

8
src/customers/components/CustomerDetails/CustomerDetails.tsx
View file

@ -19,15 +19,15 @@ import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
cardTitle: { cardTitle: {
height: 64 height: 64
}, },
root: { root: {
display: "grid" as "grid", display: "grid" as "grid",
gridColumnGap: theme.spacing.unit * 2 + "px", gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing.unit * 3 + "px", gridRowGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr" gridTemplateColumns: "1fr 1fr"
} }
}); });
@ -70,7 +70,7 @@ const CustomerDetails = withStyles(styles, { name: "CustomerDetails" })(
<> <>
<FormattedMessage {...commonMessages.generalInformations} /> <FormattedMessage {...commonMessages.generalInformations} />
{customer && customer.dateJoined ? ( {customer && customer.dateJoined ? (
<Typography variant="caption"> <Typography variant="caption" component="div">
<FormattedMessage <FormattedMessage
defaultMessage="Customer since: {date}" defaultMessage="Customer since: {date}"
description="section subheader" description="section subheader"

2
src/customers/components/CustomerList/CustomerList.tsx
View file

@ -20,7 +20,7 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import { ListCustomers_customers_edges_node } from "../../types/ListCustomers"; import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
[theme.breakpoints.up("lg")]: { [theme.breakpoints.up("lg")]: {
colEmail: {}, colEmail: {},

4
src/customers/components/CustomerStats/CustomerStats.tsx
View file

@ -17,10 +17,10 @@ import Skeleton from "@saleor/components/Skeleton";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
label: { label: {
marginBottom: theme.spacing.unit marginBottom: theme.spacing(1)
}, },
value: { value: {
fontSize: 24 fontSize: 24

4
src/discounts/components/DiscountCategories/DiscountCategories.tsx
View file

@ -32,13 +32,13 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
onCategoryUnassign: (id: string) => void; onCategoryUnassign: (id: string) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
iconCell: { iconCell: {
"&:last-child": { "&:last-child": {
paddingRight: 0 paddingRight: 0
}, },
width: 48 + theme.spacing.unit / 2 width: 48 + theme.spacing(.5)
}, },
tableRow: { tableRow: {
cursor: "pointer" cursor: "pointer"

4
src/discounts/components/DiscountCollections/DiscountCollections.tsx
View file

@ -32,13 +32,13 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
onCollectionUnassign: (id: string) => void; onCollectionUnassign: (id: string) => void;
} }
const styles = (theme: Theme) => const styles = theme =>
createStyles({ createStyles({
iconCell: { iconCell: {
"&:last-child": { "&:last-child": {
paddingRight: 0 paddingRight: 0
}, },
width: 48 + theme.spacing.unit / 2 width: 48 + theme.spacing(.5)
}, },
tableRow: { tableRow: {
cursor: "pointer" cursor: "pointer"

Some files were not shown because too many files have changed in this diff Show more