Update links and boxes for search results

Author: kaja-osojnik

src/app/components/Search/SearchSuggestionsLinksForNoResults.tsx

@@ -2,51 +2,49 @@ import { FC } from 'react'
 import { searchSuggestionTerms } from './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
   suggestSearch?: boolean
 }
 
-const iconSxProps: SxProps = {
-  fontSize: '18px',
-  verticalAlign: 'middle',
-  marginBottom: 1,
-}
-
-const empty = <></>
-
 export const SearchSuggestionsLinksForNoResults: FC<Props> = ({ scope, suggestSearch }) => {
   const { t } = useTranslation()
-  const { isMobile } = useScreenSize()
   const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
     searchSuggestionTerms.mainnet.sapphire!
   const defaultComponents = {
     OptionalBreak: <OptionalBreak />,
-    BlockIcon: isMobile ? empty : <WidgetsIcon sx={iconSxProps} />,
-    BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedBlock)} />,
-    TransactionIcon: isMobile ? empty : <RepeatIcon sx={iconSxProps} />,
+    BlockLink: (
+      <RouterLink
+        to={RouteUtils.getSearchRoute(scope, suggestedBlock)}
+        className="font-semibold inline-flex items-center gap-1"
+      />
+    ),
     TransactionLink: (
-      <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTransaction)} />
+      <RouterLink
+        to={RouteUtils.getSearchRoute(scope, suggestedTransaction)}
+        className="font-semibold inline-flex items-center gap-1"
+      />
+    ),
+    AccountLink: (
+      <RouterLink
+        to={RouteUtils.getSearchRoute(scope, suggestedAccount)}
+        className="font-semibold inline-flex items-center gap-1"
+      />
     ),
-    AccountIcon: isMobile ? empty : <AccountBalanceWalletIcon sx={iconSxProps} />,
-    AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
   }
   const runtimeComponents = {
     ...defaultComponents,
-    TokenIcon: isMobile ? empty : <TokenIcon sx={iconSxProps} />,
-    TokenLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)} />,
+    TokenLink: (
+      <RouterLink
+        to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)}
+        className="font-semibold inline-flex items-center gap-1"
+      />
+    ),
   }
 
   return (

src/app/pages/SearchResultsPage/ExploreOasisButton.tsx

@@ -1,7 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { FC, useCallback } from 'react'
 import { Button } from '@mui/base/Button'
-import Box from '@mui/material/Box'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import { useTranslation } from 'react-i18next'
 
@@ -19,16 +18,10 @@ export const ExploreOasisButton: FC = () => {
       }}
       onClick={explore}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 2,
-        }}
-      >
+      <div className="flex items-center gap-1">
         {t('home.exploreBtnText')}
         <ArrowForward fontSize={'small'} />
-      </Box>
+      </div>
     </Button>
   )
 }

src/app/pages/SearchResultsPage/NoResults.tsx

@@ -1,9 +1,7 @@
 import { FC } from 'react'
-import Box from '@mui/material/Box'
 import { EmptyState } from '../../components/EmptyState'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
 import { SearchSuggestionsLinksForNoResults } from '../../components/Search/SearchSuggestionsLinksForNoResults'
 import { OptionalBreak } from '../../components/OptionalBreak'
 import { getNameForScope, SearchScope } from '../../../types/searchScope'
@@ -26,24 +24,24 @@ export const NoResults: FC<{
     <EmptyState
       title={title}
       description={
-        <Box sx={{ a: { color: 'inherit', textDecoration: 'underline' } }}>
+        <div>
           <p>
-            <Box>
+            <span>
               <Trans
                 t={t}
                 i18nKey="search.noResults.description"
                 components={{
                   OptionalBreak: <OptionalBreak />,
-                  HomeLink: <Link component={RouterLink} to="/" />,
+                  HomeLink: <RouterLink to="/" className="font-semibold" />,
                 }}
               />
-            </Box>
+            </span>
           </p>
-          <p>
+          <p className="flex gap-1">
             <SearchSuggestionsLinksForNoResults scope={layer && network ? { network, layer } : undefined} />
           </p>
           <ExploreOasisButton />
-        </Box>
+        </div>
       }
     />
   )

src/app/pages/SearchResultsPage/ResultsGroupByType.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import Button from '@mui/material/Button'
-import Box from '@mui/material/Box'
 import { CardDivider } from '../../components/Divider'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 
@@ -25,19 +24,19 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
 
   return (
     <>
-      <Box sx={{ mb: 5 }}>
+      <div className="mb-7">
         <Typography variant="h4" className="inline">
           {title}
         </Typography>
-      </Box>
+      </div>
       {results.map((item, i) => (
         <div key={i}>
           {resultComponent(item)}
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 5 }}>
+          <div className="flex justify-center mt-7">
             <Button variant="contained" color="primary" component={RouterLink} to={link(item)}>
               {linkLabel}
             </Button>
-          </Box>
+          </div>
           {i < results.length - 1 && <CardDivider />}
         </div>
       ))}

src/app/pages/SearchResultsPage/notifications.tsx

@@ -1,41 +1,20 @@
-import { styled } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import { FC } from 'react'
 import { Theme } from '@mui/material/styles/createTheme'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { Trans, useTranslation } from 'react-i18next'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 
-const NotificationBox = styled(Box)(({ theme }) => ({
-  marginTop: 30,
-  marginBottom: 30,
-  marginLeft: '5%',
-  marginRight: '5%',
-
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '5px 10px',
-  gap: 10,
-
-  minHeight: 50,
-
-  background: theme.palette.layout.secondary,
-  color: theme.palette.layout.titleOnBackground,
-  cursor: 'pointer',
-  borderRadius: 50,
-}))
-
-export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ theme, onHide }) => {
+export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ onHide }) => {
   return (
-    <NotificationBox theme={theme} onClick={onHide}>
+    <div
+      className="w-[90%] mx-auto md:w-full flex justify-center items-center gap-1 p-4 leading-tight my-8 rounded-md box-border bg-[#F4F4F5]"
+      onClick={onHide}
+    >
       <ZoomOut />
       <span>
         <Trans i18nKey="search.otherResults.clickToHide" />
       </span>
-    </NotificationBox>
+    </div>
   )
 }
 
@@ -44,10 +23,13 @@ export const ShowMoreResults: FC<{
   onShow: () => void
   hasWantedResults: boolean
   otherResultsCount: number
-}> = ({ theme, onShow, hasWantedResults, otherResultsCount }) => {
+}> = ({ onShow, hasWantedResults, otherResultsCount }) => {
   const { t } = useTranslation()
   return (
-    <NotificationBox theme={theme} onClick={onShow}>
+    <div
+      className="w-[90%] mx-auto md:w-full flex justify-center items-center gap-1 p-4 leading-tight my-8 rounded-md box-border bg-[#F4F4F5]"
+      onClick={onShow}
+    >
       <ZoomIn />
       <span>
         <Trans
@@ -62,6 +44,6 @@ export const ShowMoreResults: FC<{
           }}
         />
       </span>
-    </NotificationBox>
+    </div>
   )
 }

src/locales/en/translation.json

@@ -810,9 +810,9 @@
       "description": "Please try another search query <OptionalBreak> or <HomeLink>explore Oasis</HomeLink>.</OptionalBreak>"
     },
     "otherResults": {
-      "clickToShowThem": "We found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
-      "clickToShowMore": "We also found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
-      "clickToHide": "The results from other <strong>Networks</strong> are shown below. Click to hide those results."
+      "clickToShowThem": "We found {{ countLabel }} on other Networks. Click to open these results.",
+      "clickToShowMore": "We also found {{ countLabel }} on other Networks. Click to open these results.",
+      "clickToHide": "The results from other Networks are shown below. Click to hide those results."
     },
     "results": {
       "accounts": {
@@ -853,10 +853,10 @@
       "moreCount_other": "{{ count }} more results"
     },
     "searchBtnText": "Search",
-    "searchSuggestionsForRuntime": "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>.",
-    "searchSuggestionsForConsensus": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink> </OptionalBreak>.",
-    "suggestSearchForRuntime": "Use search to find what you are looking for, i.e. <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink>, <TokenLink><TokenIcon/> Token</TokenLink> </OptionalBreak>.",
-    "suggestSearchForConsensus": "Use search to find what you are looking for, i.e. <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink> </OptionalBreak>."
+    "searchSuggestionsForRuntime": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink>, <TokenLink>Token</TokenLink></OptionalBreak>.",
+    "searchSuggestionsForConsensus": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink></OptionalBreak>.",
+    "suggestSearchForRuntime": "Use search to find what you are looking for, i.e. <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink>, <TokenLink>Token</TokenLink></OptionalBreak>.",
+    "suggestSearchForConsensus": "Use search to find what you are looking for, i.e. <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink></OptionalBreak>."
   },
   "tableSearch": {
     "error": {