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.
getsentry · Jun 26, 2024 · aafb4e7 · aafb4e7
1 parent 1092d77
commit aafb4e7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {