diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx index 5b4deb24d..746ceea89 100644 --- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx +++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx @@ -1,3 +1,8 @@ +import blue from "@material-ui/core/colors/blue"; +import cyan from "@material-ui/core/colors/cyan"; +import green from "@material-ui/core/colors/green"; +import purple from "@material-ui/core/colors/purple"; +import yellow from "@material-ui/core/colors/yellow"; import { Theme } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; @@ -9,7 +14,7 @@ import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/styles"; import classNames from "classnames"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { FormattedMessage } from "react-intl"; import Hr from "@saleor/components/Hr"; import { ProductVariantCreateInput } from "@saleor/types/globalTypes"; @@ -22,7 +27,12 @@ export interface ProductVariantCreateSummaryProps { data: ProductVariantCreateFormData; } +const colors = [blue, cyan, green, purple, yellow].map(color => color[500]); + const useStyles = makeStyles((theme: Theme) => ({ + attributeValue: { + marginRight: theme.spacing.unit + }, col: { paddingLeft: theme.spacing.unit, paddingRight: theme.spacing.unit @@ -118,7 +128,18 @@ const ProductVariantCreateSummary: React.FC< key={variant.attributes.map(attribute => attribute.id).join(":")} > - {getVariantName(variant, attributes).join(" ")} + {getVariantName(variant, attributes).map( + (value, valueIndex) => ( + + {value} + + ) + )}