Improve failure message styling

nlxai · Jan 2, 2024 · 9fd3168 · 9fd3168
1 parent 5175eb1
commit 9fd3168
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/packages/chat-widget/src/index.tsx b/packages/chat-widget/src/index.tsx
@@ -171,7 +171,7 @@ const MessageGroups: FC<{
         return (
           <C.FailureMessage key={responseIndex}>
             <ErrorOutlineIcon />
-            <span>{response.payload.text}</span>
+            {response.payload.text}
           </C.FailureMessage>
         );
       }

diff --git a/packages/chat-widget/src/ui/components.tsx b/packages/chat-widget/src/ui/components.tsx
@@ -191,20 +191,18 @@ export const Message = styled.div<{ type: "user" | "bot" }>`
 `;
 
 export const FailureMessage = styled.p<{}>`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  text-align: center;
+  flex-wrap: wrap;
   font-size: ${constants.smallFontSize}px;
   border-radius: ${(props) => props.theme.borderRadius}px;
-  background-color: ${(props) => props.theme.lightMessageColor};
-  color: #454545;
-  padding: ${(props) =>
-    `${props.theme.spacing / 2}px ${props.theme.spacing}px`};
+  color: #bf1c1c;
   & svg {
     display: inline-block;
-    flex: 0 0 ${constants.fontSize}px;
-    width: ${constants.fontSize}px;
-    height: ${constants.fontSize}px;
+    position: relative;
+    top: -1px;
+    flex: 0 0 ${constants.fontSize - 2}px;
+    width: ${constants.fontSize - 2}px;
+    height: ${constants.fontSize - 2}px;
     margin-right: 4px;
   }
 `;

diff --git a/packages/website/src/components/ChatConfiguration.tsx b/packages/website/src/components/ChatConfiguration.tsx
@@ -13,7 +13,6 @@ export const getInitialConfig = (): Config => {
     headers: {
       "nlx-api-key": apiKey,
     },
-    failureMessage: "Something went wrong",
     languageCode,
   };
 };