diff --git a/src/Baseline.tsx b/src/Baseline.tsx index db200dda8..7e4ca2185 100644 --- a/src/Baseline.tsx +++ b/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')", diff --git a/src/apps/components/AppDetailsSettingsPage/styles.ts b/src/apps/components/AppDetailsSettingsPage/styles.ts index cf6f42e4d..75cddc7bd 100644 --- a/src/apps/components/AppDetailsSettingsPage/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/AppInstallErrorPage/styles.ts b/src/apps/components/AppInstallErrorPage/styles.ts index 6232b920f..d19a783a1 100644 --- a/src/apps/components/AppInstallErrorPage/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/CustomAppDefaultToken/styles.ts b/src/apps/components/CustomAppDefaultToken/styles.ts index 1f63c79ef..47c87521b 100644 --- a/src/apps/components/CustomAppDefaultToken/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/CustomAppTokens/styles.ts b/src/apps/components/CustomAppTokens/styles.ts index 42231fff0..583c09877 100644 --- a/src/apps/components/CustomAppTokens/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/DeactivatedText/styles.ts b/src/apps/components/DeactivatedText/styles.ts index 0c1e03ef2..863b6cdd0 100644 --- a/src/apps/components/DeactivatedText/styles.ts +++ b/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 => ({ diff --git a/src/apps/components/TokenCreateDialog/styles.ts b/src/apps/components/TokenCreateDialog/styles.ts index 4ba0e9333..b57ffa77a 100644 --- a/src/apps/components/TokenCreateDialog/styles.ts +++ b/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 => ({ diff --git a/src/apps/styles.ts b/src/apps/styles.ts index 9d6e83224..b4798ea6c 100644 --- a/src/apps/styles.ts +++ b/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 => ({ diff --git a/src/attributes/components/AttributeDetails/AttributeDetails.tsx b/src/attributes/components/AttributeDetails/AttributeDetails.tsx index 83f204f0e..53c59fa88 100644 --- a/src/attributes/components/AttributeDetails/AttributeDetails.tsx +++ b/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 diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx index 211c374ce..cf0b255ab 100644 --- a/src/attributes/components/AttributeList/AttributeList.tsx +++ b/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"; diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx index 25292d894..b6eb1f071 100644 --- a/src/attributes/components/AttributeValues/AttributeValues.tsx +++ b/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"; diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx index e9d148b6a..44e86b53b 100644 --- a/src/auth/components/Layout.tsx +++ b/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"; diff --git a/src/auth/components/LoginLoading/LoginLoading.tsx b/src/auth/components/LoginLoading/LoginLoading.tsx index 63ecfae8d..b30e04e18 100644 --- a/src/auth/components/LoginLoading/LoginLoading.tsx +++ b/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( diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 1cda9ef13..17960d317 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/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"; diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index ba9966675..f11b70d24 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/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"; diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx index 7502ec631..4d9252ca7 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/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"; diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 5cc95cb26..b49ae56f2 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/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"; diff --git a/src/categories/components/CategoryBackground/CategoryBackground.tsx b/src/categories/components/CategoryBackground/CategoryBackground.tsx index 849aa3bff..e9a4b66cd 100644 --- a/src/categories/components/CategoryBackground/CategoryBackground.tsx +++ b/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"; diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx index 9b1282d7e..43618a508 100644 --- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx +++ b/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"; diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx index 6b4a55f2d..98ab10475 100644 --- a/src/categories/components/CategoryList/CategoryList.tsx +++ b/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"; diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index 7fdcd6313..f1fa0c32a 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/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"; diff --git a/src/channels/components/styles.ts b/src/channels/components/styles.ts index b58f28de2..20f4733ab 100644 --- a/src/channels/components/styles.ts +++ b/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 => ({ diff --git a/src/channels/pages/ChannelsListPage/styles.ts b/src/channels/pages/ChannelsListPage/styles.ts index 1e8c98126..d7e7866f1 100644 --- a/src/channels/pages/ChannelsListPage/styles.ts +++ b/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 => ({ diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index 502acbaf9..251320f52 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/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"; diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index fd8cf3aea..ccb7a43d2 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/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"; diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index 228474ef8..1118e013e 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/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"; diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 59843aeae..da770eeca 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/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"; diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx index 6a2a18562..6e66585ce 100644 --- a/src/components/AccountPermissions/AccountPermissions.tsx +++ b/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"; diff --git a/src/components/ActionDialog/DialogButtons.tsx b/src/components/ActionDialog/DialogButtons.tsx index e7b5c20bd..0ee246412 100644 --- a/src/components/ActionDialog/DialogButtons.tsx +++ b/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"; diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx index 136f5dfef..287881a41 100644 --- a/src/components/AddressEdit/AddressEdit.tsx +++ b/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"; diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx index 686deea8e..37271f291 100644 --- a/src/components/AppHeader/AppHeader.tsx +++ b/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"; diff --git a/src/components/AppLayout/AppChannelSelect.tsx b/src/components/AppLayout/AppChannelSelect.tsx index 0bdfeb5f3..6760b7fde 100644 --- a/src/components/AppLayout/AppChannelSelect.tsx +++ b/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"; diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 11ee9ce45..ea1495d65 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/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 = ({ 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, diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx index 05f6fa971..6ded8bc72 100644 --- a/src/components/AppLayout/MenuList.tsx +++ b/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"; diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx index 0a64b1892..26f88d3db 100644 --- a/src/components/AppLayout/MenuNested.tsx +++ b/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"; diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx deleted file mode 100644 index 49baa1e7f..000000000 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ /dev/null @@ -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 = props => { - const { children, onClose, open, small } = props; - - const classes = useStyles(props); - - return ( - <> - - - {children} - - - - - {children} - - - - ); -}; -export default ResponsiveDrawer; diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx index b484d64c6..b511bb5e0 100644 --- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx +++ b/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"; diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx index 23b3e29b4..474d0f06c 100644 --- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx +++ b/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"; diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx index d6ac75be9..e51ae5ecf 100644 --- a/src/components/AssignProductDialog/AssignProductDialog.tsx +++ b/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"; diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx index aada001ec..2084e75d6 100644 --- a/src/components/Attributes/Attributes.tsx +++ b/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, diff --git a/src/components/Attributes/BasicAttributeRow.tsx b/src/components/Attributes/BasicAttributeRow.tsx index ee0bb61dc..6f2665ffe 100644 --- a/src/components/Attributes/BasicAttributeRow.tsx +++ b/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( diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx index 1bc9ac70b..531a59c0c 100644 --- a/src/components/Attributes/ExtendedAttributeRow.tsx +++ b/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( diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx index f8f0b165c..5f0f86c33 100644 --- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx +++ b/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"; diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index 647c9fec2..6aa33e671 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/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; diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx index 9b084a10c..ab3955efa 100644 --- a/src/components/CardSpacer.tsx +++ b/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( diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx index 15dd0f333..63e9ea7d0 100644 --- a/src/components/CardTitle/CardTitle.tsx +++ b/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"; diff --git a/src/components/ChannelsAvailability/styles.ts b/src/components/ChannelsAvailability/styles.ts index 31cc76f5a..07d7a268b 100644 --- a/src/components/ChannelsAvailability/styles.ts +++ b/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 => ({ diff --git a/src/components/ChannelsAvailabilityContent/styles.ts b/src/components/ChannelsAvailabilityContent/styles.ts index 4bb4d7d9b..67e4bef06 100644 --- a/src/components/ChannelsAvailabilityContent/styles.ts +++ b/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 => ({ diff --git a/src/components/ChannelsAvailabilityDropdown/styles.ts b/src/components/ChannelsAvailabilityDropdown/styles.ts index 4fd53e7e4..6fe419d13 100644 --- a/src/components/ChannelsAvailabilityDropdown/styles.ts +++ b/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 => ({ diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 5198817da..c90ec80ce 100644 --- a/src/components/Chip/Chip.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx index d49a7144b..bb34ffa64 100644 --- a/src/components/ColumnPicker/ColumnPicker.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPickerButton.tsx b/src/components/ColumnPicker/ColumnPickerButton.tsx index b4778d0d9..a6c962b2f 100644 --- a/src/components/ColumnPicker/ColumnPickerButton.tsx +++ b/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"; diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index d4f5b4929..4f42c6b50 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/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"; diff --git a/src/components/CompanyAddressInput/CompanyAddressForm.tsx b/src/components/CompanyAddressInput/CompanyAddressForm.tsx index e43752424..0c24ec2e1 100644 --- a/src/components/CompanyAddressInput/CompanyAddressForm.tsx +++ b/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"; diff --git a/src/components/CompanyAddressInput/CompanyAddressInput.tsx b/src/components/CompanyAddressInput/CompanyAddressInput.tsx index 4df8709ca..fecc51166 100644 --- a/src/components/CompanyAddressInput/CompanyAddressInput.tsx +++ b/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"; diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx index 981131dbb..99f13eef0 100644 --- a/src/components/ConfirmButton/ConfirmButton.tsx +++ b/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": { diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 3f4e5533b..19c9aaaaf 100644 --- a/src/components/Container.tsx +++ b/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"; diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index b217dbe7f..b7820f5ae 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/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"; diff --git a/src/components/CreatorSteps/CreatorSteps.tsx b/src/components/CreatorSteps/CreatorSteps.tsx index d7be7c4a3..a35e35b76 100644 --- a/src/components/CreatorSteps/CreatorSteps.tsx +++ b/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"; diff --git a/src/components/EditableTableCell/EditableTableCell.tsx b/src/components/EditableTableCell/EditableTableCell.tsx index 516df9499..3a2206a80 100644 --- a/src/components/EditableTableCell/EditableTableCell.tsx +++ b/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"; diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx index b6447ba8b..cf0373516 100644 --- a/src/components/ErrorPage/ErrorPage.tsx +++ b/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"; diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx index 8655c5e73..1bfd85d15 100644 --- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx +++ b/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"; diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx index 53cbe8480..f7322edbb 100644 --- a/src/components/ExternalLink/ExternalLink.tsx +++ b/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( diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index b5dd8ad76..694ca6e89 100644 --- a/src/components/Filter/Filter.tsx +++ b/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"; diff --git a/src/components/Filter/FilterAutocompleteField.tsx b/src/components/Filter/FilterAutocompleteField.tsx index 914ca1264..b561d59c2 100644 --- a/src/components/Filter/FilterAutocompleteField.tsx +++ b/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"; diff --git a/src/components/Filter/FilterContent.tsx b/src/components/Filter/FilterContent.tsx index 7d8faf12c..c441184a1 100644 --- a/src/components/Filter/FilterContent.tsx +++ b/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"; diff --git a/src/components/Filter/FilterOptionField.tsx b/src/components/Filter/FilterOptionField.tsx index 7e208a631..bca691a73 100644 --- a/src/components/Filter/FilterOptionField.tsx +++ b/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"; diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx index 2fc7dd187..1d85f1ac1 100644 --- a/src/components/FilterBar/FilterBar.tsx +++ b/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"; diff --git a/src/components/FormSpacer.tsx b/src/components/FormSpacer.tsx index b9027fdb3..c297265ef 100644 --- a/src/components/FormSpacer.tsx +++ b/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( diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index aec58f63a..20e7fce83 100644 --- a/src/components/Grid/Grid.tsx +++ b/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"; diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx index f873a7f5f..21e879869 100644 --- a/src/components/Hr.tsx +++ b/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"; diff --git a/src/components/IconButtonTableCell/IconButtonTableCell.tsx b/src/components/IconButtonTableCell/IconButtonTableCell.tsx index e135ee3e3..749e6d2fe 100644 --- a/src/components/IconButtonTableCell/IconButtonTableCell.tsx +++ b/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"; diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx index 65530d2fe..c5c7f2a03 100644 --- a/src/components/ImageUpload/ImageUpload.tsx +++ b/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"; diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index f6214e818..0c53b9ab1 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/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"; diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 264386bcd..7fa855df0 100644 --- a/src/components/Link.tsx +++ b/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 }, diff --git a/src/components/LinkChoice/LinkChoice.tsx b/src/components/LinkChoice/LinkChoice.tsx index 3e1824929..9eb79ed0f 100644 --- a/src/components/LinkChoice/LinkChoice.tsx +++ b/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"; diff --git a/src/components/ListField/ListField.tsx b/src/components/ListField/ListField.tsx index c0e89814c..e298e3519 100644 --- a/src/components/ListField/ListField.tsx +++ b/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"; -import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField"; +} from "@saleor/theme"; 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) diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx index 109242a9d..f242dd2b4 100644 --- a/src/components/MediaTile/MediaTile.tsx +++ b/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"; diff --git a/src/components/Metadata/styles.ts b/src/components/Metadata/styles.ts index ccb85b400..c45f08b12 100644 --- a/src/components/Metadata/styles.ts +++ b/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 => { diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 2cee26776..f5930b3bc 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/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"; diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index a68f71221..9487ef55e 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/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"; diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx index 6548ff0b9..49c43d583 100644 --- a/src/components/MultiSelectField/MultiSelectField.tsx +++ b/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"; diff --git a/src/components/Navigator/Navigator.tsx b/src/components/Navigator/Navigator.tsx index 203c39b5e..fd39dfc67 100644 --- a/src/components/Navigator/Navigator.tsx +++ b/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"; diff --git a/src/components/Navigator/NavigatorInput.tsx b/src/components/Navigator/NavigatorInput.tsx index 9dd9d57e3..6d63fa844 100644 --- a/src/components/Navigator/NavigatorInput.tsx +++ b/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"; diff --git a/src/components/Navigator/NavigatorSection.tsx b/src/components/Navigator/NavigatorSection.tsx index 40cb73a67..c2e4037bd 100644 --- a/src/components/Navigator/NavigatorSection.tsx +++ b/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"; diff --git a/src/components/NavigatorButton/NavigatorButton.tsx b/src/components/NavigatorButton/NavigatorButton.tsx index 5e3c07341..014acc27e 100644 --- a/src/components/NavigatorButton/NavigatorButton.tsx +++ b/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"; diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx index 6de11eaa6..2ed765568 100644 --- a/src/components/NotFoundPage/NotFoundPage.tsx +++ b/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"; diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 15ee9fd84..028642851 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/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"; diff --git a/src/components/PhoneField/PhoneField.tsx b/src/components/PhoneField/PhoneField.tsx index efa90e8d7..5525d6209 100644 --- a/src/components/PhoneField/PhoneField.tsx +++ b/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( diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx index ed70c88fa..3bb72e5e0 100644 --- a/src/components/PriceField/PriceField.tsx +++ b/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"; diff --git a/src/components/RadioGroupField/RadioGroupField.tsx b/src/components/RadioGroupField/RadioGroupField.tsx index 0e00b9e29..0aa23339f 100644 --- a/src/components/RadioGroupField/RadioGroupField.tsx +++ b/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"; diff --git a/src/components/RadioSwitchField/RadioSwitchField.tsx b/src/components/RadioSwitchField/RadioSwitchField.tsx index b0bf20725..ce76176e5 100644 --- a/src/components/RadioSwitchField/RadioSwitchField.tsx +++ b/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"; diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx index 8538ab6b1..ec01ecebb 100644 --- a/src/components/ResponsiveTable/ResponsiveTable.tsx +++ b/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( diff --git a/src/components/RichTextEditor/styles.ts b/src/components/RichTextEditor/styles.ts index 2436bf2da..5a7936aa6 100644 --- a/src/components/RichTextEditor/styles.ts +++ b/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 => { diff --git a/src/components/RowNumberSelect/RowNumberSelect.tsx b/src/components/RowNumberSelect/RowNumberSelect.tsx index 55e7a473f..e3187d27d 100644 --- a/src/components/RowNumberSelect/RowNumberSelect.tsx +++ b/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 = ({ settings, onChange }) => { - const theme = useTheme(); - const classes = useStyles({ theme }); + const classes = useStyles({}); + return (
diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 279436b79..d843c4bc3 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/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"; diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 4493b62c1..741fce316 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/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"; diff --git a/src/components/SearchBar/SearchInput.tsx b/src/components/SearchBar/SearchInput.tsx index ead6b46eb..c3d531d3e 100644 --- a/src/components/SearchBar/SearchInput.tsx +++ b/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"; diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx index 6959d7aac..e7561dba0 100644 --- a/src/components/SeoForm/SeoForm.tsx +++ b/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"; diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx index 379d6be95..1ae72717b 100644 --- a/src/components/SideBar/ExpandButton.tsx +++ b/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"; diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 77462c507..e38b7d371 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -2,9 +2,9 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener"; 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 Typography from "@material-ui/core/Typography"; import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 77b4f3ee4..1505065f4 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -1,11 +1,11 @@ import logoLight from "@assets/images/logo-sidebar-light.svg"; import configurationIcon from "@assets/images/menu-configure-icon.svg"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import { configurationMenuUrl } from "@saleor/configuration"; import { User } from "@saleor/fragments/types/User"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; diff --git a/src/components/SideBarDrawer/styles.ts b/src/components/SideBarDrawer/styles.ts index 92cda2a00..af1164cce 100644 --- a/src/components/SideBarDrawer/styles.ts +++ b/src/components/SideBarDrawer/styles.ts @@ -1,4 +1,4 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; +import { makeStyles } from "@saleor/theme"; const useStyles = makeStyles( theme => ({ diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 90d97455c..ca9788019 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -1,7 +1,7 @@ import { InputProps } from "@material-ui/core/Input"; -import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; import Downshift, { ControllerStateAndHelpers } from "downshift"; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 0b3999b88..3e9460bbf 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -2,12 +2,12 @@ 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 Add from "@material-ui/icons/Add"; 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"; diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx index 351b2bd55..0e35b054a 100644 --- a/src/components/SingleSelectField/SingleSelectField.tsx +++ b/src/components/SingleSelectField/SingleSelectField.tsx @@ -5,7 +5,7 @@ import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import OutlinedInput from "@material-ui/core/OutlinedInput"; import Select, { SelectProps } from "@material-ui/core/Select"; -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"; diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx index 4cefd2a04..0af6740d7 100644 --- a/src/components/Skeleton.tsx +++ b/src/components/Skeleton.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"; diff --git a/src/components/SortableChip/SortableChip.tsx b/src/components/SortableChip/SortableChip.tsx index c78900d3c..bd987ed98 100644 --- a/src/components/SortableChip/SortableChip.tsx +++ b/src/components/SortableChip/SortableChip.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles"; 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"; import { SortableElement, SortableElementProps } from "react-sortable-hoc"; diff --git a/src/components/SortableChip/SortableHandle.tsx b/src/components/SortableChip/SortableHandle.tsx index 7bfad44d4..34786b38f 100644 --- a/src/components/SortableChip/SortableHandle.tsx +++ b/src/components/SortableChip/SortableHandle.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles"; import Draggable from "@saleor/icons/Draggable"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; diff --git a/src/components/SortableChipsField/SortableChipsField.tsx b/src/components/SortableChipsField/SortableChipsField.tsx index e580b082d..2f621f71e 100644 --- a/src/components/SortableChipsField/SortableChipsField.tsx +++ b/src/components/SortableChipsField/SortableChipsField.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 { ReorderAction } from "@saleor/types"; import React from "react"; import { SortableContainerProps } from "react-sortable-hoc"; diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx index 40997efd8..bc3dcef78 100644 --- a/src/components/SortableTable/SortableHandle.tsx +++ b/src/components/SortableTable/SortableHandle.tsx @@ -1,6 +1,6 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; import TableCell from "@material-ui/core/TableCell"; import Draggable from "@saleor/icons/Draggable"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc"; diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx index 4a8d715c8..19b12be81 100644 --- a/src/components/SortableTable/SortableTableBody.tsx +++ b/src/components/SortableTable/SortableTableBody.tsx @@ -1,5 +1,5 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; import TableBody, { TableBodyProps } from "@material-ui/core/TableBody"; +import { makeStyles } from "@saleor/theme"; import { ReorderAction } from "@saleor/types"; import React from "react"; import { SortableContainer } from "react-sortable-hoc"; diff --git a/src/components/SquareButton/SquareButton.tsx b/src/components/SquareButton/SquareButton.tsx index 5e69a2fd9..a66edc14b 100644 --- a/src/components/SquareButton/SquareButton.tsx +++ b/src/components/SquareButton/SquareButton.tsx @@ -1,5 +1,5 @@ import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase"; -import makeStyles from "@material-ui/core/styles/makeStyles"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/StatusChip/StatusChip.tsx b/src/components/StatusChip/StatusChip.tsx index 899c40ae8..599356837 100644 --- a/src/components/StatusChip/StatusChip.tsx +++ b/src/components/StatusChip/StatusChip.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"; diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx index 22f301ebb..83e7124db 100644 --- a/src/components/StatusLabel/StatusLabel.tsx +++ b/src/components/StatusLabel/StatusLabel.tsx @@ -1,7 +1,7 @@ import grey from "@material-ui/core/colors/grey"; import yellow from "@material-ui/core/colors/yellow"; -import { makeStyles } from "@material-ui/core/styles"; import Typography, { TypographyProps } from "@material-ui/core/Typography"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index b13d3cf56..6fb2fca0e 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.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"; diff --git a/src/components/Tab/TabContainer.tsx b/src/components/Tab/TabContainer.tsx index f4ed75019..7f541f9ed 100644 --- a/src/components/Tab/TabContainer.tsx +++ b/src/components/Tab/TabContainer.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; import React from "react"; export interface TabContainerProps { diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx index 5e1a16294..39460d3df 100644 --- a/src/components/TableCellAvatar/TableCellAvatar.tsx +++ b/src/components/TableCellAvatar/TableCellAvatar.tsx @@ -1,7 +1,7 @@ import Avatar from "@material-ui/core/Avatar"; -import { makeStyles } from "@material-ui/core/styles"; import TableCell, { TableCellProps } from "@material-ui/core/TableCell"; import Cached from "@material-ui/icons/Cached"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx index 609bb49b1..aa46cf34c 100644 --- a/src/components/TableCellHeader/TableCellHeader.tsx +++ b/src/components/TableCellHeader/TableCellHeader.tsx @@ -1,5 +1,5 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; import TableCell, { TableCellProps } from "@material-ui/core/TableCell"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableFilter/FilterTab.tsx b/src/components/TableFilter/FilterTab.tsx index 21547a0ee..4e2b5283b 100644 --- a/src/components/TableFilter/FilterTab.tsx +++ b/src/components/TableFilter/FilterTab.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles"; import Tab from "@material-ui/core/Tab"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; diff --git a/src/components/TableFilter/FilterTabs.tsx b/src/components/TableFilter/FilterTabs.tsx index 66a2f9d75..fea3b21d1 100644 --- a/src/components/TableFilter/FilterTabs.tsx +++ b/src/components/TableFilter/FilterTabs.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles"; import Tabs from "@material-ui/core/Tabs"; +import { makeStyles } from "@saleor/theme"; import React from "react"; const useStyles = makeStyles( diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index da846e74e..340460843 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import TableCell from "@material-ui/core/TableCell"; import MuiTableHead, { @@ -6,6 +5,7 @@ import MuiTableHead, { } from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; 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"; diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx index af5f09e5c..82598f52b 100644 --- a/src/components/TablePagination/TablePagination.tsx +++ b/src/components/TablePagination/TablePagination.tsx @@ -1,9 +1,9 @@ import { IconButtonProps } from "@material-ui/core/IconButton"; -import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import Toolbar from "@material-ui/core/Toolbar"; import RowNumberSelect from "@saleor/components/RowNumberSelect"; import { maybe } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { ListSettings } from "../../types"; diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx index 0fd037f77..43a7f7673 100644 --- a/src/components/TablePagination/TablePaginationActions.tsx +++ b/src/components/TablePagination/TablePaginationActions.tsx @@ -1,9 +1,9 @@ import IconButton from "@material-ui/core/IconButton"; -import { makeStyles, useTheme as useMuiTheme } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import ArrowLeft from "@material-ui/icons/ArrowLeft"; import ArrowRight from "@material-ui/icons/ArrowRight"; import useTheme from "@saleor/hooks/useTheme"; +import { makeStyles, useTheme as useSaleorTheme } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; @@ -76,7 +76,7 @@ export const TablePaginationActions: React.FC = pro const classes = useStyles(props); const { isDark } = useTheme(); - const { direction } = useMuiTheme(); + const { direction } = useSaleorTheme(); return (
diff --git a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx index ef2d82f7d..abf8e6697 100644 --- a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx +++ b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx @@ -4,10 +4,10 @@ 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 TextField, { TextFieldProps } from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import DropdownIcon from "@material-ui/icons/ArrowDropDown"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import MenuToggle from "../MenuToggle"; diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index 128c9b7f7..674cc56f3 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -2,9 +2,9 @@ import Avatar from "@material-ui/core/Avatar"; import Button from "@material-ui/core/Button"; import CardContent from "@material-ui/core/CardContent"; import deepPurple from "@material-ui/core/colors/deepPurple"; -import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import PersonIcon from "@material-ui/icons/Person"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx index 6182bccb9..112fccb2c 100644 --- a/src/components/Timeline/TimelineEvent.tsx +++ b/src/components/Timeline/TimelineEvent.tsx @@ -1,9 +1,9 @@ import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import TimelineEventHeader, { TitleElement } from "./TimelineEventHeader"; diff --git a/src/components/Timeline/TimelineEventHeader.tsx b/src/components/Timeline/TimelineEventHeader.tsx index 4520ef2d9..e1fc50cc1 100644 --- a/src/components/Timeline/TimelineEventHeader.tsx +++ b/src/components/Timeline/TimelineEventHeader.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import useNavigator from "@saleor/hooks/useNavigator"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { DateTime } from "../Date"; diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx index 21e9bbe1f..507edfe32 100644 --- a/src/components/Timeline/TimelineNote.tsx +++ b/src/components/Timeline/TimelineNote.tsx @@ -2,9 +2,9 @@ import Avatar from "@material-ui/core/Avatar"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import * as colors from "@material-ui/core/colors"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import PersonIcon from "@material-ui/icons/Person"; +import { makeStyles } from "@saleor/theme"; import CRC from "crc-32"; import React from "react"; diff --git a/src/components/UserChip/UserChip.tsx b/src/components/UserChip/UserChip.tsx index 488cf3299..d148651ba 100644 --- a/src/components/UserChip/UserChip.tsx +++ b/src/components/UserChip/UserChip.tsx @@ -8,11 +8,11 @@ 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/makeStyles"; import Switch from "@material-ui/core/Switch"; import { User } from "@saleor/fragments/types/User"; import ArrowDropdown from "@saleor/icons/ArrowDropdown"; import { getUserInitials, getUserName } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/VisibilityCard/DateVisibilitySelector.tsx b/src/components/VisibilityCard/DateVisibilitySelector.tsx index 47bd19336..583495d71 100644 --- a/src/components/VisibilityCard/DateVisibilitySelector.tsx +++ b/src/components/VisibilityCard/DateVisibilitySelector.tsx @@ -1,6 +1,6 @@ import closeIcon from "@assets/images/close-thin.svg"; import { Typography } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; import React, { useState } from "react"; import FormSpacer from "../FormSpacer"; diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index 95a163555..597425f87 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; @@ -9,6 +8,7 @@ import Hr from "@saleor/components/Hr"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { ChangeEvent } from "@saleor/hooks/useForm"; +import { makeStyles } from "@saleor/theme"; import { UserError } from "@saleor/types"; import { getFieldError } from "@saleor/utils/errors"; import classNames from "classnames"; diff --git a/src/components/messages/styles.ts b/src/components/messages/styles.ts index d462a93b7..f880b399d 100644 --- a/src/components/messages/styles.ts +++ b/src/components/messages/styles.ts @@ -2,8 +2,8 @@ import errorIcon from "@assets/images/error-icon.svg"; import infoIcon from "@assets/images/info-icon.svg"; import successIcon from "@assets/images/success-icon.svg"; import warningIcon from "@assets/images/warning-icon.svg"; -import { makeStyles } from "@material-ui/core/styles"; import { darken } from "@material-ui/core/styles/colorManipulator"; +import { makeStyles } from "@saleor/theme"; const successColor = "#60DAA0"; const warningColor = "#FFB84E"; diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx index 38b8563f6..d55fdd67d 100644 --- a/src/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.tsx @@ -1,10 +1,10 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import { IconProps } from "@material-ui/core/Icon"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import { User } from "@saleor/fragments/types/User"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx index 5d0e8dddb..15fd0c145 100644 --- a/src/customers/components/CustomerAddress/CustomerAddress.tsx +++ b/src/customers/components/CustomerAddress/CustomerAddress.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 AddressFormatter from "@saleor/components/AddressFormatter"; import CardMenu from "@saleor/components/CardMenu"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx index 3ca004fa4..f82f96fce 100644 --- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx +++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx @@ -3,7 +3,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 { createStyles, WithStyles, withStyles } from "@material-ui/core/styles"; import AddressEdit from "@saleor/components/AddressEdit"; import ConfirmButton, { ConfirmButtonTransitionState @@ -14,6 +13,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; +import { createStyles, WithStyles, withStyles } from "@saleor/theme"; import { AddressInput } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx index e77239552..fdbe09feb 100644 --- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx +++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx @@ -1,10 +1,10 @@ import Button from "@material-ui/core/Button"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import { renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx index a82fbc172..e3c38c128 100644 --- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx +++ b/src/customers/components/CustomerAddresses/CustomerAddresses.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 Typography from "@material-ui/core/Typography"; import AddressFormatter from "@saleor/components/AddressFormatter"; import CardTitle from "@saleor/components/CardTitle"; import { Hr } from "@saleor/components/Hr"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx index 710aa1d2c..686dbe8be 100644 --- a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx +++ b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx @@ -1,12 +1,12 @@ 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 AddressEdit from "@saleor/components/AddressEdit"; import CardTitle from "@saleor/components/CardTitle"; import { FormSpacer } from "@saleor/components/FormSpacer"; import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx index 06fd2da43..9b48d9346 100644 --- a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx +++ b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.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 TextField from "@material-ui/core/TextField"; import CardTitle from "@saleor/components/CardTitle"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import React from "react"; diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx index b916c6c19..5039626c8 100644 --- a/src/customers/components/CustomerDetails/CustomerDetails.tsx +++ b/src/customers/components/CustomerDetails/CustomerDetails.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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; @@ -8,6 +7,7 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import Skeleton from "@saleor/components/Skeleton"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { maybe } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import moment from "moment-timezone"; diff --git a/src/customers/components/CustomerInfo/CustomerInfo.tsx b/src/customers/components/CustomerInfo/CustomerInfo.tsx index c722f49d1..9dfdbd7f2 100644 --- a/src/customers/components/CustomerInfo/CustomerInfo.tsx +++ b/src/customers/components/CustomerInfo/CustomerInfo.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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; @@ -8,6 +7,7 @@ import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import React from "react"; diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx index 160bc7d7b..8b72865ac 100644 --- a/src/customers/components/CustomerList/CustomerList.tsx +++ b/src/customers/components/CustomerList/CustomerList.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"; @@ -11,6 +10,7 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { CustomerListUrlSortField } from "@saleor/customers/urls"; import { getUserName, 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"; diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx index cf9aac9c5..18bd339e9 100644 --- a/src/customers/components/CustomerOrders/CustomerOrders.tsx +++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx @@ -1,6 +1,5 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -11,6 +10,7 @@ import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/customers/components/CustomerStats/CustomerStats.tsx b/src/customers/components/CustomerStats/CustomerStats.tsx index 2623a6c0f..bc92964fc 100644 --- a/src/customers/components/CustomerStats/CustomerStats.tsx +++ b/src/customers/components/CustomerStats/CustomerStats.tsx @@ -1,11 +1,11 @@ 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 { DateTime } from "@saleor/components/Date"; import { Hr } from "@saleor/components/Hr"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx index ddf81ad16..f10ec70f2 100644 --- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx +++ b/src/discounts/components/DiscountCategories/DiscountCategories.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"; @@ -13,6 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; 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"; diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx index 4d61dfd7b..255352651 100644 --- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx +++ b/src/discounts/components/DiscountCollections/DiscountCollections.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"; @@ -13,6 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; 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"; diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx index 9a12c61f3..dfcdcb125 100644 --- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx +++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx @@ -3,7 +3,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 ResponsiveTable from "@saleor/components/ResponsiveTable"; // tslint:disable no-submodule-imports import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { filter } from "fuzzaldrin"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx index 9e94099b9..3ac72f735 100644 --- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx +++ b/src/discounts/components/DiscountProducts/DiscountProducts.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"; diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx index d2a1d7e43..8040121d4 100644 --- a/src/discounts/components/SaleList/SaleList.tsx +++ b/src/discounts/components/SaleList/SaleList.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 TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { SaleListUrlSortField } from "@saleor/discounts/urls"; import { maybe, renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types"; import { SaleType } from "@saleor/types/globalTypes"; import { getArrowDirection } from "@saleor/utils/sort"; diff --git a/src/discounts/components/SaleType/SaleType.tsx b/src/discounts/components/SaleType/SaleType.tsx index ebec25615..8b4d9e634 100644 --- a/src/discounts/components/SaleType/SaleType.tsx +++ b/src/discounts/components/SaleType/SaleType.tsx @@ -1,11 +1,11 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import RadioGroupField, { RadioGroupFieldChoice } from "@saleor/components/RadioGroupField"; import { FormChange } from "@saleor/hooks/useForm"; +import { makeStyles } from "@saleor/theme"; import { SaleType as SaleTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { IntlShape, useIntl } from "react-intl"; diff --git a/src/discounts/components/SaleValue/styles.ts b/src/discounts/components/SaleValue/styles.ts index a9eaef751..2e1aef9a2 100644 --- a/src/discounts/components/SaleValue/styles.ts +++ b/src/discounts/components/SaleValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx index a16532850..eb8b2c5cd 100644 --- a/src/discounts/components/VoucherList/VoucherList.tsx +++ b/src/discounts/components/VoucherList/VoucherList.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 TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { VoucherListUrlSortField } from "@saleor/discounts/urls"; import { maybe, renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import { getArrowDirection } from "@saleor/utils/sort"; diff --git a/src/discounts/components/VoucherRequirements/styles.ts b/src/discounts/components/VoucherRequirements/styles.ts index d32aec425..ef2642b77 100644 --- a/src/discounts/components/VoucherRequirements/styles.ts +++ b/src/discounts/components/VoucherRequirements/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/discounts/components/VoucherValue/styles.ts b/src/discounts/components/VoucherValue/styles.ts index b22bbe1c2..d4934216a 100644 --- a/src/discounts/components/VoucherValue/styles.ts +++ b/src/discounts/components/VoucherValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/home/components/HomeActivityCard/HomeActivityCard.tsx b/src/home/components/HomeActivityCard/HomeActivityCard.tsx index d8dc07803..ec0324622 100644 --- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx +++ b/src/home/components/HomeActivityCard/HomeActivityCard.tsx @@ -2,11 +2,11 @@ import Card from "@material-ui/core/Card"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import { DateTime } from "@saleor/components/Date"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx index a16ba6bb3..9ca3bbaf1 100644 --- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx +++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx @@ -1,8 +1,8 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import { IconProps } from "@material-ui/core/Icon"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx index 886044f70..9aeef7865 100644 --- a/src/home/components/HomeHeader/HomeHeader.tsx +++ b/src/home/components/HomeHeader/HomeHeader.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index 47456b8aa..761586a9e 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -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"; @@ -8,6 +7,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; import RequirePermissions from "@saleor/components/RequirePermissions"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index da8d36498..07d68e9f2 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -1,10 +1,10 @@ -import { makeStyles } from "@material-ui/core/styles"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import Money from "@saleor/components/Money"; import RequirePermissions from "@saleor/components/RequirePermissions"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx index 13b0c1d6b..0e8197a5c 100644 --- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx +++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -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"; @@ -9,6 +8,7 @@ import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx index bbc5916ec..1f30790bd 100644 --- a/src/navigation/components/MenuItems/MenuItems.tsx +++ b/src/navigation/components/MenuItems/MenuItems.tsx @@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import IconButton from "@material-ui/core/IconButton"; import Paper from "@material-ui/core/Paper"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; @@ -11,6 +10,7 @@ import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import useTheme from "@saleor/hooks/useTheme"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx index d97470143..158ec1472 100644 --- a/src/navigation/components/MenuList/MenuList.tsx +++ b/src/navigation/components/MenuList/MenuList.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -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 TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; import { MenuListUrlSortField } from "@saleor/navigation/urls"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables"; diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx index 13e6f4487..c213d9a7e 100644 --- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx +++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx @@ -3,7 +3,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 AddressEdit from "@saleor/components/AddressEdit"; import ConfirmButton, { ConfirmButtonTransitionState @@ -16,6 +15,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; import { maybe } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { AddressInput } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx index 17b0c3cd0..80dcb16d4 100644 --- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx +++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.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/makeStyles"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { DialogProps } from "@saleor/types"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx index f086bb0f3..62ad504cb 100644 --- a/src/orders/components/OrderCustomer/OrderCustomer.tsx +++ b/src/orders/components/OrderCustomer/OrderCustomer.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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import ExternalLink from "@saleor/components/ExternalLink"; @@ -14,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps, UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx index ddaaedb23..e1c47837a 100644 --- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx +++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import CardMenu from "@saleor/components/CardMenu"; @@ -15,6 +14,7 @@ import Skeleton from "@saleor/components/Skeleton"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; import OrderChannelSectionCard from "@saleor/orders/components/OrderChannelSectionCard"; +import { makeStyles } from "@saleor/theme"; import { UserPermissionProps } from "@saleor/types"; import { mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; diff --git a/src/orders/components/OrderDetailsPage/Title.tsx b/src/orders/components/OrderDetailsPage/Title.tsx index 3a71af776..6a89d7a29 100644 --- a/src/orders/components/OrderDetailsPage/Title.tsx +++ b/src/orders/components/OrderDetailsPage/Title.tsx @@ -1,7 +1,7 @@ -import { makeStyles } from "@material-ui/core/styles"; import StatusChip from "@saleor/components/StatusChip"; import { transformOrderStatus } from "@saleor/misc"; import { OrderDetails_order } from "@saleor/orders/types/OrderDetails"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/orders/components/OrderDiscountCommonModal/ModalTitle.tsx b/src/orders/components/OrderDiscountCommonModal/ModalTitle.tsx index 3c2483292..99da31e29 100644 --- a/src/orders/components/OrderDiscountCommonModal/ModalTitle.tsx +++ b/src/orders/components/OrderDiscountCommonModal/ModalTitle.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; +import { makeStyles } from "@saleor/theme"; import React from "react"; const useStyles = makeStyles( diff --git a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx index 9815bc270..c6c03ee7e 100644 --- a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx +++ b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx @@ -7,7 +7,6 @@ import { Typography } from "@material-ui/core"; import { PopperPlacementType } from "@material-ui/core/Popper"; -import { makeStyles } from "@material-ui/core/styles"; import DialogButtons from "@saleor/components/ActionDialog/DialogButtons"; import CardSpacer from "@saleor/components/CardSpacer"; import ConfirmButton, { @@ -17,6 +16,7 @@ import PriceField from "@saleor/components/PriceField"; import RadioGroupField from "@saleor/components/RadioGroupField"; import { Money } from "@saleor/fragments/types/Money"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import React, { ChangeEvent, diff --git a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx index 566019c3d..f09d071bf 100644 --- a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx +++ b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.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 TableHead from "@material-ui/core/TableHead"; @@ -9,6 +8,7 @@ import { OrderLineDiscountConsumer, OrderLineDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx b/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx index 1df7e3cdf..affdece21 100644 --- a/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx +++ b/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx @@ -1,5 +1,4 @@ import IconButton from "@material-ui/core/IconButton"; -import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import TableRow from "@material-ui/core/TableRow"; import Typography from "@material-ui/core/Typography"; @@ -10,6 +9,7 @@ import TableCellAvatar, { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar"; import { OrderLineDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; +import { makeStyles } from "@saleor/theme"; import React, { useRef } from "react"; import { maybe } from "../../../misc"; diff --git a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx index 71ca6fb78..395a06705 100644 --- a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx +++ b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx @@ -1,10 +1,10 @@ import { Typography } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import Link from "@saleor/components/Link"; import Money from "@saleor/components/Money"; import { OrderDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; import { OrderDiscountData } from "@saleor/products/components/OrderDiscountProviders/types"; +import { makeStyles } from "@saleor/theme"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import React, { useRef } from "react"; import { useIntl } from "react-intl"; diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx index 59593dfec..515fedd8b 100644 --- a/src/orders/components/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/components/OrderDraftList/OrderDraftList.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"; @@ -18,6 +17,7 @@ import { transformPaymentStatus } from "@saleor/misc"; import { OrderDraftListUrlSortField } from "@saleor/orders/urls"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index c2ca39856..2632aa898 100644 --- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx +++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import CardMenu from "@saleor/components/CardMenu"; @@ -13,6 +12,7 @@ import Skeleton from "@saleor/components/Skeleton"; import { sectionNames } from "@saleor/intl"; import DraftOrderChannelSectionCard from "@saleor/orders/components/DraftOrderChannelSectionCard"; import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps, UserPermissionProps } from "@saleor/types"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index bf77f5fa6..62837d078 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -1,6 +1,5 @@ import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; -import { makeStyles, Theme } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -27,6 +26,7 @@ import { OrderFulfillData_order, OrderFulfillData_order_lines } from "@saleor/orders/types/OrderFulfillData"; +import { makeStyles } from "@saleor/theme"; import { OrderErrorCode, OrderFulfillStockInput @@ -49,7 +49,7 @@ type ClassKey = | "quantityInnerInput" | "quantityInnerInputNoRemaining" | "remainingQuantity"; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => { const inputPadding: CSSProperties = { paddingBottom: theme.spacing(2), diff --git a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx index 97bc623b7..a6dbb746c 100644 --- a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx +++ b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx @@ -1,10 +1,10 @@ import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import CardMenu from "@saleor/components/CardMenu"; import CardSpacer from "@saleor/components/CardSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { mergeRepeatedOrderLines } from "@saleor/orders/utils/data"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx index 256a40ae2..5fc3c0dd2 100644 --- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx +++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx @@ -4,7 +4,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"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -14,6 +13,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; diff --git a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx index 6ac29031a..d057198b9 100644 --- a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx +++ b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx @@ -4,7 +4,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"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -21,6 +20,7 @@ import TableCellAvatar, { } from "@saleor/components/TableCellAvatar"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; diff --git a/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx b/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx index 7715e5c85..464327621 100644 --- a/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx +++ b/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx @@ -1,10 +1,10 @@ import { Typography } from "@material-ui/core"; -import { makeStyles } from "@material-ui/styles"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import CardSpacer from "@saleor/components/CardSpacer"; import { TimelineEvent } from "@saleor/components/Timeline"; import { TitleElement } from "@saleor/components/Timeline/TimelineEventHeader"; import { OrderDetails_order_events } from "@saleor/orders/types/OrderDetails"; +import { makeStyles } from "@saleor/theme"; import { OrderEventsEnum } from "@saleor/types/globalTypes"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/MoneySection.tsx b/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/MoneySection.tsx index a201520c1..cdad30971 100644 --- a/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/MoneySection.tsx +++ b/src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/MoneySection.tsx @@ -1,7 +1,7 @@ import { Typography } from "@material-ui/core"; -import { makeStyles } from "@material-ui/styles"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import { Money } from "@saleor/fragments/types/Money"; +import { makeStyles } from "@saleor/theme"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx index ffab8066f..88ed96501 100644 --- a/src/orders/components/OrderHistory/OrderHistory.tsx +++ b/src/orders/components/OrderHistory/OrderHistory.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import Form from "@saleor/components/Form"; import Hr from "@saleor/components/Hr"; @@ -11,6 +10,7 @@ import { TimelineNote } from "@saleor/components/Timeline"; import { OrderDetails_order_events } from "@saleor/orders/types/OrderDetails"; +import { makeStyles } from "@saleor/theme"; import { OrderEventsEmailsEnum, OrderEventsEnum diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx index bf9a0e684..c9f18c254 100644 --- a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx +++ b/src/orders/components/OrderInvoiceList/OrderInvoiceList.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 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 ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index 2f2f390f7..298cff3d3 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/src/orders/components/OrderList/OrderList.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"; @@ -19,6 +18,7 @@ import { transformPaymentStatus } from "@saleor/misc"; import { OrderListUrlSortField } from "@saleor/orders/urls"; +import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index 51a187d02..cecb643c2 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -1,12 +1,12 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; import { OrderListUrlSortField } from "@saleor/orders/urls"; +import { makeStyles } from "@saleor/theme"; import { FilterPageProps, PageListProps, SortPage } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx index 5b2d41a8d..746adcaa9 100644 --- a/src/orders/components/OrderPayment/OrderPayment.tsx +++ b/src/orders/components/OrderPayment/OrderPayment.tsx @@ -2,12 +2,12 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import { Hr } from "@saleor/components/Hr"; import Money, { subtractMoney } from "@saleor/components/Money"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx index f1a57145b..fb589d12e 100644 --- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx +++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.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"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableRow from "@material-ui/core/TableRow"; @@ -24,6 +23,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 { ChannelProps, FetchMoreProps } from "@saleor/types"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; diff --git a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ProductErrorCell.tsx b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ProductErrorCell.tsx index d0a721ce8..a66d319ef 100644 --- a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ProductErrorCell.tsx +++ b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ProductErrorCell.tsx @@ -1,8 +1,8 @@ import Popper from "@material-ui/core/Popper"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import TableCell from "@material-ui/core/TableCell"; import Typography from "@material-ui/core/Typography"; import ErrorExclamationCircleIcon from "@saleor/icons/ErrorExclamationCircle"; +import { makeStyles } from "@saleor/theme"; import React, { useState } from "react"; import { defineMessages } from "react-intl"; import { useIntl } from "react-intl"; diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx index 43419630b..15fd09703 100644 --- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx +++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx @@ -4,7 +4,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"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -15,6 +14,7 @@ import { SingleSelectField } from "@saleor/components/SingleSelectField"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; diff --git a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx index 42923a419..31ec3b183 100644 --- a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx +++ b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.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 TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; @@ -16,6 +15,7 @@ import { import TableHead from "@saleor/components/TableHead"; import { renderCollection, stopPropagation } from "@saleor/misc"; import { PageTypeDetails_pageType_attributes } from "@saleor/pageTypes/types/PageTypeDetails"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ReorderAction } from "@saleor/types"; import { AttributeTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx index 70b390c4c..33cc2723b 100644 --- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx +++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -14,6 +13,7 @@ import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompl import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment"; import { commonMessages, sectionNames } from "@saleor/intl"; import { PageTypeDetails_pageType } from "@saleor/pageTypes/types/PageTypeDetails"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ReorderEvent } from "@saleor/types"; import { AttributeTypeEnum } from "@saleor/types/globalTypes"; import { mapMetadataItemToInput } from "@saleor/utils/maps"; diff --git a/src/pageTypes/components/PageTypeList/PageTypeList.tsx b/src/pageTypes/components/PageTypeList/PageTypeList.tsx index 79aac2d40..bd84226d1 100644 --- a/src/pageTypes/components/PageTypeList/PageTypeList.tsx +++ b/src/pageTypes/components/PageTypeList/PageTypeList.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"; @@ -11,6 +10,7 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { PageTypeList_pageTypes_edges_node } from "@saleor/pageTypes/types/PageTypeList"; import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; +import { makeStyles } from "@saleor/theme"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/pages/components/PageInfo/PageInfo.tsx b/src/pages/components/PageInfo/PageInfo.tsx index a6fe26708..36e2027d6 100644 --- a/src/pages/components/PageInfo/PageInfo.tsx +++ b/src/pages/components/PageInfo/PageInfo.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 FormSpacer from "@saleor/components/FormSpacer"; @@ -9,6 +8,7 @@ import RichTextEditor, { } from "@saleor/components/RichTextEditor"; import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getPageErrorMessage from "@saleor/utils/errors/page"; import React from "react"; diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx index 06a43dae3..394eace59 100644 --- a/src/pages/components/PageList/PageList.tsx +++ b/src/pages/components/PageList/PageList.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -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"; @@ -13,6 +12,7 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; import { PageListUrlSortField } from "@saleor/pages/urls"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx index 61219ff6b..9d05956d5 100644 --- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx +++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx @@ -5,7 +5,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"; @@ -21,6 +20,7 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; import { getUserInitials, getUserName } from "@saleor/misc"; import { SearchStaffMembers_search_edges_node } from "@saleor/searches/types/SearchStaffMembers"; +import { makeStyles } from "@saleor/theme"; import { DialogProps, FetchMoreProps, SearchPageProps } from "@saleor/types"; import classNames from "classnames"; import React from "react"; diff --git a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx index cd0c2061d..33b544545 100644 --- a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx +++ b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx @@ -1,6 +1,5 @@ import { TableHead } from "@material-ui/core"; 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"; @@ -14,6 +13,7 @@ import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; import { PermissionGroupList_permissionGroups_edges_node } from "@saleor/permissionGroups/types/PermissionGroupList"; import { PermissionGroupListUrlSortField } from "@saleor/permissionGroups/urls"; +import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; diff --git a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx index ec51ca259..f4bdfcca5 100644 --- a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx +++ b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx @@ -1,6 +1,5 @@ import { Button, IconButton } from "@material-ui/core"; import Card from "@material-ui/core/Card"; -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"; @@ -21,6 +20,7 @@ import { import { sortMembers } from "@saleor/permissionGroups/sort"; import { PermissionGroupDetails_permissionGroup_users } from "@saleor/permissionGroups/types/PermissionGroupDetails"; import { MembersListUrlSortField } from "@saleor/permissionGroups/urls"; +import { makeStyles } from "@saleor/theme"; import { ListActions, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import classNames from "classnames"; diff --git a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx index 3f01bd99a..587b43297 100644 --- a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx +++ b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx @@ -1,13 +1,13 @@ 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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import { buttonMessages } from "@saleor/intl"; import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin"; import { isSecretField } from "@saleor/plugins/utils"; +import { makeStyles } from "@saleor/theme"; import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/plugins/components/PluginInfo/PluginInfo.tsx b/src/plugins/components/PluginInfo/PluginInfo.tsx index 9e8f0ce50..69586164a 100644 --- a/src/plugins/components/PluginInfo/PluginInfo.tsx +++ b/src/plugins/components/PluginInfo/PluginInfo.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/makeStyles"; import Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; @@ -8,6 +7,7 @@ import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import { PluginErrorFragment } from "@saleor/fragments/types/PluginErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { PluginErrorCode } from "@saleor/types/globalTypes"; import getPluginErrorMessage from "@saleor/utils/errors/plugins"; import React from "react"; diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx index dfb1c6e79..dcf4c6977 100644 --- a/src/plugins/components/PluginSettings/PluginSettings.tsx +++ b/src/plugins/components/PluginSettings/PluginSettings.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/makeStyles"; import TextField from "@material-ui/core/TextField"; import Tooltip from "@material-ui/core/Tooltip"; import Typography from "@material-ui/core/Typography"; @@ -8,6 +7,7 @@ import InfoIcon from "@material-ui/icons/Info"; import CardTitle from "@saleor/components/CardTitle"; import ControlledSwitch from "@saleor/components/ControlledSwitch"; import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin"; +import { makeStyles } from "@saleor/theme"; import { UserError } from "@saleor/types"; import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes"; import { getFieldError } from "@saleor/utils/errors"; diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx index 907941ad1..bbab1b6ce 100644 --- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx +++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx @@ -1,4 +1,3 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; @@ -14,6 +13,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; import { getStringOrPlaceholder } from "@saleor/misc"; import { isSecretField } from "@saleor/plugins/utils"; +import { makeStyles } from "@saleor/theme"; import { ConfigurationItemInput } from "@saleor/types/globalTypes"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx index a6d633ba4..63742edfc 100644 --- a/src/plugins/components/PluginsList/PluginsList.tsx +++ b/src/plugins/components/PluginsList/PluginsList.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"; @@ -13,6 +12,7 @@ import TablePagination from "@saleor/components/TablePagination"; import { translateBoolean } from "@saleor/intl"; import { maybe, renderCollection } from "@saleor/misc"; import { PluginListUrlSortField } from "@saleor/plugins/urls"; +import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx index 142bb90b7..311c40a85 100644 --- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx +++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.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 TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; @@ -15,6 +14,7 @@ import { } from "@saleor/components/SortableTable"; import TableHead from "@saleor/components/TableHead"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ReorderAction } from "@saleor/types"; import { ProductAttributeType } from "@saleor/types/globalTypes"; import React from "react"; diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx index abfde6ba6..fdc6c8dee 100644 --- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx +++ b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx @@ -1,9 +1,9 @@ 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 { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { UserError } from "@saleor/types"; import { getFieldError } from "@saleor/utils/errors"; import React from "react"; diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx index 14eefbdad..d79b203cb 100644 --- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/components/ProductTypeList/ProductTypeList.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"; @@ -11,6 +10,7 @@ import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls"; +import { makeStyles } from "@saleor/theme"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx index 7a355520e..22e888b8b 100644 --- a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx +++ b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx @@ -1,9 +1,9 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField"; import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 849f67d20..7534c82ea 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx @@ -1,7 +1,6 @@ import Button from "@material-ui/core/Button"; import CircularProgress from "@material-ui/core/CircularProgress"; 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 Accordion, { AccordionProps } from "@saleor/components/Accordion"; @@ -14,6 +13,7 @@ import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment"; import { ChangeEvent, FormChange } from "@saleor/hooks/useForm"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import { ExportProductsInput, diff --git a/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx b/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx index 040b0dbc3..80cfcae61 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx @@ -1,10 +1,10 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; import Hr from "@saleor/components/Hr"; import RadioGroupField, { RadioGroupFieldChoice } from "@saleor/components/RadioGroupField"; import { ExportErrorFragment } from "@saleor/fragments/types/ExportErrorFragment"; import { ChangeEvent } from "@saleor/hooks/useForm"; +import { makeStyles } from "@saleor/theme"; import { ExportProductsInput, ExportScope, diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index 8d0367910..7dfc5f9b1 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.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"; @@ -24,6 +23,7 @@ import { import { GridAttributes_grid_edges_node } from "@saleor/products/types/GridAttributes"; import { ProductList_products_edges_node } from "@saleor/products/types/ProductList"; import { ProductListUrlSortField } from "@saleor/products/urls"; +import { makeStyles } from "@saleor/theme"; import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types"; import TDisplayColumn, { DisplayColumnProps diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx index 3bed0d705..492e28a05 100644 --- a/src/products/components/ProductListPage/ProductListPage.tsx +++ b/src/products/components/ProductListPage/ProductListPage.tsx @@ -1,6 +1,5 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import CardMenu from "@saleor/components/CardMenu"; import ColumnPicker, { ColumnPickerChoice @@ -15,6 +14,7 @@ import { GridAttributes_grid_edges_node } from "@saleor/products/types/GridAttributes"; import { ProductList_products_edges_node } from "@saleor/products/types/ProductList"; +import { makeStyles } from "@saleor/theme"; import { ChannelProps, FetchMoreProps, diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx index c07d48a07..96879e3e8 100644 --- a/src/products/components/ProductMedia/ProductMedia.tsx +++ b/src/products/components/ProductMedia/ProductMedia.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 CardTitle from "@saleor/components/CardTitle"; import ImageUpload from "@saleor/components/ImageUpload"; import MediaTile from "@saleor/components/MediaTile"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; import { ProductMediaPopper } from "@saleor/products/components/ProductMediaPopper/ProductMediaPopper"; +import { makeStyles } from "@saleor/theme"; import { ReorderAction } from "@saleor/types"; import { ProductMediaType } from "@saleor/types/globalTypes"; import createMultiFileUploadHandler from "@saleor/utils/handlers/multiFileUploadHandler"; diff --git a/src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx b/src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx index de114b854..c42522869 100644 --- a/src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx +++ b/src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx @@ -1,8 +1,8 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/products/components/ProductMediaPage/ProductMediaPage.tsx b/src/products/components/ProductMediaPage/ProductMediaPage.tsx index f1a8e6a2f..9c0f2048a 100644 --- a/src/products/components/ProductMediaPage/ProductMediaPage.tsx +++ b/src/products/components/ProductMediaPage/ProductMediaPage.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 AppHeader from "@saleor/components/AppHeader"; import CardTitle from "@saleor/components/CardTitle"; @@ -12,6 +11,7 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { ProductMediaType } from "@saleor/types/globalTypes"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx index 87897f2d8..41cc49631 100644 --- a/src/products/components/ProductOrganization/ProductOrganization.tsx +++ b/src/products/components/ProductOrganization/ProductOrganization.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 Typography from "@material-ui/core/Typography"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; @@ -15,6 +14,7 @@ import SingleAutocompleteSelectField, { import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { ChangeEvent } from "@saleor/hooks/useForm"; import { maybe } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; import React from "react"; diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index 210c51816..326e72334 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -7,7 +7,6 @@ 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 Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; @@ -27,6 +26,7 @@ import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { FormChange } from "@saleor/hooks/useForm"; import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset"; import { renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ICONBUTTON_SIZE } from "@saleor/theme"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; diff --git a/src/products/components/ProductTaxes/ProductTaxes.tsx b/src/products/components/ProductTaxes/ProductTaxes.tsx index a95afe9d1..d5c4e518b 100644 --- a/src/products/components/ProductTaxes/ProductTaxes.tsx +++ b/src/products/components/ProductTaxes/ProductTaxes.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/makeStyles"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import Hr from "@saleor/components/Hr"; @@ -8,6 +7,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment"; import { FormChange } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx index 97235b282..22936e2f3 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx @@ -1,11 +1,11 @@ import Button from "@material-ui/core/Button"; -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import Container from "@saleor/components/Container"; import Hr from "@saleor/components/Hr"; import PageHeader from "@saleor/components/PageHeader"; import useWizard from "@saleor/hooks/useWizard"; import { validatePrice } from "@saleor/products/utils/validation"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, IntlShape, useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx index f3dd26612..e6174f9ad 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx @@ -3,7 +3,6 @@ import CardContent from "@material-ui/core/CardContent"; 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 Typography from "@material-ui/core/Typography"; import { ChannelPriceData } from "@saleor/channels/utils"; import CardTitle from "@saleor/components/CardTitle"; @@ -13,6 +12,7 @@ import Hr from "@saleor/components/Hr"; import PriceField from "@saleor/components/PriceField"; import SingleSelectField from "@saleor/components/SingleSelectField"; import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx index c07bfa598..39e864a9c 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx @@ -3,7 +3,6 @@ import CardContent from "@material-ui/core/CardContent"; 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 TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import CardSpacer from "@saleor/components/CardSpacer"; @@ -14,6 +13,7 @@ import Hr from "@saleor/components/Hr"; import SingleSelectField from "@saleor/components/SingleSelectField"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails"; +import { makeStyles } from "@saleor/theme"; import { isSelected } from "@saleor/utils/lists"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx index f3825ce3f..d5bb298fc 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx @@ -5,7 +5,6 @@ import green from "@material-ui/core/colors/green"; import purple from "@material-ui/core/colors/purple"; import yellow from "@material-ui/core/colors/yellow"; import IconButton from "@material-ui/core/IconButton"; -import { makeStyles, Theme } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import DeleteIcon from "@material-ui/icons/Delete"; import { ChannelPriceData } from "@saleor/channels/utils"; @@ -14,6 +13,7 @@ import Hr from "@saleor/components/Hr"; import PriceField from "@saleor/components/PriceField"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate"; +import { makeStyles } from "@saleor/theme"; import { ProductVariantBulkCreateInput } from "@saleor/types/globalTypes"; import { getFormErrors } from "@saleor/utils/errors"; import { getBulkProductErrorMessage } from "@saleor/utils/errors/product"; @@ -55,11 +55,7 @@ type ClassKey = const colors = [blue, cyan, green, purple, yellow].map(color => color[800]); -const useStyles = makeStyles< - Theme, - ProductVariantCreatorSummaryProps, - ClassKey ->( +const useStyles = makeStyles( theme => ({ attributeValue: { display: "inline-block", diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx index 268a042c5..a4cc4cfae 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx @@ -1,12 +1,12 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import Debounce from "@saleor/components/Debounce"; import Skeleton from "@saleor/components/Skeleton"; import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails"; +import { makeStyles } from "@saleor/theme"; import { isSelected } from "@saleor/utils/lists"; import React from "react"; diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx index 4ef3a39ee..dab61d374 100644 --- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx +++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx @@ -4,11 +4,11 @@ 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 ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx index 032947f5d..6a257b741 100644 --- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx +++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx @@ -3,9 +3,9 @@ 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 { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx index a69109a18..5e0c05b95 100644 --- a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx +++ b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx @@ -1,11 +1,11 @@ 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 Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index 79c93b65b..5c51f962d 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -1,6 +1,5 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import TableCell from "@material-ui/core/TableCell"; import TableRow from "@material-ui/core/TableRow"; @@ -12,6 +11,7 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; +import { makeStyles } from "@saleor/theme"; import { ReorderAction } from "@saleor/types"; import classNames from "classnames"; import React from "react"; diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx index 2efbb9d60..1e3ee19a8 100644 --- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx +++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx @@ -7,7 +7,6 @@ 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 { ChannelPriceArgs, ChannelPriceData } from "@saleor/channels/utils"; import CardTitle from "@saleor/components/CardTitle"; import PriceField from "@saleor/components/PriceField"; @@ -15,6 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment"; import { renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { getFormChannelError, getFormChannelErrors diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx index d57a76d58..fa7a3257d 100644 --- a/src/products/components/ProductVariants/ProductVariants.tsx +++ b/src/products/components/ProductVariants/ProductVariants.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 Hidden from "@material-ui/core/Hidden"; -import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import TableCell from "@material-ui/core/TableCell"; import Typography from "@material-ui/core/Typography"; @@ -18,6 +17,7 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableHead from "@saleor/components/TableHead"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, IntlShape, useIntl } from "react-intl"; diff --git a/src/shipping/components/OrderValue/styles.ts b/src/shipping/components/OrderValue/styles.ts index f7013a5d4..0f16e5070 100644 --- a/src/shipping/components/OrderValue/styles.ts +++ b/src/shipping/components/OrderValue/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/OrderWeight/styles.ts b/src/shipping/components/OrderWeight/styles.ts index da6488a3c..64d3d6f4d 100644 --- a/src/shipping/components/OrderWeight/styles.ts +++ b/src/shipping/components/OrderWeight/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/PricingCard/styles.ts b/src/shipping/components/PricingCard/styles.ts index 108b749f1..9e79dc429 100644 --- a/src/shipping/components/PricingCard/styles.ts +++ b/src/shipping/components/PricingCard/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({ diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx index d734994c4..135322bcb 100644 --- a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx +++ b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.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 TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { renderCollection } from "@saleor/misc"; import { ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node } from "@saleor/shipping/types/ShippingZone"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx index 5d381b069..5fcb832d9 100644 --- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx +++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.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"; @@ -21,6 +20,7 @@ import { buttonMessages } from "@saleor/intl"; import { renderCollection } from "@saleor/misc"; import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts"; import { ShippingPriceExcludeProduct } from "@saleor/shipping/types/ShippingPriceExcludeProduct"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps } from "@saleor/types"; import React from "react"; import { MutationFetchResult } from "react-apollo"; diff --git a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx index fc06222c6..c342fdf8b 100644 --- a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx +++ b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx @@ -1,11 +1,11 @@ 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 CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getShippingErrorMessage from "@saleor/utils/errors/shipping"; import React from "react"; diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx index f0fc2b3f6..7995781bb 100644 --- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx +++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx @@ -3,7 +3,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/makeStyles"; import TextField from "@material-ui/core/TextField"; import CompanyAddressForm from "@saleor/components/CompanyAddressInput/CompanyAddressForm"; import ConfirmButton, { @@ -20,6 +19,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { DialogProps } from "@saleor/types"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx index a5b5f59e5..af49b8bec 100644 --- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx +++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx @@ -3,7 +3,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"; @@ -19,6 +18,7 @@ import Hr from "@saleor/components/Hr"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { filter } from "fuzzaldrin"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx index a5338279d..95c579fc7 100644 --- a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx +++ b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx @@ -1,11 +1,11 @@ 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 CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getShippingErrorMessage from "@saleor/utils/errors/shipping"; import React from "react"; diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx index 4baf45d25..bd91ec06c 100644 --- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx +++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx @@ -3,7 +3,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/makeStyles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import ConfirmButton, { @@ -12,6 +11,7 @@ import ConfirmButton, { import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import { buttonMessages, commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { DialogProps, MinMax } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx index 054680855..0a46ef8dc 100644 --- a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx +++ b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.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/makeStyles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -16,6 +15,7 @@ import Skeleton from "@saleor/components/Skeleton"; import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment"; import ArrowDropdown from "@saleor/icons/ArrowDropdown"; import { renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { PostalCodeRuleInclusionTypeEnum } from "@saleor/types/globalTypes"; import classNames from "classnames"; import React from "react"; diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx index 623fbbad5..9f6f24b10 100644 --- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx +++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx @@ -1,6 +1,5 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -15,6 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import WeightRange from "@saleor/components/WeightRange"; import { ShippingZoneDetailsFragment_shippingMethods } from "@saleor/fragments/types/ShippingZoneDetailsFragment"; +import { makeStyles } from "@saleor/theme"; import { ChannelProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx index c897b9129..5a4bdf0ba 100644 --- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx +++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.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"; @@ -15,6 +14,7 @@ import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment"; import { maybe, renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ListActions, ListProps } from "@saleor/types"; import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables"; import React from "react"; diff --git a/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx index 6e9b93c2d..c5d873855 100644 --- a/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx +++ b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx @@ -1,12 +1,12 @@ 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 CardTitle from "@saleor/components/CardTitle"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getShopErrorMessage from "@saleor/utils/errors/shop"; import React from "react"; diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx index cc823c3b0..e6f96982c 100644 --- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx +++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import AppHeader from "@saleor/components/AppHeader"; import CompanyAddressInput from "@saleor/components/CompanyAddressInput"; @@ -14,6 +13,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { commonMessages, sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { mapCountriesToChoices } from "@saleor/utils/maps"; import React from "react"; diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx index 3b93382d1..cdbb03e0a 100644 --- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx +++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx @@ -3,7 +3,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 TextField from "@material-ui/core/TextField"; import ConfirmButton, { ConfirmButtonTransitionState @@ -14,6 +13,7 @@ import { StaffErrorFragment } from "@saleor/fragments/types/StaffErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages, commonMessages } from "@saleor/intl"; import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups"; +import { makeStyles } from "@saleor/theme"; import { FetchMoreProps, SearchPageProps } from "@saleor/types"; import { getFormErrors } from "@saleor/utils/errors"; import getStaffErrorMessage from "@saleor/utils/errors/staff"; diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx index 171213284..012a97943 100644 --- a/src/staff/components/StaffList/StaffList.tsx +++ b/src/staff/components/StaffList/StaffList.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"; @@ -16,6 +15,7 @@ import { renderCollection } from "@saleor/misc"; import { StaffListUrlSortField } from "@saleor/staff/urls"; +import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import classNames from "classnames"; diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx index 3cdc2f628..eeb7c39c7 100644 --- a/src/staff/components/StaffProperties/StaffProperties.tsx +++ b/src/staff/components/StaffProperties/StaffProperties.tsx @@ -1,12 +1,12 @@ import photoIcon from "@assets/images/photo-icon.svg"; 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 CardTitle from "@saleor/components/CardTitle"; import { StaffErrorFragment } from "@saleor/fragments/types/StaffErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getStaffErrorMessage from "@saleor/utils/errors/staff"; import React from "react"; diff --git a/src/styles/useScrollableDialogStyle.ts b/src/styles/useScrollableDialogStyle.ts index 7b9a65a9a..c052e4216 100644 --- a/src/styles/useScrollableDialogStyle.ts +++ b/src/styles/useScrollableDialogStyle.ts @@ -1,4 +1,4 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; +import { makeStyles } from "@saleor/theme"; const useScrollableDialogStyle = makeStyles( theme => ({ diff --git a/src/taxes/components/CountryList/CountryList.tsx b/src/taxes/components/CountryList/CountryList.tsx index 9397d022a..06832f785 100644 --- a/src/taxes/components/CountryList/CountryList.tsx +++ b/src/taxes/components/CountryList/CountryList.tsx @@ -1,11 +1,11 @@ import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx index 4cf1ccf5f..c2666f3a2 100644 --- a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx +++ b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -11,6 +10,7 @@ import PageHeader from "@saleor/components/PageHeader"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { TaxRateType } from "@saleor/types/globalTypes"; import React from "react"; import { FormattedMessage, IntlShape, useIntl } from "react-intl"; diff --git a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx index 0b142d520..2aede4076 100644 --- a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx +++ b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx @@ -2,12 +2,12 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import { sectionNames } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/theme.ts b/src/theme.ts deleted file mode 100644 index 1a1658355..000000000 --- a/src/theme.ts +++ /dev/null @@ -1,611 +0,0 @@ -import { createMuiTheme, Theme } from "@material-ui/core/styles"; -import { darken, fade } from "@material-ui/core/styles/colorManipulator"; -import { ThemeOptions } from "@material-ui/core/styles/createMuiTheme"; -import { - Palette, - PaletteOptions -} from "@material-ui/core/styles/createPalette"; -import { Overrides } from "@material-ui/core/styles/overrides"; -import { createElement } from "react"; - -import { IThemeColors } from "./components/Theme/themes"; -import CheckboxIcon from "./icons/Checkbox"; -import CheckboxCheckedIcon from "./icons/CheckboxChecked"; -import CheckboxIndeterminateIcon from "./icons/CheckboxIndeterminate"; - -const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => - [ - `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.2)`, - `0 ${uv}px ${ub}px ${us}px rgba(0, 0, 0, 0.14)`, - `0 ${av}px ${ab}px ${as}px rgba(0, 0, 0, 0.12)` - ].join(","); - -export const ICONBUTTON_SIZE = 48; - -const fontFamily = '"Inter", "roboto", "sans-serif"'; - -export interface ITheme extends Theme { - palette: IPalette; -} - -interface IThemeOptions extends ThemeOptions { - palette: IPaletteOptions; -} - -interface IPalette extends Palette, ExtraPaletteOptions {} - -interface IPaletteOptions extends PaletteOptions, ExtraPaletteOptions {} - -interface ExtraPaletteOptions { - textHighlighted?: { - active: string; - inactive: string; - }; -} - -const inputOverrides = (colors: IThemeColors): Overrides => ({ - MuiInput: { - input: { - "&:-webkit-autofill": { - WebkitTextFillColor: colors.font.default, - boxShadow: `inset 0 0 0px 9999px ${colors.autofill}` - }, - "&::placeholder": { - opacity: "1 !important" as any - }, - color: colors.font.default - }, - underline: { - "&:after": { - borderBottomColor: colors.primary - } - } - }, - MuiInputBase: { - input: { - "&$disabled": { - color: colors.input.disabledText - }, - "&::placeholder": { - color: colors.font.gray, - opacity: "1 !important" as any - }, - zIndex: 2 - } - }, - MuiInputLabel: { - filled: { - zIndex: 2 - }, - formControl: { - transform: "translate(0, 1.5px) scale(0.75)", - transformOrigin: "top left" as "top left", - width: "100%" - }, - outlined: { - "&$shrink": { - transform: "translate(12px, 9px) scale(0.75)" - }, - transform: "translate(14px, 18px) scale(1)", - zIndex: 9 - }, - root: { - "&$disabled": { - color: `${fade(colors.primary, 0.4)} !important` as any - }, - "&$error": { - "&$focused": { - color: colors.error - }, - color: colors.error - }, - "&&$focused": { - "&:not($error)": { - color: colors.primary - } - }, - color: fade(colors.input.text, 0.6) - }, - shrink: { - // Negates x0.75 scale - width: "133%" - } - }, - MuiOutlinedInput: { - input: { - "&:-webkit-autofill": { - borderRadius: 4, - boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, - zIndex: 0 - }, - color: colors.input.text, - padding: "23px 12px 10px 12px" - }, - inputMultiline: { - left: -2, - padding: "10px 0", - position: "relative" - }, - root: { - "& fieldset": { - "&&:not($error)": { - borderColor: colors.input.border - }, - top: 0, - zIndex: 1 - }, - "& legend": { - display: "none" - }, - "&$disabled": { - "& fieldset": { - borderColor: [[colors.input.disabled], "!important"] as any - }, - "& input": { - backgroundColor: colors.input.disabledBackground, - color: colors.input.disabledText, - zIndex: 2 - } - }, - "&$error": { - "&$focused": { - "& fieldset": { - borderColor: colors.error - }, - "& input": { - color: colors.error, - zIndex: 2 - } - }, - "&:hover": { - "& fieldset": { - borderColor: colors.error - }, - "& input": { - color: colors.error, - zIndex: 2 - } - } - }, - "&$focused": { - "& input": { - "& fieldset": { - borderColor: colors.primary - }, - "&::placeholder": { - opacity: [[1], "!important"] as any - }, - color: colors.font.default - } - }, - "&:hover": { - "& input": { - color: colors.font.default - }, - "&&&": { - "& fieldset": { - borderColor: colors.primary - }, - "&$error fieldset": { - borderColor: colors.input.error - } - } - }, - backgroundColor: colors.background.paper, - borderColor: colors.input.border, - top: 0 - } - } -}); - -const createTheme = (colors: IThemeColors): ITheme => - createMuiTheme({ - overrides: { - ...inputOverrides(colors), - MuiButton: { - contained: { - "&$disabled": { - backgroundColor: fade(colors.primary, 0.12) - }, - "&:active": { - boxShadow: null - }, - "&:hover": { - boxShadow: null - }, - boxShadow: null - }, - containedPrimary: { - "&:active": { - backgroundColor: darken(colors.primary, 0.4) - }, - "&:hover": { - backgroundColor: darken(colors.primary, 0.1) - } - }, - label: { - color: colors.font.button, - fontWeight: 600 - }, - outlined: { - "& span": { - color: colors.primary - } - }, - root: { - "& svg": { - marginLeft: 8 - }, - borderRadius: 4 - }, - text: { - "& span": { - color: colors.font.default - } - }, - textPrimary: { - "& span": { - color: colors.primary - } - } - }, - MuiCard: { - root: { - borderColor: colors.paperBorder, - borderRadius: 8, - borderStyle: "solid", - borderWidth: 1, - overflow: "visible" - } - }, - MuiCardActions: { - root: { - flexDirection: "row-reverse" as "row-reverse" - } - }, - MuiCardContent: { - root: { - padding: "24px" - } - }, - MuiChip: { - avatar: { - height: 32, - left: -5, - position: "relative", - width: 32 - } - }, - MuiDialogActions: { - root: { - borderTop: `1px solid ${colors.divider}`, - padding: `16px 24px` - } - }, - MuiDialogContent: { - root: { - "& label": { - overflowX: "hidden" - }, - padding: 24 - } - }, - MuiDialogContentText: { - root: { - "&:last-child": { - marginBottom: 0 - } - } - }, - MuiDialogTitle: { - root: { - borderBottom: `1px solid ${colors.divider}` - } - }, - MuiFormControlLabel: { - label: { - lineHeight: 1.2, - marginLeft: 4 - } - }, - MuiFormLabel: { - filled: { - "&&:not($error)": { - color: colors.primary - } - }, - root: { - "&&$focused:not($error)": { - color: colors.font.gray - } - } - }, - MuiIconButton: { - root: { - "&:hover": { - backgroundColor: fade(colors.primary, 0.12) - } - } - }, - MuiList: { - root: { - display: "grid", - gridRowGap: 8 + "px", - padding: "8px !important" - } - }, - MuiListItem: { - button: { - "&:focus": { - backgroundColor: colors.input.default - } - }, - root: { - "&$selected": { - "&:hover": { - backgroundColor: colors.input.default - }, - backgroundColor: colors.input.default - } - } - }, - MuiMenu: { - paper: { - borderRadius: 8 - } - }, - MuiMenuItem: { - root: { - "&$selected, &$selected:focus, &$selected:hover": { - backgroundColor: [colors.background.default, "!important"] as any, - color: colors.primary, - fontWeight: 700 - }, - "&:hover": { - backgroundColor: [colors.background.default, "!important"] as any, - color: colors.font.default, - fontWeight: 400 - }, - borderRadius: 4 - } - }, - MuiSelect: { - root: { - "&$disabled": { - backgroundColor: colors.input.disabledBackground - } - } - }, - MuiSnackbarContent: { - action: { - "& $MuiIconButton": { - "& svg": { - color: colors.font.default - } - }, - display: "block", - paddingBottom: 10, - paddingLeft: 0, - paddingRight: 45 - }, - message: { - fontSize: 16 - }, - root: { - backgroundColor: colors.background.paper, - boxShadow: - "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)", - color: colors.font.default, - display: "block", - maxWidth: 480 - } - }, - MuiSwitch: { - colorPrimary: { - "&$checked": { - color: colors.background.paper - } - }, - root: { - "&$disabled": { - "&$switchBase": { - "& + $thumb": { - backgroundColor: colors.gray.disabled - } - } - }, - height: 48, - width: 72 - }, - switchBase: { - "&$checked": { - transform: "translateX(23px)" - }, - boxShadow: "none", - left: 1, - marginLeft: 4, - top: 5 - }, - thumb: { - boxShadow: "none" - }, - track: { - "$colorPrimary$checked + &": { - backgroundColor: colors.primary - }, - backgroundColor: colors.gray.default, - borderRadius: 12, - height: 24, - opacity: [["1"], "!important"] as any, - width: 48 - } - }, - MuiTable: { - root: { - fontFamily, - fontFeatureSettings: '"tnum"' - } - }, - MuiTableCell: { - body: { - fontSize: "1rem", - paddingBottom: 8, - paddingTop: 8 - }, - head: { - fontSize: "1rem" - }, - paddingCheckbox: { - "&:first-child": { - padding: "0 12px", - width: 72 - }, - "&:not(first-child)": { - padding: 0, - width: 52 - } - }, - root: { - "&:first-child": { - "&:not($paddingCheckbox)": { - paddingLeft: 24 + "px", - textAlign: "left" as "left" - } - }, - borderBottomColor: colors.paperBorder, - height: 56, - padding: "4px 24px" - } - }, - MuiTableRow: { - footer: { - "$root$hover&:hover": { - background: "none" - } - }, - head: { - "$root$hover&:hover": { - background: "none" - } - }, - hover: { - "$root&:hover": { - backgroundColor: fade(colors.primary, 0.3) - } - }, - root: { - "&$selected": { - backgroundColor: fade(colors.primary, 0.05) - } - } - }, - MuiTouchRipple: { - child: { - backgroundColor: fade(colors.primary, 0.2) - }, - childLeaving: { - backgroundColor: fade(colors.primary, 0.2) - }, - ripple: { - "&$rippleVisible": { - backgroundColor: fade(colors.primary, 0.2) - }, - borderRadius: "100%" - } - } - }, - palette: { - action: { - active: colors.checkbox.default - }, - background: colors.background, - divider: colors.divider, - error: { - main: colors.error - }, - primary: { - contrastText: "#ffffff", - dark: colors.font.textDisabled, - main: colors.primary - }, - secondary: { - contrastText: "#ffffff", - main: colors.secondary - }, - text: { - disabled: colors.font.gray, - hint: colors.font.gray, - primary: colors.font.default, - secondary: colors.font.gray - }, - textHighlighted: { - active: colors.primary, - inactive: colors.highlightInactive.default - }, - type: colors.theme - }, - props: { - MuiFormControl: { - variant: "filled" - }, - MuiTextField: { - variant: "outlined" - }, - MuiCard: { - elevation: 0 - }, - MuiTypography: { - component: "div" - }, - MuiCheckbox: { - checkedIcon: createElement(CheckboxCheckedIcon), - color: "primary", - icon: createElement(CheckboxIcon), - indeterminateIcon: createElement(CheckboxIndeterminateIcon) - } - }, - shadows: [ - "none", - createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0), - createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0), - createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0), - createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1), - createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1), - createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1), - createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2), - createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3), - createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4), - createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4), - createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4), - createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4), - createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4), - createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5), - createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5), - createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5), - createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4), - createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3), - createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1), - createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1), - createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1), - createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2), - createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2), - createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3) - ], - typography: { - allVariants: { - fontFamily - }, - body1: { - color: colors.font.default - }, - fontFamily, - h4: { - color: colors.font.default - }, - h5: { - fontSize: "1.3125rem" - } - } - } as IThemeOptions); - -export default createTheme; diff --git a/src/theme/buttons.ts b/src/theme/buttons.ts new file mode 100644 index 000000000..afc8d0bdb --- /dev/null +++ b/src/theme/buttons.ts @@ -0,0 +1,102 @@ +import { darken, fade } from "@material-ui/core/styles/colorManipulator"; +import { Overrides } from "@material-ui/core/styles/overrides"; +import { IThemeColors } from "@saleor/components/Theme/themes"; + +const buttonOverrides = (colors: IThemeColors): Overrides => ({ + MuiButton: { + contained: { + "&$disabled": { + backgroundColor: fade(colors.primary, 0.12) + }, + "&:active": { + boxShadow: null + }, + "&:hover": { + boxShadow: null + }, + boxShadow: null + }, + containedPrimary: { + "&:active": { + backgroundColor: darken(colors.primary, 0.4) + }, + "&:hover": { + backgroundColor: darken(colors.primary, 0.1) + } + }, + label: { + color: colors.font.button, + fontWeight: 600 + }, + outlined: { + "& span": { + color: colors.primary + } + }, + root: { + "& svg": { + marginLeft: 8 + }, + borderRadius: 4 + }, + text: { + "& span": { + color: colors.font.default + } + }, + textPrimary: { + "& span": { + color: colors.primary + } + } + }, + MuiIconButton: { + root: { + "&:hover": { + backgroundColor: fade(colors.primary, 0.12) + } + } + }, + MuiSwitch: { + colorPrimary: { + "&$checked": { + color: colors.background.paper + } + }, + root: { + "&$disabled": { + "&$switchBase": { + "& + $thumb": { + backgroundColor: colors.gray.disabled + } + } + }, + height: 48, + width: 72 + }, + switchBase: { + "&$checked": { + transform: "translateX(23px)" + }, + boxShadow: "none", + left: 1, + marginLeft: 4, + top: 5 + }, + thumb: { + boxShadow: "none" + }, + track: { + "$colorPrimary$checked + &": { + backgroundColor: colors.primary + }, + backgroundColor: colors.gray.default, + borderRadius: 12, + height: 24, + opacity: [["1"], "!important"] as any, + width: 48 + } + } +}); + +export default buttonOverrides; diff --git a/src/theme/createSaleorTheme.ts b/src/theme/createSaleorTheme.ts new file mode 100644 index 000000000..16775a413 --- /dev/null +++ b/src/theme/createSaleorTheme.ts @@ -0,0 +1,225 @@ +import { createMuiTheme } from "@material-ui/core/styles"; +import { fade } from "@material-ui/core/styles/colorManipulator"; +import { TypographyProps } from "@material-ui/core/Typography"; +import { createElement } from "react"; + +import { IThemeColors } from "../components/Theme/themes"; +import CheckboxIcon from "../icons/Checkbox"; +import CheckboxCheckedIcon from "../icons/CheckboxChecked"; +import CheckboxIndeterminateIcon from "../icons/CheckboxIndeterminate"; +import buttonOverrides from "./buttons"; +import inputOverrides from "./inputs"; +import createPalette from "./palette"; +import shadows from "./shadows"; +import tableOverrides from "./tables"; +import { SaleorTheme } from "./types"; + +export const ICONBUTTON_SIZE = 48; + +const fontFamily = '"Inter", "roboto", "sans-serif"'; + +const createTheme = (colors: IThemeColors): SaleorTheme => + createMuiTheme({ + overrides: { + ...inputOverrides(colors), + ...tableOverrides(colors, fontFamily), + ...buttonOverrides(colors), + MuiCard: { + root: { + borderColor: colors.paperBorder, + borderRadius: 8, + borderStyle: "solid", + borderWidth: 1, + overflow: "visible" + } + }, + MuiCardActions: { + root: { + flexDirection: "row-reverse" as "row-reverse" + } + }, + MuiCardContent: { + root: { + padding: "24px" + } + }, + MuiChip: { + avatar: { + height: 32, + left: -5, + position: "relative", + width: 32 + } + }, + MuiDialogActions: { + root: { + borderTop: `1px solid ${colors.divider}`, + padding: `16px 24px` + } + }, + MuiDialogContent: { + root: { + "& label": { + overflowX: "hidden" + }, + padding: 24 + } + }, + MuiDialogContentText: { + root: { + "&:last-child": { + marginBottom: 0 + } + } + }, + MuiDialogTitle: { + root: { + borderBottom: `1px solid ${colors.divider}` + } + }, + MuiFormControlLabel: { + label: { + lineHeight: 1.2, + marginLeft: 4 + } + }, + MuiFormLabel: { + filled: { + "&&:not($error)": { + color: colors.primary + } + }, + root: { + "&&$focused:not($error)": { + color: colors.font.gray + } + } + }, + MuiList: { + root: { + display: "grid", + gridRowGap: 8 + "px", + padding: "8px !important" + } + }, + MuiListItem: { + button: { + "&:focus": { + backgroundColor: colors.input.default + } + }, + root: { + "&$selected": { + "&:hover": { + backgroundColor: colors.input.default + }, + backgroundColor: colors.input.default + } + } + }, + MuiMenu: { + paper: { + borderRadius: 8 + } + }, + MuiMenuItem: { + root: { + "&$selected, &$selected:focus, &$selected:hover": { + backgroundColor: [colors.background.default, "!important"] as any, + color: colors.primary, + fontWeight: 700 + }, + "&:hover": { + backgroundColor: [colors.background.default, "!important"] as any, + color: colors.font.default, + fontWeight: 400 + }, + borderRadius: 4 + } + }, + MuiSelect: { + root: { + "&$disabled": { + backgroundColor: colors.input.disabledBackground + } + } + }, + MuiSnackbarContent: { + action: { + "& $MuiIconButton": { + "& svg": { + color: colors.font.default + } + }, + display: "block", + paddingBottom: 10, + paddingLeft: 0, + paddingRight: 45 + }, + message: { + fontSize: 16 + }, + root: { + backgroundColor: colors.background.paper, + boxShadow: + "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)", + color: colors.font.default, + display: "block", + maxWidth: 480 + } + }, + MuiTouchRipple: { + child: { + backgroundColor: fade(colors.primary, 0.2) + }, + childLeaving: { + backgroundColor: fade(colors.primary, 0.2) + }, + ripple: { + "&$rippleVisible": { + backgroundColor: fade(colors.primary, 0.2) + }, + borderRadius: "100%" + } + } + }, + palette: createPalette(colors), + props: { + MuiFormControl: { + variant: "filled" + }, + MuiTextField: { + variant: "outlined" + }, + MuiCard: { + elevation: 0 + }, + MuiTypography: { + component: "div" + } as TypographyProps, + MuiCheckbox: { + checkedIcon: createElement(CheckboxCheckedIcon), + color: "primary", + icon: createElement(CheckboxIcon), + indeterminateIcon: createElement(CheckboxIndeterminateIcon) + } + }, + shadows, + typography: { + allVariants: { + fontFamily + }, + body1: { + color: colors.font.default + }, + fontFamily, + h4: { + color: colors.font.default + }, + h5: { + fontSize: "1.3125rem" + } + } + }); + +export default createTheme; diff --git a/src/theme/index.ts b/src/theme/index.ts new file mode 100644 index 000000000..99154b40b --- /dev/null +++ b/src/theme/index.ts @@ -0,0 +1,4 @@ +export * from "./createSaleorTheme"; +export { default } from "./createSaleorTheme"; +export * from "./types"; +export * from "./styles"; diff --git a/src/theme/inputs.ts b/src/theme/inputs.ts new file mode 100644 index 000000000..538795162 --- /dev/null +++ b/src/theme/inputs.ts @@ -0,0 +1,160 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; +import { Overrides } from "@material-ui/core/styles/overrides"; +import { IThemeColors } from "@saleor/components/Theme/themes"; + +const inputOverrides = (colors: IThemeColors): Overrides => ({ + MuiInput: { + input: { + "&:-webkit-autofill": { + WebkitTextFillColor: colors.font.default, + boxShadow: `inset 0 0 0px 9999px ${colors.autofill}` + }, + "&::placeholder": { + opacity: "1 !important" as any + }, + color: colors.font.default + }, + underline: { + "&:after": { + borderBottomColor: colors.primary + } + } + }, + MuiInputBase: { + input: { + "&$disabled": { + color: colors.input.disabledText + }, + "&::placeholder": { + color: colors.font.gray, + opacity: "1 !important" as any + }, + zIndex: 2 + } + }, + MuiInputLabel: { + filled: { + zIndex: 2 + }, + formControl: { + transform: "translate(0, 1.5px) scale(0.75)", + transformOrigin: "top left" as "top left", + width: "100%" + }, + outlined: { + "&$shrink": { + transform: "translate(12px, 9px) scale(0.75)" + }, + transform: "translate(14px, 18px) scale(1)", + zIndex: 9 + }, + root: { + "&$disabled": { + color: `${fade(colors.primary, 0.4)} !important` as any + }, + "&$error": { + "&$focused": { + color: colors.error + }, + color: colors.error + }, + "&&$focused": { + "&:not($error)": { + color: colors.primary + } + }, + color: fade(colors.input.text, 0.6) + }, + shrink: { + // Negates x0.75 scale + width: "133%" + } + }, + MuiOutlinedInput: { + input: { + "&:-webkit-autofill": { + borderRadius: 4, + boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, + zIndex: 0 + }, + color: colors.input.text, + padding: "23px 12px 10px 12px" + }, + inputMultiline: { + left: -2, + padding: "10px 0", + position: "relative" + }, + root: { + "& fieldset": { + "&&:not($error)": { + borderColor: colors.input.border + }, + top: 0, + zIndex: 1 + }, + "& legend": { + display: "none" + }, + "&$disabled": { + "& fieldset": { + borderColor: [[colors.input.disabled], "!important"] as any + }, + "& input": { + backgroundColor: colors.input.disabledBackground, + color: colors.input.disabledText, + zIndex: 2 + } + }, + "&$error": { + "&$focused": { + "& fieldset": { + borderColor: colors.error + }, + "& input": { + color: colors.error, + zIndex: 2 + } + }, + "&:hover": { + "& fieldset": { + borderColor: colors.error + }, + "& input": { + color: colors.error, + zIndex: 2 + } + } + }, + "&$focused": { + "& input": { + "& fieldset": { + borderColor: colors.primary + }, + "&::placeholder": { + opacity: [[1], "!important"] as any + }, + color: colors.font.default + } + }, + "&:hover": { + "& input": { + color: colors.font.default + }, + "&&&": { + "& fieldset": { + borderColor: colors.primary + }, + "&$error fieldset": { + borderColor: colors.input.error + } + } + }, + backgroundColor: colors.background.paper, + borderColor: colors.input.border, + top: 0 + } + } +}); + +export default inputOverrides; diff --git a/src/theme/palette.ts b/src/theme/palette.ts new file mode 100644 index 000000000..6e3be3e03 --- /dev/null +++ b/src/theme/palette.ts @@ -0,0 +1,36 @@ +import { IThemeColors } from "@saleor/components/Theme/themes"; + +import { SaleorPaletteOptions } from "./types"; + +const createPalette = (colors: IThemeColors): SaleorPaletteOptions => ({ + action: { + active: colors.checkbox.default + }, + background: colors.background, + divider: colors.divider, + error: { + main: colors.error + }, + primary: { + contrastText: "#ffffff", + dark: colors.font.textDisabled, + main: colors.primary + }, + secondary: { + contrastText: "#ffffff", + main: colors.secondary + }, + text: { + disabled: colors.font.gray, + hint: colors.font.gray, + primary: colors.font.default, + secondary: colors.font.gray + }, + textHighlighted: { + active: colors.primary, + inactive: colors.highlightInactive.default + }, + type: colors.theme +}); + +export default createPalette; diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts new file mode 100644 index 000000000..acabb800c --- /dev/null +++ b/src/theme/shadows.ts @@ -0,0 +1,38 @@ +import { Shadows } from "@material-ui/core/styles/shadows"; + +const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => + [ + `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.2)`, + `0 ${uv}px ${ub}px ${us}px rgba(0, 0, 0, 0.14)`, + `0 ${av}px ${ab}px ${as}px rgba(0, 0, 0, 0.12)` + ].join(","); + +const shadows: Shadows = [ + "none", + createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0), + createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0), + createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0), + createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1), + createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1), + createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1), + createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2), + createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3), + createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4), + createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4), + createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4), + createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4), + createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4), + createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5), + createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5), + createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5), + createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4), + createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3), + createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1), + createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1), + createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1), + createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2), + createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2), + createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3) +]; + +export default shadows; diff --git a/src/theme/styles.ts b/src/theme/styles.ts new file mode 100644 index 000000000..d349442a4 --- /dev/null +++ b/src/theme/styles.ts @@ -0,0 +1,57 @@ +import muiMakeStyles from "@material-ui/core/styles/makeStyles"; +import useMuiTheme from "@material-ui/core/styles/useTheme"; +import muiWithStyles from "@material-ui/core/styles/withStyles"; +import { StyleRules } from "@material-ui/styles/withStyles"; +import { + ClassKeyOfStyles, + ClassNameMap, + StyledComponentProps, + Styles, + WithStylesOptions +} from "@material-ui/styles/withStyles"; +import { PropInjector } from "@material-ui/types"; + +import { SaleorTheme } from "./types"; + +export function makeStyles< + Props extends Record = {}, + ClassKey extends string = string +>( + styles: Styles, + options?: Omit, "withTheme"> +): keyof Props extends never + ? (props?: any) => ClassNameMap + : (props: Props) => ClassNameMap { + return muiMakeStyles(styles, options); +} + +export type WithStyles< + StylesOrClassKey extends string | Styles = string, + IncludeTheme extends boolean | undefined = false +> = (IncludeTheme extends true ? { theme: SaleorTheme } : {}) & { + classes: ClassNameMap>; +}; + +export function withStyles< + ClassKey extends string, + Options extends WithStylesOptions = {}, + Props extends Record = {} +>( + style: Styles, + options?: Options +): PropInjector< + WithStyles, + StyledComponentProps & Props +> { + return muiWithStyles(style, options); +} + +export function useTheme(): SaleorTheme { + return useMuiTheme(); +} + +export function createStyles( + styles: StyleRules +): StyleRules { + return styles; +} diff --git a/src/theme/tables.ts b/src/theme/tables.ts new file mode 100644 index 000000000..bd75718fa --- /dev/null +++ b/src/theme/tables.ts @@ -0,0 +1,70 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; +import { Overrides } from "@material-ui/core/styles/overrides"; +import { IThemeColors } from "@saleor/components/Theme/themes"; + +const tableOverrides = ( + colors: IThemeColors, + fontFamily: string +): Overrides => ({ + MuiTable: { + root: { + fontFamily, + fontFeatureSettings: '"tnum"' + } + }, + MuiTableCell: { + body: { + fontSize: "1rem", + paddingBottom: 8, + paddingTop: 8 + }, + head: { + fontSize: "1rem" + }, + paddingCheckbox: { + "&:first-child": { + padding: "0 12px", + width: 72 + }, + "&:not(first-child)": { + padding: 0, + width: 52 + } + }, + root: { + "&:first-child": { + "&:not($paddingCheckbox)": { + paddingLeft: 24 + "px", + textAlign: "left" as "left" + } + }, + borderBottomColor: colors.paperBorder, + height: 56, + padding: "4px 24px" + } + }, + MuiTableRow: { + footer: { + "$root$hover&:hover": { + background: "none" + } + }, + head: { + "$root$hover&:hover": { + background: "none" + } + }, + hover: { + "$root&:hover": { + backgroundColor: fade(colors.primary, 0.3) + } + }, + root: { + "&$selected": { + backgroundColor: fade(colors.primary, 0.05) + } + } + } +}); + +export default tableOverrides; diff --git a/src/theme/types.ts b/src/theme/types.ts new file mode 100644 index 000000000..02d098ce8 --- /dev/null +++ b/src/theme/types.ts @@ -0,0 +1,27 @@ +import { Theme } from "@material-ui/core/styles"; +import { ThemeOptions } from "@material-ui/core/styles/createMuiTheme"; +import { + Palette, + PaletteOptions +} from "@material-ui/core/styles/createPalette"; + +interface ExtraPaletteOptions { + textHighlighted?: { + active: string; + inactive: string; + }; +} + +export interface SaleorPalette extends Palette, ExtraPaletteOptions {} + +export interface SaleorPaletteOptions + extends PaletteOptions, + ExtraPaletteOptions {} + +export interface SaleorTheme extends Theme { + palette: SaleorPalette; +} + +export interface SaleorThemeOptions extends ThemeOptions { + palette: SaleorPaletteOptions; +} diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx index 953300a1d..ca7a7e03b 100644 --- a/src/translations/components/TranslationFields/TranslationFields.tsx +++ b/src/translations/components/TranslationFields/TranslationFields.tsx @@ -3,7 +3,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 Typography from "@material-ui/core/Typography"; import ArrowIcon from "@material-ui/icons/ArrowDropDown"; import CardTitle from "@saleor/components/CardTitle"; @@ -12,6 +11,7 @@ import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import Skeleton from "@saleor/components/Skeleton"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx index c925414c5..9848c4bde 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx @@ -1,9 +1,9 @@ import Button from "@material-ui/core/Button"; -import { makeStyles } from "@material-ui/core/styles"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { buttonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx index 2be73f045..052f3da63 100644 --- a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx +++ b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx @@ -1,5 +1,4 @@ import { Omit } from "@material-ui/core"; -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"; @@ -8,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TablePagination from "@saleor/components/TablePagination"; +import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx index 3957ee575..153aaa8eb 100644 --- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx +++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx @@ -1,5 +1,4 @@ import Card from "@material-ui/core/Card"; -import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; @@ -7,6 +6,7 @@ import TableRow from "@material-ui/core/TableRow"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo"; import Skeleton from "@saleor/components/Skeleton"; +import { makeStyles } from "@saleor/theme"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/warehouses/components/WarehouseList/WarehouseList.tsx b/src/warehouses/components/WarehouseList/WarehouseList.tsx index 6e5f3ac88..d8599df53 100644 --- a/src/warehouses/components/WarehouseList/WarehouseList.tsx +++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx @@ -1,5 +1,4 @@ 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"; @@ -13,6 +12,7 @@ import TableCellHeader from "@saleor/components/TableCellHeader"; import TablePagination from "@saleor/components/TablePagination"; import { WarehouseWithShippingFragment } from "@saleor/fragments/types/WarehouseWithShippingFragment"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import { WarehouseListUrlSortField } from "@saleor/warehouses/urls"; diff --git a/src/warehouses/components/WarehouseZones/WarehouseZones.tsx b/src/warehouses/components/WarehouseZones/WarehouseZones.tsx index 4a27cbdf3..e60b4d7e8 100644 --- a/src/warehouses/components/WarehouseZones/WarehouseZones.tsx +++ b/src/warehouses/components/WarehouseZones/WarehouseZones.tsx @@ -1,11 +1,11 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import Link from "@saleor/components/Link"; import Skeleton from "@saleor/components/Skeleton"; import { maybe, renderCollection } from "@saleor/misc"; +import { makeStyles } from "@saleor/theme"; import { WarehouseDetails_warehouse_shippingZones_edges_node } from "@saleor/warehouses/types/WarehouseDetails"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx index c37740627..ff91b3172 100644 --- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx +++ b/src/webhooks/components/WebhookInfo/WebhookInfo.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/makeStyles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; @@ -8,6 +7,7 @@ import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import { WebhookErrorFragment } from "@saleor/fragments/types/WebhookErrorFragment"; import { commonMessages } from "@saleor/intl"; +import { makeStyles } from "@saleor/theme"; import { getFormErrors } from "@saleor/utils/errors"; import getWebhookErrorMessage from "@saleor/utils/errors/webhooks"; import React from "react"; diff --git a/src/webhooks/components/WebhooksList/styles.ts b/src/webhooks/components/WebhooksList/styles.ts index 0e468e79d..b57e1ce91 100644 --- a/src/webhooks/components/WebhooksList/styles.ts +++ b/src/webhooks/components/WebhooksList/styles.ts @@ -1,4 +1,4 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; +import { makeStyles } from "@saleor/theme"; export const useStyles = makeStyles( theme => ({