fix(ai-help): nicer error message

Add an icon and background for the error generating answer error message.
mdn · Jan 30, 2024 · a2c116b · a2c116b
1 parent 7034c60
commit a2c116b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/client/src/assets/icons/alert-circle.svg b/client/src/assets/icons/alert-circle.svg
diff --git a/client/src/plus/ai-help/constants.tsx b/client/src/plus/ai-help/constants.tsx
@@ -6,6 +6,6 @@ export const MESSAGE_SEARCHING = "Searching for MDN content…";
 export const MESSAGE_SEARCHED = "Consulted MDN content:";
 export const MESSAGE_ANSWERING = "Generating your answer…";
 export const MESSAGE_ANSWERED = "Answer:";
-export const MESSAGE_FAILED = "Error generating your answer!";
+export const MESSAGE_FAILED = "Error generating your answer! Please try again.";
 
 export const EVENT_TIMEOUT = 15000;
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
@@ -414,9 +414,18 @@
           mask-image: url("../../assets/icons/progress-check.svg");
         }
 
-        &.errored::before {
-          animation: none;
-          background-color: var(--icon-critical);
+        &.errored {
+          background-color: var(--background-critical);
+          border: 0;
+          border-radius: var(--elem-radius);
+          color: var(--icon-critical);
+          padding: 0.5rem 1rem;
+
+          &::before {
+            animation: none;
+            background-color: var(--icon-critical);
+            mask-image: url("../../assets/icons/alert-circle.svg");
+          }
         }
       }