From 3d10b6dbed86d2686245fe0112142cff87ace8e9 Mon Sep 17 00:00:00 2001
From: Muhammad Adeel Tajamul
 <77053848+muhammadadeeltajamul@users.noreply.github.com>
Date: Wed, 31 Aug 2022 16:40:39 +0500
Subject: [PATCH] fix: updated search info and no result design (#246)

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>
---
 src/components/SearchInfo.jsx       |  2 +-
 src/discussions/messages.js         |  5 +++++
 src/discussions/posts/NoResults.jsx | 13 ++++++++++---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchInfo.jsx b/src/components/SearchInfo.jsx
index 1ac613f3..6c2e061f 100644
--- a/src/components/SearchInfo.jsx
+++ b/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 })
diff --git a/src/discussions/messages.js b/src/discussions/messages.js
index 77ba6918..b8697613 100644
--- a/src/discussions/messages.js
+++ b/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',
diff --git a/src/discussions/posts/NoResults.jsx b/src/discussions/posts/NoResults.jsx
index 2cd80bc0..f1dc7a47 100644
--- a/src/discussions/posts/NoResults.jsx
+++ b/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>
   );
 }