From ac660167a024c062aa663bca4e6787658b553d59 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Mon, 7 Mar 2022 17:14:49 +0800
Subject: [PATCH] Reintroduce emphasis on inbox note action button
 (https://github.com/woocommerce/woocommerce-admin/pull/8411)

* Reintroduce emphasis on inbox note action button

* Add changelog

* Remove actioned note gray color style
---
 ...ix-84080-reintroduce-emphasis-on-inbox-note-action-button | 4 ++++
 .../packages/experimental/src/inbox-note/action.tsx          | 5 ++++-
 .../packages/experimental/src/inbox-note/inbox-note.tsx      | 2 ++
 .../packages/experimental/src/inbox-note/style.scss          | 5 +----
 4 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/fix-84080-reintroduce-emphasis-on-inbox-note-action-button

diff --git a/plugins/woocommerce-admin/changelogs/fix-84080-reintroduce-emphasis-on-inbox-note-action-button b/plugins/woocommerce-admin/changelogs/fix-84080-reintroduce-emphasis-on-inbox-note-action-button
new file mode 100644
index 00000000000..b99a526b41e
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-84080-reintroduce-emphasis-on-inbox-note-action-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Reintroduce emphasis on inbox note action button. #8411
diff --git a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/action.tsx b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/action.tsx
index b788b60e35a..55aafd21453 100644
--- a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/action.tsx
+++ b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/action.tsx
@@ -9,6 +9,7 @@ type InboxNoteActionProps = {
 	label: string;
 	href?: string;
 	preventBusyState?: boolean;
+	variant: 'link' | 'secondary';
 };
 
 /**
@@ -20,6 +21,7 @@ export const InboxNoteActionButton: React.FC< InboxNoteActionProps > = ( {
 	onClick,
 	href,
 	preventBusyState,
+	variant = 'link',
 } ) => {
 	const [ inAction, setInAction ] = useState( false );
 
@@ -53,7 +55,8 @@ export const InboxNoteActionButton: React.FC< InboxNoteActionProps > = ( {
 
 	return (
 		<Button
-			isLink={ true }
+			isSecondary={ variant === 'secondary' }
+			isLink={ variant === 'link' }
 			isBusy={ inAction }
 			disabled={ inAction }
 			href={ href }
diff --git a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/inbox-note.tsx b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/inbox-note.tsx
index 0eb51bfeb7d..61e7af8115d 100644
--- a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/inbox-note.tsx
+++ b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/inbox-note.tsx
@@ -128,6 +128,7 @@ const InboxNoteCard: React.FC< InboxNoteProps > = ( {
 					<InboxNoteActionButton
 						key={ action.id }
 						label={ action.label }
+						variant="secondary"
 						href={
 							action && action.url && action.url.length
 								? action.url
@@ -198,6 +199,7 @@ const InboxNoteCard: React.FC< InboxNoteProps > = ( {
 									key={ note.actions[ 0 ].id }
 									label={ title }
 									preventBusyState={ true }
+									variant="link"
 									href={
 										note.actions[ 0 ].url &&
 										note.actions[ 0 ].url.length
diff --git a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/style.scss b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/style.scss
index ad053fc63de..63835f1d335 100644
--- a/plugins/woocommerce-admin/packages/experimental/src/inbox-note/style.scss
+++ b/plugins/woocommerce-admin/packages/experimental/src/inbox-note/style.scss
@@ -36,9 +36,6 @@
 				font-weight: normal;
 			}
 		}
-		.woocommerce-inbox-message__actions a {
-			color: $gray-900;
-		}
 	}
 
 	.woocommerce-homepage-column & {
@@ -192,7 +189,7 @@
 		}
 	}
 }
-.woocommerce-inbox-message__wrapper .woocommerce-inbox-message__actions {
+.woocommerce-inbox-message__wrapper {
 	padding-top: 0;
 }