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
zer0-os · Jun 9, 2023 · 628fe77 · 628fe77
1 parent 53f4d05
commit 628fe77
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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;