diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a606e5534..45a8356b85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,3 +17,4 @@ Fix two line titles breaking featured carousel, product page improvements #184 b Allow numbers in product, category & collection urls #185 by @piotrgrundas Add OpenGraph and Meta tags, minor UI improvements #191 by @piotrgrundas Add tslint check in the CI, ability to change cart quantity, fix error after removing item from the cart #194 by @piotrgrundas +Update nophoto image #198 by @piotrgrundas diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index dbe3fb7b6d..19530b2f60 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/src/components/Breadcrumbs/index.tsx @@ -25,7 +25,9 @@ export const extractBreadcrumbs = (category: Category_category) => { let breadcrumbs = [constructLink(category)]; if (category.ancestors.edges.length) { - const ancestorsList = category.ancestors.edges.map(constructLink); + const ancestorsList = category.ancestors.edges.map(edge => + constructLink(edge.node) + ); breadcrumbs = ancestorsList.concat(breadcrumbs); } return breadcrumbs; diff --git a/src/components/CachedImage/CachedThumbnail.tsx b/src/components/CachedImage/CachedThumbnail.tsx index 3b445c3eb1..1fe5812f86 100644 --- a/src/components/CachedImage/CachedThumbnail.tsx +++ b/src/components/CachedImage/CachedThumbnail.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { maybe } from "../../core/utils"; import CachedImage from "./CachedImage"; -const noPhotoPng = require("../../images/nophoto.png"); +const noPhoto = require("../../images/no-photo.svg"); const CachedThumbnail: React.SFC<{ source: { @@ -13,7 +13,7 @@ const CachedThumbnail: React.SFC<{ noPhotoDefault?: boolean; children?: React.ReactNode; }> = ({ source, noPhotoDefault, children }) => { - const defaultImg = noPhotoDefault ? noPhotoPng : undefined; + const defaultImg = noPhotoDefault ? noPhoto : undefined; return ( source.thumbnail.url, defaultImg)} diff --git a/src/components/CartSummary/index.tsx b/src/components/CartSummary/index.tsx index d22596df4a..f030c631f3 100644 --- a/src/components/CartSummary/index.tsx +++ b/src/components/CartSummary/index.tsx @@ -5,7 +5,7 @@ import * as React from "react"; import { maybe } from "../../core/utils"; import { CheckoutContext } from "../CheckoutApp/context"; -const noPhotoPng = require("../../images/nophoto.png"); +const noPhotoSvg = require("../../images/no-photo.svg"); const CartSummary: React.SFC = () => ( @@ -18,7 +18,7 @@ const CartSummary: React.SFC = () => ( product.variant.product.thumbnail.url, - noPhotoPng + noPhotoSvg )} />
diff --git a/src/components/ProductListItem/index.tsx b/src/components/ProductListItem/index.tsx index 4e1603e1a3..136f234947 100644 --- a/src/components/ProductListItem/index.tsx +++ b/src/components/ProductListItem/index.tsx @@ -5,7 +5,7 @@ import * as React from "react"; import { CachedThumbnail } from ".."; import { BasicProductFields } from "../../views/Product/types/BasicProductFields"; -const noPhoto = require("../../images/nophoto.png"); +const noPhoto = require("../../images/no-photo.svg"); export interface Product extends BasicProductFields { category?: { diff --git a/src/images/no-photo.svg b/src/images/no-photo.svg new file mode 100644 index 0000000000..b5ec7fe9ec --- /dev/null +++ b/src/images/no-photo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/nophoto.png b/src/images/nophoto.png deleted file mode 100644 index aa9ebc5a6f..0000000000 Binary files a/src/images/nophoto.png and /dev/null differ diff --git a/src/views/Home/Page.tsx b/src/views/Home/Page.tsx index 96d7c5c745..86508a0273 100644 --- a/src/views/Home/Page.tsx +++ b/src/views/Home/Page.tsx @@ -1,5 +1,6 @@ import "./scss/index.scss"; +import classNames from "classnames"; import * as React from "react"; import { Link } from "react-router-dom"; @@ -8,6 +9,8 @@ import { ProductsList_categories } from "../../core/types/saleor"; import { generateCategoryUrl } from "../../core/utils"; import { ProductsList_shop_homepageCollection_backgroundImage } from "./types/ProductsList"; +const noPhoto = require("../../images/no-photo.svg"); + const Page: React.SFC<{ loading: boolean; categories: ProductsList_categories; @@ -61,12 +64,14 @@ const Page: React.SFC<{ key={category.id} >
diff --git a/src/views/Home/scss/index.scss b/src/views/Home/scss/index.scss index a94734bbcf..308c8ce7e5 100644 --- a/src/views/Home/scss/index.scss +++ b/src/views/Home/scss/index.scss @@ -115,6 +115,12 @@ background-size: cover; background-position: center; margin-bottom: 1rem; + + &--no-photo { + background-color: $turquoise-light; + background-repeat: no-repeat; + background-size: contain; + } } } } diff --git a/src/views/Product/GalleryCarousel.tsx b/src/views/Product/GalleryCarousel.tsx index 392af3ca09..6b6ffd01c4 100644 --- a/src/views/Product/GalleryCarousel.tsx +++ b/src/views/Product/GalleryCarousel.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { CachedImage, Carousel } from "../../components/"; import { ProductDetails_product_images } from "./types/ProductDetails"; -const noPhoto = require("../../images/nophoto.png"); +const noPhoto = require("../../images/no-photo.svg"); const GalleryCarousel: React.SFC<{ images: ProductDetails_product_images[]; diff --git a/src/views/Product/Page.tsx b/src/views/Product/Page.tsx index c7ad63036e..6b3c8a730c 100644 --- a/src/views/Product/Page.tsx +++ b/src/views/Product/Page.tsx @@ -11,7 +11,7 @@ import GalleryCarousel from "./GalleryCarousel"; import OtherProducts from "./Other"; import { ProductDetails_product } from "./types/ProductDetails"; -const noPhoto = require("../../images/nophoto.png"); +const noPhoto = require("../../images/no-photo.svg"); class Page extends React.PureComponent<{ product: ProductDetails_product }> { fixedElement: React.RefObject = React.createRef();