diff --git a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss index 27e6f9c97dd..371ba2e11a3 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss +++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss @@ -243,6 +243,26 @@ position: relative; top: -42px; border: 2px solid $white; + z-index: 2; + } + + .woocommerce-review-activity-card__image-overlay__product { + display: inline-block; + height: 60px; + position: relative; + width: 60px; + + &.is-placeholder::before { + background-color: $core-grey-dark-500; + border-radius: 50%; + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + opacity: 0.1; + } } } @@ -251,15 +271,17 @@ margin-top: $gap-smallest; } - .woocommerce-activity-card__icon img.woocommerce-gravatar { + .woocommerce-review-activity-card__image-overlay__product .woocommerce-gravatar { margin-left: 0; width: 18px; height: 18px; left: 32px; top: -28px; + z-index: 1; } - .woocommerce-activity-card__icon img.woocommerce-product-image { + .woocommerce-review-activity-card__image-overlay__product, + .woocommerce-review-activity-card__image-overlay__product .woocommerce-product-image { width: 38px; height: 38px; } diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js index 525fc90765a..91e6a3b465f 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js @@ -3,12 +3,13 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; +import classnames from 'classnames'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import Gridicon from 'gridicons'; import interpolateComponents from 'interpolate-components'; import moment from 'moment'; -import { noop, isNull } from 'lodash'; +import { get, noop, isNull } from 'lodash'; import PropTypes from 'prop-types'; import { withDispatch } from '@wordpress/data'; @@ -84,10 +85,19 @@ class ReviewsPanel extends Component { ); + const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] ); + const productImageClasses = classnames( + 'woocommerce-review-activity-card__image-overlay__product', + { + 'is-placeholder': ! productImage || ! productImage.src, + } + ); const icon = (
- +
+ +
);