Merge pull request #2843 from glific/error-banner

Error banner
glific · Apr 10, 2024 · b24e90b · b24e90b
2 parents a7bcdd3 + 153ae47
commit b24e90b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git a/src/containers/Chat/ChatMessages/ChatMessages.module.css b/src/containers/Chat/ChatMessages/ChatMessages.module.css
@@ -34,12 +34,14 @@
   padding-left: 0px !important;
   padding-right: 0px !important;
   height: calc(100% - 175px);
+  position: relative;
 }
 
 .NoMessages {
-  padding-top: 11.5px !important;
-  padding-left: 24px !important;
-  height: calc(100% - 175px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .Chip {
@@ -50,6 +52,7 @@
   background-color: #eaedec !important;
   padding-right: 3px !important;
 }
+
 .Form {
   height: 18vh !important;
   width: 100%;
@@ -69,11 +72,12 @@
   width: 8px !important;
   margin-right: 13px !important;
 }
-.Paper > ul > li:hover {
+
+.Paper>ul>li:hover {
   background-color: #edf6f2 !important;
 }
 
-.Paper > ul > li {
+.Paper>ul>li {
   color: #073f24;
 }
 
@@ -127,7 +131,7 @@ html {
   align-items: center;
 }
 
-.SessionTimer + div {
+.SessionTimer+div {
   text-align: right;
 }
 
@@ -136,4 +140,4 @@ html {
   font-size: 12px;
   font-weight: 400;
   margin-right: 5px;
-}
+}
diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx
@@ -617,19 +617,14 @@ export const ChatMessages = ({ entityId, collectionId, phoneId }: ChatMessagesPr
     }
   }, [scrollToMessageNumber]);
 
-  let messageListContainer;
+  let chatMessages;
   // Check if there are conversation messages else display no messages
   if (messageList) {
     const loadMoreOption =
       conversationInfo.messages?.length > DEFAULT_MESSAGE_LIMIT - 1 ||
       (searchMessageNumber && searchMessageNumber > 19);
-    messageListContainer = (
-      <Container
-        className={`${styles.MessageList} messageContainer `}
-        style={{ height: `calc(100% - 215px` }}
-        maxWidth={false}
-        data-testid="messageContainer"
-      >
+    chatMessages = (
+      <>
         {showLoadMore && loadMoreOption && (
           <div className={styles.LoadMore}>
             {conversationLoad ? (
@@ -649,16 +644,28 @@ export const ChatMessages = ({ entityId, collectionId, phoneId }: ChatMessagesPr
         )}
 
         {messageList}
-      </Container>
+      </>
     );
   } else {
-    messageListContainer = (
+    chatMessages = (
       <div className={styles.NoMessages} data-testid="messageContainer">
         {t('No messages.')}
       </div>
     );
   }
 
+  const messageListContainr = (
+    <Container
+      className={`${styles.MessageList} messageContainer `}
+      style={{ height: `calc(100% - 215px` }}
+      maxWidth={false}
+      data-testid="messageContainer"
+    >
+      <StatusBar />
+      {chatMessages}
+    </Container>
+  );
+
   const handleChatClearedAction = () => {
     const conversationInfoCopy = JSON.parse(JSON.stringify(conversationInfo));
     conversationInfoCopy.messages = [];
@@ -807,8 +814,7 @@ export const ChatMessages = ({ entityId, collectionId, phoneId }: ChatMessagesPr
         />
       ) : null}
       {topChatBar}
-      <StatusBar />
-      {messageListContainer}
+      {messageListContainr}
       {chatInputSection}
     </Container>
   );

diff --git a/src/containers/Chat/ChatMessages/StatusBar/StatusBar.module.css b/src/containers/Chat/ChatMessages/StatusBar/StatusBar.module.css
@@ -2,11 +2,12 @@
   background-color: #dd1f1f;
   color: #edf6f2;
   padding: 12px 36px;
-  position: absolute;
+  position: sticky;
   width: 100%;
   z-index: 1;
+  top: -12px;
 }
 
 .StatusTitle {
   font-weight: bold;
-}
+}