Fix Activity Panel layout on mobile (#2405)

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

client/header/activity-panel/panels/inbox.js

@@ -36,7 +36,7 @@ class InboxPanel extends Component {
 	renderEmptyCard() {
 		return (
 			<ActivityCard
-				className="woocommerce-empty-review-activity-card"
+				className="woocommerce-empty-activity-card"
 				title={ __( 'Your inbox is empty', 'woocommerce-admin' ) }
 				icon={ <Gridicon icon="checkmark" size={ 48 } /> }
 			>

client/header/activity-panel/panels/orders.js

@@ -42,7 +42,7 @@ class OrdersPanel extends Component {
 		if ( hasNonActionableOrders ) {
 			return (
 				<ActivityCard
-					className="woocommerce-empty-review-activity-card"
+					className="woocommerce-empty-activity-card"
 					title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
 					icon={ <Gridicon icon="checkmark" size={ 48 } /> }
 				>
@@ -53,7 +53,7 @@ class OrdersPanel extends Component {
 
 		return (
 			<ActivityCard
-				className="woocommerce-empty-review-activity-card"
+				className="woocommerce-empty-activity-card"
 				title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
 				icon={ <Gridicon icon="time" size={ 48 } /> }
 				actions={

client/header/activity-panel/panels/reviews.js

@@ -209,7 +209,7 @@ class ReviewsPanel extends Component {
 
 		return (
 			<ActivityCard
-				className="woocommerce-empty-review-activity-card"
+				className="woocommerce-empty-activity-card"
 				title={ title }
 				icon={ <Gridicon icon="time" size={ 48 } /> }
 				actions={

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 = (
+			<div className="woocommerce-stock-activity-card__image-overlay">
+				<div className={ productImageClasses }>
+					<ProductImage product={ product } />
+				</div>
+			</div>
+		);
+
 		return (
 			<ActivityCard
 				className="woocommerce-stock-activity-card"
 				title={ title }
 				subtitle={ subtitle }
-				icon={ <ProductImage product={ product } /> }
+				icon={ icon }
 				actions={ this.getActions() }
 			>
 				{ this.getBody() }

client/header/activity-panel/panels/stock/index.js

@@ -26,7 +26,7 @@ class StockPanel extends Component {
 	renderEmptyCard() {
 		return (
 			<ActivityCard
-				className="woocommerce-empty-review-activity-card"
+				className="woocommerce-empty-activity-card"
 				title={ __( 'Your stock is in good shape.', 'woocommerce-admin' ) }
 				icon={ <Gridicon icon="checkmark" size={ 48 } /> }
 			>