Improve messaging on no results with applied filter

frontend/src/Indexer/NoIndexer.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Indexer/NoIndexer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -14,11 +15,9 @@ function NoIndexer(props: NoIndexerProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllIndexersHiddenDueToFilter')}
+      </Alert>
     );
   }
 

frontend/src/Search/NoSearchResults.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Search/NoSearchResults.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './NoSearchResults.css';
 
@@ -11,18 +13,16 @@ function NoSearchResults(props: NoSearchResultsProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllSearchResultsHiddenByFilter')}
+      </Alert>
     );
   }
 
   return (
-    <div>
-      <div className={styles.message}>{translate('NoSearchResultsFound')}</div>
-    </div>
+    <Alert kind={kinds.INFO} className={styles.message}>
+      {translate('NoSearchResultsFound')}
+    </Alert>
   );
 }
 

frontend/src/Search/SearchIndex.js

@@ -282,7 +282,7 @@ class SearchIndex extends Component {
 
     const ViewComponent = getViewComponent(isSmallScreen);
     const isLoaded = !!(!error && isPopulated && items.length && this.scrollerRef.current);
-    const hasNoIndexer = !totalItems;
+    const hasNoSearchResults = !totalItems;
 
     return (
       <PageContent title={translate('Search')}>
@@ -306,7 +306,7 @@ class SearchIndex extends Component {
             <SearchIndexSortMenu
               sortKey={sortKey}
               sortDirection={sortDirection}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onSortSelect={onSortSelect}
             />
 
@@ -314,7 +314,7 @@ class SearchIndex extends Component {
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={customFilters}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>