Continue the work on cross-site / cross-paratime search

src/app/components/StyledDescriptionList/index.tsx

@@ -43,6 +43,8 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
   'dt, dd': {
     display: 'flex',
     alignItems: 'center',
+    // TODO do we want to use this here? Discuss with Don
+    // boxShadow: `0px 1px 0px ${theme.palette.layout.descriptionListSeparator}`,
     boxShadow: `0px 1px 0px ${COLORS.grayLight}`,
     ':last-of-type': {
       boxShadow: 'none',

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getFilterForScope, getKeyForScope, getNameForScope } from '../../../types/searchScope'
+import { RouteUtils } from '../../utils/route-utils'
+import { SearchResults } from './hooks'
+import { NoResults } from './NoResults'
+import { SearchResultsFiltered } from './SearchResultsFiltered'
+import { useGetRosePrice } from '../../../coin-gecko/api'
+
+export const GlobalSearchResultsView: FC<{ searchResults: SearchResults }> = ({ searchResults }) => {
+  const { t } = useTranslation()
+  const roseFiatValue = useGetRosePrice().data
+  return searchResults.allResults.length === 0 ? (
+    <NoResults />
+  ) : (
+    <>
+      {RouteUtils.getEnabledSearchScopes().map(scope => (
+        <SearchResultsFiltered
+          key={getKeyForScope(scope)}
+          title={getNameForScope(t, scope)}
+          filter={getFilterForScope(scope)}
+          searchResults={searchResults}
+          networkForTheme={scope.network}
+          roseFiatValue={roseFiatValue}
+        />
+      ))}
+    </>
+  )
+}

src/app/pages/SearchResultsPage/NoResults.tsx

@@ -7,15 +7,14 @@ import Link from '@mui/material/Link'
 import { SearchSuggestionsLinks } from '../../components/Search/SearchSuggestionsLinks'
 import { OptionalBreak } from '../../components/OptionalBreak'
 import { useTheme } from '@mui/material/styles'
-import { getNetworkNames } from '../../../types/network'
-import { SearchScope } from '../../../types/searchScope'
+import { getNameForScope, SearchScope } from '../../../types/searchScope'
 
 export const NoResults: FC<{ scope?: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const title = !scope
     ? t('search.noResults.header')
-    : t('search.noResults.scopeHeader', { scope: getNetworkNames(t)[scope.network] })
+    : t('search.noResults.scopeHeader', { scope: getNameForScope(t, scope) })
 
   return (
     <EmptyState

src/app/pages/SearchResultsPage/ResultsGroupByType.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import { styled } from '@mui/material/styles'
-import { SubPageCard } from '../../components/SubPageCard'
+import Typography from '@mui/material/Typography'
 
 interface Props<T> {
   title: string
@@ -31,20 +30,23 @@ export const ViewResultButton = (() => {
  * It doesn't actually run a search query, but uses existing results.
  */
 export function ResultsGroupByType<T>({ title, results, resultComponent, link, linkLabel }: Props<T>) {
-  const { t } = useTranslation()
-
   if (!results || results.length <= 0) {
     return <></>
   }
 
   return (
-    <SubPageCard
-      featured
-      title={title}
-      subheader={t('search.results.count', {
-        count: results.length,
-      })}
-    >
+    <>
+      <Box sx={{ mb: 5 }}>
+        <Typography
+          variant="h4"
+          component="h4"
+          sx={{
+            display: 'inline',
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
       {results.map((item, i) => (
         <div key={i}>
           {resultComponent(item)}
@@ -56,6 +58,6 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
           {i < results.length - 1 && <Divider variant="card" />}
         </div>
       ))}
-    </SubPageCard>
+    </>
   )
 }