Merge pull request #198 from mirumee/new_nophoto_image

New nophoto image

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

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;

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 (
     <CachedImage
       url={maybe(() => source.thumbnail.url, defaultImg)}

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 = () => (
   <CheckoutContext.Consumer>
@@ -18,7 +18,7 @@ const CartSummary: React.SFC = () => (
               <img
                 src={maybe(
                   () => product.variant.product.thumbnail.url,
-                  noPhotoPng
+                  noPhotoSvg
                 )}
               />
               <div>

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?: {

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}
               >
                 <div
-                  className="home-page__categories__list__image"
+                  className={classNames("home-page__categories__list__image", {
+                    "home-page__categories__list__image--no-photo": !category.backgroundImage
+                  })}
                   style={{
                     backgroundImage: `url(${
                       category.backgroundImage
                         ? category.backgroundImage.url
-                        : require("../../images/nophoto.png")
+                        : noPhoto
                     })`
                   }}
                 />

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;
+        }
       }
     }
   }

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[];

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<HTMLDivElement> = React.createRef();