Merge pull request #234 from mirumee/ref/update-mui

Update @material-ui to v4

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 sudo: false
 
 node_js:
-  - "11.15"
+  - "12.12"
 
 branches:
   only:

CHANGELOG.md

@@ -55,3 +55,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix minor bugs - #230 by @dominik-zeglen
 - Fix permission handling - #231 by @dominik-zeglen
 - Use React.FC instead of deprecated React.StatelessComponent type - #245 by @dominik-zeglen
+- Update @material-ui to v4 - #234 by @dominik-zeglen

babel.config.js

@@ -1,4 +1,5 @@
 module.exports = api => {
+  const isExtract = api.env("extract");
   const isTest = api.env("test");
   const isStorybook = api.env("storybook");
 
@@ -30,16 +31,20 @@ module.exports = api => {
       }
     ],
     "@babel/plugin-proposal-object-rest-spread",
-    "react-intl-auto",
+    "react-intl-auto"
-    [
+  ];
+
+  if (isExtract) {
+    plugins.push([
       "react-intl",
       {
         extractFromFormatMessageCall: true,
         messagesDir: "build/locale/"
       }
-    ],
+    ]);
-    "macros"
+  }
-  ];
+
+  plugins.push("macros");
 
   return {
     presets,

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-11-06T13:15:56.589Z\n"
+"POT-Creation-Date: 2019-11-07T13:41:50.654Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -28,7 +28,7 @@ msgid "*Optional. Adding product to collection helps users find it."
 msgstr ""
 
 #: build/locale/src/attributes/views/AttributeCreate/AttributeCreate.json
-#. [src.attributes.views.AttributeCreate.2348058468] - attribute value edit error
+#. [src.attributes.views.AttributeCreate.354316953] - attribute value edit error
 #. defaultMessage is:
 #. A value named {name} already exists
 msgctxt "attribute value edit error"
@@ -623,6 +623,14 @@ msgctxt "product attribute error"
 msgid "All attributes should have value"
 msgstr ""
 
+#: build/locale/src/webhooks/components/WebhookEvents/WebhookEvents.json
+#. [src.webhooks.components.WebhookEvents.2454751033] - event
+#. defaultMessage is:
+#. All events
+msgctxt "event"
+msgid "All events"
+msgstr ""
+
 #: build/locale/src/taxes/components/TaxConfiguration/TaxConfiguration.json
 #. [src.taxes.components.TaxConfiguration.142803418]
 #. defaultMessage is:
@@ -663,14 +671,6 @@ msgctxt "description"
 msgid "Anonymous user"
 msgstr ""
 
-#: build/locale/src/webhooks/components/WebhookEvents/WebhookEvents.json
-#. [src.webhooks.components.WebhookEvents.3053363669] - event
-#. defaultMessage is:
-#. Any events
-msgctxt "event"
-msgid "Any events"
-msgstr ""
-
 #: build/locale/src/discounts/components/VoucherSummary/VoucherSummary.json
 #. [src.discounts.components.VoucherSummary.2735425668] - voucher
 #. defaultMessage is:
@@ -728,7 +728,7 @@ msgid "Are you sure you want to cancel this fulfillment?"
 msgstr ""
 
 #: build/locale/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.json
-#. [src.orders.components.OrderBulkCancelDialog.276130122]
+#. [src.orders.components.OrderBulkCancelDialog.3011571869]
 #. defaultMessage is:
 #. Are you sure you want to cancel {counter,plural,one{this order} other{{displayQuantity} orders}}?
 msgctxt "description"
@@ -736,7 +736,7 @@ msgid "Are you sure you want to cancel {counter,plural,one{this order} other{{di
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json
-#. [src.attributes.components.AttributeValueDeleteDialog.273524270] - delete attribute value
+#. [src.attributes.components.AttributeValueDeleteDialog.1326420604] - delete attribute value
 #. defaultMessage is:
 #. Are you sure you want to delete "{name}" value?
 msgctxt "delete attribute value"
@@ -744,7 +744,7 @@ msgid "Are you sure you want to delete \"{name}\" value?"
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json
-#. [src.attributes.components.AttributeValueDeleteDialog.1934550550]
+#. [src.attributes.components.AttributeValueDeleteDialog.4031078167]
 #. defaultMessage is:
 #. Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.
 msgctxt "description"
@@ -760,11 +760,11 @@ msgid "Are you sure you want to delete collection's image?"
 msgstr ""
 
 #: build/locale/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.json
-#. [src.orders.components.OrderDraftCancelDialog.36681973]
+#. [src.orders.components.OrderDraftCancelDialog.66064347]
 #. defaultMessage is:
-#. Are you sure you want to delete draft #{number}?
+#. Are you sure you want to delete draft #{orderNumber}?
 msgctxt "description"
-msgid "Are you sure you want to delete draft #{number}?"
+msgid "Are you sure you want to delete draft #{orderNumber}?"
 msgstr ""
 
 #: build/locale/src/navigation/views/MenuDetails/index.json
@@ -832,7 +832,7 @@ msgid "Are you sure you want to delete {collectionName}?"
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json
-#. [src.attributes.components.AttributeBulkDeleteDialog.2916860383] - dialog content
+#. [src.attributes.components.AttributeBulkDeleteDialog.1860138828] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?
 msgctxt "dialog content"
@@ -840,7 +840,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this attribute} other
 msgstr ""
 
 #: build/locale/src/categories/views/CategoryDetails.json
-#. [src.categories.views.299584400]
+#. [src.categories.views.982216972]
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?
 msgctxt "description"
@@ -848,7 +848,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this attribute} other
 msgstr ""
 
 #: build/locale/src/categories/views/CategoryDetails.json
-#. [src.categories.views.3231188861]
+#. [src.categories.views.3920301974]
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?
 msgctxt "description"
@@ -856,7 +856,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this attribute} other
 msgstr ""
 
 #: build/locale/src/categories/views/CategoryList/CategoryList.json
-#. [src.categories.views.CategoryList.2144707585]
+#. [src.categories.views.CategoryList.1592907702]
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?
 msgctxt "description"
@@ -864,7 +864,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this category} other{
 msgstr ""
 
 #: build/locale/src/collections/views/CollectionList/CollectionList.json
-#. [src.collections.views.CollectionList.2497542455]
+#. [src.collections.views.CollectionList.1421224348]
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this collection} other{{displayQuantity} collections}}?
 msgctxt "description"
@@ -872,7 +872,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this collection} othe
 msgstr ""
 
 #: build/locale/src/customers/views/CustomerList/CustomerList.json
-#. [src.customers.views.CustomerList.409347866]
+#. [src.customers.views.CustomerList.3616300497]
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this customer} other{{displayQuantity} customers}}?
 msgctxt "description"
@@ -888,7 +888,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this menu} other{{dis
 msgstr ""
 
 #: build/locale/src/orders/views/OrderDraftList/OrderDraftList.json
-#. [src.orders.views.OrderDraftList.1389231130] - dialog content
+#. [src.orders.views.OrderDraftList.1398914741] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this order draft} other{{displayQuantity} orderDrafts}}?
 msgctxt "dialog content"
@@ -896,7 +896,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this order draft} oth
 msgstr ""
 
 #: build/locale/src/pages/views/PageList.json
-#. [src.pages.views.3382708469] - dialog content
+#. [src.pages.views.808633099] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?
 msgctxt "dialog content"
@@ -904,7 +904,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this page} other{{dis
 msgstr ""
 
 #: build/locale/src/productTypes/views/ProductTypeList/ProductTypeList.json
-#. [src.productTypes.views.ProductTypeList.2294091098] - dialog content
+#. [src.productTypes.views.ProductTypeList.2787668922] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this product type} other{{displayQuantity} product types}}?
 msgctxt "dialog content"
@@ -912,7 +912,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this product type} ot
 msgstr ""
 
 #: build/locale/src/products/views/ProductList/ProductList.json
-#. [src.products.views.ProductList.2742463171] - dialog content
+#. [src.products.views.ProductList.785143617] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?
 msgctxt "dialog content"
@@ -920,7 +920,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this product} other{{
 msgstr ""
 
 #: build/locale/src/discounts/views/SaleList/SaleList.json
-#. [src.discounts.views.SaleList.2516361175] - dialog content
+#. [src.discounts.views.SaleList.315033130] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this sale} other{{displayQuantity} sales}}?
 msgctxt "dialog content"
@@ -928,7 +928,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this sale} other{{dis
 msgstr ""
 
 #: build/locale/src/shipping/views/ShippingZonesList.json
-#. [src.shipping.views.3698270769] - dialog content
+#. [src.shipping.views.226833304] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this shipping zone} other{{displayQuantity} shipping zones}}?
 msgctxt "dialog content"
@@ -936,7 +936,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this shipping zone} o
 msgstr ""
 
 #: build/locale/src/products/views/ProductUpdate/ProductUpdate.json
-#. [src.products.views.ProductUpdate.2446451819] - dialog content
+#. [src.products.views.ProductUpdate.408018316] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this variant} other{{displayQuantity} variants}}?
 msgctxt "dialog content"
@@ -944,7 +944,7 @@ msgid "Are you sure you want to delete {counter,plural,one{this variant} other{{
 msgstr ""
 
 #: build/locale/src/discounts/views/VoucherList/VoucherList.json
-#. [src.discounts.views.VoucherList.1791926983] - dialog content
+#. [src.discounts.views.VoucherList.3263927472] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to delete {counter,plural,one{this voucher} other{{displayQuantity} vouchers}}?
 msgctxt "dialog content"
@@ -1080,11 +1080,11 @@ msgid "Are you sure you want to delete {voucherCode}?"
 msgstr ""
 
 #: build/locale/src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.json
-#. [src.orders.components.OrderDraftFinalizeDialog.1489195029]
+#. [src.orders.components.OrderDraftFinalizeDialog.3358029330]
 #. defaultMessage is:
-#. Are you sure you want to finalize draft #{number}?
+#. Are you sure you want to finalize draft #{orderNumber}?
 msgctxt "description"
-msgid "Are you sure you want to finalize draft #{number}?"
+msgid "Are you sure you want to finalize draft #{orderNumber}?"
 msgstr ""
 
 #: build/locale/src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.json
@@ -1096,7 +1096,7 @@ msgid "Are you sure you want to mark this order as paid?"
 msgstr ""
 
 #: build/locale/src/collections/views/CollectionList/CollectionList.json
-#. [src.collections.views.CollectionList.1348793822]
+#. [src.collections.views.CollectionList.3216529047]
 #. defaultMessage is:
 #. Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?
 msgctxt "description"
@@ -1104,7 +1104,7 @@ msgid "Are you sure you want to publish {counter,plural,one{this collection} oth
 msgstr ""
 
 #: build/locale/src/pages/views/PageList.json
-#. [src.pages.views.504298570] - dialog content
+#. [src.pages.views.64432778] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?
 msgctxt "dialog content"
@@ -1112,7 +1112,7 @@ msgid "Are you sure you want to publish {counter,plural,one{this page} other{{di
 msgstr ""
 
 #: build/locale/src/products/views/ProductList/ProductList.json
-#. [src.products.views.ProductList.740606822] - dialog content
+#. [src.products.views.ProductList.4099592898] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to publish {counter,plural,one{this product} other{{displayQuantity} products}}?
 msgctxt "dialog content"
@@ -1136,19 +1136,19 @@ msgid "Are you sure you want to unassign {attributeName} from {productTypeName}?
 msgstr ""
 
 #: build/locale/src/productTypes/components/ProductTypeBulkAttributeUnassignDialog/ProductTypeBulkAttributeUnassignDialog.json
-#. [src.productTypes.components.ProductTypeBulkAttributeUnassignDialog.2500510112] - unassign multiple attributes from product type
+#. [src.productTypes.components.ProductTypeBulkAttributeUnassignDialog.1465383223] - unassign multiple attributes from product type
 #. defaultMessage is:
-#. Are you sure you want to unassign {counter,plural,one{this attribute} other{{displayQuantity} attributes}} from {productTypeName}?
+#. Are you sure you want to unassign {counter,plural,one{this attribute} other{{attributeQuantity} attributes}} from {productTypeName}?
 msgctxt "unassign multiple attributes from product type"
-msgid "Are you sure you want to unassign {counter,plural,one{this attribute} other{{displayQuantity} attributes}} from {productTypeName}?"
+msgid "Are you sure you want to unassign {counter,plural,one{this attribute} other{{attributeQuantity} attributes}} from {productTypeName}?"
 msgstr ""
 
 #: build/locale/src/discounts/views/SaleDetails.json
-#. [src.discounts.views.376977560] - dialog content
+#. [src.discounts.views.1169376180] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this category} other{{displayQuantity} categories}}?
 #: build/locale/src/discounts/views/VoucherDetails.json
-#. [src.discounts.views.376977560] - dialog content
+#. [src.discounts.views.1169376180] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this category} other{{displayQuantity} categories}}?
 msgctxt "dialog content"
@@ -1156,11 +1156,11 @@ msgid "Are you sure you want to unassign {counter,plural,one{this category} othe
 msgstr ""
 
 #: build/locale/src/discounts/views/SaleDetails.json
-#. [src.discounts.views.396618268] - dialog content
+#. [src.discounts.views.3809911073] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this collection} other{{displayQuantity} collections}}?
 #: build/locale/src/discounts/views/VoucherDetails.json
-#. [src.discounts.views.396618268] - dialog content
+#. [src.discounts.views.3809911073] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this collection} other{{displayQuantity} collections}}?
 msgctxt "dialog content"
@@ -1168,7 +1168,7 @@ msgid "Are you sure you want to unassign {counter,plural,one{this collection} ot
 msgstr ""
 
 #: build/locale/src/collections/views/CollectionDetails.json
-#. [src.collections.views.1908998638]
+#. [src.collections.views.735691989]
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this product} other{{displayQuantity} products}}?
 msgctxt "description"
@@ -1176,11 +1176,11 @@ msgid "Are you sure you want to unassign {counter,plural,one{this product} other
 msgstr ""
 
 #: build/locale/src/discounts/views/SaleDetails.json
-#. [src.discounts.views.786949385] - dialog content
+#. [src.discounts.views.735691989] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this product} other{{displayQuantity} products}}?
 #: build/locale/src/discounts/views/VoucherDetails.json
-#. [src.discounts.views.786949385] - dialog content
+#. [src.discounts.views.735691989] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unassign {counter,plural,one{this product} other{{displayQuantity} products}}?
 msgctxt "dialog content"
@@ -1188,7 +1188,7 @@ msgid "Are you sure you want to unassign {counter,plural,one{this product} other
 msgstr ""
 
 #: build/locale/src/collections/views/CollectionList/CollectionList.json
-#. [src.collections.views.CollectionList.3944356444]
+#. [src.collections.views.CollectionList.3449136787]
 #. defaultMessage is:
 #. Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?
 msgctxt "description"
@@ -1196,7 +1196,7 @@ msgid "Are you sure you want to unpublish {counter,plural,one{this collection} o
 msgstr ""
 
 #: build/locale/src/pages/views/PageList.json
-#. [src.pages.views.691980200] - dialog content
+#. [src.pages.views.1265636351] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?
 msgctxt "dialog content"
@@ -1204,7 +1204,7 @@ msgid "Are you sure you want to unpublish {counter,plural,one{this page} other{{
 msgstr ""
 
 #: build/locale/src/products/views/ProductList/ProductList.json
-#. [src.products.views.ProductList.193914731] - dialog content
+#. [src.products.views.ProductList.1752069132] - dialog content
 #. defaultMessage is:
 #. Are you sure you want to unpublish {counter,plural,one{this product} other{{displayQuantity} products}}?
 msgctxt "dialog content"
@@ -1484,7 +1484,7 @@ msgid "Authentication Type"
 msgstr ""
 
 #: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
-#. [src.siteSettings.components.SiteSettingsPage.3619898341]
+#. [src.siteSettings.components.SiteSettingsPage.1214877701]
 #. defaultMessage is:
 #. Authentication method defines additional ways that customers can log in to your ecommerce.
 msgctxt "description"
@@ -5507,6 +5507,14 @@ msgctxt "description"
 msgid "Order draft succesfully created"
 msgstr ""
 
+#: build/locale/src/webhooks/components/WebhookEvents/WebhookEvents.json
+#. [src.webhooks.components.WebhookEvents.3907151399] - event
+#. defaultMessage is:
+#. Order fulfilled
+msgctxt "event"
+msgid "Order fulfilled"
+msgstr ""
+
 #: build/locale/src/webhooks/components/WebhookEvents/WebhookEvents.json
 #. [src.webhooks.components.WebhookEvents.3345061702] - event
 #. defaultMessage is:
@@ -8436,11 +8444,11 @@ msgid "Translation"
 msgstr ""
 
 #: build/locale/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.json
-#. [src.translations.components.TranslationsCategoriesPage.2043581404]
+#. [src.translations.components.TranslationsCategoriesPage.1611537010]
 #. defaultMessage is:
-#. Translation Category "{categoryNane}" - {languageCode}
+#. Translation Category "{categoryName}" - {languageCode}
 msgctxt "description"
-msgid "Translation Category \"{categoryNane}\" - {languageCode}"
+msgid "Translation Category \"{categoryName}\" - {languageCode}"
 msgstr ""
 
 #: build/locale/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.json
@@ -9598,33 +9606,45 @@ msgstr ""
 #: build/locale/src/home/components/HomeProductListCard/HomeProductListCard.json
 #. [homeProductListCardOrders] - number of ordered products
 #. defaultMessage is:
-#. {amount,plural,one{One ordered} other{{amount} Ordered}}
+#. {amount, plural,
+#.                               one {One ordered}
+#.                               other {{amount} Ordered}
+#.                             }
 msgctxt "number of ordered products"
-msgid "{amount,plural,one{One ordered} other{{amount} Ordered}}"
+msgid "{amount, plural,\n                              one {One ordered}\n                              other {{amount} Ordered}\n                            }"
 msgstr ""
 
 #: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
 #. [homeNotificationTableOrders]
 #. defaultMessage is:
-#. {amount,plural,one{One order} other{{amount} Orders}} are ready to fulfill
+#. {amount, plural,
+#.                   one {One order}
+#.                   other {{amount} Orders}
+#.                 } are ready to fulfill
 msgctxt "description"
-msgid "{amount,plural,one{One order} other{{amount} Orders}} are ready to fulfill"
+msgid "{amount, plural,\n                  one {One order}\n                  other {{amount} Orders}\n                } are ready to fulfill"
 msgstr ""
 
 #: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
 #. [homeNotificationTablePayments]
 #. defaultMessage is:
-#. {amount,plural,one{One payment} other{{amount} Payments}} to capture
+#. {amount, plural,
+#.                   one {One payment}
+#.                   other {{amount} Payments}
+#.                 } to capture
 msgctxt "description"
-msgid "{amount,plural,one{One payment} other{{amount} Payments}} to capture"
+msgid "{amount, plural,\n                  one {One payment}\n                  other {{amount} Payments}\n                } to capture"
 msgstr ""
 
 #: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
 #. [homeNotificationTableProducts]
 #. defaultMessage is:
-#. {amount,plural,one{One product} other{{amount} Products}} out of stock
+#. {amount, plural,
+#.                   one {One product}
+#.                   other {{amount} Products}
+#.                 } out of stock
 msgctxt "description"
-msgid "{amount,plural,one{One product} other{{amount} Products}} out of stock"
+msgid "{amount, plural,\n                  one {One product}\n                  other {{amount} Products}\n                } out of stock"
 msgstr ""
 
 #: build/locale/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.json

package.json

@@ -13,13 +13,13 @@
   },
   "homepage": "http://getsaleor.com/",
   "engines": {
-    "node": ">=10.6.0",
+    "node": ">=12.12.0",
-    "npm": ">=6.1.0"
+    "npm": ">=6.11.0"
   },
   "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",
+    "@material-ui/styles": "^4.5.2",
     "apollo": "^2.17.2",
     "apollo-cache-inmemory": "^1.6.2",
     "apollo-client": "^2.6.4",
@@ -45,7 +45,7 @@
     "lodash": "^4.17.14",
     "lodash-es": "^4.17.14",
     "moment-timezone": "^0.5.26",
-    "qs": "^6.7.0",
+    "qs": "^6.9.0",
     "react": "^16.9.0",
     "react-apollo": "^3.0.0",
     "react-dom": "^16.9.0",
@@ -63,7 +63,7 @@
     "react-sortable-tree": "^2.6.2",
     "react-svg": "^2.2.11",
     "slugify": "^1.3.4",
-    "typescript": "^3.5.3",
+    "typescript": "^3.6.4",
     "url-join": "^4.0.1",
     "use-react-router": "^1.0.7"
   },
@@ -108,6 +108,7 @@
     "babel-plugin-react-intl-auto": "^2.3.0",
     "codecov": "^3.5.0",
     "core-js": "^3.2.1",
+    "cross-env": "^6.0.3",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
@@ -174,7 +175,7 @@
   },
   "scripts": {
     "build": "webpack -p",
-    "extract-json-messages": "rimraf build/locale && babel src 'src/**/*.{ts,tsx}' -o build/dashboard.bundle.js",
+    "extract-json-messages": "rimraf build/locale && cross-env NODE_ENV=extract babel src 'src/**/*.{ts,tsx}' -o build/dashboard.bundle.js",
     "extract-pot-messages": "rip json2pot \"build/locale/**/*.json\" -c description -o locale/messages.pot",
     "extract-messages": "npm run extract-json-messages && npm run extract-pot-messages",
     "build-messages": "rip po2json 'locale/**/*.po' -m 'build/locale/**/*.json' -o 'locale' -c 'description'",

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -36,10 +36,7 @@ const AttributeBulkDeleteDialog: React.FC<AttributeBulkDeleteDialogProps> = ({
     >
       <DialogContentText>
         <FormattedMessage
-          defaultMessage="Are you sure you want to delete {counter, plural,
+          defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?"
-            one {this attribute}
-            other {{displayQuantity} attributes}
-          }?"
           description="dialog content"
           values={{
             counter: quantity,

src/attributes/components/AttributeBulkDeleteDialog/index.ts

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

src/attributes/components/AttributeDeleteDialog/index.ts

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

src/attributes/components/AttributeDetails/index.ts

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

src/attributes/components/AttributeList/AttributeList.tsx

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

src/attributes/components/AttributeList/index.ts

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

src/attributes/components/AttributeListPage/index.ts

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

src/attributes/components/AttributePage/index.ts

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

src/attributes/components/AttributeProperties/index.ts

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

src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx

@@ -41,7 +41,7 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
       <DialogContentText>
         {useName ? (
           <FormattedMessage
-            defaultMessage='Are you sure you want to delete "{ name }" value? If you delete it you won’t be able to assign it to any of the products with "{ attributeName }" attribute.'
+            defaultMessage='Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.'
             values={{
               attributeName,
               name
@@ -49,7 +49,7 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
           />
         ) : (
           <FormattedMessage
-            defaultMessage='Are you sure you want to delete "{ name }" value?'
+            defaultMessage='Are you sure you want to delete "{name}" value?'
             description="delete attribute value"
             values={{
               name

src/attributes/components/AttributeValueDeleteDialog/index.ts

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

src/attributes/components/AttributeValueEditDialog/index.ts

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

src/attributes/components/AttributeValues/AttributeValues.tsx

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

src/attributes/components/AttributeValues/index.ts

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

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -91,7 +91,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
           field: "name",
           message: intl.formatMessage(
             {
-              defaultMessage: "A value named { name } already exists",
+              defaultMessage: "A value named {name} already exists",
               description: "attribute value edit error"
             },
             {
@@ -112,7 +112,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
           field: "name",
           message: intl.formatMessage(
             {
-              defaultMessage: "A value named { name } already exists",
+              defaultMessage: "A value named {name} already exists",
               description: "attribute value edit error"
             },
             {

src/attributes/views/AttributeList/filters.ts

@@ -13,11 +13,11 @@ export const PRODUCT_FILTERS_KEY = "productFilters";
 
 export function getFilterVariables(
   params: AttributeListUrlFilters
-  ): AttributeFilterInput {
+): AttributeFilterInput {
   return {
     search: params.query
   };
-  }
+}
 
 export const {
   deleteFilterTab,

src/auth/components/Layout.tsx

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

src/auth/components/LoginLoading/LoginLoading.tsx

@@ -1,21 +1,26 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const styles = createStyles({
+const useStyles = makeStyles(
+  {
     root: {
       alignItems: "center",
       display: "flex",
       height: "100vh",
       justifyContent: "center"
     }
-});
+  },
-const LoginLoading = withStyles(styles, { name: "LoginLoading" })(
+  { name: "LoginLoading" }
-  ({ classes }: WithStyles<typeof styles>) => (
+);
+const LoginLoading: React.FC = props => {
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <CircularProgress size={128} />
     </div>
-  )
+  );
-);
+};
 LoginLoading.displayName = "LoginLoading";
 export default LoginLoading;

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,10 +1,5 @@
 import Button from "@material-ui/core/Button";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
@@ -19,8 +14,8 @@ export interface FormData {
   password: string;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     buttonContainer: {
       display: "flex",
       justifyContent: "flex-end"
@@ -38,27 +33,25 @@ const styles = (theme: Theme) =>
         color: theme.palette.error.contrastText
       },
       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)
     }
-  });
+  }),
+  { name: "LoginCard" }
+);
 
-export interface LoginCardProps extends WithStyles<typeof styles> {
+export interface LoginCardProps {
   error: boolean;
   disableLoginButton: boolean;
   onPasswordRecovery: () => void;
   onSubmit?(event: FormData);
 }
 
-const LoginCard = withStyles(styles, { name: "LoginCard" })(
+const LoginCard: React.FC<LoginCardProps> = props => {
-  ({
+  const { error, disableLoginButton, onPasswordRecovery, onSubmit } = props;
-    classes,
+
-    error,
+  const classes = useStyles(props);
-    disableLoginButton,
-    onPasswordRecovery,
-    onSubmit
-  }: LoginCardProps) => {
   const intl = useIntl();
 
   return (
@@ -124,7 +117,6 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
       )}
     </Form>
   );
-  }
+};
-);
 LoginCard.displayName = "LoginCard";
 export default LoginCard;

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

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

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,8 +1,7 @@
 import Button from "@material-ui/core/Button";
-import { Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/styles";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -11,15 +10,15 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import { commonMessages } from "@saleor/intl";
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  theme => ({
-    panel: {
+    errorText: {
-      "& span": {
       color: theme.palette.error.contrastText
     },
+    panel: {
       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: {
       width: "100%"
@@ -51,7 +50,9 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
         <>
           {!!error && (
             <div className={classes.panel}>
-              <Typography variant="caption">{error}</Typography>
+              <Typography variant="caption" className={classes.errorText}>
+                {error}
+              </Typography>
             </div>
           )}
           <Typography>

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

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

src/auth/misc.ts

@@ -1,4 +1,4 @@
-import { PermissionEnum } from '../types/globalTypes'
+import { PermissionEnum } from "../types/globalTypes";
 import { User } from "./types/User";
 
 export const hasPermission = (permission: PermissionEnum, user: User) =>

src/categories/components/CategoryBackground/CategoryBackground.tsx

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

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -4,19 +4,14 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { buttonMessages } from "@saleor/intl";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     deleteButton: {
       "&:hover": {
         backgroundColor: theme.palette.error.main
@@ -24,18 +19,25 @@ const styles = (theme: Theme) =>
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     }
-  });
+  }),
+  {
+    name: "CategoryDeleteDialog"
+  }
+);
 
-export interface CategoryDeleteDialogProps extends WithStyles<typeof styles> {
+export interface CategoryDeleteDialogProps {
   open: boolean;
   name: string;
   onClose();
   onConfirm();
 }
 
-const CategoryDeleteDialog = withStyles(styles, {
+const CategoryDeleteDialog: React.FC<CategoryDeleteDialogProps> = props => {
-  name: "CategoryDeleteDialog"
+  const { name, open, onConfirm, onClose } = props;
-})(({ classes, name, open, onConfirm, onClose }: CategoryDeleteDialogProps) => (
+
+  const classes = useStyles(props);
+
+  return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
         <FormattedMessage
@@ -67,6 +69,8 @@ const CategoryDeleteDialog = withStyles(styles, {
         </Button>
       </DialogActions>
     </Dialog>
-));
+  );
+};
+
 CategoryDeleteDialog.displayName = "CategoryDeleteDialog";
 export default CategoryDeleteDialog;

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -20,8 +15,8 @@ import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colName: {
         width: 840
@@ -45,7 +40,9 @@ const styles = (theme: Theme) =>
     tableRow: {
       cursor: "pointer"
     }
-  });
+  }),
+  { name: "CategoryList" }
+);
 
 interface CategoryListProps extends ListProps, ListActions {
   categories?: CategoryFragment[];
@@ -55,10 +52,9 @@ interface CategoryListProps extends ListProps, ListActions {
 
 const numberOfColumns = 4;
 
-const CategoryList = withStyles(styles, { name: "CategoryList" })(
+const CategoryList: React.FC<CategoryListProps> = props => {
-  ({
+  const {
     categories,
-    classes,
     disabled,
     settings,
     pageInfo,
@@ -72,7 +68,11 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
     onPreviousPage,
     onUpdateListSettings,
     onRowClick
-  }: CategoryListProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Table>
       <TableHead
         colSpan={numberOfColumns}
@@ -175,7 +175,8 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
         )}
       </TableBody>
     </Table>
-  )
+  );
-);
+};
+
 CategoryList.displayName = "CategoryList";
 export default CategoryList;

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -25,8 +20,8 @@ import { ListActions, ListProps } from "@saleor/types";
 import React from "react";
 import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colName: {
         width: "auto"
@@ -69,20 +64,20 @@ const styles = (theme: Theme) =>
     textRight: {
       textAlign: "right"
     }
-  });
+  }),
+  {
+    name: "CategoryProductList"
+  }
+);
 
-interface CategoryProductListProps
+interface CategoryProductListProps extends ListProps, ListActions {
-  extends ListProps,
-    ListActions,
-    WithStyles<typeof styles> {
   products: CategoryDetails_category_products_edges_node[];
 }
 
-export const CategoryProductList = withStyles(styles, {
+export const CategoryProductList: React.FC<
-  name: "CategoryProductList"
+  CategoryProductListProps
-})(
+> = props => {
-  ({
+  const {
-    classes,
     disabled,
     isChecked,
     pageInfo,
@@ -94,7 +89,9 @@ export const CategoryProductList = withStyles(styles, {
     onNextPage,
     onPreviousPage,
     onRowClick
-  }: CategoryProductListProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   const numberOfColumns = 5;
@@ -145,9 +142,7 @@ export const CategoryProductList = withStyles(styles, {
           <TableRow>
             <TablePagination
               colSpan={numberOfColumns}
-                hasNextPage={
+              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-                  pageInfo && !disabled ? pageInfo.hasNextPage : false
-                }
               onNextPage={onNextPage}
               hasPreviousPage={
                 pageInfo && !disabled ? pageInfo.hasPreviousPage : false
@@ -237,7 +232,7 @@ export const CategoryProductList = withStyles(styles, {
       </Table>
     </div>
   );
-  }
+};
-);
+
 CategoryProductList.displayName = "CategoryProductList";
 export default CategoryProductList;

src/categories/views/CategoryDetails.tsx

@@ -369,10 +369,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                                   >
                                     <DialogContentText>
                                       <FormattedMessage
-                                        defaultMessage="Are you sure you want to delete {counter, plural,
+                                        defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?"
-                                          one {this attribute}
-                                          other {{displayQuantity} categories}
-                                        }?"
                                         values={{
                                           counter: maybe(
                                             () => params.ids.length
@@ -409,10 +406,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                                     {" "}
                                     <DialogContentText>
                                       <FormattedMessage
-                                        defaultMessage="Are you sure you want to delete {counter, plural,
+                                        defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?"
-                                          one {this attribute}
-                                          other {{displayQuantity} products}
-                                        }?"
                                         values={{
                                           counter: maybe(
                                             () => params.ids.length

src/categories/views/CategoryList/CategoryList.tsx

@@ -222,10 +222,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
                   >
                     <DialogContentText>
                       <FormattedMessage
-                        defaultMessage="Are you sure you want to delete {counter, plural,
+                        defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
-                        one {this category}
-                        other {{displayQuantity} categories}
-                      }?"
                         values={{
                           counter: maybe(() => params.ids.length),
                           displayQuantity: (

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -19,15 +14,15 @@ import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
 import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     PhotosIcon: {
       height: "64px",
       margin: "0 auto",
       width: "64px"
     },
     PhotosIconContainer: {
-      margin: `${theme.spacing.unit * 5}px 0`,
+      margin: theme.spacing(5, 0),
       textAlign: "center"
     },
     fileField: {
@@ -42,15 +37,19 @@ const styles = (theme: Theme) =>
     imageContainer: {
       background: "#ffffff",
       border: "1px solid #eaeaea",
-      borderRadius: theme.spacing.unit,
+      borderRadius: theme.spacing(),
       height: 148,
       justifySelf: "start",
       overflow: "hidden",
-      padding: theme.spacing.unit * 2,
+      padding: theme.spacing(2),
       position: "relative",
       width: 148
     }
-  });
+  }),
+  {
+    name: "CollectionImage"
+  }
+);
 
 export interface CollectionImageProps {
   data: {
@@ -62,16 +61,11 @@ export interface CollectionImageProps {
   onImageUpload: (file: File) => void;
 }
 
-export const CollectionImage = withStyles(styles)(
+export const CollectionImage: React.FC<CollectionImageProps> = props => {
-  ({
+  const { data, onImageUpload, image, onChange, onImageDelete } = props;
-    classes,
+
-    data,
-    onImageUpload,
-    image,
-    onChange,
-    onImageDelete
-  }: CollectionImageProps & WithStyles<typeof styles>) => {
   const anchor = React.useRef<HTMLInputElement>();
+  const classes = useStyles(props);
   const intl = useIntl();
 
   const handleImageUploadButtonClick = () => anchor.current.click();
@@ -138,7 +132,7 @@ export const CollectionImage = withStyles(styles)(
       )}
     </Card>
   );
-  }
+};
-);
+
 CollectionImage.displayName = "CollectionImage";
 export default CollectionImage;

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -21,8 +16,8 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colAvailability: {
         width: 240
@@ -42,20 +37,18 @@ const styles = (theme: Theme) =>
     tableRow: {
       cursor: "pointer" as "pointer"
     }
-  });
+  }),
+  { name: "CollectionList" }
+);
 
-interface CollectionListProps
+interface CollectionListProps extends ListProps, ListActions {
-  extends ListProps,
-    ListActions,
-    WithStyles<typeof styles> {
   collections: CollectionList_collections_edges_node[];
 }
 
 const numberOfColumns = 5;
 
-const CollectionList = withStyles(styles, { name: "CollectionList" })(
+const CollectionList: React.FC<CollectionListProps> = props => {
-  ({
+  const {
-    classes,
     collections,
     disabled,
     settings,
@@ -69,7 +62,9 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
     toggle,
     toggleAll,
     toolbar
-  }: CollectionListProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -134,10 +129,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                   />
                 </TableCell>
                 <TableCell className={classes.colName} data-tc="name">
-                    {maybe<React.ReactNode>(
+                  {maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
-                      () => collection.name,
-                      <Skeleton />
-                    )}
                 </TableCell>
                 <TableCell className={classes.colProducts}>
                   {maybe<React.ReactNode>(
@@ -184,7 +176,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
       </TableBody>
     </Table>
   );
-  }
+};
-);
+
 CollectionList.displayName = "CollectionList";
 export default CollectionList;

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -1,12 +1,7 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -29,13 +24,13 @@ import { maybe, renderCollection } from "../../../misc";
 import { ListActions, PageListProps } from "../../../types";
 import { CollectionDetails_collection } from "../../types/CollectionDetails";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     colActions: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 76 + theme.spacing.unit / 2
+      width: 76 + theme.spacing(0.5)
     },
     colName: {
       paddingLeft: 0,
@@ -56,21 +51,19 @@ const styles = (theme: Theme) =>
     tableRow: {
       cursor: "pointer"
     }
-  });
+  }),
+  { name: "CollectionProducts" }
+);
 
-export interface CollectionProductsProps
+export interface CollectionProductsProps extends PageListProps, ListActions {
-  extends PageListProps,
-    ListActions,
-    WithStyles<typeof styles> {
   collection: CollectionDetails_collection;
   onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
 }
 
 const numberOfColumns = 5;
 
-const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
+const CollectionProducts: React.FC<CollectionProductsProps> = props => {
-  ({
+  const {
-    classes,
     collection,
     disabled,
     onAdd,
@@ -84,7 +77,9 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
     toggle,
     toggleAll,
     toolbar
-  }: CollectionProductsProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -124,9 +119,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-            items={maybe(() =>
+          items={maybe(() => collection.products.edges.map(edge => edge.node))}
-              collection.products.edges.map(edge => edge.node)
-            )}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -242,7 +235,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
       </Table>
     </Card>
   );
-  }
+};
-);
+
 CollectionProducts.displayName = "CollectionProducts";
 export default CollectionProducts;

src/collections/views/CollectionDetails.tsx

@@ -231,7 +231,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                     onAdd={() => openModal("assign")}
                     onBack={() => navigate(collectionListUrl())}
                     disabled={loading}
-                    collection={data.collection}
+                    collection={maybe(() => data.collection)}
                     isFeatured={maybe(
                       () =>
                         data.shop.homepageCollection.id === data.collection.id,
@@ -349,10 +349,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                   >
                     <DialogContentText>
                       <FormattedMessage
-                        defaultMessage="Are you sure you want to unassign {counter, plural,
+                        defaultMessage="Are you sure you want to unassign {counter,plural,one{this product} other{{displayQuantity} products}}?"
-                          one {this product}
-                          other {{displayQuantity} products}
-                        }?"
                         values={{
                           counter: maybe(() => params.ids.length),
                           displayQuantity: (

src/collections/views/CollectionList/CollectionList.tsx

@@ -268,10 +268,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                       >
                         <DialogContentText>
                           <FormattedMessage
-                            defaultMessage="Are you sure you want to publish {counter, plural,
+                            defaultMessage="Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
-                              one {this collection}
-                              other {{displayQuantity} collections}
-                            }?"
                             values={{
                               counter: maybe(() => params.ids.length),
                               displayQuantity: (
@@ -306,10 +303,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                       >
                         <DialogContentText>
                           <FormattedMessage
-                            defaultMessage="Are you sure you want to unpublish {counter, plural,
+                            defaultMessage="Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
-                              one {this collection}
-                              other {{displayQuantity} collections}
-                            }?"
                             values={{
                               counter: maybe(() => params.ids.length),
                               displayQuantity: (
@@ -343,10 +337,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                       >
                         <DialogContentText>
                           <FormattedMessage
-                            defaultMessage="Are you sure you want to delete {counter, plural,
+                            defaultMessage="Are you sure you want to delete {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
-                              one {this collection}
-                              other {{displayQuantity} collections}
-                            }?"
                             values={{
                               counter: maybe(() => params.ids.length),
                               displayQuantity: (

src/components/AccountPermissions/AccountPermissions.tsx

@@ -1,11 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -15,21 +10,23 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import Skeleton from "@saleor/components/Skeleton";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     checkboxContainer: {
-      marginTop: theme.spacing.unit
+      marginTop: theme.spacing()
     },
     hr: {
-      backgroundColor: theme.overrides.MuiCard.root.borderColor,
+      backgroundColor: theme.palette.divider,
       border: "none",
       height: 1,
       marginBottom: 0,
       marginTop: 0
     }
-  });
+  }),
+  { name: "AccountPermissions" }
+);
 
-interface AccountPermissionsProps extends WithStyles<typeof styles> {
+interface AccountPermissionsProps {
   permissions: ShopInfo_shop_permissions[];
   data: {
     hasFullAccess: boolean;
@@ -39,14 +36,10 @@ interface AccountPermissionsProps extends WithStyles<typeof styles> {
   onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
 }
 
-const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
+const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
-  ({
+  const { data, disabled, permissions, onChange } = props;
-    classes,
+
-    data,
+  const classes = useStyles(props);
-    disabled,
-    permissions,
-    onChange
-  }: AccountPermissionsProps) => {
   const intl = useIntl();
 
   const handleFullAccessChange = (event: React.ChangeEvent<any>) =>
@@ -121,7 +114,7 @@ const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
       )}
     </Card>
   );
-  }
+};
-);
+
 AccountPermissions.displayName = "AccountPermissions";
 export default AccountPermissions;

src/components/ActionDialog/ActionDialog.tsx

@@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -18,8 +13,8 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "../ConfirmButton/ConfirmButton";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     deleteButton: {
       "&:hover": {
         backgroundColor: theme.palette.error.main
@@ -27,12 +22,15 @@ const styles = (theme: Theme) =>
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     }
-  });
+  }),
+  { name: "ActionDialog" }
+);
 
-interface ActionDialogProps extends WithStyles<typeof styles> {
+interface ActionDialogProps {
   children?: React.ReactNode;
   confirmButtonLabel?: string;
   confirmButtonState: ConfirmButtonTransitionState;
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
   open: boolean;
   title: string;
   variant?: "default" | "delete";
@@ -40,22 +38,24 @@ interface ActionDialogProps extends WithStyles<typeof styles> {
   onConfirm();
 }
 
-const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
+const ActionDialog: React.FC<ActionDialogProps> = props => {
-  ({
+  const {
     children,
-    classes,
     confirmButtonLabel,
     confirmButtonState,
     open,
     title,
     variant,
     onConfirm,
-    onClose
+    onClose,
-  }: ActionDialogProps) => {
+    ...rest
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
-      <Dialog onClose={onClose} open={open}>
+    <Dialog fullWidth onClose={onClose} open={open} {...rest}>
       <DialogTitle>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions>
@@ -79,7 +79,11 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
       </DialogActions>
     </Dialog>
   );
-  }
+};
-);
+
+ActionDialog.defaultProps = {
+  maxWidth: "xs",
+  variant: "default"
+};
 ActionDialog.displayName = "ActionDialog";
 export default ActionDialog;

src/components/AddressEdit/AddressEdit.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -16,16 +11,15 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "../SingleAutocompleteSelectField";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   root: {
     display: "grid",
-      gridColumnGap: `${theme.spacing.unit * 2}px`,
+    gridColumnGap: theme.spacing(2),
     gridTemplateColumns: "1fr 1fr"
   }
-  });
+}));
 
-interface AddressEditProps extends WithStyles<typeof styles> {
+interface AddressEditProps {
   countries: SingleAutocompleteChoiceType[];
   countryDisplayValue: string;
   data: AddressTypeInput;
@@ -35,9 +29,8 @@ interface AddressEditProps extends WithStyles<typeof styles> {
   onCountryChange(event: React.ChangeEvent<any>);
 }
 
-const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
+const AddressEdit: React.FC<AddressEditProps> = props => {
-  ({
+  const {
-    classes,
     countries,
     countryDisplayValue,
     data,
@@ -45,7 +38,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
     errors,
     onChange,
     onCountryChange
-  }: AddressEditProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
 
   return (
@@ -202,7 +197,6 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
       </div>
     </>
   );
-  }
+};
-);
 AddressEdit.displayName = "AddressEdit";
 export default AddressEdit;

src/components/AddressFormatter/AddressFormatter.tsx

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

src/components/AppHeader/AppHeader.tsx

@@ -1,10 +1,5 @@
 import Portal from "@material-ui/core/Portal";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import React from "react";
@@ -16,45 +11,44 @@ export interface AppHeaderProps {
   onBack();
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   backArrow: {
     fontSize: 30
   },
   menuButton: {
     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: {
     "&:hover": {
-        color: theme.typography.body2.color
+      color: theme.typography.body1.color
     },
     alignItems: "center",
     color: theme.palette.grey[500],
     cursor: "pointer",
     display: "flex",
-      marginTop: theme.spacing.unit / 2,
+    marginTop: theme.spacing(0.5),
     transition: theme.transitions.duration.standard + "ms"
   },
   skeleton: {
-      marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
     width: "10rem"
   },
   title: {
     color: "inherit",
     flex: 1,
-      marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(),
     textTransform: "uppercase"
   }
-  });
+}));
-const AppHeader = withStyles(styles, { name: "AppHeader" })(
+const AppHeader: React.FC<AppHeaderProps> = props => {
-  ({
+  const { children, onBack } = props;
-    children,
+
-    classes,
+  const classes = useStyles(props);
-    onBack
+
-  }: AppHeaderProps & WithStyles<typeof styles>) => (
+  return (
     <AppHeaderContext.Consumer>
       {anchor =>
         anchor ? (
@@ -71,7 +65,7 @@ const AppHeader = withStyles(styles, { name: "AppHeader" })(
         ) : null
       }
     </AppHeaderContext.Consumer>
-  )
+  );
-);
+};
 AppHeader.displayName = "AppHeader";
 export default AppHeader;

src/components/AppHeader/index.ts

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

src/components/AppLayout/AppLayout.tsx

@@ -8,12 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/MenuList";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -41,8 +36,8 @@ import createMenuStructure from "./menuStructure";
 import ResponsiveDrawer from "./ResponsiveDrawer";
 import ThemeSwitch from "./ThemeSwitch";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     appAction: {
       [theme.breakpoints.down("sm")]: {
         left: 0,
@@ -56,15 +51,15 @@ const styles = (theme: Theme) =>
     },
     appLoader: {
       height: appLoaderHeight,
-      marginBottom: theme.spacing.unit * 2,
+      marginBottom: theme.spacing(2),
       zIndex: 1201
     },
     appLoaderPlaceholder: {
       height: appLoaderHeight,
-      marginBottom: theme.spacing.unit * 2
+      marginBottom: theme.spacing(2)
     },
     arrow: {
-      marginLeft: theme.spacing.unit * 2,
+      marginLeft: theme.spacing(2),
       transition: theme.transitions.duration.standard + "ms"
     },
     content: {
@@ -82,12 +77,12 @@ const styles = (theme: Theme) =>
       paddingLeft: drawerWidth
     },
     darkThemeSwitch: {
-      marginRight: theme.spacing.unit * 2
+      marginRight: theme.spacing(2)
     },
     header: {
       display: "flex",
       height: 40,
-      marginBottom: theme.spacing.unit * 3
+      marginBottom: theme.spacing(3)
     },
     isMenuSmall: {
       "& path": {
@@ -186,8 +181,8 @@ const styles = (theme: Theme) =>
       borderRadius: "50%",
       cursor: "pointer",
       height: 42,
-      left: theme.spacing.unit,
+      left: theme.spacing(),
-      marginRight: theme.spacing.unit * 2,
+      marginRight: theme.spacing(2),
       position: "relative",
       transform: "rotate(0deg)",
       transition: `${theme.transitions.duration.shorter}ms ease-in-out`,
@@ -236,7 +231,7 @@ const styles = (theme: Theme) =>
         padding: 0
       },
       background: theme.palette.background.paper,
-      padding: `0 ${theme.spacing.unit * 4}px`
+      padding: `0 ${theme.spacing(4)}px`
     },
     spacer: {
       flex: 1
@@ -260,33 +255,27 @@ const styles = (theme: Theme) =>
       flex: 1,
       flexGrow: 1,
       marginLeft: 0,
-      paddingBottom: theme.spacing.unit,
+      paddingBottom: theme.spacing(),
       [theme.breakpoints.up("sm")]: {
-        paddingBottom: theme.spacing.unit * 3
+        paddingBottom: theme.spacing(3)
       }
     },
     viewContainer: {
-      minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
+      minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)`
-        appLoaderHeight +
-        70}px)`
     }
-  });
+  }),
+  {
+    name: "AppLayout"
+  }
+);
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const AppLayout = withStyles(styles, {
+const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
-  name: "AppLayout"
+  ({ children, location }: AppLayoutProps & RouteComponentProps<any>) => {
-})(
+    const classes = useStyles({});
-  withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
-    ({
-      classes,
-      children,
-      location
-    }: AppLayoutProps &
-      WithStyles<typeof styles> &
-      RouteComponentProps<any>) => {
     const { isDark, toggleTheme } = useTheme();
     const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false);
     const [isDrawerOpened, setDrawerState] = React.useState(false);
@@ -321,10 +310,7 @@ const AppLayout = withStyles(styles, {
       navigate(staffMemberDetailsUrl(user.id));
     };
 
-      const handleMenuItemClick = (
+    const handleMenuItemClick = (url: string, event: React.MouseEvent<any>) => {
-        url: string,
-        event: React.MouseEvent<any>
-      ) => {
       event.stopPropagation();
       event.preventDefault();
       setDrawerState(false);
@@ -354,9 +340,7 @@ const AppLayout = withStyles(styles, {
                       })}
                     >
                       <SVG
-                          src={
+                        src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
-                            isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo
-                          }
                       />
                     </div>
                     <Hidden smDown>
@@ -371,9 +355,7 @@ const AppLayout = withStyles(styles, {
                       </div>
                     </Hidden>
                     <MenuList
-                        className={
+                      className={isMenuSmall ? classes.menuSmall : classes.menu}
-                          isMenuSmall ? classes.menuSmall : classes.menu
-                        }
                       menuItems={menuStructure}
                       isMenuSmall={!isMenuSmall}
                       location={location.pathname}
@@ -427,10 +409,7 @@ const AppLayout = withStyles(styles, {
                               <Chip
                                 avatar={
                                   user.avatar && (
-                                      <Avatar
+                                    <Avatar alt="user" src={user.avatar.url} />
-                                        alt="user"
-                                        src={user.avatar.url}
-                                      />
                                   )
                                 }
                                 className={classes.userChip}
@@ -466,9 +445,7 @@ const AppLayout = withStyles(styles, {
                                   >
                                     <Paper>
                                       <ClickAwayListener
-                                          onClickAway={() =>
+                                        onClickAway={() => setMenuState(false)}
-                                            setMenuState(false)
-                                          }
                                         mouseEvent="onClick"
                                       >
                                         <Menu>
@@ -512,7 +489,6 @@ const AppLayout = withStyles(styles, {
       </AppProgressProvider>
     );
   }
-  )
 );
 
 export default AppLayout;

src/components/AppLayout/MenuList.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
@@ -24,8 +19,7 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
 import MenuNested from "./MenuNested";
 import { IMenuItem } from "./menuStructure";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   menuIcon: {
     "& svg": {
       height: 32,
@@ -78,14 +72,14 @@ const styles = (theme: Theme) =>
     display: "flex",
     flexDirection: "column",
     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: {
     alignItems: "center",
     display: "block",
-      marginBottom: theme.spacing.unit * 5,
+    marginBottom: theme.spacing(5),
     paddingLeft: 0,
     textDecoration: "none",
     transition: theme.transitions.duration.standard + "ms"
@@ -159,7 +153,7 @@ const styles = (theme: Theme) =>
   subMenuDrawerOpen: {
     width: `100vw`
   }
-  });
+}));
 
 interface MenuListProps {
   className?: string;
@@ -176,9 +170,8 @@ export interface IActiveSubMenu {
   label: string | null;
 }
 
-const MenuList = withStyles(styles, { name: "MenuList" })(
+const MenuList: React.FC<MenuListProps> = props => {
-  ({
+  const {
-    classes,
     className,
     menuItems,
     isMenuSmall,
@@ -186,7 +179,10 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
     user,
     renderConfigure,
     onMenuItemClick
-  }: MenuListProps & WithStyles<typeof styles>) => {
+  } = props;
+
+  const classes = useStyles(props);
+
   const { isDark } = useTheme();
   const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
     isActive: false,
@@ -239,9 +235,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
 
         if (
           menuItem.permission &&
-            !user.permissions
+          !user.permissions.map(perm => perm.code).includes(menuItem.permission)
-              .map(perm => perm.code)
-              .includes(menuItem.permission)
         ) {
           return null;
         }
@@ -360,6 +354,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
       )}
     </div>
   );
-  }
+};
-);
+
+MenuList.displayName = "MenuList";
 export default MenuList;

src/components/AppLayout/MenuNested.tsx

@@ -1,10 +1,5 @@
 import Hidden from "@material-ui/core/Hidden";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
@@ -17,8 +12,7 @@ import { drawerWidthExpanded } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   menuListNested: {
     background: theme.palette.background.paper,
     height: "100vh",
@@ -70,7 +64,7 @@ const styles = (theme: Theme) =>
       }
     },
     display: "block",
-      marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
     padding: "0px 30px",
     textDecoration: "none"
   },
@@ -99,7 +93,7 @@ const styles = (theme: Theme) =>
     display: "inline",
     paddingLeft: 10
   }
-  });
+}));
 
 export interface MenuNestedProps {
   activeItem: IActiveSubMenu;
@@ -112,17 +106,19 @@ export interface MenuNestedProps {
   onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
 }
 
-const MenuNested = withStyles(styles, { name: "MenuNested" })(
+const MenuNested: React.FC<MenuNestedProps> = props => {
-  ({
+  const {
     activeItem,
     ariaLabel,
-    classes,
+
     closeSubMenu,
     icon,
     menuItem,
     onMenuItemClick,
     title
-  }: MenuNestedProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const menuItems = menuItem.children;
   const { isDark } = useTheme();
   const closeMenu = (menuItemUrl, event) => {
@@ -174,8 +170,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
             </div>
           </Hidden>
         </Typography>
-          {menuItems.map(item => {
+        {menuItems.map(item => (
-            return (
           <a
             className={classNames(classes.menuListNestedItem)}
             href={createHref(item.url)}
@@ -183,15 +178,13 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
             onClick={event => closeMenu(item.url, event)}
             key={item.label}
           >
-                <Typography aria-label={item.ariaLabel}>
+            <Typography aria-label={item.ariaLabel}>{item.label}</Typography>
-                  {item.label}
-                </Typography>
           </a>
-            );
+        ))}
-          })}
       </div>
     </>
   );
-  }
+};
-);
+
+MenuNested.displayName = "MenuNested";
 export default MenuNested;

src/components/AppLayout/ResponsiveDrawer.tsx

@@ -1,16 +1,11 @@
 import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import React from "react";
 import { drawerWidth, drawerWidthExpanded } from "./consts";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(
-  createStyles({
+  theme => ({
     drawerDesktop: {
       backgroundColor: theme.palette.background.paper,
       border: "none",
@@ -29,17 +24,23 @@ const styles = (theme: Theme) =>
     drawerMobile: {
       width: drawerWidthExpanded
     }
-  });
+  }),
+  { name: "ResponsiveDrawer" }
+);
 
-interface ResponsiveDrawerProps extends WithStyles<typeof styles> {
+interface ResponsiveDrawerProps {
   children?: React.ReactNode;
   open: boolean;
   small: boolean;
   onClose?();
 }
 
-const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })(
+const ResponsiveDrawer: React.FC<ResponsiveDrawerProps> = props => {
-  ({ children, classes, onClose, open, small }: ResponsiveDrawerProps) => (
+  const { children, onClose, open, small } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <>
       <Hidden smDown>
         <Drawer
@@ -63,6 +64,6 @@ const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })(
         </Drawer>
       </Hidden>
     </>
-  )
+  );
-);
+};
 export default ResponsiveDrawer;

src/components/AppLayout/ThemeSwitch.tsx

@@ -1,17 +1,12 @@
-import { Theme, withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Switch, { SwitchProps } from "@material-ui/core/Switch";
 import React from "react";
 
 import MoonIcon from "../../icons/Moon";
 import SunIcon from "../../icons/Sun";
 
-const switchStyles = (theme: Theme) => ({
+const useStyles = makeStyles(
-  bar: {
+  theme => ({
-    "$colorPrimary$checked + &": {
-      backgroundColor: theme.palette.background.paper
-    },
-    background: theme.palette.background.paper
-  },
     checked: {
       "& svg": {
         background: theme.palette.primary.main,
@@ -25,19 +20,32 @@ const switchStyles = (theme: Theme) => ({
         borderRadius: "100%",
         height: 20,
         width: 20
-    },
-    width: 58
       }
-});
+    },
-const ThemeSwitch = withStyles(switchStyles, {
+    track: {
+      "$colorPrimary$checked + &": {
+        backgroundColor: theme.palette.background.paper
+      },
+      background: theme.palette.background.paper
+    }
+  }),
+  {
     name: "ThemeSwitch"
-})((props: SwitchProps) => (
+  }
+);
+const ThemeSwitch: React.FC<SwitchProps> = props => {
+  const classes = useStyles(props);
+
+  return (
     <Switch
       {...props}
+      classes={classes}
       color="primary"
       icon={<SunIcon />}
       checkedIcon={<MoonIcon />}
     />
-));
+  );
+};
+
 ThemeSwitch.displayName = "ThemeSwitch";
 export default ThemeSwitch;

src/components/AppLayout/index.ts

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

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -27,7 +27,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -44,7 +44,7 @@ const styles = createStyles({
   }
 });
 
-interface AssignCategoriesDialogProps extends WithStyles<typeof styles> {
+interface AssignCategoriesDialogProps {
   categories: SearchCategories_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -71,11 +71,8 @@ function handleCategoryAssign(
   }
 }
 
-const AssignCategoriesDialog = withStyles(styles, {
+const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
-  name: "AssignCategoriesDialog"
+  const {
-})(
-  ({
-    classes,
     confirmButtonState,
     open,
     loading,
@@ -83,7 +80,9 @@ const AssignCategoriesDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignCategoriesDialogProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCategories, setSelectedCategories] = React.useState<
@@ -178,7 +177,6 @@ const AssignCategoriesDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
+};
-);
 AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
 export default AssignCategoriesDialog;

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -27,7 +27,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -44,7 +44,7 @@ const styles = createStyles({
   }
 });
 
-interface AssignCollectionDialogProps extends WithStyles<typeof styles> {
+interface AssignCollectionDialogProps {
   collections: SearchCollections_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -71,11 +71,8 @@ function handleCollectionAssign(
   }
 }
 
-const AssignCollectionDialog = withStyles(styles, {
+const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
-  name: "AssignCollectionDialog"
+  const {
-})(
-  ({
-    classes,
     confirmButtonState,
     open,
     loading,
@@ -83,7 +80,9 @@ const AssignCollectionDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignCollectionDialogProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCollections, setSelectedCollections] = React.useState<
@@ -129,8 +128,7 @@ const AssignCollectionDialog = withStyles(styles, {
             {collections &&
               collections.map(collection => {
                 const isSelected = !!selectedCollections.find(
-                    selectedCollection =>
+                  selectedCollection => selectedCollection.id === collection.id
-                      selectedCollection.id === collection.id
                 );
 
                 return (
@@ -179,7 +177,6 @@ const AssignCollectionDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
+};
-);
 AssignCollectionDialog.displayName = "AssignCollectionDialog";
 export default AssignCollectionDialog;

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -29,7 +29,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -77,11 +77,8 @@ function handleProductAssign(
   }
 }
 
-const AssignProductDialog = withStyles(styles, {
+const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
-  name: "AssignProductDialog"
+  const {
-})(
-  ({
-    classes,
     confirmButtonState,
     open,
     loading,
@@ -89,7 +86,9 @@ const AssignProductDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignProductDialogProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedProducts, setSelectedProducts] = React.useState<
@@ -191,7 +190,6 @@ const AssignProductDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
+};
-);
 AssignProductDialog.displayName = "AssignProductDialog";
 export default AssignProductDialog;

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -1,12 +1,7 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
 import MenuItem from "@material-ui/core/MenuItem";
 import Paper from "@material-ui/core/Paper";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import ArrowBack from "@material-ui/icons/ArrowBack";
 import Downshift from "downshift";
@@ -43,31 +38,27 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   container: {
     flexGrow: 1,
     position: "relative"
   },
   menuBack: {
-      marginLeft: -theme.spacing.unit / 2,
+    marginLeft: -theme.spacing(0.5),
-      marginRight: theme.spacing.unit
+    marginRight: theme.spacing(1)
   },
   paper: {
     left: 0,
-      marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(),
-      padding: theme.spacing.unit,
+    padding: theme.spacing(),
     position: "absolute",
     right: 0,
     zIndex: 2
   },
   root: {}
-  });
+}));
-const AutocompleteSelectMenu = withStyles(styles, {
+const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
-  name: "AutocompleteSelectMenu"
+  const {
-})(
-  ({
-    classes,
     disabled,
     displayValue,
     error,
@@ -79,7 +70,9 @@ const AutocompleteSelectMenu = withStyles(styles, {
     placeholder,
     onChange,
     onInputChange
-  }: AutocompleteSelectMenuProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const [inputValue, setInputValue] = React.useState(displayValue || "");
   const [menuPath, setMenuPath] = React.useState<number[]>([]);
 
@@ -189,7 +182,6 @@ const AutocompleteSelectMenu = withStyles(styles, {
       )}
     </DebounceAutocomplete>
   );
-  }
+};
-);
 AutocompleteSelectMenu.displayName = "AutocompleteSelectMenu";
 export default AutocompleteSelectMenu;

src/components/AutocompleteSelectMenu/index.ts

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

src/components/CardMenu/CardMenu.tsx

@@ -1,12 +1,7 @@
 import IconButton from "@material-ui/core/IconButton";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import React from "react";
 
@@ -23,8 +18,7 @@ export interface CardMenuProps {
   menuItems: CardMenuItem[];
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   iconButton: {
     background: theme.palette.background.paper,
     borderRadius: "100%",
@@ -32,17 +26,12 @@ const styles = (theme: Theme) =>
     padding: 0,
     width: 32
   }
-  });
+}));
+
+const CardMenu: React.FC<CardMenuProps> = props => {
+  const { className, disabled, menuItems } = props;
+  const classes = useStyles(props);
 
-const CardMenu = withStyles(styles, {
-  name: "CardMenu"
-})(
-  ({
-    className,
-    classes,
-    disabled,
-    menuItems
-  }: CardMenuProps & WithStyles<typeof styles>) => {
   const [anchorEl, setAnchor] = React.useState<HTMLElement | null>(null);
 
   const handleClick = (event: React.MouseEvent<any>) => {
@@ -96,7 +85,6 @@ const CardMenu = withStyles(styles, {
       </Menu>
     </div>
   );
-  }
+};
-);
 CardMenu.displayName = "CardMenu";
 export default CardMenu;

src/components/CardSpacer.tsx

@@ -1,29 +1,25 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   spacer: {
     [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing.unit
+      marginTop: theme.spacing(1)
     },
-      marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing(3)
   }
-  });
+}));
 
-interface CardSpacerProps extends WithStyles<typeof styles> {
+interface CardSpacerProps {
   children?: React.ReactNode;
 }
 
-export const CardSpacer = withStyles(styles, { name: "CardSpacer" })(
+export const CardSpacer: React.FC<CardSpacerProps> = props => {
-  ({ classes, children }: CardSpacerProps) => (
+  const { children } = props;
-    <div className={classes.spacer}>{children}</div>
+
-  )
+  const classes = useStyles(props);
-);
+
+  return <div className={classes.spacer}>{children}</div>;
+};
 CardSpacer.displayName = "CardSpacer";
 export default CardSpacer;

src/components/CardTitle/CardTitle.tsx

@@ -1,22 +1,16 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   children: theme.mixins.gutters({}),
   constantHeight: {
     height: 56
   },
   hr: {
     border: "none",
-      borderTop: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     height: 0,
     marginBottom: 0,
     marginTop: 0,
@@ -32,11 +26,11 @@ const styles = (theme: Theme) =>
     lineHeight: 1
   },
   toolbar: {
-      marginRight: -theme.spacing.unit
+    marginRight: -theme.spacing(1)
   }
-  });
+}));
 
-interface CardTitleProps extends WithStyles<typeof styles> {
+interface CardTitleProps {
   children?: React.ReactNode;
   className?: string;
   height?: "default" | "const";
@@ -45,24 +39,27 @@ interface CardTitleProps extends WithStyles<typeof styles> {
   onClick?: (event: React.MouseEvent<any>) => void;
 }
 
-const CardTitle = withStyles(styles, { name: "CardTitle" })(
+const CardTitle: React.FC<CardTitleProps> = props => {
-  ({
+  const {
-    classes,
     className,
     children,
     height,
     title,
     toolbar,
     onClick,
-    ...props
+    ...rest
-  }: CardTitleProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <>
       <div
         className={classNames(classes.root, {
           [className]: !!className,
           [classes.constantHeight]: height === "const"
         })}
-        {...props}
+        {...rest}
       >
         <Typography
           className={classes.title}
@@ -77,7 +74,7 @@ const CardTitle = withStyles(styles, { name: "CardTitle" })(
       <div className={classes.children}>{children}</div>
       <hr className={classes.hr} />
     </>
-  )
+  );
-);
+};
 CardTitle.displayName = "CardTitle";
 export default CardTitle;

src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,6 @@
-import { Omit } from "@material-ui/core";
 import ButtonBase from "@material-ui/core/ButtonBase";
 import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import classNames from "classnames";
 import React from "react";
@@ -25,8 +19,7 @@ export type CheckboxProps = Omit<
   onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   box: {
     "&$checked": {
       "&:before": {
@@ -86,20 +79,22 @@ const styles = (theme: Theme) =>
     margin: "5px 9px",
     width: 30
   }
-  });
+}));
-const Checkbox = withStyles(styles, { name: "Checkbox" })(
+const Checkbox: React.FC<CheckboxProps> = props => {
-  ({
+  const {
     checked,
     className,
-    classes,
+
     disabled,
     disableClickPropagation,
     indeterminate,
     onChange,
     value,
     name,
-    ...props
+    ...rest
-  }: CheckboxProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const handleClick = React.useCallback(
     disableClickPropagation
@@ -113,7 +108,7 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
 
   return (
     <ButtonBase
-        {...props}
+      {...rest}
       centerRipple
       className={classNames(classes.root, className)}
       disabled={disabled}
@@ -134,7 +129,6 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
       />
     </ButtonBase>
   );
-  }
+};
-);
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

src/components/Checkbox/index.ts

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

src/components/Chip/Chip.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
@@ -16,12 +11,11 @@ export interface ChipProps {
   onClose?: () => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   closeIcon: {
     cursor: "pointer",
     fontSize: 16,
-      marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(),
     verticalAlign: "middle"
   },
   label: {
@@ -31,17 +25,16 @@ const styles = (theme: Theme) =>
     background: fade(theme.palette.secondary.main, 0.8),
     borderRadius: 8,
     display: "inline-block",
-      marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     padding: "6px 12px"
   }
-  });
+}));
-const Chip = withStyles(styles, { name: "Chip" })(
+const Chip: React.FC<ChipProps> = props => {
-  ({
+  const { className, label, onClose } = props;
-    classes,
+
-    className,
+  const classes = useStyles(props);
-    label,
+
-    onClose
+  return (
-  }: ChipProps & WithStyles<typeof styles>) => (
     <div className={classNames(classes.root, className)}>
       <Typography className={classes.label} variant="caption">
         {label}
@@ -50,7 +43,7 @@ const Chip = withStyles(styles, { name: "Chip" })(
         )}
       </Typography>
     </div>
-  )
+  );
-);
+};
 Chip.displayName = "Chip";
 export default Chip;

src/components/Chip/index.ts

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

src/components/ColumnPicker/ColumnPicker.tsx

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

src/components/ColumnPicker/ColumnPickerButton.tsx

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

src/components/ColumnPicker/ColumnPickerContent.tsx

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

src/components/ConfirmButton/ConfirmButton.tsx

@@ -1,11 +1,10 @@
-import { Omit } from "@material-ui/core";
 import Button, { ButtonProps } from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import {
   createStyles,
   Theme,
-  withStyles,
+  WithStyles,
-  WithStyles
+  withStyles
 } from "@material-ui/core/styles";
 import CheckIcon from "@material-ui/icons/Check";
 import { buttonMessages } from "@saleor/intl";

src/components/Container.tsx

@@ -1,14 +1,8 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   root: {
     [theme.breakpoints.up("lg")]: {
       marginLeft: "auto",
@@ -16,20 +10,22 @@ const styles = (theme: Theme) =>
       maxWidth: theme.breakpoints.width("lg")
     },
     [theme.breakpoints.up("sm")]: {
-        padding: `0 ${theme.spacing.unit * 3}px`
+      padding: theme.spacing(0, 3)
     },
-      padding: `0 ${theme.spacing.unit}px`
+    padding: theme.spacing(0, 1)
   }
-  });
+}));
 
-interface ContainerProps extends WithStyles<typeof styles> {
+interface ContainerProps {
   className?: string;
 }
 
-export const Container = withStyles(styles, {
+export const Container: React.FC<ContainerProps> = props => {
-  name: "Container"
+  const { className, ...rest } = props;
-})(({ classes, className, ...props }: ContainerProps) => (
+
-  <div className={classNames(classes.root, className)} {...props} />
+  const classes = useStyles(props);
-));
+
+  return <div className={classNames(classes.root, className)} {...rest} />;
+};
 Container.displayName = "Container";
 export default Container;

src/components/ControlledSwitch.tsx

@@ -1,19 +1,18 @@
-import { createStyles, Theme, withStyles, WithStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   label: {
-      marginLeft: theme.spacing.unit * 3.5
+    marginLeft: theme.spacing(3.5)
   },
   labelText: {
     fontSize: 14
   }
-  });
+}));
 
-interface ControlledSwitchProps extends WithStyles<typeof styles> {
+interface ControlledSwitchProps {
   checked: boolean;
   disabled?: boolean;
   label: string | React.ReactNode;
@@ -23,11 +22,8 @@ interface ControlledSwitchProps extends WithStyles<typeof styles> {
   onChange?(event: React.ChangeEvent<any>);
 }
 
-export const ControlledSwitch = withStyles(styles, {
+export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
-  name: "ControlledSwitch"
+  const {
-})(
-  ({
-    classes,
     checked,
     disabled,
     onChange,
@@ -35,7 +31,11 @@ export const ControlledSwitch = withStyles(styles, {
     name,
     secondLabel,
     uncheckedLabel
-  }: ControlledSwitchProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <FormControlLabel
       control={
         <Switch
@@ -65,7 +65,7 @@ export const ControlledSwitch = withStyles(styles, {
       }
       disabled={disabled}
     />
-  )
+  );
-);
+};
 ControlledSwitch.displayName = "ControlledSwitch";
 export default ControlledSwitch;

src/components/CountryList/CountryList.tsx

@@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -32,24 +27,23 @@ export interface CountryListProps {
   onCountryUnassign: (country: string) => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   iconCell: {
     "&:last-child": {
       paddingRight: 0
     },
-      width: 48 + theme.spacing.unit / 2
+    width: 48 + theme.spacing(2)
   },
   indicator: {
     color: theme.palette.text.disabled,
     display: "inline-block",
     left: 0,
-      marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(0.5),
     position: "absolute"
   },
   offsetCell: {
     "&:first-child": {
-        paddingLeft: theme.spacing.unit * 3
+      paddingLeft: theme.spacing(3)
     },
     position: "relative"
   },
@@ -76,20 +70,19 @@ const styles = (theme: Theme) =>
   wideColumn: {
     width: "100%"
   }
-  });
+}));
 
-const CountryList = withStyles(styles, {
+const CountryList: React.FC<CountryListProps> = props => {
-  name: "CountryList"
+  const {
-})(
-  ({
-    classes,
     countries,
     disabled,
     emptyText,
     title,
     onCountryAssign,
     onCountryUnassign
-  }: CountryListProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const [isCollapsed, setCollapseStatus] = React.useState(true);
   const toggleCollapse = () => setCollapseStatus(!isCollapsed);
 
@@ -184,6 +177,5 @@ const CountryList = withStyles(styles, {
       </CardContent>
     </Card>
   );
-  }
+};
-);
 export default CountryList;

src/components/Debounce.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export interface DebounceProps<T> {
-  children: ((props: (...args: T[]) => void) => React.ReactNode);
+  children: (props: (...args: T[]) => void) => React.ReactNode;
   debounceFn: (...args: T[]) => void;
   time?: number;
 }

src/components/DeleteFilterTabDialog/index.ts

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

src/components/EditableTableCell/EditableTableCell.tsx

@@ -1,11 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import TextField, { TextFieldProps } from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
@@ -14,10 +9,9 @@ import React from "react";
 
 import useForm from "@saleor/hooks/useForm";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   card: {
-      border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
+    border: `1px solid ${theme.palette.divider}`
   },
   container: {
     position: "relative"
@@ -33,19 +27,19 @@ const styles = (theme: Theme) =>
   },
   root: {
     left: 0,
-      minWidth: theme.spacing.unit * 20,
+    minWidth: theme.spacing(20),
     position: "absolute",
     top: 0,
-      width: `calc(100% + ${4 * theme.spacing.unit}px)`,
+    width: `calc(100% + ${theme.spacing(4)}px)`,
     zIndex: 2
   },
   text: {
     cursor: "pointer",
     fontSize: "0.8125rem"
   }
-  });
+}));
 
-interface EditableTableCellProps extends WithStyles<typeof styles> {
+interface EditableTableCellProps {
   className?: string;
   defaultValue?: string;
   focused?: boolean;
@@ -54,18 +48,17 @@ interface EditableTableCellProps extends WithStyles<typeof styles> {
   onConfirm(value: string): any;
 }
 
-export const EditableTableCell = withStyles(styles, {
+export const EditableTableCell: React.FC<EditableTableCellProps> = props => {
-  name: "EditableTableCell"
+  const {
-})(
-  ({
-    classes,
     className,
     defaultValue,
     focused,
     InputProps,
     value,
     onConfirm
-  }: EditableTableCellProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const handleConfirm = (data: { value: string }) => {
     disable();
     onConfirm(data.value);
@@ -101,7 +94,6 @@ export const EditableTableCell = withStyles(styles, {
       )}
     </TableCell>
   );
-  }
+};
-);
 EditableTableCell.displayName = "EditableTableCell";
 export default EditableTableCell;

src/components/ErrorMessageCard/ErrorMessageCard.tsx

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

src/components/ErrorPage/ErrorPage.tsx

@@ -1,10 +1,5 @@
 import Button from "@material-ui/core/Button";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -12,24 +7,23 @@ import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/what.svg";
 
-export interface ErrorPageProps extends WithStyles<typeof styles> {
+export interface ErrorPageProps {
   onBack: () => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   bottomHeader: {
     fontWeight: 600 as 600,
     textTransform: "uppercase"
   },
   button: {
-      marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     padding: 20
   },
   container: {
     [theme.breakpoints.down("sm")]: {
       gridTemplateColumns: "1fr",
-        padding: theme.spacing.unit * 3,
+      padding: theme.spacing(3),
       width: "100%"
     },
     display: "grid",
@@ -59,10 +53,14 @@ const styles = (theme: Theme) =>
   upperHeader: {
     fontWeight: 600 as 600
   }
-  });
+}));
 
-const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
+const ErrorPage: React.FC<ErrorPageProps> = props => {
-  ({ classes, onBack }: ErrorPageProps) => (
+  const { onBack } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <div className={classes.container}>
         <div className={classes.innerContainer}>
@@ -99,7 +97,7 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
         </div>
       </div>
     </div>
-  )
+  );
-);
+};
 ErrorPage.displayName = "ErrorPage";
 export default ErrorPage;

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -1,55 +1,53 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   action: {
     flex: "0 0 auto"
   },
   grid: {
-      padding: theme.spacing.unit * 2
+    padding: theme.spacing(2)
   },
   menuButton: {
     flex: "0 0 auto",
-      marginLeft: theme.spacing.unit * -2,
+    marginLeft: -theme.spacing(2),
-      marginRight: theme.spacing.unit * 3,
+    marginRight: theme.spacing(3),
-      marginTop: -theme.spacing.unit * 2
+    marginTop: -theme.spacing(2)
   },
   root: {
     alignItems: "center",
     display: "flex",
-      marginBottom: theme.spacing.unit * 3
+    marginBottom: theme.spacing(3)
   },
   subtitle: {
     alignItems: "center",
     display: "flex",
-      marginBottom: theme.spacing.unit * 2
+    marginBottom: theme.spacing(2)
   },
   title: {
     flex: 1,
-      paddingBottom: theme.spacing.unit * 2
+    paddingBottom: theme.spacing(2)
   }
-  });
+}));
 
-interface ExtendedPageHeaderProps extends WithStyles<typeof styles> {
+interface ExtendedPageHeaderProps {
   children?: React.ReactNode;
   className?: string;
   title?: React.ReactNode;
 }
 
-const ExtendedPageHeader = withStyles(styles, { name: "ExtendedPageHeader" })(
+const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
-  ({ children, classes, className, title }: ExtendedPageHeaderProps) => (
+  const { children, className, title } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classNames(classes.root, className)}>
       {title}
       <div className={classes.action}>{children}</div>
     </div>
-  )
+  );
-);
+};
 ExtendedPageHeader.displayName = "ExtendedPageHeader";
 export default ExtendedPageHeader;

src/components/ExternalLink/ExternalLink.tsx

@@ -1,36 +1,31 @@
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import React from "react";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   link: {
     textDecoration: "none"
   }
 });
 
-interface ExternalLinkProps
+interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
-  extends React.HTMLProps<HTMLAnchorElement>,
-    WithStyles<typeof styles> {
   href: string;
   className?: string;
   typographyProps?: TypographyProps;
 }
 
-const ExternalLink = withStyles(styles, { name: "ExternalLink" })(
+const ExternalLink: React.FC<ExternalLinkProps> = props => {
-  ({
+  const { className, children, href, typographyProps, ...rest } = props;
-    classes,
+
-    className,
+  const classes = useStyles(props);
-    children,
+
-    href,
+  return (
-    typographyProps,
+    <a href={href} className={classes.link} {...rest}>
-    ...props
-  }: ExternalLinkProps) => (
-    <a href={href} className={classes.link} {...props}>
       <Typography className={className} color="primary" {...typographyProps}>
         {children}
       </Typography>
     </a>
-  )
+  );
-);
+};
 ExternalLink.displayName = "ExternalLink";
 export default ExternalLink;

src/components/FileUpload/FileUpload.tsx

@@ -1,10 +1,10 @@
 import Button from "@material-ui/core/Button";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   fileUploadField: {
     display: "none"
   },
@@ -16,15 +16,19 @@ const styles = createStyles({
   }
 });
 
-interface FileUploadProps extends WithStyles<typeof styles> {
+interface FileUploadProps {
   disabled?: boolean;
   name?: string;
   value?: any;
   onChange?(event: React.ChangeEvent<any>);
 }
 
-const FileUpload = withStyles(styles, { name: "FileUpload" })(
+const FileUpload: React.FC<FileUploadProps> = props => {
-  ({ classes, disabled, name, value, onChange }: FileUploadProps) => (
+  const { disabled, name, value, onChange } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <input
         disabled={disabled}
@@ -48,7 +52,7 @@ const FileUpload = withStyles(styles, { name: "FileUpload" })(
         />
       </Button>
     </div>
-  )
+  );
-);
+};
 FileUpload.displayName = "FileUpload";
 export default FileUpload;

src/components/Filter/Filter.tsx

@@ -2,12 +2,7 @@ import ButtonBase from "@material-ui/core/ButtonBase";
 import Grow from "@material-ui/core/Grow";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
@@ -26,8 +21,7 @@ export interface FilterProps<TFilterKeys = string> {
   onFilterAdd: (filter: FilterContentSubmitData) => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   addFilterButton: {
     "&$filterButton": {
       "&:hover, &:focus": {
@@ -37,7 +31,7 @@ const styles = (theme: Theme) =>
       border: `1px solid ${theme.palette.primary.main}`,
       cursor: "pointer",
       marginBottom: 0,
-        marginRight: theme.spacing.unit * 2,
+      marginRight: theme.spacing(2),
       marginTop: 0,
       transition: theme.transitions.duration.short + "ms"
     }
@@ -62,20 +56,19 @@ const styles = (theme: Theme) =>
     backgroundColor: fade(theme.palette.primary.main, 0.6),
     borderRadius: "4px",
     display: "flex",
-      height: "45px",
+    height: 40,
     justifyContent: "space-around",
-      margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+    margin: theme.spacing(2, 1),
     marginLeft: 0,
-      padding: "0 16px",
+    padding: theme.spacing(0, 2),
-      position: "relative",
+    position: "relative"
-      top: -5
   },
   paper: {
     "& p": {
       paddingBottom: 10
     },
-      marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
-      padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     width: 240
   },
   popover: {
@@ -84,15 +77,11 @@ const styles = (theme: Theme) =>
   rotate: {
     transform: "rotate(180deg)"
   }
-  });
+}));
-const Filter = withStyles(styles, { name: "Filter" })(
+const Filter: React.FC<FilterProps> = props => {
-  ({
+  const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
-    classes,
+  const classes = useStyles(props);
-    currencySymbol,
+
-    filterLabel,
-    menu,
-    onFilterAdd
-  }: FilterProps & WithStyles<typeof styles>) => {
   const anchor = React.useRef<HTMLDivElement>();
   const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false);
 
@@ -105,10 +94,7 @@ const Filter = withStyles(styles, { name: "Filter" })(
         onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
       >
         <Typography className={classes.addFilterText}>
-            <FormattedMessage
+          <FormattedMessage defaultMessage="Add Filter" description="button" />
-              defaultMessage="Add Filter"
-              description="button"
-            />
         </Typography>
         <ArrowDropDownIcon
           color="primary"
@@ -149,7 +135,6 @@ const Filter = withStyles(styles, { name: "Filter" })(
       </Popper>
     </div>
   );
-  }
+};
-);
 Filter.displayName = "Filter";
 export default Filter;

src/components/Filter/FilterActions.tsx

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

src/components/Filter/FilterContent.tsx

@@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { makeStyles } from "@material-ui/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { getMenuItemByValue, isLeaf, walkToRoot } from "../../utils/menu";
 import FormSpacer from "../FormSpacer";
 import SingleSelectField from "../SingleSelectField";

src/components/Filter/FilterElement.tsx

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

src/components/Filter/FilterSearch.tsx

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

src/components/FilterBar/index.ts

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

src/components/FormSpacer.tsx

@@ -1,27 +1,23 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   spacer: {
-      marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing(3)
   }
-  });
+}));
 
-interface FormSpacerProps extends WithStyles<typeof styles> {
+interface FormSpacerProps {
   children?: React.ReactNode;
 }
 
-export const FormSpacer = withStyles(styles, { name: "FormSpacer" })(
+export const FormSpacer: React.FC<FormSpacerProps> = props => {
-  ({ classes, children }: FormSpacerProps) => (
+  const { children } = props;
-    <div className={classes.spacer}>{children}</div>
+
-  )
+  const classes = useStyles(props);
-);
+
+  return <div className={classes.spacer}>{children}</div>;
+};
 
 FormSpacer.displayName = "FormSpacer";
 export default FormSpacer;

src/components/Grid/Grid.tsx

@@ -1,21 +1,15 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
 export type GridVariant = "default" | "inverted" | "uniform";
-export interface GridProps extends WithStyles<typeof styles> {
+export interface GridProps {
   children: React.ReactNodeArray | React.ReactNode;
   className?: string;
   variant?: GridVariant;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   default: {
     gridTemplateColumns: "9fr 4fr"
   },
@@ -24,20 +18,24 @@ const styles = (theme: Theme) =>
   },
   root: {
     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")]: {
-        gridRowGap: theme.spacing.unit + "px",
+      gridRowGap: theme.spacing(1),
       gridTemplateColumns: "1fr"
     }
   },
   uniform: {
     gridTemplateColumns: "1fr 1fr"
   }
-  });
+}));
 
-export const Grid = withStyles(styles, { name: "Grid" })(
+export const Grid: React.FC<GridProps> = props => {
-  ({ className, children, classes, variant }: GridProps) => (
+  const { className, children, variant } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div
       className={classNames(className, classes.root, {
         [classes.default]: variant === "default",
@@ -47,8 +45,8 @@ export const Grid = withStyles(styles, { name: "Grid" })(
     >
       {children}
     </div>
-  )
+  );
-);
+};
 Grid.displayName = "Grid";
 Grid.defaultProps = {
   variant: "default"

src/components/Hr.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
@@ -11,22 +6,23 @@ interface HrProps {
   className?: string;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   root: {
-      backgroundColor: theme.overrides.MuiCard.root.borderColor,
+    backgroundColor: theme.palette.divider,
     border: "none",
     display: "block",
     height: 1,
     margin: 0,
     width: "100%"
   }
-  });
+}));
 
-export const Hr = withStyles(styles, { name: "Hr" })(
+export const Hr: React.FC<HrProps> = props => {
-  ({ className, classes }: HrProps & WithStyles<typeof styles>) => (
+  const { className } = props;
-    <hr className={classNames(classes.root, className)} />
+
-  )
+  const classes = useStyles(props);
-);
+
+  return <hr className={classNames(classes.root, className)} />;
+};
 Hr.displayName = "Hr";
 export default Hr;

src/components/IconButtonTableCell/IconButtonTableCell.tsx

@@ -1,10 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import React from "react";
 
@@ -17,23 +12,26 @@ export interface IconButtonTableCellProps {
   onClick: () => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   root: {
     "&:last-child": {
       paddingRight: 0
     },
     paddingRight: 0,
-      width: ICONBUTTON_SIZE + theme.spacing.unit / 2
+    width: ICONBUTTON_SIZE + theme.spacing(0.5)
   }
-  });
+}));
-const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
+const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
-  ({
+  const {
     children,
-    classes,
+
     disabled,
     onClick
-  }: IconButtonTableCellProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <TableCell className={classes.root}>
       <IconButton
         color="primary"
@@ -43,7 +41,7 @@ const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
         {children}
       </IconButton>
     </TableCell>
-  )
+  );
-);
+};
 IconButtonTableCell.displayName = "IconButtonTableCell";
 export default IconButtonTableCell;

src/components/IconButtonTableCell/index.ts

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

src/components/ImageTile/ImageTile.tsx

@@ -1,17 +1,11 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import React from "react";
 
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   image: {
     height: "100%",
     objectFit: "contain",
@@ -25,11 +19,11 @@ const styles = (theme: Theme) =>
       }
     },
     background: theme.palette.background.paper,
-      border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    border: `1px solid ${theme.palette.divider}`,
-      borderRadius: theme.spacing.unit,
+    borderRadius: theme.spacing(),
     height: 148,
     overflow: "hidden",
-      padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     position: "relative",
     width: 148
   },
@@ -47,9 +41,9 @@ const styles = (theme: Theme) =>
     display: "flex",
     justifyContent: "flex-end"
   }
-  });
+}));
 
-interface ImageTileProps extends WithStyles<typeof styles> {
+interface ImageTileProps {
   image: {
     alt?: string;
     url: string;
@@ -58,8 +52,12 @@ interface ImageTileProps extends WithStyles<typeof styles> {
   onImageEdit?: (event: React.ChangeEvent<any>) => void;
 }
 
-const ImageTile = withStyles(styles, { name: "ImageTile" })(
+const ImageTile: React.FC<ImageTileProps> = props => {
-  ({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => (
+  const { onImageDelete, onImageEdit, image } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.imageContainer} data-tc="product-image">
       <div className={classes.imageOverlay}>
         <div className={classes.imageOverlayToolbar}>
@@ -77,7 +75,7 @@ const ImageTile = withStyles(styles, { name: "ImageTile" })(
       </div>
       <img className={classes.image} src={image.url} alt={image.alt} />
     </div>
-  )
+  );
-);
+};
 ImageTile.displayName = "ImageTile";
 export default ImageTile;

src/components/ImageUpload/ImageUpload.tsx

@@ -1,9 +1,4 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
@@ -22,8 +17,7 @@ interface ImageUploadProps {
   onImageUpload: (file: File) => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   containerDragActive: {
     background: fade(theme.palette.primary.main, 0.1),
     color: theme.palette.primary.main
@@ -34,11 +28,11 @@ const styles = (theme: Theme) =>
   imageContainer: {
     background: "#ffffff",
     border: "1px solid #eaeaea",
-      borderRadius: theme.spacing.unit,
+    borderRadius: theme.spacing(),
     height: 148,
     justifySelf: "start",
     overflow: "hidden",
-      padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     position: "relative",
     transition: theme.transitions.duration.standard + "s",
     width: 148
@@ -49,28 +43,32 @@ const styles = (theme: Theme) =>
     width: "64px"
   },
   photosIconContainer: {
-      padding: `${theme.spacing.unit * 5}px 0`,
+    padding: theme.spacing(5, 0),
     textAlign: "center"
   },
   uploadText: {
-      color: theme.typography.body2.color,
+    color: theme.typography.body1.color,
     fontSize: 12,
     fontWeight: 600,
     textTransform: "uppercase"
   }
-  });
+}));
 
-export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
+export const ImageUpload: React.FC<ImageUploadProps> = props => {
-  ({
+  const {
     children,
-    classes,
+
     className,
     disableClick,
     isActiveClassName,
     iconContainerActiveClassName,
     iconContainerClassName,
     onImageUpload
-  }: ImageUploadProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Dropzone
       disableClick={disableClick}
       onDrop={files => onImageUpload(files[0])}
@@ -107,7 +105,7 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
         </>
       )}
     </Dropzone>
-  )
+  );
-);
+};
 ImageUpload.displayName = "ImageUpload";
 export default ImageUpload;

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -5,12 +5,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/MenuList";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
 import classNames from "classnames";
@@ -26,28 +21,27 @@ export interface LanguageSwitchProps {
   onLanguageChange: (lang: LanguageCodeEnum) => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   arrow: {
     color: theme.palette.primary.main,
     transition: theme.transitions.duration.standard + "ms"
   },
   container: {
-      paddingBottom: theme.spacing.unit
+    paddingBottom: theme.spacing(1)
   },
   menuContainer: {
     cursor: "pointer",
     display: "flex",
     justifyContent: "space-between",
     minWidth: 90,
-      padding: theme.spacing.unit,
+    padding: theme.spacing(),
     position: "relative"
   },
   menuItem: {
     textAlign: "justify"
   },
   menuPaper: {
-      maxHeight: `calc(100vh - ${theme.spacing.unit * 2}px)`,
+    maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
     overflow: "scroll"
   },
   popover: {
@@ -56,14 +50,11 @@ const styles = (theme: Theme) =>
   rotate: {
     transform: "rotate(180deg)"
   }
-  });
+}));
-const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
+const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
-  ({
+  const { currentLanguage, languages, onLanguageChange } = props;
-    classes,
+  const classes = useStyles(props);
-    currentLanguage,
+
-    languages,
-    onLanguageChange
-  }: LanguageSwitchProps & WithStyles<typeof styles>) => {
   const [isExpanded, setExpandedState] = React.useState(false);
   const anchor = React.useRef();
 
@@ -128,7 +119,6 @@ const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
       </Popper>
     </div>
   );
-  }
+};
-);
 LanguageSwitch.displayName = "LanguageSwitch";
 export default LanguageSwitch;

src/components/LanguageSwitch/index.ts

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

src/components/Link.tsx

@@ -1,15 +1,9 @@
-import {
+import { makeStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles(theme => ({
-  createStyles({
   primary: {
     color: theme.palette.primary.main
   },
@@ -23,27 +17,28 @@ const styles = (theme: Theme) =>
   underline: {
     textDecoration: "underline"
   }
-  });
+}));
 
-interface LinkProps
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    WithStyles<typeof styles> {
   color?: "primary" | "secondary";
   underline?: boolean;
   typographyProps?: TypographyProps;
   onClick: () => void;
 }
 
-const Link = withStyles(styles, { name: "Link" })(
+const Link: React.FC<LinkProps> = props => {
-  ({
+  const {
-    classes,
     className,
     children,
     color = "primary",
     underline = false,
     onClick,
     ...linkProps
-  }: LinkProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Typography
       component="a"
       className={classNames({
@@ -59,7 +54,7 @@ const Link = withStyles(styles, { name: "Link" })(
     >
       {children}
     </Typography>
-  )
+  );
-);
+};
 Link.displayName = "Link";
 export default Link;

src/components/ListField/ListField.tsx

@@ -1,4 +1,3 @@
-import { Omit } from "@material-ui/core";
 import Button from "@material-ui/core/Button";
 import {
   createStyles,
@@ -20,10 +19,10 @@ interface ListFieldState {
 const styles = (theme: Theme) =>
   createStyles({
     chip: {
-      marginBottom: theme.spacing.unit
+      marginBottom: theme.spacing(1)
     },
     chipContainer: {
-      marginTop: theme.spacing.unit * 2,
+      marginTop: theme.spacing(2),
       width: 552
     }
   });

src/components/MenuToggle.tsx

@@ -2,15 +2,13 @@ import React from "react";
 
 interface MenuToggleProps {
   ariaOwns?: string;
-  children: ((
+  children: (props: {
-    props: {
     actions: {
       open: () => void;
       close: () => void;
     };
     open: boolean;
-    }
+  }) => React.ReactElement<any>;
-  ) => React.ReactElement<any>);
 }
 
 interface MenuToggleState {

src/components/Money/index.ts

@@ -1,15 +1,15 @@
-import Money from "./Money";
+import { IMoney } from "./Money";
 
 export { default } from "./Money";
 export * from "./Money";
 
-export function addMoney(init: Money, ...args: Money[]): Money {
+export function addMoney(init: IMoney, ...args: IMoney[]): IMoney {
   return {
     amount: args.reduce((acc, curr) => acc + curr.amount, init.amount),
     currency: init.currency
   };
 }
-export function subtractMoney(init: Money, ...args: Money[]): Money {
+export function subtractMoney(init: IMoney, ...args: IMoney[]): IMoney {
   return {
     amount: args.reduce((acc, curr) => acc - curr.amount, init.amount),
     currency: init.currency

src/components/MoneyRange/MoneyRange.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { LocaleConsumer } from "../Locale";
-import IMoney from "../Money";
+import { IMoney } from "../Money";
 
 export interface MoneyRangeProps {
   from?: IMoney;

src/components/MoneyRange/index.ts

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