Add an unread indicator to inbox messages based on existing logic. (https://github.com/woocommerce/woocommerce-admin/pull/6047)

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() }

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 );

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 ==