fix: updated search info and no result design (#246)

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

src/components/SearchInfo.jsx

@@ -18,7 +18,7 @@ function SearchInfo({
   return (
     <div className="d-flex flex-row border-bottom">
       <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
-      <Button variant="" size="inline" className="text-primary-500">
+      <Button variant="" size="inline">
         {
           loadingStatus === RequestStatus.SUCCESSFUL
             ? intl.formatMessage(messages.searchInfo, { count, text })

src/discussions/messages.js

@@ -123,6 +123,11 @@ const messages = defineMessages({
     defaultMessage: 'No results found',
     description: 'Title on the discussion sidebar when there are now results after filtering',
   },
+  differentKeywords: {
+    id: 'discussions.sidebar.differentKeywords',
+    defaultMessage: 'Try searching different keywords',
+    description: 'Message shown on discussion sidebar for topics and learners if user searched with keywords.',
+  },
   removeKeywords: {
     id: 'discussions.sidebar.removeKeywords',
     defaultMessage: 'Try searching different keywords or removing some filters',

src/discussions/posts/NoResults.jsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -20,11 +21,17 @@ function NoResults({ intl }) {
   } if (topicsFilter) {
     helpMessage = messages.removeKeywordsOnly;
   }
+  const titleCssClasses = classNames(
+    { 'font-weight-normal text-primary-500': topicsFilter || learnersFilter },
+  );
+  const textCssClasses = classNames(
+    { 'font-weight-normal text-gray-700': topicsFilter || learnersFilter },
+  );
 
   return (
-    <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 className="h-100 mt-5 align-self-center mx-auto w-50 d-flex flex-column justify-content-center text-center">
+      <h4 className={titleCssClasses}>{intl.formatMessage(messages.noResultsFound)}</h4>
+      <small className={textCssClasses}>{intl.formatMessage(helpMessage)}</small>
     </div>
   );
 }