fix: vertically centered no results found message (#270)

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>

src/discussions/learners/LearnersView.jsx

@@ -60,7 +60,7 @@ function LearnersView({ intl }) {
     <div className="d-flex flex-column border-right border-light-300 h-100">
       { !usernameSearch && <LearnerFilterBar /> }
       { usernameSearch && <SearchInfo text={usernameSearch} count={learners.length} loadingStatus={loadingStatus} onClear={() => dispatch(setUsernameSearch(''))} /> }
-      <div className="list-group list-group-flush learner">
+      <div className="list-group list-group-flush learner flex-fill">
         {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
         <Redirect
           to={{

src/discussions/posts/NoResults.jsx

@@ -22,7 +22,7 @@ function NoResults({ intl }) {
   }
 
   return (
-    <div className="h-100 mt-5 align-self-center mx-auto w-50 d-flex flex-column justify-content-center text-center">
+    <div className="h-100 align-self-center mx-auto w-50 d-flex flex-column justify-content-center text-center">
       <h4>{intl.formatMessage(messages.noResultsFound)}</h4>
       <small>{intl.formatMessage(helpMessage)}</small>
     </div>

src/discussions/posts/PostsView.jsx

@@ -75,12 +75,12 @@ function PostsView() {
   };
 
   return (
-    <div className="discussion-posts d-flex flex-column">
+    <div className="discussion-posts d-flex flex-column h-100">
       {
         searchString && <SearchInfo count={resultsFound} text={searchString} loadingStatus={loadingStatus} onClear={() => dispatch(setSearchQuery(''))} />
       }
       <PostFilterBar filterSelfPosts={showOwnPosts} />
-      <div className="list-group list-group-flush" role="list" onKeyDown={e => handleKeyDown(e)}>
+      <div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
         {postsListComponent}
       </div>
     </div>

src/discussions/topics/TopicsView.jsx

@@ -89,9 +89,9 @@ function TopicsView() {
   }, [topicFilter]);
 
   return (
-    <div>
+    <div className="d-flex flex-column flex-fill">
       <div
-        className="discussion-topics d-flex flex-column card"
+        className="discussion-topics card"
         data-testid="topics-view"
       >
         {
@@ -104,7 +104,10 @@ function TopicsView() {
         </div>
       </div>
       {
-        filteredTopicsCount === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />
+        filteredTopicsCount === 0
+        && loadingStatus === RequestStatus.SUCCESSFUL
+        && topicFilter !== ''
+        && <NoResults />
       }
     </div>
   );