Merge pull request #592 from sharetribe/image-dimensions-in-file-names

Use image dimensions in file names for easier customisation

docs/colors-and-icons.md

@@ -57,5 +57,5 @@ set if icons and an HTML snippet to point to those images.
 ## Map marker icon
 
 The map marker icon in the listing can be found in
-[src/components/Map/images/marker.png](../src/components/Map/images/marker.png). The dimensions
+[src/components/Map/images/marker-32x32.png](../src/components/Map/images/marker-32x32.png). The dimensions
 should be 32x32 pixels, so the `favicon-32x32.png` file can be used to replace the map icon.

src/components/Map/Map.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 
-import CustomMarker from './images/marker.png';
+import CustomMarker from './images/marker-32x32.png';
 import css from './Map.css';
 
 class Map extends Component {

src/containers/AboutPage/AboutPage.js

@@ -12,7 +12,7 @@ import {
 } from '../../components';
 
 import css from './AboutPage.css';
-import image from './about-us.jpg';
+import image from './about-us-1440.jpg';
 
 const AboutPage = () => {
   const { siteTwitterHandle, siteFacebookPage } = config;

src/marketplace.css

@@ -14,7 +14,7 @@
   --backgroundImage: {
     /* Gradient direction and overlaying the black color on top of the image for better readability */
     background: linear-gradient(-45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
-      url('../../assets/background.jpg');
+      url('../../assets/background-1440.jpg');
 
     /* Add loading color for the div */
     background-color: var(--matterColor);