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 126226aafbd..90af6d307d0 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 @@ -35,15 +35,6 @@ .woocommerce-activity-card__icon { grid-area: icon; fill: $core-grey-light-600; - - @include breakpoint( '<782px' ) { - .gridicon, - img { - height: 24px; - width: 24px; - margin-left: $gap-small; - } - } } .woocommerce-activity-card__header { @@ -163,14 +154,14 @@ height: 48px; width: 48px; } + } - @include breakpoint( '<782px' ) { - .gridicon, - img, + &.woocommerce-stock-activity-card, + &.woocommerce-review-activity-card { + .woocommerce-activity-card__icon { .is-placeholder { - height: 24px; - width: 24px; - margin-left: $gap-small; + height: 60px; + width: 60px; } } } @@ -247,6 +238,16 @@ } .woocommerce-review-activity-card { + .woocommerce-activity-card__body > span > p { + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + .woocommerce-review-activity-card__verified { margin-left: $gap-small; display: inline-flex; @@ -262,33 +263,15 @@ } .woocommerce-review-activity-card__image-overlay { - margin-left: -$gap-large; + position: relative; + img.woocommerce-gravatar { - left: $gap-large; - position: relative; - top: -42px; border: 2px solid $white; + left: 0; + position: absolute; + top: -6px; 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; - } - } } @include breakpoint( '<782px' ) { @@ -304,12 +287,25 @@ top: -28px; z-index: 1; } + } +} - .woocommerce-review-activity-card__image-overlay__product, - .woocommerce-review-activity-card__image-overlay__product .woocommerce-product-image { - width: 38px; - height: 38px; - } +.woocommerce-review-activity-card__image-overlay__product, +.woocommerce-stock-activity-card__image-overlay__product { + 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; } } @@ -358,6 +354,10 @@ } } -.woocommerce-empty-review-activity-card { +.woocommerce-empty-activity-card { grid-template-columns: 72px 1fr; + + @include breakpoint( '<782px' ) { + grid-template-columns: 64px 1fr; + } } diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js index 29483d23e93..51765784538 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js @@ -36,7 +36,7 @@ class InboxPanel extends Component { renderEmptyCard() { return ( } > diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js index 02eef5b4d43..40a8587613e 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js @@ -42,7 +42,7 @@ class OrdersPanel extends Component { if ( hasNonActionableOrders ) { return ( } > @@ -53,7 +53,7 @@ class OrdersPanel extends Component { return ( } actions={ 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 8e22547fce5..52784878e9f 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js @@ -209,7 +209,7 @@ class ReviewsPanel extends Component { return ( } actions={ diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js index a3468981176..de93ebcd30e 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js @@ -4,8 +4,10 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { BaseControl, Button } from '@wordpress/components'; +import classnames from 'classnames'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; +import { get } from 'lodash'; import { withDispatch } from '@wordpress/data'; /** @@ -131,12 +133,27 @@ class ProductStockCard extends Component { .join( ', ' ); } + const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] ); + const productImageClasses = classnames( + 'woocommerce-stock-activity-card__image-overlay__product', + { + 'is-placeholder': ! productImage || ! productImage.src, + } + ); + const icon = ( +
+
+ +
+
+ ); + return ( } + icon={ icon } actions={ this.getActions() } > { this.getBody() } diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js index ddb210ea5c9..2078b21117c 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js @@ -26,7 +26,7 @@ class StockPanel extends Component { renderEmptyCard() { return ( } >