From f1d649a657b691b939413328da145b1352ae8a21 Mon Sep 17 00:00:00 2001
From: Sam Seay <samueljseay@gmail.com>
Date: Wed, 13 Jan 2021 08:48:24 +1300
Subject: [PATCH] Add an unread indicator to inbox messages based on existing
 logic. (https://github.com/woocommerce/woocommerce-admin/pull/6047)

---
 .../woocommerce-admin/client/inbox-panel/card.js  | 15 +++++++--------
 .../client/inbox-panel/style.scss                 |  9 +++++++++
 plugins/woocommerce-admin/readme.txt              |  1 +
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-admin/client/inbox-panel/card.js b/plugins/woocommerce-admin/client/inbox-panel/card.js
index 336fe4aae1c..dd9b97c6a01 100644
--- a/plugins/woocommerce-admin/client/inbox-panel/card.js
+++ b/plugins/woocommerce-admin/client/inbox-panel/card.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, createRef, Fragment } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import { Button, Dropdown, Modal } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -207,11 +207,7 @@ class InboxNoteCard extends Component {
 	renderDismissConfirmationModal() {
 		return (
 			<Modal
-				title={
-					<Fragment>
-						{ __( 'Are you sure?', 'woocommerce-admin' ) }
-					</Fragment>
-				}
+				title={ <>{ __( 'Are you sure?', 'woocommerce-admin' ) }</> }
 				onRequestClose={ () => this.closeDismissModal() }
 				className="woocommerce-inbox-dismiss-confirmation_modal"
 			>
@@ -249,7 +245,7 @@ class InboxNoteCard extends Component {
 		}
 
 		return (
-			<Fragment>
+			<>
 				{ noteActions.map( ( action, index ) => (
 					<NoteAction
 						key={ index }
@@ -258,7 +254,7 @@ class InboxNoteCard extends Component {
 						onClick={ () => this.onActionClicked( action ) }
 					/>
 				) ) }
-			</Fragment>
+			</>
 		);
 	}
 
@@ -310,6 +306,9 @@ class InboxNoteCard extends Component {
 					) }
 					<div className="woocommerce-inbox-message__wrapper">
 						<div className="woocommerce-inbox-message__content">
+							{ unread && (
+								<div className="woocommerce-inbox-message__unread-indicator" />
+							) }
 							{ date && (
 								<span className="woocommerce-inbox-message__date">
 									{ moment.utc( date ).fromNow() }
diff --git a/plugins/woocommerce-admin/client/inbox-panel/style.scss b/plugins/woocommerce-admin/client/inbox-panel/style.scss
index b334edbfa14..ab73f398d6a 100644
--- a/plugins/woocommerce-admin/client/inbox-panel/style.scss
+++ b/plugins/woocommerce-admin/client/inbox-panel/style.scss
@@ -49,6 +49,15 @@
 }
 
 .woocommerce-inbox-message__content {
+	.woocommerce-inbox-message__unread-indicator {
+		height: 8px;
+		width: 8px;
+		background-color: var(--wp-admin-theme-color);
+		border-radius: 100px;
+		display: inline-block;
+		margin-right: $gap-smaller;
+	}
+
 	.woocommerce-inbox-message__title {
 		color: $gray-900;
 		@include font-size( 16 );
diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt
index 501232ab158..e24c035aec4 100644
--- a/plugins/woocommerce-admin/readme.txt
+++ b/plugins/woocommerce-admin/readme.txt
@@ -90,6 +90,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Enhancement: Add an a/b experiment for installing free business features #5786
 - Dev: Add `onChangeCallback` feature to the wc-admin <Form> component #5786 
 - Add: Note for users coming from Calypso. #6030
+- Enhancement: Add an "unread" indicator to inbox messages. #6047 
 
 == Changelog ==