diff --git a/imports/plugins/included/product-variant/components/productGrid.js b/imports/plugins/included/product-variant/components/productGrid.js index 6a3ff706bb..38dce037ae 100644 --- a/imports/plugins/included/product-variant/components/productGrid.js +++ b/imports/plugins/included/product-variant/components/productGrid.js @@ -73,8 +73,25 @@ const styles = (theme) => ({ tableBody: { "& tr:nth-child(odd)": { backgroundColor: theme.palette.colors.black02 + }, + "& td": { + borderBottom: "none", + letterSpacing: "0.28px", + padding: 0, + color: theme.palette.colors.coolGrey500 + }, + "& td:first-child": { + padding: "4px", + width: "50px" + }, + "& td:nth-child(2)": { + width: "60px" } }, + textNotFound: { + textAlign: "right", + height: "50px" + }, tableHead: { "& tr th": { borderBottom: "none", @@ -192,6 +209,29 @@ class ProductGrid extends Component { ); } + /** + * Render the not found component + * @access protected + * @returns {Node} React node containing the `NotFound` component. + */ + renderNotFound() { + const { classes } = this.props; + + return ( + + + + + + + + + + + + ); + } + renderProductGridItems() { const { productMediaById, products } = this.props; const { classes, ...notClasses } = this.props; @@ -208,15 +248,7 @@ class ProductGrid extends Component { )); } - return ( -
-
-

- -

-
-
- ); + return this.renderNotFound(); } handleDisplayTagSelector = () => { diff --git a/imports/plugins/included/product-variant/components/products.js b/imports/plugins/included/product-variant/components/products.js index 41b0cb8cbe..3ba1b85bb0 100644 --- a/imports/plugins/included/product-variant/components/products.js +++ b/imports/plugins/included/product-variant/components/products.js @@ -108,33 +108,13 @@ class Products extends Component { return null; } - /** - * Render the not found component - * @access protected - * @returns {Node} React node containing the `NotFound` component. - */ - renderNotFound() { - return ( - - ); - } - /** * Render component * @access protected * @returns {Node} React node containing elements that make up the `Products` component. */ render() { - const { isProductsSubscriptionReady, isReady, showNotFound } = this.props; - - // Force show the not-found view. - if (showNotFound) { - return this.renderNotFound(); - } + const { isProductsSubscriptionReady, isReady } = this.props; if (!isProductsSubscriptionReady || !isReady) { return ( @@ -142,11 +122,6 @@ class Products extends Component { ); } - // Render not-found view if no products are available. - if (!this.hasProducts) { - return this.renderNotFound(); - } - return (
{this.renderProductGrid()}