Improve theming (#1020)

* Remove unused code

* Move theme to separate directory

* Separate types

* Separate shadows

* Separate shadows

* Rename types

* Modularize code

* Do not pollute prototypes

* Fix missing import

* Aliast mui styles

* Import theming internally

* Fix types

* Fix override type

src/Baseline.tsx

@@ -1,9 +1,9 @@
 import CssBaseline from "@material-ui/core/CssBaseline";
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
+import { createStyles, SaleorTheme, withStyles } from "@saleor/theme";
 import React from "react";
 
-const styles = createStyles((theme: Theme) => ({
+const styles = createStyles((theme: SaleorTheme) => ({
   "@global": {
     "@import": "url('https://rsms.me/inter/inter.css')",
 

src/apps/components/AppDetailsSettingsPage/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/AppInstallErrorPage/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/CustomAppDefaultToken/styles.ts

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/CustomAppTokens/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/DeactivatedText/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/components/TokenCreateDialog/styles.ts

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/apps/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
@@ -8,6 +7,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import SingleSelectField from "@saleor/components/SingleSelectField";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import {
   AttributeEntityTypeEnum,
   AttributeInputTypeEnum

src/attributes/components/AttributeList/AttributeList.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { translateBoolean } from "@saleor/intl";
 import { maybe, renderCollection } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
-import { makeStyles } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -15,6 +14,7 @@ import {
 } from "@saleor/components/SortableTable";
 import { AttributeDetailsFragment_values } from "@saleor/fragments/types/AttributeDetailsFragment";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { ReorderAction } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/auth/components/Layout.tsx

@@ -1,8 +1,8 @@
 import backgroundArt from "@assets/images/login-background.svg";
 import saleorDarkLogo from "@assets/images/logo-dark.svg";
 import saleorLightLogo from "@assets/images/logo-light.svg";
-import { makeStyles } from "@material-ui/core/styles";
 import useTheme from "@saleor/hooks/useTheme";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import SVG from "react-inlinesvg";
 

src/auth/components/LoginLoading/LoginLoading.tsx

@@ -1,5 +1,5 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,13 +1,13 @@
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Divider from "@material-ui/core/Divider";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { AvailableExternalAuthentications_shop_availableExternalAuthentications } from "@saleor/auth/types/AvailableExternalAuthentications";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -1,10 +1,10 @@
 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 { SetPassword_setPassword_errors } from "@saleor/auth/types/SetPassword";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
+import { makeStyles } from "@saleor/theme";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,10 +1,10 @@
 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 Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

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

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
@@ -9,6 +8,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
 import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -4,8 +4,8 @@ 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 { makeStyles } from "@material-ui/core/styles";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { CategoryFragment } from "@saleor/fragments/types/CategoryFragment";
 import { maybe, renderCollection } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -14,6 +13,7 @@ import TableCellAvatar, {
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { ChannelProps, ListActions, ListProps } from "@saleor/types";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/channels/components/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/channels/pages/ChannelsListPage/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
@@ -9,6 +8,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
 import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
-import { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -17,6 +16,7 @@ import TableCellAvatar, {
 } from "@saleor/components/TableCellAvatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/Accordion/Accordion.tsx

@@ -1,8 +1,8 @@
 import IconButton from "@material-ui/core/IconButton";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import AddIcon from "@material-ui/icons/Add";
 import RemoveIcon from "@material-ui/icons/Remove";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/AccountPermissions/AccountPermissions.tsx

@@ -7,12 +7,12 @@ import {
 } from "@material-ui/core";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import useUser from "@saleor/hooks/useUser";
 import { PermissionData } from "@saleor/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/ActionDialog/DialogButtons.tsx

@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button";
 import DialogActions from "@material-ui/core/DialogActions";
-import { makeStyles } from "@material-ui/core/styles";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/AddressEdit/AddressEdit.tsx

@@ -1,9 +1,9 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import { AddressTypeInput } from "@saleor/customers/types";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { commonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import getOrderErrorMessage from "@saleor/utils/errors/order";

src/components/AppHeader/AppHeader.tsx

@@ -1,7 +1,7 @@
 import Portal from "@material-ui/core/Portal";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 import AppHeaderContext from "../AppLayout/AppHeaderContext";

src/components/AppLayout/AppChannelSelect.tsx

@@ -1,5 +1,5 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
+import { makeStyles } from "@saleor/theme";
 import { ChannelProps } from "@saleor/types";
 import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";

src/components/AppLayout/AppLayout.tsx

@@ -1,5 +1,4 @@
 import LinearProgress from "@material-ui/core/LinearProgress";
-import { makeStyles, Theme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { createConfigurationMenu } from "@saleor/configuration";
 import useAppState from "@saleor/hooks/useAppState";
@@ -7,6 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useTheme from "@saleor/hooks/useTheme";
 import useUser from "@saleor/hooks/useUser";
 import { staffMemberDetailsUrl } from "@saleor/staff/urls";
+import { makeStyles, SaleorTheme } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -127,7 +127,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const [appState, dispatchAppState] = useAppState();
   const { location } = useRouter();
   const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
-  const isMdUp = useMediaQuery((theme: Theme) => theme.breakpoints.up("md"));
+  const isMdUp = useMediaQuery((theme: SaleorTheme) =>
+    theme.breakpoints.up("md")
+  );
   const [docked, setDocked] = React.useState(true);
   const {
     availableChannels,

src/components/AppLayout/MenuList.tsx

@@ -1,9 +1,9 @@
 import configureIcon from "@assets/images/menu-configure-icon.svg";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import { User } from "@saleor/fragments/types/User";
 import useTheme from "@saleor/hooks/useTheme";
 import { sectionNames } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";

src/components/AppLayout/MenuNested.tsx

@@ -1,9 +1,9 @@
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
 import Hidden from "@material-ui/core/Hidden";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import useTheme from "@saleor/hooks/useTheme";
 import { createHref } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";

src/components/AppLayout/ResponsiveDrawer.tsx

@@ -1,74 +0,0 @@
-import Drawer from "@material-ui/core/Drawer";
-import Hidden from "@material-ui/core/Hidden";
-import { makeStyles } from "@material-ui/core/styles";
-import React from "react";
-
-import {
-  drawerWidth,
-  drawerWidthExpanded,
-  drawerWidthExpandedMobile
-} from "./consts";
-
-const useStyles = makeStyles(
-  theme => ({
-    drawerDesktop: {
-      backgroundColor: theme.palette.background.paper,
-      border: "none",
-      height: "100vh",
-      overflow: "visible",
-      padding: 0,
-      position: "fixed" as "fixed",
-      transition: "width 0.3s ease",
-      width: drawerWidthExpanded
-    },
-    drawerDesktopSmall: {
-      overflow: "visible",
-      transition: "width 0.2s ease",
-      width: drawerWidth
-    },
-    drawerMobile: {
-      width: drawerWidthExpandedMobile
-    }
-  }),
-  { name: "ResponsiveDrawer" }
-);
-
-interface ResponsiveDrawerProps {
-  children?: React.ReactNode;
-  open: boolean;
-  small: boolean;
-  onClose?();
-}
-
-const ResponsiveDrawer: React.FC<ResponsiveDrawerProps> = props => {
-  const { children, onClose, open, small } = props;
-
-  const classes = useStyles(props);
-
-  return (
-    <>
-      <Hidden smDown>
-        <Drawer
-          variant="persistent"
-          open
-          classes={{
-            paper: small ? classes.drawerDesktop : classes.drawerDesktopSmall
-          }}
-        >
-          {children}
-        </Drawer>
-      </Hidden>
-      <Hidden mdUp>
-        <Drawer
-          variant="temporary"
-          onClose={onClose}
-          open={open}
-          classes={{ paper: classes.drawerMobile }}
-        >
-          {children}
-        </Drawer>
-      </Hidden>
-    </>
-  );
-};
-export default ResponsiveDrawer;

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -5,7 +5,6 @@ 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 makeStyles from "@material-ui/core/styles/makeStyles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -25,6 +24,7 @@ import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { maybe, renderCollection } from "@saleor/misc";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -4,7 +4,6 @@ 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 { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -13,6 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroller";

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -4,7 +4,6 @@ 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 { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -20,6 +19,7 @@ import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroller";

src/components/Attributes/Attributes.tsx

@@ -1,7 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import { AttributeReference } from "@saleor/attributes/utils/data";
@@ -17,6 +16,7 @@ import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFr
 import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
+import { makeStyles } from "@saleor/theme";
 import { ReorderEvent } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,

src/components/Attributes/BasicAttributeRow.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Grid from "@saleor/components/Grid";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/Attributes/ExtendedAttributeRow.tsx

@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Grid from "@saleor/components/Grid";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -1,10 +1,10 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
 import MenuItem from "@material-ui/core/MenuItem";
 import Paper from "@material-ui/core/Paper";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import ArrowBack from "@material-ui/icons/ArrowBack";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import Downshift from "downshift";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/CardMenu/CardMenu.tsx

@@ -5,8 +5,8 @@ import MenuItem from "@material-ui/core/MenuItem";
 import MenuList from "@material-ui/core/MenuList";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import { makeStyles } from "@material-ui/core/styles";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const ITEM_HEIGHT = 48;

src/components/CardSpacer.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/CardTitle/CardTitle.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ChannelsAvailability/styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/ChannelsAvailabilityContent/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/ChannelsAvailabilityDropdown/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 export const useStyles = makeStyles(
   theme => ({

src/components/Chip/Chip.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } 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";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ColumnPicker/ColumnPicker.tsx

@@ -2,8 +2,8 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import Grow from "@material-ui/core/Grow";
 import Popper from "@material-ui/core/Popper";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import { makeStyles } from "@saleor/theme";
 import { toggle } from "@saleor/utils/lists";
 import React from "react";
 

src/components/ColumnPicker/ColumnPickerButton.tsx

@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button";
 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 "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -2,10 +2,10 @@ 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 makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import useElementScroll from "@saleor/hooks/useElementScroll";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import { isSelected } from "@saleor/utils/lists";
 import classNames from "classnames";

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Grid from "@saleor/components/Grid";
@@ -10,6 +9,7 @@ import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragme
 import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
 import { WarehouseErrorFragment } from "@saleor/fragments/types/WarehouseErrorFragment";
 import { ChangeEvent } from "@saleor/hooks/useForm";
+import { makeStyles } from "@saleor/theme";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import getShopErrorMessage from "@saleor/utils/errors/shop";

src/components/CompanyAddressInput/CompanyAddressInput.tsx

@@ -1,6 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ConfirmButton/ConfirmButton.tsx

@@ -1,14 +1,14 @@
 import Button, { ButtonProps } from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import {
-  createStyles,
-  Theme,
-  WithStyles,
-  withStyles
-} from "@material-ui/core/styles";
 import CheckIcon from "@material-ui/icons/Check";
 import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
 import { buttonMessages } from "@saleor/intl";
+import {
+  createStyles,
+  SaleorTheme,
+  WithStyles,
+  withStyles
+} from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -19,7 +19,7 @@ export type ConfirmButtonTransitionState =
   | "error"
   | "default";
 
-const styles = (theme: Theme) =>
+const styles = (theme: SaleorTheme) =>
   createStyles({
     error: {
       "&:hover": {

src/components/Container.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/CountryList/CountryList.tsx

@@ -2,7 +2,6 @@ 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 { makeStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -12,6 +11,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { CountryFragment } from "@saleor/fragments/types/CountryFragment";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/CreatorSteps/CreatorSteps.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/EditableTableCell/EditableTableCell.tsx

@@ -1,10 +1,10 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } 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";
 import useForm from "@saleor/hooks/useForm";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ErrorPage/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import notFoundImage from "@assets/images/what.svg";
 import Button from "@material-ui/core/Button";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ExternalLink/ExternalLink.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/Filter/Filter.tsx

@@ -2,9 +2,9 @@ import ButtonBase from "@material-ui/core/ButtonBase";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import Grow from "@material-ui/core/Grow";
 import Popper from "@material-ui/core/Popper";
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/Filter/FilterAutocompleteField.tsx

@@ -1,7 +1,7 @@
 import FormControlLabel from "@material-ui/core/FormControlLabel";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import { toggle } from "@saleor/utils/lists";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/Filter/FilterContent.tsx

@@ -4,10 +4,10 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Paper from "@material-ui/core/Paper";
 import Radio from "@material-ui/core/Radio";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, IntlShape, useIntl } from "react-intl";

src/components/Filter/FilterOptionField.tsx

@@ -1,6 +1,6 @@
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Radio from "@material-ui/core/Radio";
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 import { toggle } from "@saleor/utils/lists";
 import classNames from "classnames";
 import React from "react";

src/components/FilterBar/FilterBar.tsx

@@ -1,5 +1,5 @@
 import Button from "@material-ui/core/Button";
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/FormSpacer.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/Grid/Grid.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/Hr.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/IconButtonTableCell/IconButtonTableCell.tsx

@@ -1,6 +1,6 @@
 import IconButton from "@material-ui/core/IconButton";
-import { makeStyles } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ImageUpload/ImageUpload.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -5,9 +5,9 @@ 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 { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/Link.tsx

@@ -1,11 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
-import { ITheme } from "@saleor/theme";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 
 const useStyles = makeStyles(
-  (theme: ITheme) => ({
+  theme => ({
     primary: {
       color: theme.palette.textHighlighted.active
     },

src/components/LinkChoice/LinkChoice.tsx

@@ -3,9 +3,9 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import { FormChange } from "@saleor/hooks/useForm";
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import { codes } from "keycode";
 import React from "react";

src/components/ListField/ListField.tsx

@@ -1,11 +1,11 @@
 import Button from "@material-ui/core/Button";
+import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
 import {
   createStyles,
-  Theme,
+  SaleorTheme,
   WithStyles,
   withStyles
-} from "@material-ui/core/styles";
+} from "@saleor/theme";
-import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -16,7 +16,7 @@ interface ListFieldState {
   value: string;
 }
 
-const styles = (theme: Theme) =>
+const styles = (theme: SaleorTheme) =>
   createStyles({
     chip: {
       marginBottom: theme.spacing(1)

src/components/MediaTile/MediaTile.tsx

@@ -1,8 +1,8 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-import { makeStyles } from "@material-ui/core/styles";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/Metadata/styles.ts

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 
 const useStyles = makeStyles(
   theme => {

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -1,11 +1,11 @@
 import IconButton from "@material-ui/core/IconButton";
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import Debounce, { DebounceProps } from "@saleor/components/Debounce";
 import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
 import { filter } from "fuzzaldrin";

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -2,13 +2,13 @@ import chevronDown from "@assets/images/ChevronDown.svg";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import MenuItem from "@material-ui/core/MenuItem";
 import Paper from "@material-ui/core/Paper";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import AddIcon from "@material-ui/icons/Add";
 import Checkbox from "@saleor/components/Checkbox";
 import useElementScroll, {
   isScrolledToBottom
 } from "@saleor/hooks/useElementScroll";
+import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import { GetItemPropsOptions } from "downshift";

src/components/MultiSelectField/MultiSelectField.tsx

@@ -4,7 +4,7 @@ import FormHelperText from "@material-ui/core/FormHelperText";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select, { SelectProps } from "@material-ui/core/Select";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/components/Navigator/Navigator.tsx

@@ -1,11 +1,11 @@
 import Fade from "@material-ui/core/Fade";
 import Modal from "@material-ui/core/Modal";
 import Paper from "@material-ui/core/Paper";
-import makeStyles from "@material-ui/core/styles/makeStyles";
-import useTheme from "@material-ui/core/styles/useTheme";
 import { APP_VERSION } from "@saleor/config";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { useTheme } from "@saleor/theme";
+import { makeStyles } from "@saleor/theme";
 import Downshift from "downshift";
 import hotkeys from "hotkeys-js";
 import React from "react";

src/components/Navigator/NavigatorInput.tsx

@@ -1,4 +1,4 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/Navigator/NavigatorSection.tsx

@@ -1,6 +1,6 @@
 import MenuItem from "@material-ui/core/MenuItem";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import { GetItemPropsOptions } from "downshift";
 import React from "react";
 

src/components/NavigatorButton/NavigatorButton.tsx

@@ -3,7 +3,7 @@ import Grow from "@material-ui/core/Grow";
 import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import ReactSVG from "react-inlinesvg";

src/components/NotFoundPage/NotFoundPage.tsx

@@ -1,7 +1,7 @@
 import notFoundImage from "@assets/images/not-found-404.svg";
 import Button from "@material-ui/core/Button";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";

src/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 import ExtendedPageHeader from "../ExtendedPageHeader";

src/components/PhoneField/PhoneField.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import SingleSelectField from "@saleor/components/SingleSelectField";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/PriceField/PriceField.tsx

@@ -1,7 +1,7 @@
 import { InputProps } from "@material-ui/core/Input";
 import InputAdornment from "@material-ui/core/InputAdornment";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/components/RadioGroupField/RadioGroupField.tsx

@@ -5,7 +5,7 @@ import FormLabel from "@material-ui/core/FormLabel";
 import MenuItem from "@material-ui/core/MenuItem";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/RadioSwitchField/RadioSwitchField.tsx

@@ -2,7 +2,7 @@ import FormControl from "@material-ui/core/FormControl";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -1,5 +1,5 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import Table from "@material-ui/core/Table";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/RichTextEditor/styles.ts

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
+import { makeStyles } from "@saleor/theme";
 
 const useStyles = makeStyles(
   theme => {

src/components/RowNumberSelect/RowNumberSelect.tsx

@@ -1,6 +1,6 @@
 import MenuItem from "@material-ui/core/MenuItem";
 import Select from "@material-ui/core/Select";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -45,8 +45,8 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
   settings,
   onChange
 }) => {
-  const theme = useTheme();
+  const classes = useStyles({});
-  const classes = useStyles({ theme });
+
   return (
     <div className={className}>
       <span className={classes.label}>

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Portal from "@material-ui/core/Portal";
-import { makeStyles } from "@material-ui/core/styles";
 import useWindowScroll from "@saleor/hooks/useWindowScroll";
 import { buttonMessages } from "@saleor/intl";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/SearchBar/SearchBar.tsx

@@ -1,5 +1,5 @@
 import Button from "@material-ui/core/Button";
-import makeStyles from "@material-ui/core/styles/makeStyles";
+import { makeStyles } from "@saleor/theme";
 import { SearchPageProps, TabPageProps } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/SearchBar/SearchInput.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@saleor/theme";
 import React from "react";
 
 import { SearchPageProps } from "../../types";

src/components/SeoForm/SeoForm.tsx

@@ -1,12 +1,12 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
 import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { makeStyles } from "@saleor/theme";
 import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors";
 import getPageErrorMessage from "@saleor/utils/errors/page";
 import classNames from "classnames";

src/components/SideBar/ExpandButton.tsx

@@ -1,6 +1,6 @@
 import { ButtonProps } from "@material-ui/core/Button";
-import makeStyles from "@material-ui/core/styles/makeStyles";
 import ArrowIcon from "@material-ui/icons/ArrowBack";
+import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";