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[]; attributes: AttributeList_attributes_edges_node[];
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
[theme.breakpoints.up("lg")]: {
colFaceted: {
width: 150
},
colName: {
width: "auto"
},
colSearchable: {
width: 150
},
colSlug: {
width: 200
},
colVisible: {
width: 150
}
},
colFaceted: { colFaceted: {
width: 150 textAlign: "center"
},
colName: {
width: "auto"
}, },
colName: {},
colSearchable: { colSearchable: {
width: 150 textAlign: "center"
}, },
colSlug: { colSlug: {
width: 200 paddingLeft: 0
}, },
colVisible: { colVisible: {
width: 150 textAlign: "center"
},
link: {
cursor: "pointer"
} }
}, }),
colFaceted: { { name: "AttributeList" }
textAlign: "center" );
},
colName: {},
colSearchable: {
textAlign: "center"
},
colSlug: {
paddingLeft: 0
},
colVisible: {
textAlign: "center"
},
link: {
cursor: "pointer"
}
}));
const numberOfColumns = 6; const numberOfColumns = 6;

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

@ -29,29 +29,32 @@ export interface AttributeValuesProps {
onValueUpdate: (id: string) => void; onValueUpdate: (id: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
columnAdmin: { theme => ({
width: "50%" columnAdmin: {
}, width: "50%"
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) columnDrag: {
}, width: 48 + theme.spacing(1.5)
link: { },
cursor: "pointer" 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> = ({ const AttributeValues: React.FC<AttributeValuesProps> = ({
disabled, 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 { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails";
import { FormData } from "../CategoryUpdatePage"; import { FormData } from "../CategoryUpdatePage";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
fileField: { theme => ({
display: "none" fileField: {
}, display: "none"
image: { },
height: "100%", image: {
objectFit: "contain", height: "100%",
userSelect: "none", objectFit: "contain",
width: "100%" userSelect: "none",
}, width: "100%"
imageContainer: { },
background: "#ffffff", imageContainer: {
border: "1px solid #eaeaea", background: "#ffffff",
borderRadius: theme.spacing(), border: "1px solid #eaeaea",
height: 148, borderRadius: theme.spacing(),
justifySelf: "start", height: 148,
overflow: "hidden", justifySelf: "start",
padding: theme.spacing(2), overflow: "hidden",
position: "relative", padding: theme.spacing(2),
width: 148 position: "relative",
} width: 148
})); }
}),
{ name: "CategoryBackground" }
);
export interface CategoryBackgroundProps { export interface CategoryBackgroundProps {
data: FormData; data: FormData;

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

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

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

@ -11,44 +11,47 @@ export interface AppHeaderProps {
onBack(); onBack();
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
backArrow: { theme => ({
fontSize: 30 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
}, },
alignItems: "center", menuButton: {
color: theme.palette.grey[500], flex: "0 0 auto",
cursor: "pointer", marginLeft: -theme.spacing(2),
display: "flex", marginRight: theme.spacing(),
marginTop: theme.spacing(0.5), marginTop: -theme.spacing(2)
transition: theme.transitions.duration.standard + "ms", },
[theme.breakpoints.down("sm")]: { root: {
display: "none" "&: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: { { name: "AppHeader" }
marginBottom: theme.spacing(2), );
width: "10rem"
},
title: {
color: "inherit",
flex: 1,
marginLeft: theme.spacing(),
textTransform: "uppercase",
[theme.breakpoints.down("sm")]: {
display: "none"
}
}
}));
const AppHeader: React.FC<AppHeaderProps> = props => { const AppHeader: React.FC<AppHeaderProps> = props => {
const { children, onBack } = 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 MenuNested from "./MenuNested";
import { IMenuItem } from "./menuStructure"; import { IMenuItem } from "./menuStructure";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
menuIcon: { theme => ({
"& svg": { menuIcon: {
height: 32, "& svg": {
width: 32 height: 32,
width: 32
},
display: "inline-block",
position: "relative",
top: 8
}, },
display: "inline-block", menuIconDark: {
position: "relative", "& path": {
top: 8 fill: theme.palette.common.white
}, }
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"
}, },
"& path": { menuIconSmall: {
transition: "fill 0.5s ease" left: -5
}, },
"&:hover": { menuIsActive: {
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
},
menuItemHover: {
"& p": { "& 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 color: theme.palette.primary.main
}, },
"& path": { "& path": {
color: theme.palette.primary.main,
fill: 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": { "&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`, borderLeft: `solid 2px ${theme.palette.primary.main}`,
@ -63,97 +114,49 @@ const useStyles = makeStyles(theme => ({
position: "absolute", position: "absolute",
top: 8 top: 8
}, },
color: theme.palette.primary.main position: "relative"
}, },
cursor: "pointer", menuListItemText: {
position: "relative" "&:hover": {
}, color: theme.palette.primary.main
menuList: { },
display: "flex", bottom: 0,
flexDirection: "column", cursor: "pointer",
height: "100%", fontSize: "1rem",
marginLeft: theme.spacing(4), fontWeight: 500,
marginTop: theme.spacing(2), left: 30,
paddingBottom: theme.spacing(3) opacity: 1,
}, paddingLeft: 16,
menuListItem: { position: "absolute",
alignItems: "center", textTransform: "uppercase",
display: "block", transition: "opacity 0.5s ease"
marginBottom: theme.spacing(5),
paddingLeft: 0,
textDecoration: "none",
transition: theme.transitions.duration.standard + "ms"
},
menuListItemActive: {
"& $menuListItemText": {
color: theme.palette.primary.main
}, },
"& path": { menuListItemTextHide: {
color: theme.palette.primary.main, bottom: 0,
fill: theme.palette.primary.main 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: { { name: "MenuList" }
"&: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`
}
}));
interface MenuListProps { interface MenuListProps {
className?: string; className?: string;

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

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

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

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

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

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

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

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

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

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

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

@ -18,15 +18,18 @@ export interface CardMenuProps {
menuItems: CardMenuItem[]; menuItems: CardMenuItem[];
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
iconButton: { theme => ({
background: theme.palette.background.paper, iconButton: {
borderRadius: "100%", background: theme.palette.background.paper,
height: 32, borderRadius: "100%",
padding: 0, height: 32,
width: 32 padding: 0,
} width: 32
})); }
}),
{ name: "CardMenu" }
);
const CardMenu: React.FC<CardMenuProps> = props => { const CardMenu: React.FC<CardMenuProps> = props => {
const { className, disabled, menuItems } = 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 { makeStyles } from "@material-ui/core/styles";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
spacer: { theme => ({
[theme.breakpoints.down("sm")]: { spacer: {
marginTop: theme.spacing(1) [theme.breakpoints.down("sm")]: {
}, marginTop: theme.spacing(1)
marginTop: theme.spacing(3) },
} marginTop: theme.spacing(3)
})); }
}),
{ name: "CardSpacer" }
);
interface CardSpacerProps { interface CardSpacerProps {
children?: React.ReactNode; 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
children: theme.mixins.gutters({}), theme => ({
constantHeight: { children: theme.mixins.gutters({}),
height: 56 constantHeight: {
}, height: 56
hr: { },
border: "none", hr: {
borderTop: `1px solid ${theme.palette.divider}`, border: "none",
height: 0, borderTop: `1px solid ${theme.palette.divider}`,
marginBottom: 0, height: 0,
marginTop: 0, marginBottom: 0,
width: "100%" marginTop: 0,
}, width: "100%"
root: theme.mixins.gutters({ },
alignItems: "center", root: theme.mixins.gutters({
display: "flex", alignItems: "center",
minHeight: 56 display: "flex",
minHeight: 56
}),
title: {
flex: 1,
fontWeight: 500,
lineHeight: 1
},
toolbar: {
marginRight: -theme.spacing(1)
}
}), }),
title: { { name: "CardTitle" }
flex: 1, );
fontWeight: 500,
lineHeight: 1
},
toolbar: {
marginRight: -theme.spacing(1)
}
}));
interface CardTitleProps { interface CardTitleProps {
children?: React.ReactNode; 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; onChange?: (event: React.ChangeEvent<any>) => void;
}; };
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
box: { theme => ({
"&$checked": { box: {
"&:before": { "&$checked": {
background: theme.palette.primary.main, "&:before": {
color: theme.palette.background.paper, background: theme.palette.primary.main,
content: '"\\2713"', color: theme.palette.background.paper,
fontWeight: "bold", content: '"\\2713"',
textAlign: "center" fontWeight: "bold",
textAlign: "center"
},
borderColor: theme.palette.primary.main
}, },
borderColor: theme.palette.primary.main "&$disabled": {
}, borderColor: theme.palette.grey[200]
"&$disabled": {
borderColor: theme.palette.grey[200]
},
"&$indeterminate": {
"&:before": {
background: theme.palette.primary.main,
height: 2,
top: 5
}, },
borderColor: theme.palette.primary.main "&$indeterminate": {
}, "&:before": {
"&:before": { background: theme.palette.primary.main,
background: "rgba(0, 0, 0, 0)", height: 2,
content: '""', 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, height: 14,
left: -1, outline: "0",
position: "absolute", position: "relative",
top: -1, userSelect: "none",
transition: theme.transitions.duration.short + "ms",
width: 14 width: 14
}, },
checked: {},
WebkitAppearance: "none", disabled: {},
border: `1px solid ${theme.palette.action.active}`, indeterminate: {},
boxSizing: "border-box", root: {
cursor: "pointer", "&:hover": {
height: 14, background: fade(theme.palette.primary.main, 0.1)
outline: "0", },
position: "relative", alignSelf: "start",
userSelect: "none", borderRadius: "100%",
width: 14 cursor: "pointer",
}, display: "flex",
checked: {}, height: 30,
disabled: {}, justifyContent: "center",
indeterminate: {}, margin: "5px 9px",
root: { width: 30
"&:hover": { }
background: fade(theme.palette.primary.main, 0.1) }),
}, { name: "Checkbox" }
alignSelf: "start", );
borderRadius: "100%",
cursor: "pointer",
display: "flex",
height: 30,
justifyContent: "center",
margin: "5px 9px",
width: 30
}
}));
const Checkbox: React.FC<CheckboxProps> = props => { const Checkbox: React.FC<CheckboxProps> = props => {
const { const {
checked, checked,

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

@ -11,24 +11,27 @@ export interface ChipProps {
onClose?: () => void; onClose?: () => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
closeIcon: { theme => ({
cursor: "pointer", closeIcon: {
fontSize: 16, cursor: "pointer",
marginLeft: theme.spacing(), fontSize: 16,
verticalAlign: "middle" marginLeft: theme.spacing(),
}, verticalAlign: "middle"
label: { },
color: theme.palette.common.white label: {
}, color: theme.palette.common.white
root: { },
background: fade(theme.palette.secondary.main, 0.8), root: {
borderRadius: 8, background: fade(theme.palette.secondary.main, 0.8),
display: "inline-block", borderRadius: 8,
marginRight: theme.spacing(2), display: "inline-block",
padding: "6px 12px" marginRight: theme.spacing(2),
} padding: "6px 12px"
})); }
}),
{ name: "Chip" }
);
const Chip: React.FC<ChipProps> = props => { const Chip: React.FC<ChipProps> = props => {
const { className, label, onClose } = 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; onSave: () => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
actionBar: { theme => ({
display: "flex", actionBar: {
justifyContent: "space-between" 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)"
}, },
display: "grid", actionBarContainer: {
gridColumnGap: theme.spacing(3), boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
gridTemplateColumns: "repeat(3, 1fr)", transition: theme.transitions.duration.short + "ms"
maxHeight: 256, },
overflowX: "visible", cancelButton: {
overflowY: "scroll", marginRight: theme.spacing(2)
padding: theme.spacing(2, 3) },
}, content: {
contentContainer: { [theme.breakpoints.down("sm")]: {
padding: 0 gridTemplateColumns: "repeat(2, 1fr)"
}, },
dropShadow: { display: "grid",
boxShadow: `0px -5px 10px 0px ${theme.palette.divider}` gridColumnGap: theme.spacing(3),
}, gridTemplateColumns: "repeat(3, 1fr)",
loadMoreLoaderContainer: { maxHeight: 256,
alignItems: "center", overflowX: "visible",
display: "flex", overflowY: "scroll",
gridColumnEnd: "span 3", padding: theme.spacing(2, 3)
height: theme.spacing(3), },
justifyContent: "center" contentContainer: {
}, padding: 0
root: { },
boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)" dropShadow: {
}, boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
titleContainer: { },
padding: theme.spacing(1.5, 3.5) 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 ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
const { const {

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

@ -67,7 +67,7 @@ interface ConfirmButtonState {
displayCompletedActionState: boolean; displayCompletedActionState: boolean;
} }
const ConfirmButton = withStyles(styles)( const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
class ConfirmButtonComponent extends React.Component< class ConfirmButtonComponent extends React.Component<
ConfirmButtonProps & ConfirmButtonProps &
WithStyles< 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 Switch from "@material-ui/core/Switch";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
label: { theme => ({
marginLeft: theme.spacing(3.5) label: {
}, marginLeft: theme.spacing(3.5)
labelText: { },
fontSize: 14 labelText: {
} fontSize: 14
})); }
}),
{ name: "ControlledSwitch" }
);
interface ControlledSwitchProps { interface ControlledSwitchProps {
checked: boolean; checked: boolean;

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

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

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

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

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

@ -11,49 +11,52 @@ export interface ErrorPageProps {
onBack: () => void; onBack: () => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
bottomHeader: { theme => ({
fontWeight: 600 as 600, bottomHeader: {
textTransform: "uppercase" 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%"
}, },
display: "grid", button: {
gridTemplateColumns: "1fr 487px", marginTop: theme.spacing(2),
margin: "0 auto", padding: 20
width: 830
},
innerContainer: {
[theme.breakpoints.down("sm")]: {
order: 1,
textAlign: "center"
}, },
display: "flex", container: {
flexDirection: "column", [theme.breakpoints.down("sm")]: {
justifyContent: "center" gridTemplateColumns: "1fr",
}, padding: theme.spacing(3),
notFoundImage: { width: "100%"
"& svg": { },
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: { { name: "ErrorPage" }
alignItems: "center", );
display: "flex",
height: "calc(100vh - 180px)"
},
upperHeader: {
fontWeight: 600 as 600
}
}));
const ErrorPage: React.FC<ErrorPageProps> = props => { const ErrorPage: React.FC<ErrorPageProps> = props => {
const { onBack } = 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 Typography, { TypographyProps } from "@material-ui/core/Typography";
import React from "react"; import React from "react";
const useStyles = makeStyles({ const useStyles = makeStyles(
link: { {
textDecoration: "none" link: {
} textDecoration: "none"
}); }
},
{ name: "ExternalLink" }
);
interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> { interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
href: string; 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 React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
const useStyles = makeStyles({ const useStyles = makeStyles(
fileUploadField: { {
display: "none" fileUploadField: {
display: "none"
},
root: {
display: "flex"
},
textField: {
flex: 1
}
}, },
root: { { name: "FileUpload" }
display: "flex" );
},
textField: {
flex: 1
}
});
interface FileUploadProps { interface FileUploadProps {
disabled?: boolean; disabled?: boolean;

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

@ -21,63 +21,66 @@ export interface FilterProps<TFilterKeys = string> {
onFilterAdd: (filter: FilterContentSubmitData) => void; onFilterAdd: (filter: FilterContentSubmitData) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
addFilterButton: { theme => ({
"&$filterButton": { addFilterButton: {
"&:hover, &:focus": { "&$filterButton": {
backgroundColor: fade(theme.palette.primary.main, 0.1) "&:hover, &:focus": {
}, backgroundColor: fade(theme.palette.primary.main, 0.1)
backgroundColor: theme.palette.background.paper, },
border: `1px solid ${theme.palette.primary.main}`, backgroundColor: theme.palette.background.paper,
cursor: "pointer", border: `1px solid ${theme.palette.primary.main}`,
marginBottom: 0, cursor: "pointer",
marginRight: theme.spacing(2), marginBottom: 0,
marginTop: 0, marginRight: theme.spacing(2),
transition: theme.transitions.duration.short + "ms" 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
}, },
marginTop: theme.spacing(2), addFilterButtonActive: {
padding: theme.spacing(2), "&$addFilterButton": {
width: 240 backgroundColor: fade(theme.palette.primary.main, 0.1)
}, }
popover: { },
zIndex: 1 addFilterIcon: {
}, transition: theme.transitions.duration.short + "ms"
rotate: { },
transform: "rotate(180deg)" 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 Filter: React.FC<FilterProps> = props => {
const { currencySymbol, filterLabel, menu, onFilterAdd } = props; const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
const classes = useStyles(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 { FilterContentSubmitData, IFilter } from "../Filter";
import Filter from "./Filter"; import Filter from "./Filter";
const useInputStyles = makeStyles({ const useInputStyles = makeStyles(
input: { {
padding: "10.5px 12px" input: {
padding: "10.5px 12px"
},
root: {
flex: 1
}
}, },
root: { { name: "FilterActions" }
flex: 1 );
}
});
const Search: React.FC<TextFieldProps> = props => { const Search: React.FC<TextFieldProps> = props => {
const classes = useInputStyles({}); const classes = useInputStyles({});

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

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

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

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

13
src/components/FormSpacer.tsx
View file

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

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

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

23
src/components/Hr.tsx
View file

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

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

@ -12,15 +12,18 @@ export interface IconButtonTableCellProps {
onClick: () => void; onClick: () => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
"&:last-child": { root: {
paddingRight: 0 "&:last-child": {
}, paddingRight: 0
paddingRight: 0, },
width: ICONBUTTON_SIZE + theme.spacing(0.5) paddingRight: 0,
} width: ICONBUTTON_SIZE + theme.spacing(0.5)
})); }
}),
{ name: "IconButtonTableCell" }
);
const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => { const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
const { const {
children, 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
image: { theme => ({
height: "100%", image: {
objectFit: "contain", height: "100%",
userSelect: "none", objectFit: "contain",
width: "100%" userSelect: "none",
}, width: "100%"
imageContainer: { },
"&:hover, &.dragged": { imageContainer: {
"& $imageOverlay": { "&:hover, &.dragged": {
display: "block" "& $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, imageOverlayToolbar: {
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", display: "flex",
justifyContent: "center" justifyContent: "flex-end"
} }
}, }),
imageOverlayToolbar: { { name: "ImageTile" }
display: "flex", );
justifyContent: "flex-end"
}
}));
interface ImageTileProps { interface ImageTileProps {
image: { image: {

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

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

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

@ -21,36 +21,39 @@ export interface LanguageSwitchProps {
onLanguageChange: (lang: LanguageCodeEnum) => void; onLanguageChange: (lang: LanguageCodeEnum) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
arrow: { theme => ({
color: theme.palette.primary.main, arrow: {
transition: theme.transitions.duration.standard + "ms" color: theme.palette.primary.main,
}, transition: theme.transitions.duration.standard + "ms"
container: { },
paddingBottom: theme.spacing(1) container: {
}, paddingBottom: theme.spacing(1)
menuContainer: { },
cursor: "pointer", menuContainer: {
display: "flex", cursor: "pointer",
justifyContent: "space-between", display: "flex",
minWidth: 90, justifyContent: "space-between",
padding: theme.spacing(), minWidth: 90,
position: "relative" padding: theme.spacing(),
}, position: "relative"
menuItem: { },
textAlign: "justify" menuItem: {
}, textAlign: "justify"
menuPaper: { },
maxHeight: `calc(100vh - ${theme.spacing(2)}px)`, menuPaper: {
overflow: "scroll" maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
}, overflow: "scroll"
popover: { },
zIndex: 1 popover: {
}, zIndex: 1
rotate: { },
transform: "rotate(180deg)" rotate: {
} transform: "rotate(180deg)"
})); }
}),
{ name: "LanguageSwitch" }
);
const LanguageSwitch: React.FC<LanguageSwitchProps> = props => { const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
const { currentLanguage, languages, onLanguageChange } = props; const { currentLanguage, languages, onLanguageChange } = props;
const classes = useStyles(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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
primary: { theme => ({
color: theme.palette.primary.main primary: {
}, color: theme.palette.primary.main
root: { },
cursor: "pointer", root: {
display: "inline" cursor: "pointer",
}, display: "inline"
secondary: { },
color: theme.palette.primary.main secondary: {
}, color: theme.palette.primary.main
underline: { },
textDecoration: "underline" underline: {
} textDecoration: "underline"
})); }
}),
{ name: "Link" }
);
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> { interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
color?: "primary" | "secondary"; 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< class ListFieldComponent extends React.Component<
ListFieldProps, ListFieldProps,
ListFieldState ListFieldState

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

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

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

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

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

@ -5,21 +5,24 @@ import React from "react";
import ExtendedPageHeader from "../ExtendedPageHeader"; import ExtendedPageHeader from "../ExtendedPageHeader";
import Skeleton from "../Skeleton"; import Skeleton from "../Skeleton";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
display: "flex" root: {
}, display: "flex"
title: {
[theme.breakpoints.down("sm")]: {
fontSize: 20,
marginTop: theme.spacing(2),
padding: 0
}, },
alignSelf: "flex-start", title: {
flex: 1, [theme.breakpoints.down("sm")]: {
fontSize: 24 fontSize: 20,
} marginTop: theme.spacing(2),
})); padding: 0
},
alignSelf: "flex-start",
flex: 1,
fontSize: 24
}
}),
{ name: "PageHeader" }
);
interface PageHeaderProps { interface PageHeaderProps {
children?: React.ReactNode; 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"; import SingleSelectField from "@saleor/components/SingleSelectField";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
display: "grid", root: {
gridColumnGap: theme.spacing(2), display: "grid",
gridTemplateColumns: "5rem 1fr" gridColumnGap: theme.spacing(2),
} gridTemplateColumns: "5rem 1fr"
})); }
}),
{ name: "PhoneField" }
);
interface PhoneFieldProps { interface PhoneFieldProps {
name: string; 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 TextField from "@material-ui/core/TextField";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
currencySymbol: { theme => ({
fontSize: "0.875rem" currencySymbol: {
}, fontSize: "0.875rem"
inputContainer: { },
display: "grid", inputContainer: {
gridTemplateColumns: "1fr 2rem 1fr" display: "grid",
}, gridTemplateColumns: "1fr 2rem 1fr"
pullDown: { },
marginTop: theme.spacing(2) pullDown: {
}, marginTop: theme.spacing(2)
separator: { },
marginTop: theme.spacing(3), separator: {
textAlign: "center", marginTop: theme.spacing(3),
width: "100%" textAlign: "center",
}, width: "100%"
widgetContainer: { },
marginTop: theme.spacing(2) widgetContainer: {
} marginTop: theme.spacing(2)
})); }
}),
{ name: "PriceField" }
);
interface PriceFieldProps { interface PriceFieldProps {
className?: string; 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles({ const useStyles = makeStyles(
formControl: { {
padding: 0, formControl: {
width: "100%" padding: 0,
}, width: "100%"
formLabel: { },
marginLeft: "-5px", formLabel: {
paddingBottom: "10px" marginLeft: "-5px",
}, paddingBottom: "10px"
radioLabel: { },
"& > span": { radioLabel: {
padding: "10px 6px" "& > span": {
padding: "10px 6px"
}
},
secondLabel: {
display: "block",
fontSize: "12px"
} }
}, },
secondLabel: { { name: "RadioSwitchField" }
display: "block", );
fontSize: "12px"
}
});
interface RadioSwitchFieldProps { interface RadioSwitchFieldProps {
className?: string; className?: string;

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

@ -18,25 +18,28 @@ interface ImageEntityProps {
onRemove: (entityKey: string) => void; onRemove: (entityKey: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
anchor: { theme => ({
display: "inline-block" anchor: {
}, display: "inline-block"
container: { },
alignItems: "center", container: {
display: "flex" alignItems: "center",
}, display: "flex"
image: { maxWidth: "100%" }, },
inline: { image: { maxWidth: "100%" },
display: "inline-block" inline: {
}, display: "inline-block"
root: { },
alignItems: "center", root: {
display: "flex", alignItems: "center",
minHeight: 72, display: "flex",
padding: theme.spacing(1.5) minHeight: 72,
} padding: theme.spacing(1.5)
})); }
}),
{ name: "ImageEntity" }
);
const ImageEntity: React.FC<ImageEntityProps> = props => { const ImageEntity: React.FC<ImageEntityProps> = props => {
const { contentState, entityKey, onEdit, onRemove } = 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; onRemove: (entityKey: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
anchor: { theme => ({
display: "inline-block" anchor: {
}, display: "inline-block"
container: { },
alignItems: "center", container: {
display: "flex" alignItems: "center",
}, display: "flex"
inline: { },
display: "inline-block" inline: {
}, display: "inline-block"
popover: { },
zIndex: 1 popover: {
}, zIndex: 1
root: { },
alignItems: "center", root: {
display: "flex", alignItems: "center",
minHeight: 72, display: "flex",
padding: theme.spacing(1.5, 1.5, 1.5, 3) minHeight: 72,
}, padding: theme.spacing(1.5, 1.5, 1.5, 3)
separator: { },
backgroundColor: theme.palette.grey[300], separator: {
display: "inline-block", backgroundColor: theme.palette.grey[300],
height: 30, display: "inline-block",
marginLeft: theme.spacing(2), height: 30,
marginRight: theme.spacing(), marginLeft: theme.spacing(2),
width: 1 marginRight: theme.spacing(),
} width: 1
})); }
}),
{ name: "LinkEntity" }
);
const LinkEntity: React.FC<LinkEntityProps> = props => { const LinkEntity: React.FC<LinkEntityProps> = props => {
const { children, contentState, entityKey, onEdit, onRemove } = 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; onChange: (event: React.ChangeEvent<any>) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
error: { theme => ({
color: theme.palette.error.main 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
}
}, },
"& .Draftail": { helperText: {
"&-Editor": { marginTop: theme.spacing(0.75)
"&--focus": { },
boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}` 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": { "&-root": {
borderColor: theme.palette.primary.main ...theme.typography.body1
},
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": { "& .Draftail": {
"&-Editor": { "&-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: {
scroll: { "& .DraftEditor": {
"& .DraftEditor": { "&-editorContainer": {
"&-editorContainer": { "& .public-DraftEditor-content": {
"& .public-DraftEditor-content": { lineHeight: 1.62
lineHeight: 1.62 }
} }
} }
},
smallIcon: {
marginLeft: 10
} }
}, }),
smallIcon: { { name: "RichTextEditor" }
marginLeft: 10 );
}
}));
function handleSave( function handleSave(
value: any, value: any,

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

@ -14,45 +14,48 @@ import ConfirmButton, {
} from "../ConfirmButton/ConfirmButton"; } from "../ConfirmButton/ConfirmButton";
import Container from "../Container"; import Container from "../Container";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
button: { theme => ({
marginRight: theme.spacing(1) 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
}, },
backgroundColor: theme.palette.error.main, cancelButton: {
color: theme.palette.error.contrastText marginRight: theme.spacing(2)
}, },
root: { container: {
background: theme.palette.background.default, display: "flex",
borderTop: "1px solid transparent", paddingBottom: theme.spacing(2),
boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`, paddingTop: theme.spacing(2),
height: "100%", [theme.breakpoints.down("sm")]: {
transition: `box-shadow ${theme.transitions.duration.shortest}ms` marginTop: theme.spacing(1)
}, }
spacer: { },
flex: "1" deleteButton: {
}, "&:hover": {
stop: { backgroundColor: theme.palette.error.dark
"&$root": { },
borderTopColor: theme.palette.divider, backgroundColor: theme.palette.error.main,
boxShadow: `0 0 0 0 ${theme.palette.divider}` 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 { interface SaveButtonBarProps {
disabled: boolean; 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 CardTitle from "../CardTitle";
import FormSpacer from "../FormSpacer"; import FormSpacer from "../FormSpacer";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
addressBar: { theme => ({
color: "#006621", addressBar: {
fontSize: "13px", color: "#006621",
lineHeight: "16px", fontSize: "13px",
marginBottom: "2px", lineHeight: "16px",
overflow: "hidden", marginBottom: "2px",
textOverflow: "ellipsis", overflow: "hidden",
whiteSpace: "nowrap" 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
}, },
display: "flex" container: {
}, width: "100%"
preview: { },
minHeight: theme.spacing(10) descriptionBar: {
}, color: "#545454",
title: { fontSize: "13px",
padding: 0 lineHeight: "18px",
}, overflowWrap: "break-word"
titleBar: { },
color: "#1a0dab", helperText: {
fontSize: "18px", marginBottom: theme.spacing(3)
lineHeight: "21px", },
overflowWrap: "break-word", label: {
textDecoration: "none", flex: 1
wordWrap: "break-word" },
} 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 { interface SeoFormProps {
description?: string; description?: string;

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

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

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

@ -9,17 +9,20 @@ import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
formControl: { theme => ({
"& label": { formControl: {
top: "-3px" "& 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 { interface SingleSelectFieldProps {
choices: Array<{ 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
"@keyframes skeleton-animation": { theme => ({
"0%": { "@keyframes skeleton-animation": {
opacity: 0.6 "0%": {
opacity: 0.6
},
"100%": {
opacity: 1
}
}, },
"100%": { primary: {
opacity: 1 "&$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: { { name: "Skeleton" }
"&$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"
}
}));
interface SkeletonProps { interface SkeletonProps {
className?: string; 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"; import Draggable from "@saleor/icons/Draggable";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
columnDrag: { theme => ({
"&:first-child": { columnDrag: {
paddingRight: theme.spacing(2) "&:first-child": {
}, paddingRight: theme.spacing(2)
cursor: "grab", },
width: 48 + theme.spacing(1.5) cursor: "grab",
} width: 48 + theme.spacing(1.5)
})); }
}),
{ name: "SortableHandle" }
);
const SortableHandle = SortableHandleHoc(() => { const SortableHandle = SortableHandleHoc(() => {
const classes = useStyles({}); const classes = useStyles({});

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

@ -13,18 +13,21 @@ export interface SortableTableBodyProps {
onSortEnd: ReorderAction; onSortEnd: ReorderAction;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
ghost: { theme => ({
"& td": { ghost: {
borderBottom: "none" "& td": {
}, borderBottom: "none"
background: theme.palette.background.paper, },
fontFamily: theme.typography.fontFamily, background: theme.palette.background.paper,
// FIXME: you damn know what fontFamily: theme.typography.fontFamily,
// fontSize: theme.overrides.MuiTableCell.root.fontSize, // FIXME: you damn know what
opacity: 0.5 // fontSize: theme.overrides.MuiTableCell.root.fontSize,
} opacity: 0.5
})); }
}),
{ name: "SortableTableBody" }
);
const SortableTableBody: React.FC< const SortableTableBody: React.FC<
Omit<TableBodyProps & SortableTableBodyProps, "ref"> 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => { const useStyles = makeStyles(
const dot = { theme => {
borderRadius: "100%", const dot = {
content: "''", borderRadius: "100%",
display: "block", content: "''",
height: 8, display: "block",
left: -theme.spacing(2), height: 8,
position: "absolute" as "absolute", left: -theme.spacing(2),
top: "calc(50% - 5px)", position: "absolute" as "absolute",
width: 8 top: "calc(50% - 5px)",
}; width: 8
};
return { return {
errorDot: { errorDot: {
"&:before": { backgroundColor: theme.palette.error.main, ...dot } "&:before": { backgroundColor: theme.palette.error.main, ...dot }
}, },
neutralDot: { neutralDot: {
"&:before": { backgroundColor: yellow[500], ...dot } "&:before": { backgroundColor: yellow[500], ...dot }
}, },
root: { root: {
display: "inline-block", display: "inline-block",
marginLeft: theme.spacing(1) + 8, marginLeft: theme.spacing(1) + 8,
position: "relative" position: "relative"
}, },
span: { span: {
display: "inline" display: "inline"
}, },
successDot: { successDot: {
"&:before": { backgroundColor: theme.palette.primary.main, ...dot } "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
} }
}; };
}); },
{ name: "StatusLabel" }
);
interface StatusLabelProps { interface StatusLabelProps {
className?: string; className?: string;

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

@ -5,11 +5,14 @@ export interface TabContainerProps {
children: React.ReactNode | React.ReactNodeArray; children: React.ReactNode | React.ReactNodeArray;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
borderBottom: `1px solid ${theme.palette.divider}` root: {
} borderBottom: `1px solid ${theme.palette.divider}`
})); }
}),
{ name: "TabContainer" }
);
const TabContainer: React.FC<TabContainerProps> = props => { const TabContainer: React.FC<TabContainerProps> = props => {
const { children } = 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; export const AVATAR_MARGIN = 32;
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
avatar: { theme => ({
background: "none", avatar: {
border: `1px solid ${theme.palette.divider}`, background: "none",
borderRadius: 2, border: `1px solid ${theme.palette.divider}`,
color: "#bdbdbd", borderRadius: 2,
display: "inline-flex", color: "#bdbdbd",
padding: theme.spacing(0.5) 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
}, },
paddingRight: theme.spacing(3), children: {
width: "1%" 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 { interface TableCellAvatarProps {
className?: string; className?: string;

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

@ -5,40 +5,43 @@ import React from "react";
import ArrowSort from "../../icons/ArrowSort"; import ArrowSort from "../../icons/ArrowSort";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
arrow: { theme => ({
transition: theme.transitions.duration.short + "ms" arrow: {
}, transition: theme.transitions.duration.short + "ms"
arrowLeft: { },
marginLeft: -24 arrowLeft: {
}, marginLeft: -24
arrowUp: { },
transform: "rotate(180deg)" arrowUp: {
}, transform: "rotate(180deg)"
label: { },
alignSelf: "center", label: {
display: "inline-block" alignSelf: "center",
}, display: "inline-block"
labelContainer: { },
"&:hover": { labelContainer: {
"&:hover": {
color: theme.palette.text.primary
},
display: "flex",
height: 24
},
labelContainerActive: {
color: theme.palette.text.primary color: theme.palette.text.primary
}, },
display: "flex", labelContainerCenter: {
height: 24 justifyContent: "center"
}, },
labelContainerActive: { labelContainerRight: {
color: theme.palette.text.primary justifyContent: "flex-end"
}, },
labelContainerCenter: { root: {
justifyContent: "center" cursor: "pointer"
}, }
labelContainerRight: { }),
justifyContent: "flex-end" { name: "TableCellHeader" }
}, );
root: {
cursor: "pointer"
}
}));
export type TableCellHeaderArrowDirection = "asc" | "desc"; export type TableCellHeaderArrowDirection = "asc" | "desc";
export type TableCellHeaderArrowPosition = "left" | "right"; 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
selectedTabLabel: { theme => ({
"&$tabLabel": { selectedTabLabel: {
color: theme.typography.body1.color "&$tabLabel": {
} color: theme.typography.body1.color
}, }
tabLabel: {
"&:hover": {
color: theme.typography.body1.color
}, },
color: theme.typography.caption.color, tabLabel: {
fontSize: "1rem", "&:hover": {
fontWeight: 400 color: theme.typography.body1.color
}, },
tabRoot: { color: theme.typography.caption.color,
minWidth: "80px", fontSize: "1rem",
opacity: 1, fontWeight: 400
paddingTop: theme.spacing(1), },
textTransform: "initial" as "initial" tabRoot: {
} minWidth: "80px",
})); opacity: 1,
paddingTop: theme.spacing(1),
textTransform: "initial" as "initial"
}
}),
{ name: "FilterTab" }
);
interface FilterTabProps { interface FilterTabProps {
onClick: () => void; 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 Tabs from "@material-ui/core/Tabs";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
tabsRoot: { theme => ({
borderBottom: `1px solid ${theme.palette.divider}`, tabsRoot: {
paddingLeft: theme.spacing(3) borderBottom: `1px solid ${theme.palette.divider}`,
} paddingLeft: theme.spacing(3)
})); }
}),
{ name: "FilterTabs" }
);
interface FilterTabsProps { interface FilterTabsProps {
children?: React.ReactNode; 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; toggleAll?: (items: Node[], selected: number) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
cell: { theme => ({
padding: 0 cell: {
},
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 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: { { name: "TableHead" }
backgroundColor: fade(theme.palette.primary.main, 0.05), );
paddingLeft: 0,
paddingRight: 24
},
spacer: {
flex: 1
},
toolbar: {
"& > *": {
marginLeft: theme.spacing(1)
}
}
}));
const TableHead: React.FC<TableHeadProps> = props => { const TableHead: React.FC<TableHeadProps> = props => {
const { const {

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

@ -9,46 +9,49 @@ import { maybe } from "@saleor/misc";
import { ListSettings } from "../../types"; import { ListSettings } from "../../types";
import TablePaginationActions from "./TablePaginationActions"; import TablePaginationActions from "./TablePaginationActions";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
actions: { theme => ({
color: theme.palette.text.secondary, actions: {
flexShrink: 0, color: theme.palette.text.secondary,
marginLeft: theme.spacing(2.5) flexShrink: 0,
}, marginLeft: theme.spacing(2.5)
caption: { },
flexShrink: 0 caption: {
}, flexShrink: 0
input: { },
flexShrink: 0, input: {
fontSize: "inherit" flexShrink: 0,
}, fontSize: "inherit"
root: { },
"&:last-child": { root: {
padding: 0 "&: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: { { name: "TablePagination" }
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
}
}));
interface TablePaginationProps { interface TablePaginationProps {
backIconButtonProps?: Partial<IconButtonProps>; 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 classNames from "classnames";
import React from "react"; import React from "react";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
dark: { theme => ({
"& svg": { dark: {
color: theme.palette.primary.main
},
"&$disabled": {
"& svg": { "& svg": {
color: fade(theme.palette.primary.main, 0.2) color: theme.palette.primary.main
}
},
"&: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)
}, },
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 disabled: {},
}, iconButton: {
root: { "& > span:first-of-type": {
color: theme.palette.text.secondary, backgroundColor: theme.palette.background.default,
flexShrink: 0, borderRadius: "100%",
margin: theme.spacing(0, 2.5) 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 { export interface TablePaginationActionsProps {
backIconButtonProps?: any; backIconButtonProps?: any;

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

@ -23,16 +23,19 @@ export type TextFieldWithChoiceProps<TValue = string> = TextFieldProps & {
}; };
}; };
const useStyles = makeStyles({ const useStyles = makeStyles(
adornment: { {
alignItems: "center", adornment: {
cursor: "pointer", alignItems: "center",
display: "flex" cursor: "pointer",
display: "flex"
},
menu: {
zIndex: 10
}
}, },
menu: { { name: "TextFieldWithChoice" }
zIndex: 10 );
}
});
const TextFieldWithChoice: React.FC<TextFieldWithChoiceProps> = props => { const TextFieldWithChoice: React.FC<TextFieldWithChoiceProps> = props => {
const { ChoiceProps, InputProps, onChange, ...rest } = 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"; import { DateTime } from "../Date";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
date: { theme => ({
color: theme.typography.caption.color 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"
}, },
background: "none", dateExpander: {
width: "100%" color: theme.typography.caption.color,
},
root: {
"&:last-child:after": {
background: theme.palette.background.default,
content: "''",
height: "calc(50% - 4px)",
left: -theme.spacing(3) - 2,
position: "absolute", position: "absolute",
top: "calc(50% + 4px)", right: theme.spacing(3)
width: "2px"
}, },
alignItems: "center", dot: {
display: "flex", backgroundColor: theme.palette.primary.main,
marginBottom: theme.spacing(3), borderRadius: "100%",
position: "relative", height: 8,
width: "100%" 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 { interface TimelineEventProps {
children?: React.ReactNode; children?: React.ReactNode;

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

@ -29,37 +29,40 @@ const palette = [
colors.yellow colors.yellow
].map(color => color[500]); ].map(color => color[500]);
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
avatar: { theme => ({
left: -45, avatar: {
position: "absolute", left: -45,
top: 0 position: "absolute",
}, top: 0
card: {
marginBottom: theme.spacing(3),
marginLeft: theme.spacing(3),
position: "relative"
},
cardContent: {
"&:last-child": {
padding: 16
}, },
boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)" card: {
}, marginBottom: theme.spacing(3),
root: { marginLeft: theme.spacing(3),
position: "relative" position: "relative"
},
title: {
"& p": {
fontSize: "14px"
}, },
alignItems: "center", cardContent: {
display: "flex", "&:last-child": {
justifyContent: "space-between", padding: 16
marginBottom: theme.spacing(), },
paddingLeft: theme.spacing(3) 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 { interface TimelineNoteProps {
date: string; 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 RadioSwitchField from "@saleor/components/RadioSwitchField";
import { DateContext } from "../Date/DateContext"; import { DateContext } from "../Date/DateContext";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
children: { theme => ({
"& button": { children: {
margin: "0 9px" "& button": {
margin: "0 9px"
},
"& label": {
marginTop: theme.spacing(2.5)
}
}, },
"& label": { date: {
marginTop: theme.spacing(2.5) "& 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: { { name: "VisibilityCard" }
"& 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"
}
}));
interface VisibilityCardProps { interface VisibilityCardProps {
children?: React.ReactNode | React.ReactNodeArray; children?: React.ReactNode | React.ReactNodeArray;

109
src/configuration/ConfigurationPage.tsx
View file

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

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

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

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

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

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

@ -13,12 +13,15 @@ import { buttonMessages } from "@saleor/intl";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
label: { theme => ({
fontWeight: 600, label: {
marginBottom: theme.spacing(1) fontWeight: 600,
} marginBottom: theme.spacing(1)
})); }
}),
{ name: "CustomerAddresses" }
);
export interface CustomerAddressesProps { export interface CustomerAddressesProps {
customer: CustomerDetails_user; 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 { FormErrors } from "../../../types";
import { AddressTypeInput } from "../../types"; import { AddressTypeInput } from "../../types";
const useStyles = makeStyles({ const useStyles = makeStyles(
overflow: { {
overflow: "visible" overflow: {
} overflow: "visible"
}); }
},
{ name: "CustomerCreateAddress" }
);
export interface CustomerCreateAddressProps { export interface CustomerCreateAddressProps {
countries: SingleAutocompleteChoiceType[]; 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 { FormErrors } from "../../../types";
import { CustomerCreatePageFormData } from "../CustomerCreatePage"; import { CustomerCreatePageFormData } from "../CustomerCreatePage";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
display: "grid", root: {
gridColumnGap: theme.spacing(2), display: "grid",
gridRowGap: theme.spacing(3), gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr" gridRowGap: theme.spacing(3),
} gridTemplateColumns: "1fr 1fr"
})); }
}),
{ name: "CustomerCreateDetails" }
);
export interface CustomerCreateDetailsProps { export interface CustomerCreateDetailsProps {
data: CustomerCreatePageFormData; 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 { FormErrors } from "@saleor/types";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
cardTitle: { theme => ({
height: 72 cardTitle: {
}, height: 72
checkbox: { },
marginBottom: theme.spacing() checkbox: {
}, marginBottom: theme.spacing()
content: { },
paddingTop: theme.spacing() content: {
}, paddingTop: theme.spacing()
subtitle: { },
marginTop: theme.spacing() subtitle: {
} marginTop: theme.spacing()
})); }
}),
{ name: "CustomerDetails" }
);
export interface CustomerDetailsProps { export interface CustomerDetailsProps {
customer: CustomerDetails_user; 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 Hr from "@saleor/components/Hr";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
content: { theme => ({
paddingTop: theme.spacing(2) content: {
}, paddingTop: theme.spacing(2)
hr: { },
margin: theme.spacing(3, 0) hr: {
}, margin: theme.spacing(3, 0)
sectionHeader: { },
marginBottom: theme.spacing() sectionHeader: {
} marginBottom: theme.spacing()
})); }
}),
{ name: "CustomerInfo" }
);
export interface CustomerInfoProps { export interface CustomerInfoProps {
data: { 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 { ListActions, ListProps } from "@saleor/types";
import { ListCustomers_customers_edges_node } from "../../types/ListCustomers"; import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
[theme.breakpoints.up("lg")]: {
colEmail: {},
colName: {},
colOrders: {
width: 200
}
},
colEmail: {}, colEmail: {},
colName: {}, colName: {
paddingLeft: 0
},
colOrders: { colOrders: {
width: 200 textAlign: "center"
},
tableRow: {
cursor: "pointer"
} }
}, }),
colEmail: {}, { name: "CustomerList" }
colName: { );
paddingLeft: 0
},
colOrders: {
textAlign: "center"
},
tableRow: {
cursor: "pointer"
}
}));
export interface CustomerListProps extends ListProps, ListActions { export interface CustomerListProps extends ListProps, ListActions {
customers: ListCustomers_customers_edges_node[]; 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 { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails"; import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails";
const useStyles = makeStyles({ const useStyles = makeStyles(
link: { {
cursor: "pointer" link: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
}
}, },
textRight: { { name: "CustomerOrders" }
textAlign: "right" );
}
});
export interface CustomerOrdersProps { export interface CustomerOrdersProps {
orders: CustomerDetails_user_orders_edges_node[]; 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 { maybe } from "../../../misc";
import { CustomerDetails_user } from "../../types/CustomerDetails"; import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
label: { theme => ({
marginBottom: theme.spacing(1) label: {
}, marginBottom: theme.spacing(1)
value: { },
fontSize: 24 value: {
} fontSize: 24
})); }
}),
{ name: "CustomerStats" }
);
export interface CustomerStatsProps { export interface CustomerStatsProps {
customer: CustomerDetails_user; 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; onCategoryUnassign: (id: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
iconCell: { theme => ({
"&:last-child": { iconCell: {
paddingRight: 0 "&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing(0.5)
}, },
width: 48 + theme.spacing(0.5) tableRow: {
}, cursor: "pointer"
tableRow: { },
cursor: "pointer" textRight: {
}, textAlign: "right"
textRight: { },
textAlign: "right" wideColumn: {
}, width: "60%"
wideColumn: { }
width: "60%" }),
} { name: "DiscountCategories" }
})); );
const numberOfColumns = 4; 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; onCollectionUnassign: (id: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
iconCell: { theme => ({
"&:last-child": { iconCell: {
paddingRight: 0 "&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing(0.5)
}, },
width: 48 + theme.spacing(0.5) tableRow: {
}, cursor: "pointer"
tableRow: { },
cursor: "pointer" textRight: {
}, textAlign: "right"
textRight: { },
textAlign: "right" wideColumn: {
}, width: "60%"
wideColumn: { }
width: "60%" }),
} { name: "DiscountCollections" }
})); );
const numberOfColumns = 4; const numberOfColumns = 4;

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

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

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

@ -31,33 +31,36 @@ export interface SaleProductsProps extends ListProps, ListActions {
onProductUnassign: (id: string) => void; onProductUnassign: (id: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
colActions: { theme => ({
"&:last-child": { colActions: {
paddingRight: 0 "&:last-child": {
paddingRight: 0
},
width: 76 + theme.spacing(0.5)
}, },
width: 76 + theme.spacing(0.5) colName: {
}, paddingLeft: 0,
colName: { width: "auto"
paddingLeft: 0, },
width: "auto" colNameLabel: {
}, marginLeft: AVATAR_MARGIN
colNameLabel: { },
marginLeft: AVATAR_MARGIN colPublished: {
}, width: 150
colPublished: { },
width: 150 colType: {
}, width: 200
colType: { },
width: 200 table: {
}, tableLayout: "fixed"
table: { },
tableLayout: "fixed" tableRow: {
}, cursor: "pointer"
tableRow: { }
cursor: "pointer" }),
} { name: "DiscountProducts" }
})); );
const numberOfColumns = 5; 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[]; sales: SaleList_sales_edges_node[];
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
colEnd: { [theme.breakpoints.up("lg")]: {
width: 250 colEnd: {
width: 250
},
colName: {},
colStart: {
width: 250
},
colValue: {
width: 200
}
},
colEnd: {
textAlign: "right"
},
colName: {
paddingLeft: 0
}, },
colName: {},
colStart: { colStart: {
width: 250 textAlign: "right"
}, },
colValue: { colValue: {
width: 200 textAlign: "right"
},
tableRow: {
cursor: "pointer"
} }
}, }),
colEnd: { { name: "SaleList" }
textAlign: "right" );
},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},
colValue: {
textAlign: "right"
},
tableRow: {
cursor: "pointer"
}
}));
const numberOfColumns = 5; 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[]; vouchers: VoucherList_vouchers_edges_node[];
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
[theme.breakpoints.up("lg")]: {
colEnd: {
width: 180
},
colMinSpent: {
width: 150
},
colName: {},
colStart: {
width: 180
},
colUses: {
width: 150
},
colValue: {
width: 150
}
},
colEnd: { colEnd: {
width: 180 textAlign: "right"
}, },
colMinSpent: { colMinSpent: {
width: 150 textAlign: "right"
},
colName: {
paddingLeft: 0
}, },
colName: {},
colStart: { colStart: {
width: 180 textAlign: "right"
}, },
colUses: { colUses: {
width: 150 textAlign: "right"
}, },
colValue: { colValue: {
width: 150 textAlign: "right"
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
} }
}, }),
colEnd: { { name: "VoucherList" }
textAlign: "right" );
},
colMinSpent: {
textAlign: "right"
},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},
colUses: {
textAlign: "right"
},
colValue: {
textAlign: "right"
},
tableRow: {
cursor: "pointer"
},
textRight: {
textAlign: "right"
}
}));
const numberOfColumns = 7; 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 { Home_activities_edges_node } from "../../types/Home";
import { getActivityMessage } from "./activityMessages"; import { getActivityMessage } from "./activityMessages";
const useStyles = makeStyles({ const useStyles = makeStyles(
loadingProducts: { {
paddingBottom: "10px", loadingProducts: {
paddingTop: "10px" paddingBottom: "10px",
paddingTop: "10px"
},
noProducts: {
paddingBottom: "16px",
paddingTop: "16px"
}
}, },
noProducts: { { name: "HomeActivityCard" }
paddingBottom: "16px", );
paddingTop: "16px"
}
});
interface HomeActivityCardProps { interface HomeActivityCardProps {
activities: Home_activities_edges_node[]; 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 React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
cardContent: { theme => ({
"&:last-child": { cardContent: {
padding: theme.spacing(2, 3) "&:last-child": {
padding: theme.spacing(2, 3)
},
display: "grid",
gridColumnGap: theme.spacing(3),
gridTemplateColumns: "1fr 64px"
}, },
display: "grid", cardSpacing: {
gridColumnGap: theme.spacing(3), [theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr 64px" marginBottom: theme.spacing(1)
}, },
cardSpacing: { marginBottom: theme.spacing(3)
[theme.breakpoints.down("sm")]: {
marginBottom: theme.spacing(1)
}, },
marginBottom: theme.spacing(3) cardSubtitle: {
}, fontSize: 12,
cardSubtitle: { height: "20px",
fontSize: 12, lineHeight: 0.9
height: "20px", },
lineHeight: 0.9 cardTitle: {
}, fontSize: 20,
cardTitle: { fontWeight: 500 as 500
fontSize: 20, },
fontWeight: 500 as 500 icon: {
}, color: theme.palette.primary.contrastText,
icon: { fontSize: 54,
color: theme.palette.primary.contrastText, margin: ".5rem .3rem"
fontSize: 54, },
margin: ".5rem .3rem" iconBackground: {
}, backgroundColor: theme.palette.background.default,
iconBackground: { borderRadius: "8px",
backgroundColor: theme.palette.background.default, color: "white",
borderRadius: "8px", fontSize: "54px",
color: "white", height: "100%",
fontSize: "54px", padding: "10px 5px 0px 5px",
height: "100%", width: "100%"
padding: "10px 5px 0px 5px", },
width: "100%" value: {
}, textAlign: "right"
value: { }
textAlign: "right" }),
} { name: "HomeAnalyticsCard" }
})); );
interface HomeAnalyticsCardProps { interface HomeAnalyticsCardProps {
icon: React.ReactElement<IconProps>; 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"; import Skeleton from "@saleor/components/Skeleton";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
headerContainer: { theme => ({
marginBottom: theme.spacing(3) headerContainer: {
}, marginBottom: theme.spacing(3)
pageHeader: { },
fontWeight: 600 as 600 pageHeader: {
}, fontWeight: 600 as 600
subtitle: { },
color: theme.typography.caption.color subtitle: {
} color: theme.typography.caption.color
})); }
}),
{ name: "HomeHeader" }
);
interface HomeOrdersCardProps { interface HomeOrdersCardProps {
userName: string; 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 { UserPermissionProps } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes"; import { PermissionEnum } from "@saleor/types/globalTypes";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
arrowIcon: { theme => ({
width: theme.spacing(4) arrowIcon: {
}, width: theme.spacing(4)
tableRow: { },
cursor: "pointer" tableRow: {
} cursor: "pointer"
})); }
}),
{ name: "HomeNotificationTable" }
);
interface HomeNotificationTableProps extends UserPermissionProps { interface HomeNotificationTableProps extends UserPermissionProps {
ordersToCapture: number; 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 HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable";
import HomeProductListCard from "../HomeProductListCard"; import HomeProductListCard from "../HomeProductListCard";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
cardContainer: { theme => ({
display: "grid", cardContainer: {
gridColumnGap: theme.spacing(3), display: "grid",
gridTemplateColumns: "1fr 1fr", gridColumnGap: theme.spacing(3),
[theme.breakpoints.down("sm")]: { gridTemplateColumns: "1fr 1fr",
gridColumnGap: theme.spacing(1) [theme.breakpoints.down("sm")]: {
}, gridColumnGap: theme.spacing(1)
[theme.breakpoints.down("xs")]: { },
gridTemplateColumns: "1fr" [theme.breakpoints.down("xs")]: {
gridTemplateColumns: "1fr"
}
} }
} }),
})); { name: "HomePage" }
);
export interface HomePageProps extends UserPermissionProps { export interface HomePageProps extends UserPermissionProps {
activities: Home_activities_edges_node[]; 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 { maybe, renderCollection } from "../../../misc";
import { Home_productTopToday_edges_node } from "../../types/Home"; import { Home_productTopToday_edges_node } from "../../types/Home";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
avatarProps: { theme => ({
height: 64, avatarProps: {
width: 64 height: 64,
}, width: 64
avatarSpacing: { },
paddingBottom: theme.spacing(2), avatarSpacing: {
paddingRight: theme.spacing(), paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(2) paddingRight: theme.spacing(),
}, paddingTop: theme.spacing(2)
label: { },
paddingLeft: 0 label: {
}, paddingLeft: 0
noProducts: { },
paddingBottom: 20, noProducts: {
paddingTop: 20 paddingBottom: 20,
}, paddingTop: 20
tableRow: { },
cursor: "pointer" tableRow: {
} cursor: "pointer"
})); }
}),
{ name: "HomeProductListCard" }
);
interface HomeProductListProps { interface HomeProductListProps {
topProducts: Home_productTopToday_edges_node[]; topProducts: Home_productTopToday_edges_node[];

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

@ -34,82 +34,85 @@ export interface MenuItemsProps {
onUndo: () => void; onUndo: () => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
actions: { theme => ({
flexDirection: "row" 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"
}, },
"& .rst__node": { container: {
"&:first-of-type": { background: theme.palette.grey[200]
"& $row": { },
borderTop: `1px ${theme.palette.divider} solid` 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` row: {
}, alignItems: "center",
rowContainerDragged: { background: theme.palette.background.paper,
"&$rowContainer": { borderBottom: `1px ${theme.palette.divider} solid`,
"&:before": { borderRadius: 0,
background: theme.palette.background.paper, display: "flex",
border: `1px solid ${theme.palette.primary.main}`, flexDirection: "row",
borderRadius: "100%", height: NODE_HEIGHT,
content: "''", justifyContent: "flex-start",
height: 7, paddingLeft: theme.spacing(3)
left: 0, },
position: "absolute", rowContainer: {
top: -3, "& > *": {
width: 7 opacity: 1,
transition: `opacity ${theme.transitions.duration.standard}ms`
}, },
borderTop: `1px solid ${theme.palette.primary.main}`, transition: `margin ${theme.transitions.duration.standard}ms`
height: 0, },
position: "relative", rowContainerDragged: {
top: -1 "&$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: { { name: "MenuItems" }
opacity: 0 );
},
spacer: {
flex: 1
}
}));
const Placeholder: React.FC = props => { const Placeholder: React.FC = props => {
const classes = useStyles(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; onDelete: (id: string) => void;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
colItems: { [theme.breakpoints.up("lg")]: {
width: 200 colItems: {
width: 200
},
colTitle: {}
}, },
colTitle: {} colItems: {
}, textAlign: "right"
colItems: { },
textAlign: "right" colTitle: {
}, paddingLeft: 0
colTitle: { },
paddingLeft: 0 row: {
}, cursor: "pointer"
row: { }
cursor: "pointer" }),
} { name: "MenuList" }
})); );
const numberOfColumns = 4; 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 { AddressInput } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
const useStyles = makeStyles({ const useStyles = makeStyles(
overflow: { {
overflowY: "visible" overflow: {
} overflowY: "visible"
}); }
},
{ name: "OrderAddressEditDialog" }
);
interface OrderAddressEditDialogProps { interface OrderAddressEditDialogProps {
confirmButtonState: ConfirmButtonTransitionState; confirmButtonState: ConfirmButtonTransitionState;

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

@ -19,15 +19,18 @@ export interface FormData {
restock: boolean; restock: boolean;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
deleteButton: { theme => ({
"&:hover": { deleteButton: {
backgroundColor: theme.palette.error.main "&:hover": {
}, backgroundColor: theme.palette.error.main
backgroundColor: theme.palette.error.main, },
color: theme.palette.error.contrastText backgroundColor: theme.palette.error.main,
} color: theme.palette.error.contrastText
})); }
}),
{ name: "OrderCancelDialog" }
);
interface OrderCancelDialogProps { interface OrderCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState; 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 { createHref, maybe } from "../../../misc";
import { OrderDetails_order } from "../../types/OrderDetails"; import { OrderDetails_order } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
sectionHeader: { theme => ({
alignItems: "center", sectionHeader: {
display: "flex", alignItems: "center",
marginBottom: theme.spacing(3) display: "flex",
}, marginBottom: theme.spacing(3)
sectionHeaderTitle: { },
flex: 1, sectionHeaderTitle: {
fontWeight: 600 as 600, flex: 1,
lineHeight: 1, fontWeight: 600 as 600,
textTransform: "uppercase" lineHeight: 1,
}, textTransform: "uppercase"
sectionHeaderToolbar: { },
marginRight: -theme.spacing(2) sectionHeaderToolbar: {
}, marginRight: -theme.spacing(2)
userEmail: { },
fontWeight: 600 as 600, userEmail: {
marginBottom: theme.spacing(1) fontWeight: 600 as 600,
} marginBottom: theme.spacing(1)
})); }
}),
{ name: "OrderCustomer" }
);
export interface OrderCustomerProps export interface OrderCustomerProps
extends Partial<FetchMoreProps>, extends Partial<FetchMoreProps>,

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

@ -25,42 +25,45 @@ export interface FormData {
quantity: number; quantity: number;
} }
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
colAction: { theme => ({
"&:last-child": { colAction: {
paddingRight: 0 "&:last-child": {
paddingRight: 0
},
width: 76 + theme.spacing(0.5)
}, },
width: 76 + theme.spacing(0.5) colName: {
}, width: "auto"
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"
}, },
width: 60 colNameLabel: {
}, marginLeft: AVATAR_MARGIN
table: { },
tableLayout: "fixed" 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 { interface OrderDraftDetailsProductsProps {
lines: OrderDetails_order_lines[]; 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 { maybe } from "../../../misc";
import { OrderDetails_order } from "../../types/OrderDetails"; import { OrderDetails_order } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
root: { theme => ({
...theme.typography.body1, root: {
lineHeight: 1.9, ...theme.typography.body1,
width: "100%" lineHeight: 1.9,
}, width: "100%"
textRight: { },
textAlign: "right" textRight: {
} textAlign: "right"
})); }
}),
{ name: "OrderDraftDetailsSummary" }
);
interface OrderDraftDetailsSummaryProps { interface OrderDraftDetailsSummaryProps {
order: OrderDetails_order; order: OrderDetails_order;

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

@ -22,31 +22,34 @@ import {
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList"; import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
[theme.breakpoints.up("lg")]: { theme => ({
colCustomer: { [theme.breakpoints.up("lg")]: {
width: 300 colCustomer: {
}, width: 300
colDate: { },
width: 300 colDate: {
width: 300
},
colNumber: {
width: 120
},
colTotal: {}
}, },
colCustomer: {},
colDate: {},
colNumber: { colNumber: {
width: 120 paddingLeft: 0
}, },
colTotal: {} colTotal: {
}, textAlign: "right"
colCustomer: {}, },
colDate: {}, link: {
colNumber: { cursor: "pointer"
paddingLeft: 0 }
}, }),
colTotal: { { name: "OrderDraftList" }
textAlign: "right" );
},
link: {
cursor: "pointer"
}
}));
interface OrderDraftListProps extends ListProps, ListActions { interface OrderDraftListProps extends ListProps, ListActions {
orders: OrderDraftList_draftOrders_edges_node[]; 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 { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory"; import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
date: { theme => ({
marginBottom: theme.spacing(3) date: {
}, marginBottom: theme.spacing(3)
header: { },
display: "flex", header: {
marginBottom: 0 display: "flex",
} marginBottom: 0
})); }
}),
{ name: "OrderDraftPage" }
);
export interface OrderDraftPageProps export interface OrderDraftPageProps
extends FetchMoreProps, 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 { FulfillmentStatus } from "../../../types/globalTypes";
import { OrderDetails_order_fulfillments } from "../../types/OrderDetails"; import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(
clickableRow: { theme => ({
cursor: "pointer" clickableRow: {
}, cursor: "pointer"
colName: { },
width: "auto" colName: {
}, width: "auto"
colNameLabel: { },
marginLeft: AVATAR_MARGIN colNameLabel: {
}, marginLeft: AVATAR_MARGIN
colPrice: { },
textAlign: "right", colPrice: {
width: 120 textAlign: "right",
}, width: 120
colQuantity: { },
textAlign: "center", colQuantity: {
width: 120 textAlign: "center",
}, width: 120
colTotal: { },
textAlign: "right", colTotal: {
width: 120 textAlign: "right",
}, width: 120
},
orderNumber: { orderNumber: {
display: "inline", display: "inline",
marginLeft: theme.spacing(1) marginLeft: theme.spacing(1)
}, },
statusBar: { statusBar: {
paddingTop: 0 paddingTop: 0
}, },
table: { table: {
tableLayout: "fixed" tableLayout: "fixed"
} }
})); }),
{ name: "OrderFulfillment" }
);
interface OrderFulfillmentProps { interface OrderFulfillmentProps {
fulfillment: OrderDetails_order_fulfillments; fulfillment: OrderDetails_order_fulfillments;

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