80532 change translation

packages/app/resource/locales/en_US/translation.json

@@ -567,7 +567,7 @@
     "popover_desc": "Input channel name. You can notify multiple channels by entering a comma-separated list."
   },
   "search_result": {
-    "result_meta": "Searched results for \"{{keyword}}\"",
+    "result_meta": "<span class=\"font-weight-light\">Search results for</span> <span class=\"h5\">\"{{keyword}}\"</span>",
     "deletion_mode_btn_lavel": "Select and delete page",
     "cancel": "Cancel",
     "delete": "Delete",

packages/app/resource/locales/ja_JP/translation.json

@@ -567,7 +567,7 @@
     "popover_desc": "チャンネル名を入れてください。カンマ区切りのリストを入力することで複数のチャンネルに通知することができます。"
   },
   "search_result": {
-    "result_meta": "\"{{keyword}}\" の検索結果",
+    "result_meta": "<span class=\"h5\">\"{{keyword}}\"</span> <span class=\"font-weight-light\">の検索結果</span>",
     "deletion_mode_btn_lavel": "ページを指定して削除",
     "cancel": "キャンセル",
     "delete": "削除",

packages/app/resource/locales/zh_CN/translation.json

@@ -839,7 +839,7 @@
 		"use_os_settings": "使用操作系统设置"
 	},
 	"search_result": {
-		"result_meta": "搜索结果为 \"{{keyword}}\"",
+		"result_meta": "<span class=\"font-weight-light\">搜索结果为</span> <span class=\"h5\">\"{{keyword}}\"</span>",
 		"deletion_mode_btn_lavel": "选择并删除页面",
 		"cancel": "取消",
 		"delete": "删除",

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -17,7 +17,10 @@ type Props = {
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
-  const { SearchResultList, SearchControl, SearchResultContent } = props;
+  const {
+    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword,
+  } = props;
+
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
@@ -25,7 +28,15 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           <nav><SearchControl></SearchControl></nav>
           <div className="d-flex align-items-start justify-content-between mt-1">
             <div className="search-result-meta">
-              <i className="icon-magnifier" /> {t('search_result.result_meta', { keyword: props.searchingKeyword })}
+              <span
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: t('search_result.result_meta',
+                    { keyword: searchingKeyword }),
+                }}
+              />
+              {/* Todo: replace "1-10" to the appropriate value */}
+              <span className="ml-3">1-10 / {searchResultMeta.total || 0}</span>
             </div>
           </div>