Improve the "no results found" screen

.changelog/1080.trivial.md

@@ -0,0 +1 @@
+Improve the no results found screen

src/app/components/Search/SearchSuggestionsLinksForNoResults.tsx

@@ -3,35 +3,50 @@ import { searchSuggestionTerms } from '../../components/Search/search-utils'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
+import WidgetsIcon from '@mui/icons-material/Widgets'
+import RepeatIcon from '@mui/icons-material/Repeat'
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
+import TokenIcon from '@mui/icons-material/Token'
 import { RouteUtils } from '../../utils/route-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { SxProps } from '@mui/material/styles'
 
 interface Props {
   scope: SearchScope | undefined
 }
 
+const iconSxProps: SxProps = {
+  fontSize: '18px',
+  verticalAlign: 'middle',
+  marginBottom: 1,
+}
+
+const empty = <></>
+
 export const SearchSuggestionsLinksForNoResults: FC<Props> = ({ scope }) => {
   const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
   const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
     searchSuggestionTerms['mainnet']['sapphire']!
 
   return (
     <Trans
       t={t}
-      i18nKey="search.searchSuggestions"
+      i18nKey="search.searchSuggestionsForNoResults"
       components={{
         OptionalBreak: <OptionalBreak />,
-        BlockIcon: <></>,
+        BlockIcon: isMobile ? empty : <WidgetsIcon sx={iconSxProps} />,
         BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedBlock)} />,
-        TransactionIcon: <></>,
+        TransactionIcon: isMobile ? empty : <RepeatIcon sx={iconSxProps} />,
         TransactionLink: (
           <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTransaction)} />
         ),
-        AccountIcon: <></>,
+        AccountIcon: isMobile ? empty : <AccountBalanceWalletIcon sx={iconSxProps} />,
         AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
-        TokenIcon: <></>,
+        TokenIcon: isMobile ? empty : <TokenIcon sx={iconSxProps} />,
         TokenLink: (
           <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)} />
         ),

src/locales/en/translation.json

@@ -418,7 +418,7 @@
     "noResults": {
       "header": "No results found",
       "scopeHeader": "No results found on {{scope}}",
-      "description": "Please try another search query <OptionalBreak>or <HomeLink>explore Oasis</HomeLink></OptionalBreak>"
+      "description": "Please try another search query <OptionalBreak> or explore the <HomeLink>Oasis ecosystem</HomeLink>.</OptionalBreak>"
     },
     "otherResults": {
       "clickToShowThem": "We found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
@@ -453,6 +453,7 @@
     },
     "searchBtnText": "Search",
     "searchSuggestions": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink>, <TokenLink><TokenIcon/> Token</TokenLink> </OptionalBreak>.",
+    "searchSuggestionsForNoResults": "Alternatively, you can view a random <BlockLink><BlockIcon/> Block</BlockLink>, <OptionalBreak><TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink> or <TokenLink><TokenIcon/> Token</TokenLink></OptionalBreak> <OptionalBreak>to discover our Explorer.</OptionalBreak>",
     "wordsOfPower": "I COMMAND THEE TO SEARCH FOR"
   }
 }