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

Add missing style names

Browse source
This commit is contained in:
dominik-zeglen 2019-12-03 16:28:40 +01:00
parent 9a1ef2ba40
commit 96176924f9
155 changed files with 3818 additions and 3359 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,41 +20,44 @@ export interface AttributeListProps extends ListProps, ListActions {
attributes: AttributeList_attributes_edges_node[];
}
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colFaceted: {
width: 150
},
colName: {
width: "auto"
},
colSearchable: {
width: 150
},
colSlug: {
width: 200
},
colVisible: {
width: 150
}
},
colFaceted: {
width: 150
},
colName: {
width: "auto"
textAlign: "center"
},
colName: {},
colSearchable: {
width: 150
textAlign: "center"
},
colSlug: {
width: 200
paddingLeft: 0
},
colVisible: {
width: 150
textAlign: "center"
},
link: {
cursor: "pointer"
}
},
colFaceted: {
textAlign: "center"
},
colName: {},
colSearchable: {
textAlign: "center"
},
colSlug: {
paddingLeft: 0
},
colVisible: {
textAlign: "center"
},
link: {
cursor: "pointer"
}
}));
}),
{ name: "AttributeList" }
);
const numberOfColumns = 6;

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

@ -29,29 +29,32 @@ export interface AttributeValuesProps {
onValueUpdate: (id: string) => void;
}
const useStyles = makeStyles(theme => ({
columnAdmin: {
width: "50%"
},
columnDrag: {
width: 48 + theme.spacing(1.5)
},
columnStore: {
width: "50%"
},
dragIcon: {
cursor: "grab"
},
iconCell: {
"&:last-child": {
paddingRight: theme.spacing()
const useStyles = makeStyles(
theme => ({
columnAdmin: {
width: "50%"
},
width: 48 + theme.spacing(1.5)
},
link: {
cursor: "pointer"
}
}));
columnDrag: {
width: 48 + theme.spacing(1.5)
},
columnStore: {
width: "50%"
},
dragIcon: {
cursor: "grab"
},
iconCell: {
"&:last-child": {
paddingRight: theme.spacing()
},
width: 48 + theme.spacing(1.5)
},
link: {
cursor: "pointer"
}
}),
{ name: "AttributeValues" }
);
const AttributeValues: React.FC<AttributeValuesProps> = ({
disabled,

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

@ -15,28 +15,31 @@ import { FormattedMessage, useIntl } from "react-intl";
import { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails";
import { FormData } from "../CategoryUpdatePage";
const useStyles = makeStyles(theme => ({
fileField: {
display: "none"
},
image: {
height: "100%",
objectFit: "contain",
userSelect: "none",
width: "100%"
},
imageContainer: {
background: "#ffffff",
border: "1px solid #eaeaea",
borderRadius: theme.spacing(),
height: 148,
justifySelf: "start",
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
width: 148
}
}));
const useStyles = makeStyles(
theme => ({
fileField: {
display: "none"
},
image: {
height: "100%",
objectFit: "contain",
userSelect: "none",
width: "100%"
},
imageContainer: {
background: "#ffffff",
border: "1px solid #eaeaea",
borderRadius: theme.spacing(),
height: 148,
justifySelf: "start",
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
width: 148
}
}),
{ name: "CategoryBackground" }
);
export interface CategoryBackgroundProps {
data: FormData;

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

@ -11,13 +11,16 @@ import SingleAutocompleteSelectField, {
SingleAutocompleteChoiceType
} from "../SingleAutocompleteSelectField";
const useStyles = makeStyles(theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr"
}
}));
const useStyles = makeStyles(
theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr"
}
}),
{ name: "AddressEdit" }
);
interface AddressEditProps {
countries: SingleAutocompleteChoiceType[];

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

@ -11,44 +11,47 @@ export interface AppHeaderProps {
onBack();
}
const useStyles = makeStyles(theme => ({
backArrow: {
fontSize: 30
},
menuButton: {
flex: "0 0 auto",
marginLeft: -theme.spacing(2),
marginRight: theme.spacing(),
marginTop: -theme.spacing(2)
},
root: {
"&:hover": {
color: theme.typography.body1.color
const useStyles = makeStyles(
theme => ({
backArrow: {
fontSize: 30
},
alignItems: "center",
color: theme.palette.grey[500],
cursor: "pointer",
display: "flex",
marginTop: theme.spacing(0.5),
transition: theme.transitions.duration.standard + "ms",
[theme.breakpoints.down("sm")]: {
display: "none"
menuButton: {
flex: "0 0 auto",
marginLeft: -theme.spacing(2),
marginRight: theme.spacing(),
marginTop: -theme.spacing(2)
},
root: {
"&:hover": {
color: theme.typography.body1.color
},
alignItems: "center",
color: theme.palette.grey[500],
cursor: "pointer",
display: "flex",
marginTop: theme.spacing(0.5),
transition: theme.transitions.duration.standard + "ms",
[theme.breakpoints.down("sm")]: {
display: "none"
}
},
skeleton: {
marginBottom: theme.spacing(2),
width: "10rem"
},
title: {
color: "inherit",
flex: 1,
marginLeft: theme.spacing(),
textTransform: "uppercase",
[theme.breakpoints.down("sm")]: {
display: "none"
}
}
},
skeleton: {
marginBottom: theme.spacing(2),
width: "10rem"
},
title: {
color: "inherit",
flex: 1,
marginLeft: theme.spacing(),
textTransform: "uppercase",
[theme.breakpoints.down("sm")]: {
display: "none"
}
}
}));
}),
{ name: "AppHeader" }
);
const AppHeader: React.FC<AppHeaderProps> = props => {
const { children, onBack } = props;

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

@ -19,41 +19,92 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
import MenuNested from "./MenuNested";
import { IMenuItem } from "./menuStructure";
const useStyles = makeStyles(theme => ({
menuIcon: {
"& svg": {
height: 32,
width: 32
const useStyles = makeStyles(
theme => ({
menuIcon: {
"& svg": {
height: 32,
width: 32
},
display: "inline-block",
position: "relative",
top: 8
},
display: "inline-block",
position: "relative",
top: 8
},
menuIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
menuIconSmall: {
left: -5
},
menuIsActive: {
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
},
menuItemHover: {
"& p": {
fontSize: 14,
transition: "color 0.5s ease, opacity 0.3s ease-out"
menuIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
"& path": {
transition: "fill 0.5s ease"
menuIconSmall: {
left: -5
},
"&:hover": {
menuIsActive: {
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
},
menuItemHover: {
"& p": {
fontSize: 14,
transition: "color 0.5s ease, opacity 0.3s ease-out"
},
"& path": {
transition: "fill 0.5s ease"
},
"&:hover": {
"& p": {
color: theme.palette.primary.main
},
"& path": {
fill: theme.palette.primary.main
},
"&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`,
content: "''",
height: 33,
left: -20,
position: "absolute",
top: 8
},
color: theme.palette.primary.main
},
cursor: "pointer",
position: "relative"
},
menuList: {
display: "flex",
flexDirection: "column",
height: "100%",
marginLeft: theme.spacing(4),
marginTop: theme.spacing(2),
paddingBottom: theme.spacing(3)
},
menuListItem: {
alignItems: "center",
display: "block",
marginBottom: theme.spacing(5),
paddingLeft: 0,
textDecoration: "none",
transition: theme.transitions.duration.standard + "ms"
},
menuListItemActive: {
"& $menuListItemText": {
color: theme.palette.primary.main
},
"& path": {
color: theme.palette.primary.main,
fill: theme.palette.primary.main
}
},
menuListItemOpen: {
"&:after": {
borderBottom: `10px solid transparent`,
borderLeft: `10px solid ${theme.palette.background.paper}`,
borderTop: `10px solid transparent`,
content: "''",
height: 0,
position: "absolute",
right: -30,
top: 15,
width: 0
},
"&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`,
@ -63,97 +114,49 @@ const useStyles = makeStyles(theme => ({
position: "absolute",
top: 8
},
color: theme.palette.primary.main
position: "relative"
},
cursor: "pointer",
position: "relative"
},
menuList: {
display: "flex",
flexDirection: "column",
height: "100%",
marginLeft: theme.spacing(4),
marginTop: theme.spacing(2),
paddingBottom: theme.spacing(3)
},
menuListItem: {
alignItems: "center",
display: "block",
marginBottom: theme.spacing(5),
paddingLeft: 0,
textDecoration: "none",
transition: theme.transitions.duration.standard + "ms"
},
menuListItemActive: {
"& $menuListItemText": {
color: theme.palette.primary.main
menuListItemText: {
"&:hover": {
color: theme.palette.primary.main
},
bottom: 0,
cursor: "pointer",
fontSize: "1rem",
fontWeight: 500,
left: 30,
opacity: 1,
paddingLeft: 16,
position: "absolute",
textTransform: "uppercase",
transition: "opacity 0.5s ease"
},
"& path": {
color: theme.palette.primary.main,
fill: theme.palette.primary.main
menuListItemTextHide: {
bottom: 0,
left: 30,
opacity: 0,
position: "absolute"
},
subMenu: {
padding: "0 15px"
},
subMenuDrawer: {
background: "#000",
cursor: "pointer",
height: "100vh",
left: 0,
opacity: 0.2,
position: "absolute",
top: 0,
width: 0,
zIndex: -2
},
subMenuDrawerOpen: {
width: `100vw`
}
},
menuListItemOpen: {
"&:after": {
borderBottom: `10px solid transparent`,
borderLeft: `10px solid ${theme.palette.background.paper}`,
borderTop: `10px solid transparent`,
content: "''",
height: 0,
position: "absolute",
right: -30,
top: 15,
width: 0
},
"&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`,
content: "''",
height: 33,
left: -20,
position: "absolute",
top: 8
},
position: "relative"
},
menuListItemText: {
"&:hover": {
color: theme.palette.primary.main
},
bottom: 0,
cursor: "pointer",
fontSize: "1rem",
fontWeight: 500,
left: 30,
opacity: 1,
paddingLeft: 16,
position: "absolute",
textTransform: "uppercase",
transition: "opacity 0.5s ease"
},
menuListItemTextHide: {
bottom: 0,
left: 30,
opacity: 0,
position: "absolute"
},
subMenu: {
padding: "0 15px"
},
subMenuDrawer: {
background: "#000",
cursor: "pointer",
height: "100vh",
left: 0,
opacity: 0.2,
position: "absolute",
top: 0,
width: 0,
zIndex: -2
},
subMenuDrawerOpen: {
width: `100vw`
}
}));
}),
{ name: "MenuList" }
);
interface MenuListProps {
className?: string;

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

@ -12,89 +12,92 @@ import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
import { IActiveSubMenu } from "./MenuList";
import { IMenuItem } from "./menuStructure";
const useStyles = makeStyles(theme => ({
menuListNested: {
background: theme.palette.background.paper,
height: "100vh",
position: "absolute",
right: 0,
top: 0,
transition: `right ${theme.transitions.duration.shorter}ms ease`,
width: drawerNestedMenuWidth,
zIndex: -1
},
menuListNestedClose: {
"& svg": {
fill: theme.palette.primary.main,
left: 11,
position: "relative",
top: 1
const useStyles = makeStyles(
theme => ({
menuListNested: {
background: theme.palette.background.paper,
height: "100vh",
position: "absolute",
right: 0,
top: 0,
transition: `right ${theme.transitions.duration.shorter}ms ease`,
width: drawerNestedMenuWidth,
zIndex: -1
},
border: `solid 1px #EAEAEA`,
borderRadius: "100%",
cursor: "pointer",
height: 32,
position: "absolute",
right: 32,
top: 35,
transform: "rotate(180deg)",
width: 32
},
menuListNestedCloseDark: {
border: `solid 1px #252728`
},
menuListNestedHide: {
opacity: 0
},
menuListNestedIcon: {
"& path": {
fill: "initial"
menuListNestedClose: {
"& svg": {
fill: theme.palette.primary.main,
left: 11,
position: "relative",
top: 1
},
border: `solid 1px #EAEAEA`,
borderRadius: "100%",
cursor: "pointer",
height: 32,
position: "absolute",
right: 32,
top: 35,
transform: "rotate(180deg)",
width: 32
},
"& svg": { height: 32, position: "relative", top: 7, width: 32 }
},
menuListNestedIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
menuListNestedItem: {
"&:hover": {
"& p": {
color: theme.palette.primary.main
menuListNestedCloseDark: {
border: `solid 1px #252728`
},
menuListNestedHide: {
opacity: 0
},
menuListNestedIcon: {
"& path": {
fill: "initial"
},
"& svg": { height: 32, position: "relative", top: 7, width: 32 }
},
menuListNestedIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
display: "block",
marginBottom: theme.spacing(2),
padding: "0px 30px",
textDecoration: "none"
},
menuListNestedOpen: {
[theme.breakpoints.down("sm")]: {
right: 0,
width: drawerWidthExpandedMobile,
zIndex: 2
menuListNestedItem: {
"&:hover": {
"& p": {
color: theme.palette.primary.main
}
},
display: "block",
marginBottom: theme.spacing(2),
padding: "0px 30px",
textDecoration: "none"
},
right: -drawerNestedMenuWidth,
width: drawerNestedMenuWidth,
zIndex: -1
},
subHeader: {
borderBottom: "solid 1px #EAEAEA",
margin: "30px",
marginBottom: 39,
paddingBottom: 22
},
subHeaderDark: {
borderBottom: "solid 1px #252728"
},
subHeaderTitle: {
[theme.breakpoints.up("md")]: {
paddingLeft: 0
menuListNestedOpen: {
[theme.breakpoints.down("sm")]: {
right: 0,
width: drawerWidthExpandedMobile,
zIndex: 2
},
right: -drawerNestedMenuWidth,
width: drawerNestedMenuWidth,
zIndex: -1
},
display: "inline",
paddingLeft: 10
}
}));
subHeader: {
borderBottom: "solid 1px #EAEAEA",
margin: "30px",
marginBottom: 39,
paddingBottom: 22
},
subHeaderDark: {
borderBottom: "solid 1px #252728"
},
subHeaderTitle: {
[theme.breakpoints.up("md")]: {
paddingLeft: 0
},
display: "inline",
paddingLeft: 10
}
}),
{ name: "MenuNested" }
);
export interface MenuNestedProps {
activeItem: IActiveSubMenu;

29
src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
View file

@ -27,22 +27,25 @@ export interface FormData {
query: string;
}
const useStyles = makeStyles({
avatar: {
"&:first-child": {
const useStyles = makeStyles(
{
avatar: {
"&:first-child": {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
wideCell: {
width: "100%"
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
wideCell: {
width: "100%"
}
});
{ name: "AssignCategoryDialog" }
);
interface AssignCategoriesDialogProps {
categories: SearchCategories_search_edges_node[];

29
src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
View file

@ -27,22 +27,25 @@ export interface FormData {
query: string;
}
const useStyles = makeStyles({
avatar: {
"&:first-child": {
const useStyles = makeStyles(
{
avatar: {
"&:first-child": {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
wideCell: {
width: "100%"
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
wideCell: {
width: "100%"
}
});
{ name: "AssignCollectionDialog" }
);
interface AssignCollectionDialogProps {
collections: SearchCollections_search_edges_node[];

37
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -29,26 +29,29 @@ export interface FormData {
query: string;
}
const useStyles = makeStyles({
avatar: {
"&:first-child": {
const useStyles = makeStyles(
{
avatar: {
"&:first-child": {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
scrollArea: {
overflowY: "scroll"
},
wideCell: {
paddingLeft: 0,
width: "100%"
}
},
checkboxCell: {
paddingLeft: 0
},
overflow: {
overflowY: "visible"
},
scrollArea: {
overflowY: "scroll"
},
wideCell: {
paddingLeft: 0,
width: "100%"
}
});
{ name: "AssignProductDialog" }
);
export interface AssignProductDialogProps {
confirmButtonState: ConfirmButtonTransitionState;

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

@ -38,25 +38,28 @@ const DebounceAutocomplete: React.ComponentType<
DebounceProps<string>
> = Debounce;
const useStyles = makeStyles(theme => ({
container: {
flexGrow: 1,
position: "relative"
},
menuBack: {
marginLeft: -theme.spacing(0.5),
marginRight: theme.spacing(1)
},
paper: {
left: 0,
marginTop: theme.spacing(),
padding: theme.spacing(),
position: "absolute",
right: 0,
zIndex: 2
},
root: {}
}));
const useStyles = makeStyles(
theme => ({
container: {
flexGrow: 1,
position: "relative"
},
menuBack: {
marginLeft: -theme.spacing(0.5),
marginRight: theme.spacing(1)
},
paper: {
left: 0,
marginTop: theme.spacing(),
padding: theme.spacing(),
position: "absolute",
right: 0,
zIndex: 2
},
root: {}
}),
{ name: "AutocompleteSelectMenu" }
);
const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
const {
disabled,

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

@ -18,15 +18,18 @@ export interface CardMenuProps {
menuItems: CardMenuItem[];
}
const useStyles = makeStyles(theme => ({
iconButton: {
background: theme.palette.background.paper,
borderRadius: "100%",
height: 32,
padding: 0,
width: 32
}
}));
const useStyles = makeStyles(
theme => ({
iconButton: {
background: theme.palette.background.paper,
borderRadius: "100%",
height: 32,
padding: 0,
width: 32
}
}),
{ name: "CardMenu" }
);
const CardMenu: React.FC<CardMenuProps> = props => {
const { className, disabled, menuItems } = props;

19
src/components/CardSpacer.tsx
View file

@ -1,14 +1,17 @@
import { makeStyles } from "@material-ui/core/styles";
import React from "react";
const useStyles = makeStyles(theme => ({
spacer: {
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1)
},
marginTop: theme.spacing(3)
}
}));
const useStyles = makeStyles(
theme => ({
spacer: {
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1)
},
marginTop: theme.spacing(3)
}
}),
{ name: "CardSpacer" }
);
interface CardSpacerProps {
children?: React.ReactNode;

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

@ -3,33 +3,36 @@ import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
children: theme.mixins.gutters({}),
constantHeight: {
height: 56
},
hr: {
border: "none",
borderTop: `1px solid ${theme.palette.divider}`,
height: 0,
marginBottom: 0,
marginTop: 0,
width: "100%"
},
root: theme.mixins.gutters({
alignItems: "center",
display: "flex",
minHeight: 56
const useStyles = makeStyles(
theme => ({
children: theme.mixins.gutters({}),
constantHeight: {
height: 56
},
hr: {
border: "none",
borderTop: `1px solid ${theme.palette.divider}`,
height: 0,
marginBottom: 0,
marginTop: 0,
width: "100%"
},
root: theme.mixins.gutters({
alignItems: "center",
display: "flex",
minHeight: 56
}),
title: {
flex: 1,
fontWeight: 500,
lineHeight: 1
},
toolbar: {
marginRight: -theme.spacing(1)
}
}),
title: {
flex: 1,
fontWeight: 500,
lineHeight: 1
},
toolbar: {
marginRight: -theme.spacing(1)
}
}));
{ name: "CardTitle" }
);
interface CardTitleProps {
children?: React.ReactNode;

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

@ -19,67 +19,70 @@ export type CheckboxProps = Omit<
onChange?: (event: React.ChangeEvent<any>) => void;
};
const useStyles = makeStyles(theme => ({
box: {
"&$checked": {
"&:before": {
background: theme.palette.primary.main,
color: theme.palette.background.paper,
content: '"\\2713"',
fontWeight: "bold",
textAlign: "center"
const useStyles = makeStyles(
theme => ({
box: {
"&$checked": {
"&:before": {
background: theme.palette.primary.main,
color: theme.palette.background.paper,
content: '"\\2713"',
fontWeight: "bold",
textAlign: "center"
},
borderColor: theme.palette.primary.main
},
borderColor: theme.palette.primary.main
},
"&$disabled": {
borderColor: theme.palette.grey[200]
},
"&$indeterminate": {
"&:before": {
background: theme.palette.primary.main,
height: 2,
top: 5
"&$disabled": {
borderColor: theme.palette.grey[200]
},
borderColor: theme.palette.primary.main
},
"&:before": {
background: "rgba(0, 0, 0, 0)",
content: '""',
"&$indeterminate": {
"&:before": {
background: theme.palette.primary.main,
height: 2,
top: 5
},
borderColor: theme.palette.primary.main
},
"&:before": {
background: "rgba(0, 0, 0, 0)",
content: '""',
height: 14,
left: -1,
position: "absolute",
top: -1,
transition: theme.transitions.duration.short + "ms",
width: 14
},
WebkitAppearance: "none",
border: `1px solid ${theme.palette.action.active}`,
boxSizing: "border-box",
cursor: "pointer",
height: 14,
left: -1,
position: "absolute",
top: -1,
transition: theme.transitions.duration.short + "ms",
outline: "0",
position: "relative",
userSelect: "none",
width: 14
},
WebkitAppearance: "none",
border: `1px solid ${theme.palette.action.active}`,
boxSizing: "border-box",
cursor: "pointer",
height: 14,
outline: "0",
position: "relative",
userSelect: "none",
width: 14
},
checked: {},
disabled: {},
indeterminate: {},
root: {
"&:hover": {
background: fade(theme.palette.primary.main, 0.1)
},
alignSelf: "start",
borderRadius: "100%",
cursor: "pointer",
display: "flex",
height: 30,
justifyContent: "center",
margin: "5px 9px",
width: 30
}
}));
checked: {},
disabled: {},
indeterminate: {},
root: {
"&:hover": {
background: fade(theme.palette.primary.main, 0.1)
},
alignSelf: "start",
borderRadius: "100%",
cursor: "pointer",
display: "flex",
height: 30,
justifyContent: "center",
margin: "5px 9px",
width: 30
}
}),
{ name: "Checkbox" }
);
const Checkbox: React.FC<CheckboxProps> = props => {
const {
checked,

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

@ -11,24 +11,27 @@ export interface ChipProps {
onClose?: () => void;
}
const useStyles = makeStyles(theme => ({
closeIcon: {
cursor: "pointer",
fontSize: 16,
marginLeft: theme.spacing(),
verticalAlign: "middle"
},
label: {
color: theme.palette.common.white
},
root: {
background: fade(theme.palette.secondary.main, 0.8),
borderRadius: 8,
display: "inline-block",
marginRight: theme.spacing(2),
padding: "6px 12px"
}
}));
const useStyles = makeStyles(
theme => ({
closeIcon: {
cursor: "pointer",
fontSize: 16,
marginLeft: theme.spacing(),
verticalAlign: "middle"
},
label: {
color: theme.palette.common.white
},
root: {
background: fade(theme.palette.secondary.main, 0.8),
borderRadius: 8,
display: "inline-block",
marginRight: theme.spacing(2),
padding: "6px 12px"
}
}),
{ name: "Chip" }
);
const Chip: React.FC<ChipProps> = props => {
const { className, label, onClose } = props;

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

@ -30,50 +30,53 @@ export interface ColumnPickerContentProps extends Partial<FetchMoreProps> {
onSave: () => void;
}
const useStyles = makeStyles(theme => ({
actionBar: {
display: "flex",
justifyContent: "space-between"
},
actionBarContainer: {
boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
transition: theme.transitions.duration.short + "ms"
},
cancelButton: {
marginRight: theme.spacing(2)
},
content: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "repeat(2, 1fr)"
const useStyles = makeStyles(
theme => ({
actionBar: {
display: "flex",
justifyContent: "space-between"
},
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "repeat(3, 1fr)",
maxHeight: 256,
overflowX: "visible",
overflowY: "scroll",
padding: theme.spacing(2, 3)
},
contentContainer: {
padding: 0
},
dropShadow: {
boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
},
loadMoreLoaderContainer: {
alignItems: "center",
display: "flex",
gridColumnEnd: "span 3",
height: theme.spacing(3),
justifyContent: "center"
},
root: {
boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
},
titleContainer: {
padding: theme.spacing(1.5, 3.5)
}
}));
actionBarContainer: {
boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
transition: theme.transitions.duration.short + "ms"
},
cancelButton: {
marginRight: theme.spacing(2)
},
content: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "repeat(2, 1fr)"
},
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "repeat(3, 1fr)",
maxHeight: 256,
overflowX: "visible",
overflowY: "scroll",
padding: theme.spacing(2, 3)
},
contentContainer: {
padding: 0
},
dropShadow: {
boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
},
loadMoreLoaderContainer: {
alignItems: "center",
display: "flex",
gridColumnEnd: "span 3",
height: theme.spacing(3),
justifyContent: "center"
},
root: {
boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
},
titleContainer: {
padding: theme.spacing(1.5, 3.5)
}
}),
{ name: "ColumnPickerContent" }
);
const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
const {

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

@ -67,7 +67,7 @@ interface ConfirmButtonState {
displayCompletedActionState: boolean;
}
const ConfirmButton = withStyles(styles)(
const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
class ConfirmButtonComponent extends React.Component<
ConfirmButtonProps &
WithStyles<

19
src/components/ControlledSwitch.tsx
View file

@ -3,14 +3,17 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import React from "react";
const useStyles = makeStyles(theme => ({
label: {
marginLeft: theme.spacing(3.5)
},
labelText: {
fontSize: 14
}
}));
const useStyles = makeStyles(
theme => ({
label: {
marginLeft: theme.spacing(3.5)
},
labelText: {
fontSize: 14
}
}),
{ name: "ControlledSwitch" }
);
interface ControlledSwitchProps {
checked: boolean;

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

@ -27,50 +27,53 @@ export interface CountryListProps {
onCountryUnassign: (country: string) => void;
}
const useStyles = makeStyles(theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
const useStyles = makeStyles(
theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing(2)
},
width: 48 + theme.spacing(2)
},
indicator: {
color: theme.palette.text.disabled,
display: "inline-block",
left: 0,
marginRight: theme.spacing(0.5),
position: "absolute"
},
offsetCell: {
"&:first-child": {
paddingLeft: theme.spacing(3)
indicator: {
color: theme.palette.text.disabled,
display: "inline-block",
left: 0,
marginRight: theme.spacing(0.5),
position: "absolute"
},
position: "relative"
},
pointer: {
cursor: "pointer"
},
root: {
"&:last-child": {
paddingBottom: 0
offsetCell: {
"&:first-child": {
paddingLeft: theme.spacing(3)
},
position: "relative"
},
paddingTop: 0
},
rotate: {
transform: "rotate(180deg)"
},
textRight: {
textAlign: "right"
},
toLeft: {
"&:first-child": {
paddingLeft: 0
pointer: {
cursor: "pointer"
},
root: {
"&:last-child": {
paddingBottom: 0
},
paddingTop: 0
},
rotate: {
transform: "rotate(180deg)"
},
textRight: {
textAlign: "right"
},
toLeft: {
"&:first-child": {
paddingLeft: 0
}
},
wideColumn: {
width: "100%"
}
},
wideColumn: {
width: "100%"
}
}));
}),
{ name: "CountryList" }
);
const CountryList: React.FC<CountryListProps> = props => {
const {

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

@ -9,35 +9,38 @@ import React from "react";
import useForm from "@saleor/hooks/useForm";
const useStyles = makeStyles(theme => ({
card: {
border: `1px solid ${theme.palette.divider}`
},
container: {
position: "relative"
},
overlay: {
cursor: "pointer",
height: "100vh",
left: 0,
position: "fixed",
top: 0,
width: "100vw",
zIndex: 1
},
root: {
left: 0,
minWidth: theme.spacing(20),
position: "absolute",
top: 0,
width: `calc(100% + ${theme.spacing(4)}px)`,
zIndex: 2
},
text: {
cursor: "pointer",
fontSize: "0.8125rem"
}
}));
const useStyles = makeStyles(
theme => ({
card: {
border: `1px solid ${theme.palette.divider}`
},
container: {
position: "relative"
},
overlay: {
cursor: "pointer",
height: "100vh",
left: 0,
position: "fixed",
top: 0,
width: "100vw",
zIndex: 1
},
root: {
left: 0,
minWidth: theme.spacing(20),
position: "absolute",
top: 0,
width: `calc(100% + ${theme.spacing(4)}px)`,
zIndex: 2
},
text: {
cursor: "pointer",
fontSize: "0.8125rem"
}
}),
{ name: "EditableTableCell" }
);
interface EditableTableCellProps {
className?: string;

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

@ -11,49 +11,52 @@ export interface ErrorPageProps {
onBack: () => void;
}
const useStyles = makeStyles(theme => ({
bottomHeader: {
fontWeight: 600 as 600,
textTransform: "uppercase"
},
button: {
marginTop: theme.spacing(2),
padding: 20
},
container: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
padding: theme.spacing(3),
width: "100%"
const useStyles = makeStyles(
theme => ({
bottomHeader: {
fontWeight: 600 as 600,
textTransform: "uppercase"
},
display: "grid",
gridTemplateColumns: "1fr 487px",
margin: "0 auto",
width: 830
},
innerContainer: {
[theme.breakpoints.down("sm")]: {
order: 1,
textAlign: "center"
button: {
marginTop: theme.spacing(2),
padding: 20
},
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
notFoundImage: {
"& svg": {
width: "100%"
container: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
padding: theme.spacing(3),
width: "100%"
},
display: "grid",
gridTemplateColumns: "1fr 487px",
margin: "0 auto",
width: 830
},
innerContainer: {
[theme.breakpoints.down("sm")]: {
order: 1,
textAlign: "center"
},
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
notFoundImage: {
"& svg": {
width: "100%"
}
},
root: {
alignItems: "center",
display: "flex",
height: "calc(100vh - 180px)"
},
upperHeader: {
fontWeight: 600 as 600
}
},
root: {
alignItems: "center",
display: "flex",
height: "calc(100vh - 180px)"
},
upperHeader: {
fontWeight: 600 as 600
}
}));
}),
{ name: "ErrorPage" }
);
const ErrorPage: React.FC<ErrorPageProps> = props => {
const { onBack } = props;

13
src/components/ExternalLink/ExternalLink.tsx
View file

@ -2,11 +2,14 @@ import { makeStyles } from "@material-ui/core/styles";
import Typography, { TypographyProps } from "@material-ui/core/Typography";
import React from "react";
const useStyles = makeStyles({
link: {
textDecoration: "none"
}
});
const useStyles = makeStyles(
{
link: {
textDecoration: "none"
}
},
{ name: "ExternalLink" }
);
interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
href: string;

23
src/components/FileUpload/FileUpload.tsx
View file

@ -4,17 +4,20 @@ import TextField from "@material-ui/core/TextField";
import React from "react";
import { FormattedMessage } from "react-intl";
const useStyles = makeStyles({
fileUploadField: {
display: "none"
const useStyles = makeStyles(
{
fileUploadField: {
display: "none"
},
root: {
display: "flex"
},
textField: {
flex: 1
}
},
root: {
display: "flex"
},
textField: {
flex: 1
}
});
{ name: "FileUpload" }
);
interface FileUploadProps {
disabled?: boolean;

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

@ -21,63 +21,66 @@ export interface FilterProps<TFilterKeys = string> {
onFilterAdd: (filter: FilterContentSubmitData) => void;
}
const useStyles = makeStyles(theme => ({
addFilterButton: {
"&$filterButton": {
"&:hover, &:focus": {
backgroundColor: fade(theme.palette.primary.main, 0.1)
},
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.primary.main}`,
cursor: "pointer",
marginBottom: 0,
marginRight: theme.spacing(2),
marginTop: 0,
transition: theme.transitions.duration.short + "ms"
}
},
addFilterButtonActive: {
"&$addFilterButton": {
backgroundColor: fade(theme.palette.primary.main, 0.1)
}
},
addFilterIcon: {
transition: theme.transitions.duration.short + "ms"
},
addFilterText: {
color: theme.palette.primary.main,
fontSize: 14,
fontWeight: 600 as 600,
marginRight: 4,
textTransform: "uppercase"
},
filterButton: {
alignItems: "center",
backgroundColor: fade(theme.palette.primary.main, 0.6),
borderRadius: "4px",
display: "flex",
height: 40,
justifyContent: "space-around",
margin: theme.spacing(2, 1),
marginLeft: 0,
padding: theme.spacing(0, 2),
position: "relative"
},
paper: {
"& p": {
paddingBottom: 10
const useStyles = makeStyles(
theme => ({
addFilterButton: {
"&$filterButton": {
"&:hover, &:focus": {
backgroundColor: fade(theme.palette.primary.main, 0.1)
},
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.primary.main}`,
cursor: "pointer",
marginBottom: 0,
marginRight: theme.spacing(2),
marginTop: 0,
transition: theme.transitions.duration.short + "ms"
}
},
marginTop: theme.spacing(2),
padding: theme.spacing(2),
width: 240
},
popover: {
zIndex: 1
},
rotate: {
transform: "rotate(180deg)"
}
}));
addFilterButtonActive: {
"&$addFilterButton": {
backgroundColor: fade(theme.palette.primary.main, 0.1)
}
},
addFilterIcon: {
transition: theme.transitions.duration.short + "ms"
},
addFilterText: {
color: theme.palette.primary.main,
fontSize: 14,
fontWeight: 600 as 600,
marginRight: 4,
textTransform: "uppercase"
},
filterButton: {
alignItems: "center",
backgroundColor: fade(theme.palette.primary.main, 0.6),
borderRadius: "4px",
display: "flex",
height: 40,
justifyContent: "space-around",
margin: theme.spacing(2, 1),
marginLeft: 0,
padding: theme.spacing(0, 2),
position: "relative"
},
paper: {
"& p": {
paddingBottom: 10
},
marginTop: theme.spacing(2),
padding: theme.spacing(2),
width: 240
},
popover: {
zIndex: 1
},
rotate: {
transform: "rotate(180deg)"
}
}),
{ name: "Filter" }
);
const Filter: React.FC<FilterProps> = props => {
const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
const classes = useStyles(props);

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

@ -6,14 +6,17 @@ import React from "react";
import { FilterContentSubmitData, IFilter } from "../Filter";
import Filter from "./Filter";
const useInputStyles = makeStyles({
input: {
padding: "10.5px 12px"
const useInputStyles = makeStyles(
{
input: {
padding: "10.5px 12px"
},
root: {
flex: 1
}
},
root: {
flex: 1
}
});
{ name: "FilterActions" }
);
const Search: React.FC<TextFieldProps> = props => {
const classes = useInputStyles({});

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

@ -34,11 +34,14 @@ function getFilterChoices(items: IFilter<string>) {
}));
}
const useStyles = makeStyles({
input: {
padding: "20px 12px 17px"
}
});
const useStyles = makeStyles(
{
input: {
padding: "20px 12px 17px"
}
},
{ name: "FilterContent" }
);
const FilterContent: React.FC<FilterContentProps> = ({
currencySymbol,

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

@ -17,14 +17,17 @@ export interface FilterElementProps<TFilterKeys = string> {
onChange: (value: string | string[]) => void;
}
const useStyles = makeStyles({
calendar: {
margin: 8
const useStyles = makeStyles(
{
calendar: {
margin: 8
},
input: {
padding: "20px 12px 17px"
}
},
input: {
padding: "20px 12px 17px"
}
});
{ name: "FilterElement" }
);
export interface FilterElementProps<TFilterKeys = string> {
className?: string;

13
src/components/FormSpacer.tsx
View file

@ -1,11 +1,14 @@
import { makeStyles } from "@material-ui/core/styles";
import React from "react";
const useStyles = makeStyles(theme => ({
spacer: {
marginTop: theme.spacing(3)
}
}));
const useStyles = makeStyles(
theme => ({
spacer: {
marginTop: theme.spacing(3)
}
}),
{ name: "FormSpacer" }
);
interface FormSpacerProps {
children?: React.ReactNode;

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

@ -9,26 +9,29 @@ export interface GridProps {
variant?: GridVariant;
}
const useStyles = makeStyles(theme => ({
default: {
gridTemplateColumns: "9fr 4fr"
},
inverted: {
gridTemplateColumns: "4fr 9fr"
},
root: {
display: "grid",
gridColumnGap: theme.spacing(3),
gridRowGap: theme.spacing(3),
[theme.breakpoints.down("sm")]: {
gridRowGap: theme.spacing(1),
gridTemplateColumns: "1fr"
const useStyles = makeStyles(
theme => ({
default: {
gridTemplateColumns: "9fr 4fr"
},
inverted: {
gridTemplateColumns: "4fr 9fr"
},
root: {
display: "grid",
gridColumnGap: theme.spacing(3),
gridRowGap: theme.spacing(3),
[theme.breakpoints.down("sm")]: {
gridRowGap: theme.spacing(1),
gridTemplateColumns: "1fr"
}
},
uniform: {
gridTemplateColumns: "1fr 1fr"
}
},
uniform: {
gridTemplateColumns: "1fr 1fr"
}
}));
}),
{ name: "Grid" }
);
export const Grid: React.FC<GridProps> = props => {
const { className, children, variant } = props;

23
src/components/Hr.tsx
View file

@ -6,16 +6,19 @@ interface HrProps {
className?: string;
}
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.divider,
border: "none",
display: "block",
height: 1,
margin: 0,
width: "100%"
}
}));
const useStyles = makeStyles(
theme => ({
root: {
backgroundColor: theme.palette.divider,
border: "none",
display: "block",
height: 1,
margin: 0,
width: "100%"
}
}),
{ name: "Hr" }
);
export const Hr: React.FC<HrProps> = props => {
const { className } = props;

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

@ -12,15 +12,18 @@ export interface IconButtonTableCellProps {
onClick: () => void;
}
const useStyles = makeStyles(theme => ({
root: {
"&:last-child": {
paddingRight: 0
},
paddingRight: 0,
width: ICONBUTTON_SIZE + theme.spacing(0.5)
}
}));
const useStyles = makeStyles(
theme => ({
root: {
"&:last-child": {
paddingRight: 0
},
paddingRight: 0,
width: ICONBUTTON_SIZE + theme.spacing(0.5)
}
}),
{ name: "IconButtonTableCell" }
);
const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
const {
children,

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

@ -6,50 +6,53 @@ import EditIcon from "@material-ui/icons/Edit";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
image: {
height: "100%",
objectFit: "contain",
userSelect: "none",
width: "100%"
},
imageContainer: {
"&:hover, &.dragged": {
"& $imageOverlay": {
display: "block"
const useStyles = makeStyles(
theme => ({
image: {
height: "100%",
objectFit: "contain",
userSelect: "none",
width: "100%"
},
imageContainer: {
"&:hover, &.dragged": {
"& $imageOverlay": {
display: "block"
}
},
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.spacing(),
height: 148,
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
width: 148
},
imageOverlay: {
background: "rgba(0, 0, 0, 0.6)",
cursor: "move",
display: "none",
height: 148,
left: 0,
position: "absolute",
top: 0,
width: 148
},
imageOverlayShow: {
"&$imageOverlay": {
alignItems: "center",
display: "flex",
justifyContent: "center"
}
},
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.spacing(),
height: 148,
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
width: 148
},
imageOverlay: {
background: "rgba(0, 0, 0, 0.6)",
cursor: "move",
display: "none",
height: 148,
left: 0,
position: "absolute",
top: 0,
width: 148
},
imageOverlayShow: {
"&$imageOverlay": {
alignItems: "center",
imageOverlayToolbar: {
display: "flex",
justifyContent: "center"
justifyContent: "flex-end"
}
},
imageOverlayToolbar: {
display: "flex",
justifyContent: "flex-end"
}
}));
}),
{ name: "ImageTile" }
);
interface ImageTileProps {
image: {

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

@ -17,42 +17,45 @@ interface ImageUploadProps {
onImageUpload: (file: FileList) => void;
}
const useStyles = makeStyles(theme => ({
backdrop: {
background: fade(theme.palette.primary.main, 0.1),
color: theme.palette.primary.main
},
fileField: {
display: "none"
},
imageContainer: {
background: "#ffffff",
border: "1px solid #eaeaea",
borderRadius: theme.spacing(),
height: 148,
justifySelf: "start",
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
transition: theme.transitions.duration.standard + "s",
width: 148
},
photosIcon: {
height: "64px",
margin: "0 auto",
width: "64px"
},
photosIconContainer: {
padding: theme.spacing(5, 0),
textAlign: "center"
},
uploadText: {
color: theme.typography.body1.color,
fontSize: 12,
fontWeight: 600,
textTransform: "uppercase"
}
}));
const useStyles = makeStyles(
theme => ({
backdrop: {
background: fade(theme.palette.primary.main, 0.1),
color: theme.palette.primary.main
},
fileField: {
display: "none"
},
imageContainer: {
background: "#ffffff",
border: "1px solid #eaeaea",
borderRadius: theme.spacing(),
height: 148,
justifySelf: "start",
overflow: "hidden",
padding: theme.spacing(2),
position: "relative",
transition: theme.transitions.duration.standard + "s",
width: 148
},
photosIcon: {
height: "64px",
margin: "0 auto",
width: "64px"
},
photosIconContainer: {
padding: theme.spacing(5, 0),
textAlign: "center"
},
uploadText: {
color: theme.typography.body1.color,
fontSize: 12,
fontWeight: 600,
textTransform: "uppercase"
}
}),
{ name: "ImageUpload" }
);
export const ImageUpload: React.FC<ImageUploadProps> = props => {
const {

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

@ -21,36 +21,39 @@ export interface LanguageSwitchProps {
onLanguageChange: (lang: LanguageCodeEnum) => void;
}
const useStyles = makeStyles(theme => ({
arrow: {
color: theme.palette.primary.main,
transition: theme.transitions.duration.standard + "ms"
},
container: {
paddingBottom: theme.spacing(1)
},
menuContainer: {
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
minWidth: 90,
padding: theme.spacing(),
position: "relative"
},
menuItem: {
textAlign: "justify"
},
menuPaper: {
maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
overflow: "scroll"
},
popover: {
zIndex: 1
},
rotate: {
transform: "rotate(180deg)"
}
}));
const useStyles = makeStyles(
theme => ({
arrow: {
color: theme.palette.primary.main,
transition: theme.transitions.duration.standard + "ms"
},
container: {
paddingBottom: theme.spacing(1)
},
menuContainer: {
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
minWidth: 90,
padding: theme.spacing(),
position: "relative"
},
menuItem: {
textAlign: "justify"
},
menuPaper: {
maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
overflow: "scroll"
},
popover: {
zIndex: 1
},
rotate: {
transform: "rotate(180deg)"
}
}),
{ name: "LanguageSwitch" }
);
const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
const { currentLanguage, languages, onLanguageChange } = props;
const classes = useStyles(props);

33
src/components/Link.tsx
View file

@ -3,21 +3,24 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
primary: {
color: theme.palette.primary.main
},
root: {
cursor: "pointer",
display: "inline"
},
secondary: {
color: theme.palette.primary.main
},
underline: {
textDecoration: "underline"
}
}));
const useStyles = makeStyles(
theme => ({
primary: {
color: theme.palette.primary.main
},
root: {
cursor: "pointer",
display: "inline"
},
secondary: {
color: theme.palette.primary.main
},
underline: {
textDecoration: "underline"
}
}),
{ name: "Link" }
);
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
color?: "primary" | "secondary";

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

@ -36,7 +36,7 @@ interface ListFieldProps
}>;
}
const ListField = withStyles(styles)(
const ListField = withStyles(styles, { name: "ListField" })(
class ListFieldComponent extends React.Component<
ListFieldProps,
ListFieldState

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

@ -15,42 +15,45 @@ import MultiAutocompleteSelectFieldContent, {
MultiAutocompleteChoiceType
} from "./MultiAutocompleteSelectFieldContent";
const useStyles = makeStyles(theme => ({
chip: {
width: "100%"
},
chipClose: {
height: 32,
padding: 0,
width: 32
},
chipContainer: {
display: "flex",
flexDirection: "column",
marginTop: theme.spacing(1)
},
chipInner: {
"& svg": {
const useStyles = makeStyles(
theme => ({
chip: {
width: "100%"
},
chipClose: {
height: 32,
padding: 0,
width: 32
},
chipContainer: {
display: "flex",
flexDirection: "column",
marginTop: theme.spacing(1)
},
chipInner: {
"& svg": {
color: theme.palette.primary.contrastText
},
alignItems: "center",
background: fade(theme.palette.primary.main, 0.8),
borderRadius: 18,
color: theme.palette.primary.contrastText,
display: "flex",
justifyContent: "space-between",
margin: theme.spacing(1, 0),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1)
},
chipLabel: {
color: theme.palette.primary.contrastText
},
alignItems: "center",
background: fade(theme.palette.primary.main, 0.8),
borderRadius: 18,
color: theme.palette.primary.contrastText,
display: "flex",
justifyContent: "space-between",
margin: theme.spacing(1, 0),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1)
},
chipLabel: {
color: theme.palette.primary.contrastText
},
container: {
flexGrow: 1,
position: "relative"
}
}));
container: {
flexGrow: 1,
position: "relative"
}
}),
{ name: "MultiAutocompleteSelectField" }
);
export interface MultiAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> {

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

@ -10,20 +10,23 @@ import { FormattedMessage } from "react-intl";
import Checkbox from "../Checkbox";
const useStyles = makeStyles(theme => ({
checkbox: {
marginRight: -theme.spacing(2)
},
formControl: {
width: "100%"
},
menuItem: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
width: "100%"
}
}));
const useStyles = makeStyles(
theme => ({
checkbox: {
marginRight: -theme.spacing(2)
},
formControl: {
width: "100%"
},
menuItem: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
width: "100%"
}
}),
{ name: "MultiSelectField" }
);
interface MultiSelectFieldProps {
choices: Array<{

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

@ -7,45 +7,48 @@ import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/not-found-404.svg";
const useStyles = makeStyles(theme => ({
button: {
marginTop: theme.spacing(2),
padding: 20
},
container: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
padding: theme.spacing(3),
width: "100%"
const useStyles = makeStyles(
theme => ({
button: {
marginTop: theme.spacing(2),
padding: 20
},
display: "grid",
gridTemplateColumns: "1fr 487px",
margin: "0 auto",
width: 830
},
header: {
fontWeight: 600 as 600
},
innerContainer: {
[theme.breakpoints.down("sm")]: {
order: 1,
textAlign: "center"
container: {
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
padding: theme.spacing(3),
width: "100%"
},
display: "grid",
gridTemplateColumns: "1fr 487px",
margin: "0 auto",
width: 830
},
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
notFoundImage: {
"& svg": {
width: "100%"
header: {
fontWeight: 600 as 600
},
innerContainer: {
[theme.breakpoints.down("sm")]: {
order: 1,
textAlign: "center"
},
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
notFoundImage: {
"& svg": {
width: "100%"
}
},
root: {
alignItems: "center",
display: "flex",
height: "calc(100vh - 180px)"
}
},
root: {
alignItems: "center",
display: "flex",
height: "calc(100vh - 180px)"
}
}));
}),
{ name: "NotFoundPage" }
);
interface NotFoundPageProps {
onBack: () => void;

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

@ -5,21 +5,24 @@ import React from "react";
import ExtendedPageHeader from "../ExtendedPageHeader";
import Skeleton from "../Skeleton";
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
title: {
[theme.breakpoints.down("sm")]: {
fontSize: 20,
marginTop: theme.spacing(2),
padding: 0
const useStyles = makeStyles(
theme => ({
root: {
display: "flex"
},
alignSelf: "flex-start",
flex: 1,
fontSize: 24
}
}));
title: {
[theme.breakpoints.down("sm")]: {
fontSize: 20,
marginTop: theme.spacing(2),
padding: 0
},
alignSelf: "flex-start",
flex: 1,
fontSize: 24
}
}),
{ name: "PageHeader" }
);
interface PageHeaderProps {
children?: React.ReactNode;

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

@ -4,13 +4,16 @@ import React from "react";
import SingleSelectField from "@saleor/components/SingleSelectField";
const useStyles = makeStyles(theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "5rem 1fr"
}
}));
const useStyles = makeStyles(
theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "5rem 1fr"
}
}),
{ name: "PhoneField" }
);
interface PhoneFieldProps {
name: string;

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

@ -4,26 +4,29 @@ import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
const useStyles = makeStyles(theme => ({
currencySymbol: {
fontSize: "0.875rem"
},
inputContainer: {
display: "grid",
gridTemplateColumns: "1fr 2rem 1fr"
},
pullDown: {
marginTop: theme.spacing(2)
},
separator: {
marginTop: theme.spacing(3),
textAlign: "center",
width: "100%"
},
widgetContainer: {
marginTop: theme.spacing(2)
}
}));
const useStyles = makeStyles(
theme => ({
currencySymbol: {
fontSize: "0.875rem"
},
inputContainer: {
display: "grid",
gridTemplateColumns: "1fr 2rem 1fr"
},
pullDown: {
marginTop: theme.spacing(2)
},
separator: {
marginTop: theme.spacing(3),
textAlign: "center",
width: "100%"
},
widgetContainer: {
marginTop: theme.spacing(2)
}
}),
{ name: "PriceField" }
);
interface PriceFieldProps {
className?: string;

37
src/components/RadioSwitchField/RadioSwitchField.tsx
View file

@ -6,25 +6,28 @@ import { makeStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles({
formControl: {
padding: 0,
width: "100%"
},
formLabel: {
marginLeft: "-5px",
paddingBottom: "10px"
},
radioLabel: {
"& > span": {
padding: "10px 6px"
const useStyles = makeStyles(
{
formControl: {
padding: 0,
width: "100%"
},
formLabel: {
marginLeft: "-5px",
paddingBottom: "10px"
},
radioLabel: {
"& > span": {
padding: "10px 6px"
}
},
secondLabel: {
display: "block",
fontSize: "12px"
}
},
secondLabel: {
display: "block",
fontSize: "12px"
}
});
{ name: "RadioSwitchField" }
);
interface RadioSwitchFieldProps {
className?: string;

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

@ -18,25 +18,28 @@ interface ImageEntityProps {
onRemove: (entityKey: string) => void;
}
const useStyles = makeStyles(theme => ({
anchor: {
display: "inline-block"
},
container: {
alignItems: "center",
display: "flex"
},
image: { maxWidth: "100%" },
inline: {
display: "inline-block"
},
root: {
alignItems: "center",
display: "flex",
minHeight: 72,
padding: theme.spacing(1.5)
}
}));
const useStyles = makeStyles(
theme => ({
anchor: {
display: "inline-block"
},
container: {
alignItems: "center",
display: "flex"
},
image: { maxWidth: "100%" },
inline: {
display: "inline-block"
},
root: {
alignItems: "center",
display: "flex",
minHeight: 72,
padding: theme.spacing(1.5)
}
}),
{ name: "ImageEntity" }
);
const ImageEntity: React.FC<ImageEntityProps> = props => {
const { contentState, entityKey, onEdit, onRemove } = props;

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

@ -22,35 +22,38 @@ interface LinkEntityProps {
onRemove: (entityKey: string) => void;
}
const useStyles = makeStyles(theme => ({
anchor: {
display: "inline-block"
},
container: {
alignItems: "center",
display: "flex"
},
inline: {
display: "inline-block"
},
popover: {
zIndex: 1
},
root: {
alignItems: "center",
display: "flex",
minHeight: 72,
padding: theme.spacing(1.5, 1.5, 1.5, 3)
},
separator: {
backgroundColor: theme.palette.grey[300],
display: "inline-block",
height: 30,
marginLeft: theme.spacing(2),
marginRight: theme.spacing(),
width: 1
}
}));
const useStyles = makeStyles(
theme => ({
anchor: {
display: "inline-block"
},
container: {
alignItems: "center",
display: "flex"
},
inline: {
display: "inline-block"
},
popover: {
zIndex: 1
},
root: {
alignItems: "center",
display: "flex",
minHeight: 72,
padding: theme.spacing(1.5, 1.5, 1.5, 3)
},
separator: {
backgroundColor: theme.palette.grey[300],
display: "inline-block",
height: 30,
marginLeft: theme.spacing(2),
marginRight: theme.spacing(),
width: 1
}
}),
{ name: "LinkEntity" }
);
const LinkEntity: React.FC<LinkEntityProps> = props => {
const { children, contentState, entityKey, onEdit, onRemove } = props;

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

@ -37,158 +37,161 @@ export interface RichTextEditorProps {
onChange: (event: React.ChangeEvent<any>) => void;
}
const useStyles = makeStyles(theme => ({
error: {
color: theme.palette.error.main
},
helperText: {
marginTop: theme.spacing(0.75)
},
input: {
position: "relative"
},
label: {
fontSize: theme.typography.caption.fontSize,
left: 12,
position: "absolute",
top: 9
},
linkIcon: {
marginTop: 2
},
root: {
"& .DraftEditor": {
"&-editorContainer": {
"& .public-DraftEditor-content": {
lineHeight: 1.62
},
"& a": {
color: theme.palette.primary.light
},
"&:after": {
background: theme.palette.getContrastText(
theme.palette.background.default
),
bottom: -11,
content: "''",
display: "block",
height: 2,
left: -12,
position: "absolute",
transform: "scaleX(0) scaleY(0)",
width: "calc(100% + 24px)"
},
position: "relative"
},
"&-root": {
...theme.typography.body1
}
const useStyles = makeStyles(
theme => ({
error: {
color: theme.palette.error.main
},
"& .Draftail": {
"&-Editor": {
"&--focus": {
boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}`
helperText: {
marginTop: theme.spacing(0.75)
},
input: {
position: "relative"
},
label: {
fontSize: theme.typography.caption.fontSize,
left: 12,
position: "absolute",
top: 9
},
linkIcon: {
marginTop: 2
},
root: {
"& .DraftEditor": {
"&-editorContainer": {
"& .public-DraftEditor-content": {
lineHeight: 1.62
},
"& a": {
color: theme.palette.primary.light
},
"&:after": {
background: theme.palette.getContrastText(
theme.palette.background.default
),
bottom: -11,
content: "''",
display: "block",
height: 2,
left: -12,
position: "absolute",
transform: "scaleX(0) scaleY(0)",
width: "calc(100% + 24px)"
},
position: "relative"
},
"&:hover": {
borderColor: theme.palette.primary.main
},
border: `1px ${theme.palette.divider} solid`,
borderRadius: 4,
padding: "27px 12px 10px",
position: "relative",
transition: theme.transitions.duration.shortest + "ms"
},
"&-Toolbar": {
"&Button": {
"& svg": {
padding: 2
},
"&--active": {
"&:hover": {
background: theme.palette.primary.main
},
"&:not(:hover)": {
borderRightColor: theme.palette.primary.main
},
background: theme.palette.primary.main
},
"&:focus": {
"&:active": {
"&:after": {
background: fade(theme.palette.primary.main, 0.3),
borderRadius: "100%",
content: "''",
display: "block",
height: "100%",
width: "100%"
}
}
},
"&:hover": {
background: fade(theme.palette.primary.main, 0.3)
},
alignItems: "center",
background: "none",
border: "none",
borderRight: `1px ${theme.palette.divider} solid`,
color: theme.typography.body1.color,
cursor: "pointer",
display: "inline-flex",
height: 36,
justifyContent: "center",
padding: theme.spacing(1) + 2,
transition: theme.transitions.duration.short + "ms",
width: 36
},
"&Group": {
"&:last-of-type": {
"& .Draftail-ToolbarButton": {
"&:last-of-type": {
border: "none"
}
}
},
display: "flex"
},
background: theme.palette.background.default,
border: `1px ${theme.palette.divider} solid`,
display: "inline-flex",
flexWrap: "wrap",
marginBottom: theme.spacing(),
marginTop: 10,
[theme.breakpoints.down(460)]: {
width: "min-content"
"&-root": {
...theme.typography.body1
}
},
"&-block": {
"&--blockquote": {
borderLeft: `2px solid ${theme.palette.divider}`,
margin: 0,
padding: theme.spacing(1, 2)
}
}
},
"&$error": {
"& .Draftail": {
"&-Editor": {
borderColor: theme.palette.error.main
"&--focus": {
boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}`
},
"&:hover": {
borderColor: theme.palette.primary.main
},
border: `1px ${theme.palette.divider} solid`,
borderRadius: 4,
padding: "27px 12px 10px",
position: "relative",
transition: theme.transitions.duration.shortest + "ms"
},
"&-Toolbar": {
"&Button": {
"& svg": {
padding: 2
},
"&--active": {
"&:hover": {
background: theme.palette.primary.main
},
"&:not(:hover)": {
borderRightColor: theme.palette.primary.main
},
background: theme.palette.primary.main
},
"&:focus": {
"&:active": {
"&:after": {
background: fade(theme.palette.primary.main, 0.3),
borderRadius: "100%",
content: "''",
display: "block",
height: "100%",
width: "100%"
}
}
},
"&:hover": {
background: fade(theme.palette.primary.main, 0.3)
},
alignItems: "center",
background: "none",
border: "none",
borderRight: `1px ${theme.palette.divider} solid`,
color: theme.typography.body1.color,
cursor: "pointer",
display: "inline-flex",
height: 36,
justifyContent: "center",
padding: theme.spacing(1) + 2,
transition: theme.transitions.duration.short + "ms",
width: 36
},
"&Group": {
"&:last-of-type": {
"& .Draftail-ToolbarButton": {
"&:last-of-type": {
border: "none"
}
}
},
display: "flex"
},
background: theme.palette.background.default,
border: `1px ${theme.palette.divider} solid`,
display: "inline-flex",
flexWrap: "wrap",
marginBottom: theme.spacing(),
marginTop: 10,
[theme.breakpoints.down(460)]: {
width: "min-content"
}
},
"&-block": {
"&--blockquote": {
borderLeft: `2px solid ${theme.palette.divider}`,
margin: 0,
padding: theme.spacing(1, 2)
}
}
},
"&$error": {
"& .Draftail": {
"&-Editor": {
borderColor: theme.palette.error.main
}
}
}
}
},
scroll: {
"& .DraftEditor": {
"&-editorContainer": {
"& .public-DraftEditor-content": {
lineHeight: 1.62
},
scroll: {
"& .DraftEditor": {
"&-editorContainer": {
"& .public-DraftEditor-content": {
lineHeight: 1.62
}
}
}
},
smallIcon: {
marginLeft: 10
}
},
smallIcon: {
marginLeft: 10
}
}));
}),
{ name: "RichTextEditor" }
);
function handleSave(
value: any,

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

@ -14,45 +14,48 @@ import ConfirmButton, {
} from "../ConfirmButton/ConfirmButton";
import Container from "../Container";
const useStyles = makeStyles(theme => ({
button: {
marginRight: theme.spacing(1)
},
cancelButton: {
marginRight: theme.spacing(2)
},
container: {
display: "flex",
paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(2),
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1)
}
},
deleteButton: {
"&:hover": {
backgroundColor: theme.palette.error.dark
const useStyles = makeStyles(
theme => ({
button: {
marginRight: theme.spacing(1)
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
},
root: {
background: theme.palette.background.default,
borderTop: "1px solid transparent",
boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
height: "100%",
transition: `box-shadow ${theme.transitions.duration.shortest}ms`
},
spacer: {
flex: "1"
},
stop: {
"&$root": {
borderTopColor: theme.palette.divider,
boxShadow: `0 0 0 0 ${theme.palette.divider}`
cancelButton: {
marginRight: theme.spacing(2)
},
container: {
display: "flex",
paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(2),
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1)
}
},
deleteButton: {
"&:hover": {
backgroundColor: theme.palette.error.dark
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
},
root: {
background: theme.palette.background.default,
borderTop: "1px solid transparent",
boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
height: "100%",
transition: `box-shadow ${theme.transitions.duration.shortest}ms`
},
spacer: {
flex: "1"
},
stop: {
"&$root": {
borderTopColor: theme.palette.divider,
boxShadow: `0 0 0 0 ${theme.palette.divider}`
}
}
}
}));
}),
{ name: "SaveButtonBar" }
);
interface SaveButtonBarProps {
disabled: boolean;

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

@ -11,52 +11,55 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "../CardTitle";
import FormSpacer from "../FormSpacer";
const useStyles = makeStyles(theme => ({
addressBar: {
color: "#006621",
fontSize: "13px",
lineHeight: "16px",
marginBottom: "2px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
container: {
width: "100%"
},
descriptionBar: {
color: "#545454",
fontSize: "13px",
lineHeight: "18px",
overflowWrap: "break-word"
},
helperText: {
marginBottom: theme.spacing(3)
},
label: {
flex: 1
},
labelContainer: {
"& span": {
paddingRight: 30
const useStyles = makeStyles(
theme => ({
addressBar: {
color: "#006621",
fontSize: "13px",
lineHeight: "16px",
marginBottom: "2px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
display: "flex"
},
preview: {
minHeight: theme.spacing(10)
},
title: {
padding: 0
},
titleBar: {
color: "#1a0dab",
fontSize: "18px",
lineHeight: "21px",
overflowWrap: "break-word",
textDecoration: "none",
wordWrap: "break-word"
}
}));
container: {
width: "100%"
},
descriptionBar: {
color: "#545454",
fontSize: "13px",
lineHeight: "18px",
overflowWrap: "break-word"
},
helperText: {
marginBottom: theme.spacing(3)
},
label: {
flex: 1
},
labelContainer: {
"& span": {
paddingRight: 30
},
display: "flex"
},
preview: {
minHeight: theme.spacing(10)
},
title: {
padding: 0
},
titleBar: {
color: "#1a0dab",
fontSize: "18px",
lineHeight: "21px",
overflowWrap: "break-word",
textDecoration: "none",
wordWrap: "break-word"
}
}),
{ name: "SeoForm" }
);
interface SeoFormProps {
description?: string;

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

@ -13,12 +13,15 @@ import SingleAutocompleteSelectFieldContent, {
SingleAutocompleteChoiceType
} from "./SingleAutocompleteSelectFieldContent";
const useStyles = makeStyles({
container: {
flexGrow: 1,
position: "relative"
}
});
const useStyles = makeStyles(
{
container: {
flexGrow: 1,
position: "relative"
}
},
{ name: "SingleAutocompleteSelectField" }
);
export interface SingleAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> {

23
src/components/SingleSelectField/SingleSelectField.tsx
View file

@ -9,17 +9,20 @@ import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
const useStyles = makeStyles(theme => ({
formControl: {
"& label": {
top: "-3px"
const useStyles = makeStyles(
theme => ({
formControl: {
"& label": {
top: "-3px"
},
width: "100%"
},
width: "100%"
},
noLabel: {
padding: theme.spacing(2, 1.5)
}
}));
noLabel: {
padding: theme.spacing(2, 1.5)
}
}),
{ name: "SingleSelectField" }
);
interface SingleSelectFieldProps {
choices: Array<{

45
src/components/Skeleton.tsx
View file

@ -2,29 +2,32 @@ import { makeStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
"@keyframes skeleton-animation": {
"0%": {
opacity: 0.6
const useStyles = makeStyles(
theme => ({
"@keyframes skeleton-animation": {
"0%": {
opacity: 0.6
},
"100%": {
opacity: 1
}
},
"100%": {
opacity: 1
primary: {
"&$skeleton": {
background: theme.palette.primary.main
}
},
skeleton: {
animation: "skeleton-animation .75s linear infinite forwards alternate",
background: theme.palette.background.default,
borderRadius: 4,
display: "block",
height: "0.8em",
margin: "0.2em 0"
}
},
primary: {
"&$skeleton": {
background: theme.palette.primary.main
}
},
skeleton: {
animation: "skeleton-animation .75s linear infinite forwards alternate",
background: theme.palette.background.default,
borderRadius: 4,
display: "block",
height: "0.8em",
margin: "0.2em 0"
}
}));
}),
{ name: "Skeleton" }
);
interface SkeletonProps {
className?: string;

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

@ -5,15 +5,18 @@ import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
import Draggable from "@saleor/icons/Draggable";
const useStyles = makeStyles(theme => ({
columnDrag: {
"&:first-child": {
paddingRight: theme.spacing(2)
},
cursor: "grab",
width: 48 + theme.spacing(1.5)
}
}));
const useStyles = makeStyles(
theme => ({
columnDrag: {
"&:first-child": {
paddingRight: theme.spacing(2)
},
cursor: "grab",
width: 48 + theme.spacing(1.5)
}
}),
{ name: "SortableHandle" }
);
const SortableHandle = SortableHandleHoc(() => {
const classes = useStyles({});

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

@ -13,18 +13,21 @@ export interface SortableTableBodyProps {
onSortEnd: ReorderAction;
}
const useStyles = makeStyles(theme => ({
ghost: {
"& td": {
borderBottom: "none"
},
background: theme.palette.background.paper,
fontFamily: theme.typography.fontFamily,
// FIXME: you damn know what
// fontSize: theme.overrides.MuiTableCell.root.fontSize,
opacity: 0.5
}
}));
const useStyles = makeStyles(
theme => ({
ghost: {
"& td": {
borderBottom: "none"
},
background: theme.palette.background.paper,
fontFamily: theme.typography.fontFamily,
// FIXME: you damn know what
// fontSize: theme.overrides.MuiTableCell.root.fontSize,
opacity: 0.5
}
}),
{ name: "SortableTableBody" }
);
const SortableTableBody: React.FC<
Omit<TableBodyProps & SortableTableBodyProps, "ref">

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

@ -4,38 +4,41 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => {
const dot = {
borderRadius: "100%",
content: "''",
display: "block",
height: 8,
left: -theme.spacing(2),
position: "absolute" as "absolute",
top: "calc(50% - 5px)",
width: 8
};
const useStyles = makeStyles(
theme => {
const dot = {
borderRadius: "100%",
content: "''",
display: "block",
height: 8,
left: -theme.spacing(2),
position: "absolute" as "absolute",
top: "calc(50% - 5px)",
width: 8
};
return {
errorDot: {
"&:before": { backgroundColor: theme.palette.error.main, ...dot }
},
neutralDot: {
"&:before": { backgroundColor: yellow[500], ...dot }
},
root: {
display: "inline-block",
marginLeft: theme.spacing(1) + 8,
position: "relative"
},
span: {
display: "inline"
},
successDot: {
"&:before": { backgroundColor: theme.palette.primary.main, ...dot }
}
};
});
return {
errorDot: {
"&:before": { backgroundColor: theme.palette.error.main, ...dot }
},
neutralDot: {
"&:before": { backgroundColor: yellow[500], ...dot }
},
root: {
display: "inline-block",
marginLeft: theme.spacing(1) + 8,
position: "relative"
},
span: {
display: "inline"
},
successDot: {
"&:before": { backgroundColor: theme.palette.primary.main, ...dot }
}
};
},
{ name: "StatusLabel" }
);
interface StatusLabelProps {
className?: string;

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

@ -5,11 +5,14 @@ export interface TabContainerProps {
children: React.ReactNode | React.ReactNodeArray;
}
const useStyles = makeStyles(theme => ({
root: {
borderBottom: `1px solid ${theme.palette.divider}`
}
}));
const useStyles = makeStyles(
theme => ({
root: {
borderBottom: `1px solid ${theme.palette.divider}`
}
}),
{ name: "TabContainer" }
);
const TabContainer: React.FC<TabContainerProps> = props => {
const { children } = props;

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

@ -9,32 +9,35 @@ import Image from "../../icons/Image";
export const AVATAR_MARGIN = 32;
const useStyles = makeStyles(theme => ({
avatar: {
background: "none",
border: `1px solid ${theme.palette.divider}`,
borderRadius: 2,
color: "#bdbdbd",
display: "inline-flex",
padding: theme.spacing(0.5)
},
children: {
alignSelf: "center",
marginLeft: theme.spacing(2),
width: "100%"
},
content: {
alignItems: "center",
display: "flex"
},
root: {
"&:not(first-child)": {
paddingLeft: 0
const useStyles = makeStyles(
theme => ({
avatar: {
background: "none",
border: `1px solid ${theme.palette.divider}`,
borderRadius: 2,
color: "#bdbdbd",
display: "inline-flex",
padding: theme.spacing(0.5)
},
paddingRight: theme.spacing(3),
width: "1%"
}
}));
children: {
alignSelf: "center",
marginLeft: theme.spacing(2),
width: "100%"
},
content: {
alignItems: "center",
display: "flex"
},
root: {
"&:not(first-child)": {
paddingLeft: 0
},
paddingRight: theme.spacing(3),
width: "1%"
}
}),
{ name: "TableCellAvatar" }
);
interface TableCellAvatarProps {
className?: string;

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

@ -5,40 +5,43 @@ import React from "react";
import ArrowSort from "../../icons/ArrowSort";
const useStyles = makeStyles(theme => ({
arrow: {
transition: theme.transitions.duration.short + "ms"
},
arrowLeft: {
marginLeft: -24
},
arrowUp: {
transform: "rotate(180deg)"
},
label: {
alignSelf: "center",
display: "inline-block"
},
labelContainer: {
"&:hover": {
const useStyles = makeStyles(
theme => ({
arrow: {
transition: theme.transitions.duration.short + "ms"
},
arrowLeft: {
marginLeft: -24
},
arrowUp: {
transform: "rotate(180deg)"
},
label: {
alignSelf: "center",
display: "inline-block"
},
labelContainer: {
"&:hover": {
color: theme.palette.text.primary
},
display: "flex",
height: 24
},
labelContainerActive: {
color: theme.palette.text.primary
},
display: "flex",
height: 24
},
labelContainerActive: {
color: theme.palette.text.primary
},
labelContainerCenter: {
justifyContent: "center"
},
labelContainerRight: {
justifyContent: "flex-end"
},
root: {
cursor: "pointer"
}
}));
labelContainerCenter: {
justifyContent: "center"
},
labelContainerRight: {
justifyContent: "flex-end"
},
root: {
cursor: "pointer"
}
}),
{ name: "TableCellHeader" }
);
export type TableCellHeaderArrowDirection = "asc" | "desc";
export type TableCellHeaderArrowPosition = "left" | "right";

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

@ -3,27 +3,30 @@ import Tab from "@material-ui/core/Tab";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
selectedTabLabel: {
"&$tabLabel": {
color: theme.typography.body1.color
}
},
tabLabel: {
"&:hover": {
color: theme.typography.body1.color
const useStyles = makeStyles(
theme => ({
selectedTabLabel: {
"&$tabLabel": {
color: theme.typography.body1.color
}
},
color: theme.typography.caption.color,
fontSize: "1rem",
fontWeight: 400
},
tabRoot: {
minWidth: "80px",
opacity: 1,
paddingTop: theme.spacing(1),
textTransform: "initial" as "initial"
}
}));
tabLabel: {
"&:hover": {
color: theme.typography.body1.color
},
color: theme.typography.caption.color,
fontSize: "1rem",
fontWeight: 400
},
tabRoot: {
minWidth: "80px",
opacity: 1,
paddingTop: theme.spacing(1),
textTransform: "initial" as "initial"
}
}),
{ name: "FilterTab" }
);
interface FilterTabProps {
onClick: () => void;

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

@ -2,12 +2,15 @@ import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import React from "react";
const useStyles = makeStyles(theme => ({
tabsRoot: {
borderBottom: `1px solid ${theme.palette.divider}`,
paddingLeft: theme.spacing(3)
}
}));
const useStyles = makeStyles(
theme => ({
tabsRoot: {
borderBottom: `1px solid ${theme.palette.divider}`,
paddingLeft: theme.spacing(3)
}
}),
{ name: "FilterTabs" }
);
interface FilterTabsProps {
children?: React.ReactNode;

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

@ -24,59 +24,62 @@ export interface TableHeadProps extends MuiTableHeadProps {
toggleAll?: (items: Node[], selected: number) => void;
}
const useStyles = makeStyles(theme => ({
cell: {
padding: 0
},
checkboxPartialSelect: {
"& input": {
"&:before": {
background: [theme.palette.background.paper, "!important"] as any,
border: `solid 1px ${theme.palette.primary.main}`,
content: "''"
},
background: theme.palette.background.paper
},
"&:after": {
background: theme.palette.primary.main,
content: "''",
height: 2,
position: "absolute",
width: 6
}
},
checkboxSelected: {
backgroundColor: fade(theme.palette.primary.main, 0.05)
},
container: {
alignItems: "center",
display: "flex",
height: 47,
marginRight: -theme.spacing(2)
},
dragRows: {
padding: 0,
width: 52
},
padding: {
"&:last-child": {
const useStyles = makeStyles(
theme => ({
cell: {
padding: 0
},
checkboxPartialSelect: {
"& input": {
"&:before": {
background: [theme.palette.background.paper, "!important"] as any,
border: `solid 1px ${theme.palette.primary.main}`,
content: "''"
},
background: theme.palette.background.paper
},
"&:after": {
background: theme.palette.primary.main,
content: "''",
height: 2,
position: "absolute",
width: 6
}
},
checkboxSelected: {
backgroundColor: fade(theme.palette.primary.main, 0.05)
},
container: {
alignItems: "center",
display: "flex",
height: 47,
marginRight: -theme.spacing(2)
},
dragRows: {
padding: 0,
width: 52
},
padding: {
"&:last-child": {
padding: 0
}
},
root: {
backgroundColor: fade(theme.palette.primary.main, 0.05),
paddingLeft: 0,
paddingRight: 24
},
spacer: {
flex: 1
},
toolbar: {
"& > *": {
marginLeft: theme.spacing(1)
}
}
},
root: {
backgroundColor: fade(theme.palette.primary.main, 0.05),
paddingLeft: 0,
paddingRight: 24
},
spacer: {
flex: 1
},
toolbar: {
"& > *": {
marginLeft: theme.spacing(1)
}
}
}));
}),
{ name: "TableHead" }
);
const TableHead: React.FC<TableHeadProps> = props => {
const {

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

@ -9,46 +9,49 @@ import { maybe } from "@saleor/misc";
import { ListSettings } from "../../types";
import TablePaginationActions from "./TablePaginationActions";
const useStyles = makeStyles(theme => ({
actions: {
color: theme.palette.text.secondary,
flexShrink: 0,
marginLeft: theme.spacing(2.5)
},
caption: {
flexShrink: 0
},
input: {
flexShrink: 0,
fontSize: "inherit"
},
root: {
"&:last-child": {
padding: 0
const useStyles = makeStyles(
theme => ({
actions: {
color: theme.palette.text.secondary,
flexShrink: 0,
marginLeft: theme.spacing(2.5)
},
caption: {
flexShrink: 0
},
input: {
flexShrink: 0,
fontSize: "inherit"
},
root: {
"&:last-child": {
padding: 0
}
},
select: {
paddingLeft: theme.spacing(),
paddingRight: theme.spacing(2)
},
selectIcon: {
top: 1
},
selectRoot: {
color: theme.palette.text.secondary,
marginLeft: theme.spacing(),
marginRight: theme.spacing(4)
},
spacer: {
flex: "1 1 100%"
},
toolbar: {
height: 56,
minHeight: 56,
paddingLeft: 2,
paddingRight: 2
}
},
select: {
paddingLeft: theme.spacing(),
paddingRight: theme.spacing(2)
},
selectIcon: {
top: 1
},
selectRoot: {
color: theme.palette.text.secondary,
marginLeft: theme.spacing(),
marginRight: theme.spacing(4)
},
spacer: {
flex: "1 1 100%"
},
toolbar: {
height: 56,
minHeight: 56,
paddingLeft: 2,
paddingRight: 2
}
}));
}),
{ name: "TablePagination" }
);
interface TablePaginationProps {
backIconButtonProps?: Partial<IconButtonProps>;

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

@ -7,47 +7,50 @@ import useTheme from "@saleor/hooks/useTheme";
import classNames from "classnames";
import React from "react";
const useStyles = makeStyles(theme => ({
dark: {
"& svg": {
color: theme.palette.primary.main
},
"&$disabled": {
const useStyles = makeStyles(
theme => ({
dark: {
"& svg": {
color: fade(theme.palette.primary.main, 0.2)
}
},
"&:focus, &:hover": {
"& > span:first-of-type": {
backgroundColor: fade(theme.palette.primary.main, 0.2)
}
}
},
disabled: {},
iconButton: {
"& > span:first-of-type": {
backgroundColor: theme.palette.background.default,
borderRadius: "100%",
transition: theme.transitions.duration.standard + "ms"
},
"& svg": {
border: `solid 1px #BDBDBD`,
borderRadius: "50%"
},
"&:focus, &:hover": {
"& > span:first-of-type": {
backgroundColor: fade(theme.palette.primary.main, 0.2)
color: theme.palette.primary.main
},
backgroundColor: "transparent"
"&$disabled": {
"& svg": {
color: fade(theme.palette.primary.main, 0.2)
}
},
"&:focus, &:hover": {
"& > span:first-of-type": {
backgroundColor: fade(theme.palette.primary.main, 0.2)
}
}
},
padding: 6
},
root: {
color: theme.palette.text.secondary,
flexShrink: 0,
margin: theme.spacing(0, 2.5)
}
}));
disabled: {},
iconButton: {
"& > span:first-of-type": {
backgroundColor: theme.palette.background.default,
borderRadius: "100%",
transition: theme.transitions.duration.standard + "ms"
},
"& svg": {
border: `solid 1px #BDBDBD`,
borderRadius: "50%"
},
"&:focus, &:hover": {
"& > span:first-of-type": {
backgroundColor: fade(theme.palette.primary.main, 0.2)
},
backgroundColor: "transparent"
},
padding: 6
},
root: {
color: theme.palette.text.secondary,
flexShrink: 0,
margin: theme.spacing(0, 2.5)
}
}),
{ name: "TablePaginationActions" }
);
export interface TablePaginationActionsProps {
backIconButtonProps?: any;

21
src/components/TextFieldWithChoice/TextFieldWithChoice.tsx
View file

@ -23,16 +23,19 @@ export type TextFieldWithChoiceProps<TValue = string> = TextFieldProps & {
};
};
const useStyles = makeStyles({
adornment: {
alignItems: "center",
cursor: "pointer",
display: "flex"
const useStyles = makeStyles(
{
adornment: {
alignItems: "center",
cursor: "pointer",
display: "flex"
},
menu: {
zIndex: 10
}
},
menu: {
zIndex: 10
}
});
{ name: "TextFieldWithChoice" }
);
const TextFieldWithChoice: React.FC<TextFieldWithChoiceProps> = props => {
const { ChoiceProps, InputProps, onChange, ...rest } = props;

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

@ -8,56 +8,59 @@ import React from "react";
import { DateTime } from "../Date";
const useStyles = makeStyles(theme => ({
date: {
color: theme.typography.caption.color
},
dateExpander: {
color: theme.typography.caption.color,
position: "absolute",
right: theme.spacing(3)
},
dot: {
backgroundColor: theme.palette.primary.main,
borderRadius: "100%",
height: 8,
left: -29,
position: "absolute",
top: 6,
width: 8
},
noExpander: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
marginBottom: theme.spacing(),
marginLeft: theme.spacing(3),
width: "100%"
},
panel: {
"&:before": {
display: "none"
const useStyles = makeStyles(
theme => ({
date: {
color: theme.typography.caption.color
},
background: "none",
width: "100%"
},
root: {
"&:last-child:after": {
background: theme.palette.background.default,
content: "''",
height: "calc(50% - 4px)",
left: -theme.spacing(3) - 2,
dateExpander: {
color: theme.typography.caption.color,
position: "absolute",
top: "calc(50% + 4px)",
width: "2px"
right: theme.spacing(3)
},
alignItems: "center",
display: "flex",
marginBottom: theme.spacing(3),
position: "relative",
width: "100%"
}
}));
dot: {
backgroundColor: theme.palette.primary.main,
borderRadius: "100%",
height: 8,
left: -29,
position: "absolute",
top: 6,
width: 8
},
noExpander: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
marginBottom: theme.spacing(),
marginLeft: theme.spacing(3),
width: "100%"
},
panel: {
"&:before": {
display: "none"
},
background: "none",
width: "100%"
},
root: {
"&:last-child:after": {
background: theme.palette.background.default,
content: "''",
height: "calc(50% - 4px)",
left: -theme.spacing(3) - 2,
position: "absolute",
top: "calc(50% + 4px)",
width: "2px"
},
alignItems: "center",
display: "flex",
marginBottom: theme.spacing(3),
position: "relative",
width: "100%"
}
}),
{ name: "TimelineEvent" }
);
interface TimelineEventProps {
children?: React.ReactNode;

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

@ -29,37 +29,40 @@ const palette = [
colors.yellow
].map(color => color[500]);
const useStyles = makeStyles(theme => ({
avatar: {
left: -45,
position: "absolute",
top: 0
},
card: {
marginBottom: theme.spacing(3),
marginLeft: theme.spacing(3),
position: "relative"
},
cardContent: {
"&:last-child": {
padding: 16
const useStyles = makeStyles(
theme => ({
avatar: {
left: -45,
position: "absolute",
top: 0
},
boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
},
root: {
position: "relative"
},
title: {
"& p": {
fontSize: "14px"
card: {
marginBottom: theme.spacing(3),
marginLeft: theme.spacing(3),
position: "relative"
},
alignItems: "center",
display: "flex",
justifyContent: "space-between",
marginBottom: theme.spacing(),
paddingLeft: theme.spacing(3)
}
}));
cardContent: {
"&:last-child": {
padding: 16
},
boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
},
root: {
position: "relative"
},
title: {
"& p": {
fontSize: "14px"
},
alignItems: "center",
display: "flex",
justifyContent: "space-between",
marginBottom: theme.spacing(),
paddingLeft: theme.spacing(3)
}
}),
{ name: "TimelineNote" }
);
interface TimelineNoteProps {
date: string;

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

@ -10,36 +10,39 @@ import CardTitle from "@saleor/components/CardTitle";
import RadioSwitchField from "@saleor/components/RadioSwitchField";
import { DateContext } from "../Date/DateContext";
const useStyles = makeStyles(theme => ({
children: {
"& button": {
margin: "0 9px"
const useStyles = makeStyles(
theme => ({
children: {
"& button": {
margin: "0 9px"
},
"& label": {
marginTop: theme.spacing(2.5)
}
},
"& label": {
marginTop: theme.spacing(2.5)
date: {
"& svg": {
fill: theme.palette.primary.main
},
marginTop: theme.spacing(3)
},
label: {
lineHeight: 1,
margin: 0
},
secondLabel: {
fontSize: 12
},
setPublicationDate: {
color: theme.palette.primary.main,
cursor: "pointer",
fontSize: "14px",
paddingTop: "15px",
textDecoration: "underline"
}
},
date: {
"& svg": {
fill: theme.palette.primary.main
},
marginTop: theme.spacing(3)
},
label: {
lineHeight: 1,
margin: 0
},
secondLabel: {
fontSize: 12
},
setPublicationDate: {
color: theme.palette.primary.main,
cursor: "pointer",
fontSize: "14px",
paddingTop: "15px",
textDecoration: "underline"
}
}));
}),
{ name: "VisibilityCard" }
);
interface VisibilityCardProps {
children?: React.ReactNode | React.ReactNodeArray;

109
src/configuration/ConfigurationPage.tsx
View file

@ -26,64 +26,67 @@ export interface MenuSection {
menuItems: MenuItem[];
}
const useStyles = makeStyles(theme => ({
card: {
"&:hover": {
boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
const useStyles = makeStyles(
theme => ({
card: {
"&:hover": {
boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
},
cursor: "pointer",
marginBottom: theme.spacing(3),
transition: theme.transitions.duration.standard + "ms"
},
cursor: "pointer",
marginBottom: theme.spacing(3),
transition: theme.transitions.duration.standard + "ms"
},
cardContent: {
// Overrides Material-UI default theme
"&:last-child": {
paddingBottom: 16
cardContent: {
// Overrides Material-UI default theme
"&:last-child": {
paddingBottom: 16
},
display: "grid",
gridColumnGap: theme.spacing(4),
gridTemplateColumns: "48px 1fr"
},
display: "grid",
gridColumnGap: theme.spacing(4),
gridTemplateColumns: "48px 1fr"
},
cardDisabled: {
"& $icon, & $sectionTitle, & $sectionDescription": {
color: theme.palette.text.disabled
cardDisabled: {
"& $icon, & $sectionTitle, & $sectionDescription": {
color: theme.palette.text.disabled
},
marginBottom: theme.spacing(3)
},
marginBottom: theme.spacing(3)
},
configurationCategory: {
[theme.breakpoints.down("md")]: {
gridTemplateColumns: "1fr"
configurationCategory: {
[theme.breakpoints.down("md")]: {
gridTemplateColumns: "1fr"
},
borderTop: `solid 1px ${theme.palette.divider}`,
display: "grid",
gridColumnGap: theme.spacing(4) + "px",
gridTemplateColumns: "1fr 3fr",
paddingTop: theme.spacing(3)
},
borderTop: `solid 1px ${theme.palette.divider}`,
display: "grid",
gridColumnGap: theme.spacing(4) + "px",
gridTemplateColumns: "1fr 3fr",
paddingTop: theme.spacing(3)
},
configurationItem: {
[theme.breakpoints.down("md")]: {
gridTemplateColumns: "1fr"
configurationItem: {
[theme.breakpoints.down("md")]: {
gridTemplateColumns: "1fr"
},
display: "grid",
gridColumnGap: theme.spacing(4),
gridTemplateColumns: "1fr 1fr"
},
display: "grid",
gridColumnGap: theme.spacing(4),
gridTemplateColumns: "1fr 1fr"
},
configurationLabel: {
paddingBottom: 20
},
header: {
margin: 0
},
icon: {
color: theme.palette.primary.main,
fontSize: 48
},
sectionDescription: {},
sectionTitle: {
fontSize: 20,
fontWeight: 600 as 600
}
}));
configurationLabel: {
paddingBottom: 20
},
header: {
margin: 0
},
icon: {
color: theme.palette.primary.main,
fontSize: 48
},
sectionDescription: {},
sectionTitle: {
fontSize: 20,
fontWeight: 600 as 600
}
}),
{ name: "ConfigurationPage" }
);
export interface ConfigurationPageProps {
menu: MenuSection[];

31
src/customers/components/CustomerAddress/CustomerAddress.tsx
View file

@ -25,21 +25,24 @@ export interface CustomerAddressProps {
onSetAsDefault: (type: AddressTypeEnum) => void;
}
const useStyles = makeStyles({
actions: {
flexDirection: "row"
const useStyles = makeStyles(
{
actions: {
flexDirection: "row"
},
actionsContainer: {
display: "flex",
flexDirection: "column",
height: "100%",
justifyContent: "flex-end"
},
card: {
display: "flex",
flexDirection: "column"
}
},
actionsContainer: {
display: "flex",
flexDirection: "column",
height: "100%",
justifyContent: "flex-end"
},
card: {
display: "flex",
flexDirection: "column"
}
});
{ name: "CustomerAddress" }
);
const CustomerAddress: React.FC<CustomerAddressProps> = props => {
const {
address,

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

@ -23,25 +23,28 @@ export interface CustomerAddressListPageProps {
onSetAsDefault: (id: string, type: AddressTypeEnum) => void;
}
const useStyles = makeStyles(theme => ({
addButton: {
marginTop: theme.spacing(2)
},
description: {
marginTop: theme.spacing(1)
},
empty: {
margin: `${theme.spacing(13)}px auto 0`,
textAlign: "center",
width: 600
},
root: {
columnGap: theme.spacing(3),
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
rowGap: theme.spacing(3)
}
}));
const useStyles = makeStyles(
theme => ({
addButton: {
marginTop: theme.spacing(2)
},
description: {
marginTop: theme.spacing(1)
},
empty: {
margin: `${theme.spacing(13)}px auto 0`,
textAlign: "center",
width: 600
},
root: {
columnGap: theme.spacing(3),
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
rowGap: theme.spacing(3)
}
}),
{ name: "CustomerAddressListPage" }
);
const CustomerAddressListPage: React.FC<
CustomerAddressListPageProps

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

@ -13,12 +13,15 @@ import { buttonMessages } from "@saleor/intl";
import { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({
label: {
fontWeight: 600,
marginBottom: theme.spacing(1)
}
}));
const useStyles = makeStyles(
theme => ({
label: {
fontWeight: 600,
marginBottom: theme.spacing(1)
}
}),
{ name: "CustomerAddresses" }
);
export interface CustomerAddressesProps {
customer: CustomerDetails_user;

13
src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx
View file

@ -12,11 +12,14 @@ import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompl
import { FormErrors } from "../../../types";
import { AddressTypeInput } from "../../types";
const useStyles = makeStyles({
overflow: {
overflow: "visible"
}
});
const useStyles = makeStyles(
{
overflow: {
overflow: "visible"
}
},
{ name: "CustomerCreateAddress" }
);
export interface CustomerCreateAddressProps {
countries: SingleAutocompleteChoiceType[];

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

@ -10,14 +10,17 @@ import { commonMessages } from "@saleor/intl";
import { FormErrors } from "../../../types";
import { CustomerCreatePageFormData } from "../CustomerCreatePage";
const useStyles = makeStyles(theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr"
}
}));
const useStyles = makeStyles(
theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr"
}
}),
{ name: "CustomerCreateDetails" }
);
export interface CustomerCreateDetailsProps {
data: CustomerCreatePageFormData;

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

@ -14,20 +14,23 @@ import { maybe } from "@saleor/misc";
import { FormErrors } from "@saleor/types";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({
cardTitle: {
height: 72
},
checkbox: {
marginBottom: theme.spacing()
},
content: {
paddingTop: theme.spacing()
},
subtitle: {
marginTop: theme.spacing()
}
}));
const useStyles = makeStyles(
theme => ({
cardTitle: {
height: 72
},
checkbox: {
marginBottom: theme.spacing()
},
content: {
paddingTop: theme.spacing()
},
subtitle: {
marginTop: theme.spacing()
}
}),
{ name: "CustomerDetails" }
);
export interface CustomerDetailsProps {
customer: CustomerDetails_user;

25
src/customers/components/CustomerInfo/CustomerInfo.tsx
View file

@ -11,17 +11,20 @@ import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
import { commonMessages } from "@saleor/intl";
const useStyles = makeStyles(theme => ({
content: {
paddingTop: theme.spacing(2)
},
hr: {
margin: theme.spacing(3, 0)
},
sectionHeader: {
marginBottom: theme.spacing()
}
}));
const useStyles = makeStyles(
theme => ({
content: {
paddingTop: theme.spacing(2)
},
hr: {
margin: theme.spacing(3, 0)
},
sectionHeader: {
marginBottom: theme.spacing()
}
}),
{ name: "CustomerInfo" }
);
export interface CustomerInfoProps {
data: {

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

@ -15,25 +15,28 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types";
import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colEmail: {},
colName: {},
colOrders: {
width: 200
}
},
colEmail: {},
colName: {},
colName: {
paddingLeft: 0
},
colOrders: {
width: 200
textAlign: "center"
},
tableRow: {
cursor: "pointer"
}
},
colEmail: {},
colName: {
paddingLeft: 0
},
colOrders: {
textAlign: "center"
},
tableRow: {
cursor: "pointer"
}
}));
}),
{ name: "CustomerList" }
);
export interface CustomerListProps extends ListProps, ListActions {
customers: ListCustomers_customers_edges_node[];

17
src/customers/components/CustomerOrders/CustomerOrders.tsx
View file

@ -17,14 +17,17 @@ import StatusLabel from "@saleor/components/StatusLabel";
import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails";
const useStyles = makeStyles({
link: {
cursor: "pointer"
const useStyles = makeStyles(
{
link: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
}
},
textRight: {
textAlign: "right"
}
});
{ name: "CustomerOrders" }
);
export interface CustomerOrdersProps {
orders: CustomerDetails_user_orders_edges_node[];

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

@ -12,14 +12,17 @@ import Skeleton from "@saleor/components/Skeleton";
import { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({
label: {
marginBottom: theme.spacing(1)
},
value: {
fontSize: 24
}
}));
const useStyles = makeStyles(
theme => ({
label: {
marginBottom: theme.spacing(1)
},
value: {
fontSize: 24
}
}),
{ name: "CustomerStats" }
);
export interface CustomerStatsProps {
customer: CustomerDetails_user;

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

@ -27,23 +27,26 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
onCategoryUnassign: (id: string) => void;
}
const useStyles = makeStyles(theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
const useStyles = makeStyles(
theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing(0.5)
},
width: 48 + theme.spacing(0.5)
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
},
wideColumn: {
width: "60%"
}
}));
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
},
wideColumn: {
width: "60%"
}
}),
{ name: "DiscountCategories" }
);
const numberOfColumns = 4;

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

@ -27,23 +27,26 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
onCollectionUnassign: (id: string) => void;
}
const useStyles = makeStyles(theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
const useStyles = makeStyles(
theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing(0.5)
},
width: 48 + theme.spacing(0.5)
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
},
wideColumn: {
width: "60%"
}
}));
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
},
wideColumn: {
width: "60%"
}
}),
{ name: "DiscountCollections" }
);
const numberOfColumns = 4;

33
src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
View file

@ -40,21 +40,24 @@ export interface DiscountCountrySelectDialogProps {
onConfirm: (data: FormData) => void;
}
const useStyles = makeStyles(theme => ({
checkboxCell: {
paddingLeft: 0
},
container: {
maxHeight: 500
},
heading: {
marginBottom: theme.spacing(2),
marginTop: theme.spacing(2)
},
wideCell: {
width: "100%"
}
}));
const useStyles = makeStyles(
theme => ({
checkboxCell: {
paddingLeft: 0
},
container: {
maxHeight: 500
},
heading: {
marginBottom: theme.spacing(2),
marginTop: theme.spacing(2)
},
wideCell: {
width: "100%"
}
}),
{ name: "DiscountCountrySelectDialog" }
);
const DiscountCountrySelectDialog: React.FC<
DiscountCountrySelectDialogProps
> = props => {

55
src/discounts/components/DiscountProducts/DiscountProducts.tsx
View file

@ -31,33 +31,36 @@ export interface SaleProductsProps extends ListProps, ListActions {
onProductUnassign: (id: string) => void;
}
const useStyles = makeStyles(theme => ({
colActions: {
"&:last-child": {
paddingRight: 0
const useStyles = makeStyles(
theme => ({
colActions: {
"&:last-child": {
paddingRight: 0
},
width: 76 + theme.spacing(0.5)
},
width: 76 + theme.spacing(0.5)
},
colName: {
paddingLeft: 0,
width: "auto"
},
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPublished: {
width: 150
},
colType: {
width: 200
},
table: {
tableLayout: "fixed"
},
tableRow: {
cursor: "pointer"
}
}));
colName: {
paddingLeft: 0,
width: "auto"
},
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPublished: {
width: 150
},
colType: {
width: 200
},
table: {
tableLayout: "fixed"
},
tableRow: {
cursor: "pointer"
}
}),
{ name: "DiscountProducts" }
);
const numberOfColumns = 5;

51
src/discounts/components/SaleList/SaleList.tsx
View file

@ -24,35 +24,38 @@ export interface SaleListProps extends ListProps, ListActions {
sales: SaleList_sales_edges_node[];
}
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
colEnd: {
width: 250
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colEnd: {
width: 250
},
colName: {},
colStart: {
width: 250
},
colValue: {
width: 200
}
},
colEnd: {
textAlign: "right"
},
colName: {
paddingLeft: 0
},
colName: {},
colStart: {
width: 250
textAlign: "right"
},
colValue: {
width: 200
textAlign: "right"
},
tableRow: {
cursor: "pointer"
}
},
colEnd: {
textAlign: "right"
},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},
colValue: {
textAlign: "right"
},
tableRow: {
cursor: "pointer"
}
}));
}),
{ name: "SaleList" }
);
const numberOfColumns = 5;

71
src/discounts/components/VoucherList/VoucherList.tsx
View file

@ -24,50 +24,53 @@ export interface VoucherListProps extends ListProps, ListActions {
vouchers: VoucherList_vouchers_edges_node[];
}
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colEnd: {
width: 180
},
colMinSpent: {
width: 150
},
colName: {},
colStart: {
width: 180
},
colUses: {
width: 150
},
colValue: {
width: 150
}
},
colEnd: {
width: 180
textAlign: "right"
},
colMinSpent: {
width: 150
textAlign: "right"
},
colName: {
paddingLeft: 0
},
colName: {},
colStart: {
width: 180
textAlign: "right"
},
colUses: {
width: 150
textAlign: "right"
},
colValue: {
width: 150
textAlign: "right"
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
}
},
colEnd: {
textAlign: "right"
},
colMinSpent: {
textAlign: "right"
},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},
colUses: {
textAlign: "right"
},
colValue: {
textAlign: "right"
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
}
}));
}),
{ name: "VoucherList" }
);
const numberOfColumns = 7;

21
src/home/components/HomeActivityCard/HomeActivityCard.tsx
View file

@ -14,16 +14,19 @@ import { renderCollection } from "../../../misc";
import { Home_activities_edges_node } from "../../types/Home";
import { getActivityMessage } from "./activityMessages";
const useStyles = makeStyles({
loadingProducts: {
paddingBottom: "10px",
paddingTop: "10px"
const useStyles = makeStyles(
{
loadingProducts: {
paddingBottom: "10px",
paddingTop: "10px"
},
noProducts: {
paddingBottom: "16px",
paddingTop: "16px"
}
},
noProducts: {
paddingBottom: "16px",
paddingTop: "16px"
}
});
{ name: "HomeActivityCard" }
);
interface HomeActivityCardProps {
activities: Home_activities_edges_node[];

83
src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
View file

@ -6,48 +6,51 @@ import Typography from "@material-ui/core/Typography";
import React from "react";
import { FormattedMessage } from "react-intl";
const useStyles = makeStyles(theme => ({
cardContent: {
"&:last-child": {
padding: theme.spacing(2, 3)
const useStyles = makeStyles(
theme => ({
cardContent: {
"&:last-child": {
padding: theme.spacing(2, 3)
},
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "1fr 64px"
},
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "1fr 64px"
},
cardSpacing: {
[theme.breakpoints.down("sm")]: {
marginBottom: theme.spacing(1)
cardSpacing: {
[theme.breakpoints.down("sm")]: {
marginBottom: theme.spacing(1)
},
marginBottom: theme.spacing(3)
},
marginBottom: theme.spacing(3)
},
cardSubtitle: {
fontSize: 12,
height: "20px",
lineHeight: 0.9
},
cardTitle: {
fontSize: 20,
fontWeight: 500 as 500
},
icon: {
color: theme.palette.primary.contrastText,
fontSize: 54,
margin: ".5rem .3rem"
},
iconBackground: {
backgroundColor: theme.palette.background.default,
borderRadius: "8px",
color: "white",
fontSize: "54px",
height: "100%",
padding: "10px 5px 0px 5px",
width: "100%"
},
value: {
textAlign: "right"
}
}));
cardSubtitle: {
fontSize: 12,
height: "20px",
lineHeight: 0.9
},
cardTitle: {
fontSize: 20,
fontWeight: 500 as 500
},
icon: {
color: theme.palette.primary.contrastText,
fontSize: 54,
margin: ".5rem .3rem"
},
iconBackground: {
backgroundColor: theme.palette.background.default,
borderRadius: "8px",
color: "white",
fontSize: "54px",
height: "100%",
padding: "10px 5px 0px 5px",
width: "100%"
},
value: {
textAlign: "right"
}
}),
{ name: "HomeAnalyticsCard" }
);
interface HomeAnalyticsCardProps {
icon: React.ReactElement<IconProps>;

25
src/home/components/HomeHeader/HomeHeader.tsx
View file

@ -5,17 +5,20 @@ import { FormattedMessage } from "react-intl";
import Skeleton from "@saleor/components/Skeleton";
const useStyles = makeStyles(theme => ({
headerContainer: {
marginBottom: theme.spacing(3)
},
pageHeader: {
fontWeight: 600 as 600
},
subtitle: {
color: theme.typography.caption.color
}
}));
const useStyles = makeStyles(
theme => ({
headerContainer: {
marginBottom: theme.spacing(3)
},
pageHeader: {
fontWeight: 600 as 600
},
subtitle: {
color: theme.typography.caption.color
}
}),
{ name: "HomeHeader" }
);
interface HomeOrdersCardProps {
userName: string;

19
src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
View file

@ -14,14 +14,17 @@ import Skeleton from "@saleor/components/Skeleton";
import { UserPermissionProps } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
const useStyles = makeStyles(theme => ({
arrowIcon: {
width: theme.spacing(4)
},
tableRow: {
cursor: "pointer"
}
}));
const useStyles = makeStyles(
theme => ({
arrowIcon: {
width: theme.spacing(4)
},
tableRow: {
cursor: "pointer"
}
}),
{ name: "HomeNotificationTable" }
);
interface HomeNotificationTableProps extends UserPermissionProps {
ordersToCapture: number;

27
src/home/components/HomePage/HomePage.tsx
View file

@ -22,19 +22,22 @@ import HomeHeader from "../HomeHeader";
import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable";
import HomeProductListCard from "../HomeProductListCard";
const useStyles = makeStyles(theme => ({
cardContainer: {
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr",
[theme.breakpoints.down("sm")]: {
gridColumnGap: theme.spacing(1)
},
[theme.breakpoints.down("xs")]: {
gridTemplateColumns: "1fr"
const useStyles = makeStyles(
theme => ({
cardContainer: {
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr",
[theme.breakpoints.down("sm")]: {
gridColumnGap: theme.spacing(1)
},
[theme.breakpoints.down("xs")]: {
gridTemplateColumns: "1fr"
}
}
}
}));
}),
{ name: "HomePage" }
);
export interface HomePageProps extends UserPermissionProps {
activities: Home_activities_edges_node[];

45
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -16,27 +16,30 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { maybe, renderCollection } from "../../../misc";
import { Home_productTopToday_edges_node } from "../../types/Home";
const useStyles = makeStyles(theme => ({
avatarProps: {
height: 64,
width: 64
},
avatarSpacing: {
paddingBottom: theme.spacing(2),
paddingRight: theme.spacing(),
paddingTop: theme.spacing(2)
},
label: {
paddingLeft: 0
},
noProducts: {
paddingBottom: 20,
paddingTop: 20
},
tableRow: {
cursor: "pointer"
}
}));
const useStyles = makeStyles(
theme => ({
avatarProps: {
height: 64,
width: 64
},
avatarSpacing: {
paddingBottom: theme.spacing(2),
paddingRight: theme.spacing(),
paddingTop: theme.spacing(2)
},
label: {
paddingLeft: 0
},
noProducts: {
paddingBottom: 20,
paddingTop: 20
},
tableRow: {
cursor: "pointer"
}
}),
{ name: "HomeProductListCard" }
);
interface HomeProductListProps {
topProducts: Home_productTopToday_edges_node[];

143
src/navigation/components/MenuItems/MenuItems.tsx
View file

@ -34,82 +34,85 @@ export interface MenuItemsProps {
onUndo: () => void;
}
const useStyles = makeStyles(theme => ({
actions: {
flexDirection: "row"
},
container: {
background: theme.palette.grey[200]
},
darkContainer: {
background: `${theme.palette.grey[800]} !important`
},
deleteButton: {
marginRight: theme.spacing(1)
},
dragIcon: {
cursor: "grab"
},
nodeTitle: {
cursor: "pointer",
marginLeft: theme.spacing(7)
},
root: {
"& .rst__collapseButton": {
display: "none"
const useStyles = makeStyles(
theme => ({
actions: {
flexDirection: "row"
},
"& .rst__node": {
"&:first-of-type": {
"& $row": {
borderTop: `1px ${theme.palette.divider} solid`
container: {
background: theme.palette.grey[200]
},
darkContainer: {
background: `${theme.palette.grey[800]} !important`
},
deleteButton: {
marginRight: theme.spacing(1)
},
dragIcon: {
cursor: "grab"
},
nodeTitle: {
cursor: "pointer",
marginLeft: theme.spacing(7)
},
root: {
"& .rst__collapseButton": {
display: "none"
},
"& .rst__node": {
"&:first-of-type": {
"& $row": {
borderTop: `1px ${theme.palette.divider} solid`
}
}
}
}
},
row: {
alignItems: "center",
background: theme.palette.background.paper,
borderBottom: `1px ${theme.palette.divider} solid`,
borderRadius: 0,
display: "flex",
flexDirection: "row",
height: NODE_HEIGHT,
justifyContent: "flex-start",
paddingLeft: theme.spacing(3)
},
rowContainer: {
"& > *": {
opacity: 1,
transition: `opacity ${theme.transitions.duration.standard}ms`
},
transition: `margin ${theme.transitions.duration.standard}ms`
},
rowContainerDragged: {
"&$rowContainer": {
"&:before": {
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.primary.main}`,
borderRadius: "100%",
content: "''",
height: 7,
left: 0,
position: "absolute",
top: -3,
width: 7
row: {
alignItems: "center",
background: theme.palette.background.paper,
borderBottom: `1px ${theme.palette.divider} solid`,
borderRadius: 0,
display: "flex",
flexDirection: "row",
height: NODE_HEIGHT,
justifyContent: "flex-start",
paddingLeft: theme.spacing(3)
},
rowContainer: {
"& > *": {
opacity: 1,
transition: `opacity ${theme.transitions.duration.standard}ms`
},
borderTop: `1px solid ${theme.palette.primary.main}`,
height: 0,
position: "relative",
top: -1
transition: `margin ${theme.transitions.duration.standard}ms`
},
rowContainerDragged: {
"&$rowContainer": {
"&:before": {
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.primary.main}`,
borderRadius: "100%",
content: "''",
height: 7,
left: 0,
position: "absolute",
top: -3,
width: 7
},
borderTop: `1px solid ${theme.palette.primary.main}`,
height: 0,
position: "relative",
top: -1
}
},
rowContainerPlaceholder: {
opacity: 0
},
spacer: {
flex: 1
}
},
rowContainerPlaceholder: {
opacity: 0
},
spacer: {
flex: 1
}
}));
}),
{ name: "MenuItems" }
);
const Placeholder: React.FC = props => {
const classes = useStyles(props);

35
src/navigation/components/MenuList/MenuList.tsx
View file

@ -23,23 +23,26 @@ export interface MenuListProps extends ListProps, ListActions {
onDelete: (id: string) => void;
}
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
colItems: {
width: 200
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colItems: {
width: 200
},
colTitle: {}
},
colTitle: {}
},
colItems: {
textAlign: "right"
},
colTitle: {
paddingLeft: 0
},
row: {
cursor: "pointer"
}
}));
colItems: {
textAlign: "right"
},
colTitle: {
paddingLeft: 0
},
row: {
cursor: "pointer"
}
}),
{ name: "MenuList" }
);
const numberOfColumns = 4;

13
src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
View file

@ -22,11 +22,14 @@ import { UserError } from "@saleor/types";
import { AddressInput } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
const useStyles = makeStyles({
overflow: {
overflowY: "visible"
}
});
const useStyles = makeStyles(
{
overflow: {
overflowY: "visible"
}
},
{ name: "OrderAddressEditDialog" }
);
interface OrderAddressEditDialogProps {
confirmButtonState: ConfirmButtonTransitionState;

21
src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
View file

@ -19,15 +19,18 @@ export interface FormData {
restock: boolean;
}
const useStyles = makeStyles(theme => ({
deleteButton: {
"&:hover": {
backgroundColor: theme.palette.error.main
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
}
}));
const useStyles = makeStyles(
theme => ({
deleteButton: {
"&:hover": {
backgroundColor: theme.palette.error.main
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
}
}),
{ name: "OrderCancelDialog" }
);
interface OrderCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState;

43
src/orders/components/OrderCustomer/OrderCustomer.tsx
View file

@ -24,26 +24,29 @@ import { customerUrl } from "../../../customers/urls";
import { createHref, maybe } from "../../../misc";
import { OrderDetails_order } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({
sectionHeader: {
alignItems: "center",
display: "flex",
marginBottom: theme.spacing(3)
},
sectionHeaderTitle: {
flex: 1,
fontWeight: 600 as 600,
lineHeight: 1,
textTransform: "uppercase"
},
sectionHeaderToolbar: {
marginRight: -theme.spacing(2)
},
userEmail: {
fontWeight: 600 as 600,
marginBottom: theme.spacing(1)
}
}));
const useStyles = makeStyles(
theme => ({
sectionHeader: {
alignItems: "center",
display: "flex",
marginBottom: theme.spacing(3)
},
sectionHeaderTitle: {
flex: 1,
fontWeight: 600 as 600,
lineHeight: 1,
textTransform: "uppercase"
},
sectionHeaderToolbar: {
marginRight: -theme.spacing(2)
},
userEmail: {
fontWeight: 600 as 600,
marginBottom: theme.spacing(1)
}
}),
{ name: "OrderCustomer" }
);
export interface OrderCustomerProps
extends Partial<FetchMoreProps>,

71
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -25,42 +25,45 @@ export interface FormData {
quantity: number;
}
const useStyles = makeStyles(theme => ({
colAction: {
"&:last-child": {
paddingRight: 0
const useStyles = makeStyles(
theme => ({
colAction: {
"&:last-child": {
paddingRight: 0
},
width: 76 + theme.spacing(0.5)
},
width: 76 + theme.spacing(0.5)
},
colName: {
width: "auto"
},
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPrice: {
textAlign: "right",
width: 150
},
colQuantity: {
textAlign: "right",
width: 80
},
colTotal: {
textAlign: "right",
width: 150
},
quantityField: {
"& input": {
padding: "12px 12px 10px",
textAlign: "right"
colName: {
width: "auto"
},
width: 60
},
table: {
tableLayout: "fixed"
}
}));
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPrice: {
textAlign: "right",
width: 150
},
colQuantity: {
textAlign: "right",
width: 80
},
colTotal: {
textAlign: "right",
width: 150
},
quantityField: {
"& input": {
padding: "12px 12px 10px",
textAlign: "right"
},
width: 60
},
table: {
tableLayout: "fixed"
}
}),
{ name: "OrderDraftDetailsProducts" }
);
interface OrderDraftDetailsProductsProps {
lines: OrderDetails_order_lines[];

23
src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
View file

@ -8,16 +8,19 @@ import Skeleton from "@saleor/components/Skeleton";
import { maybe } from "../../../misc";
import { OrderDetails_order } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({
root: {
...theme.typography.body1,
lineHeight: 1.9,
width: "100%"
},
textRight: {
textAlign: "right"
}
}));
const useStyles = makeStyles(
theme => ({
root: {
...theme.typography.body1,
lineHeight: 1.9,
width: "100%"
},
textRight: {
textAlign: "right"
}
}),
{ name: "OrderDraftDetailsSummary" }
);
interface OrderDraftDetailsSummaryProps {
order: OrderDetails_order;

47
src/orders/components/OrderDraftList/OrderDraftList.tsx
View file

@ -22,31 +22,34 @@ import {
import { ListActions, ListProps } from "@saleor/types";
import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
const useStyles = makeStyles(theme => ({
[theme.breakpoints.up("lg")]: {
colCustomer: {
width: 300
},
colDate: {
width: 300
const useStyles = makeStyles(
theme => ({
[theme.breakpoints.up("lg")]: {
colCustomer: {
width: 300
},
colDate: {
width: 300
},
colNumber: {
width: 120
},
colTotal: {}
},
colCustomer: {},
colDate: {},
colNumber: {
width: 120
paddingLeft: 0
},
colTotal: {}
},
colCustomer: {},
colDate: {},
colNumber: {
paddingLeft: 0
},
colTotal: {
textAlign: "right"
},
link: {
cursor: "pointer"
}
}));
colTotal: {
textAlign: "right"
},
link: {
cursor: "pointer"
}
}),
{ name: "OrderDraftList" }
);
interface OrderDraftListProps extends ListProps, ListActions {
orders: OrderDraftList_draftOrders_edges_node[];

21
src/orders/components/OrderDraftPage/OrderDraftPage.tsx
View file

@ -23,15 +23,18 @@ import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
const useStyles = makeStyles(theme => ({
date: {
marginBottom: theme.spacing(3)
},
header: {
display: "flex",
marginBottom: 0
}
}));
const useStyles = makeStyles(
theme => ({
date: {
marginBottom: theme.spacing(3)
},
header: {
display: "flex",
marginBottom: 0
}
}),
{ name: "OrderDraftPage" }
);
export interface OrderDraftPageProps
extends FetchMoreProps,

69
src/orders/components/OrderFulfillment/OrderFulfillment.tsx
View file

@ -23,40 +23,43 @@ import { maybe, renderCollection } from "../../../misc";
import { FulfillmentStatus } from "../../../types/globalTypes";
import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({
clickableRow: {
cursor: "pointer"
},
colName: {
width: "auto"
},
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPrice: {
textAlign: "right",
width: 120
},
colQuantity: {
textAlign: "center",
width: 120
},
colTotal: {
textAlign: "right",
width: 120
},
const useStyles = makeStyles(
theme => ({
clickableRow: {
cursor: "pointer"
},
colName: {
width: "auto"
},
colNameLabel: {
marginLeft: AVATAR_MARGIN
},
colPrice: {
textAlign: "right",
width: 120
},
colQuantity: {
textAlign: "center",
width: 120
},
colTotal: {
textAlign: "right",
width: 120
},
orderNumber: {
display: "inline",
marginLeft: theme.spacing(1)
},
statusBar: {
paddingTop: 0
},
table: {
tableLayout: "fixed"
}
}));
orderNumber: {
display: "inline",
marginLeft: theme.spacing(1)
},
statusBar: {
paddingTop: 0
},
table: {
tableLayout: "fixed"
}
}),
{ name: "OrderFulfillment" }
);
interface OrderFulfillmentProps {
fulfillment: OrderDetails_order_fulfillments;

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