From 628fe77377e5f3358496f552c4fb80c7b39c07d3 Mon Sep 17 00:00:00 2001
From: DomW <domw30@gmail.com>
Date: Fri, 9 Jun 2023 14:10:51 +0100
Subject: [PATCH] feat: add empty current conversation search results state and
 adjust positioning (#646)

* feat: add empty state and adjust position

* feat: prevent empty state displaying when search input is empty
---
 .../messenger/list/conversation-list-panel.tsx           | 4 ++++
 src/components/messenger/list/styles.scss                | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/messenger/list/conversation-list-panel.tsx b/src/components/messenger/list/conversation-list-panel.tsx
index d759839fc..1a88a14fb 100644
--- a/src/components/messenger/list/conversation-list-panel.tsx
+++ b/src/components/messenger/list/conversation-list-panel.tsx
@@ -143,6 +143,10 @@ export class ConversationListPanel extends React.Component<Properties, State> {
               />
             ))}
 
+            {this.filteredConversations?.length === 0 && this.state.filter !== '' && (
+              <div className='messages-list__empty'>{`You do not have any active conversations with '${this.state.filter}' `}</div>
+            )}
+
             {this.state.userSearchResults?.length > 0 && this.state.filter !== '' && (
               <UserSearchResults
                 results={this.state.userSearchResults}
diff --git a/src/components/messenger/list/styles.scss b/src/components/messenger/list/styles.scss
index df3684112..84cf20678 100644
--- a/src/components/messenger/list/styles.scss
+++ b/src/components/messenger/list/styles.scss
@@ -69,6 +69,13 @@ $side-padding: 16px;
       overflow: auto;
       padding: 0px $side-padding;
     }
+
+    &__empty {
+      padding: 8px;
+      color: theme.$color-greyscale-11;
+      font-size: $font-size-medium;
+      line-height: 17px;
+    }
   }
 }
 
@@ -481,7 +488,7 @@ $side-padding: 16px;
   margin-top: 24px;
 
   &__title {
-    padding: 10px 0;
+    padding: 8px;
     color: theme.$color-greyscale-11;
     font-size: $font-size-medium;
     line-height: 17px;