From aafb4e7b7e855f41cddd51191f2da8d3ddadaa02 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:50:07 -0400
Subject: [PATCH] fix(feedback): Improve feedback error message (#12647)

Fix error message colour back to red. Also updated the default error
message to include information about network issues and ad blockers
since ad blockers can result in a type error which has no status code.
---
 packages/feedback/src/core/sendFeedback.test.ts      | 4 +++-
 packages/feedback/src/core/sendFeedback.ts           | 4 +++-
 packages/feedback/src/modal/components/Dialog.css.ts | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/feedback/src/core/sendFeedback.test.ts b/packages/feedback/src/core/sendFeedback.test.ts
index 195c208b448a..96df79828ac8 100644
--- a/packages/feedback/src/core/sendFeedback.test.ts
+++ b/packages/feedback/src/core/sendFeedback.test.ts
@@ -275,7 +275,9 @@ describe('sendFeedback', () => {
         email: 're@example.org',
         message: 'mi',
       }),
-    ).rejects.toMatch('Unable to send Feedback. Invalid response from server.');
+    ).rejects.toMatch(
+      'Unable to send Feedback. This could be because of network issues, or because you are using an ad-blocker',
+    );
   });
 
   it('handles 0 transport error', async () => {
diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts
index a046111cc9ad..3f8c08a51ee3 100644
--- a/packages/feedback/src/core/sendFeedback.ts
+++ b/packages/feedback/src/core/sendFeedback.ts
@@ -63,7 +63,9 @@ export const sendFeedback: SendFeedback = (
         );
       }
 
-      return reject('Unable to send Feedback. Invalid response from server.');
+      return reject(
+        'Unable to send Feedback. This could be because of network issues, or because you are using an ad-blocker',
+      );
     });
   });
 };
diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
index a9d1f4331606..48e2a05716c2 100644
--- a/packages/feedback/src/modal/components/Dialog.css.ts
+++ b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -122,8 +122,8 @@ const FORM = `
 }
 
 .form__error-container {
-  color: var(--error-foreground);
-  fill: var(--error-foreground);
+  color: var(--error-color);
+  fill: var(--error-color);
 }
 
 .form__label {