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.

Author: c298lee

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 () => {

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',
+      );
     });
   });
 };

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 {