Migrate search results to tailwind

.changelog/2343.internal.md

@@ -0,0 +1 @@
+Remove MUI themes from search results

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -14,7 +14,6 @@ import {
   isOnMainnet,
 } from '../../../types/network'
 import { HideMoreResults, ShowMoreResults } from './ShowMoreResults'
-import { getThemeForScope } from '../../../styles/theme'
 import { orderByLayer } from '../../../types/layers'
 import { useRedirectIfSingleResult } from './useRedirectIfSingleResult'
 import { SearchParams } from '../../components/Search/search-utils'
@@ -47,7 +46,6 @@ export const GlobalSearchResultsView: FC<{
   }
 
   const otherNetworks = RouteUtils.getEnabledNetworks().filter(isNotMainnet)
-  const notificationTheme = getThemeForScope('testnet')
   const mainnetResults = searchResults.filter(isOnMainnet).sort(orderByLayer)
   const otherResults = searchResults.filter(isNotOnMainnet).sort(orderByLayer)
 
@@ -66,7 +64,7 @@ export const GlobalSearchResultsView: FC<{
       {otherResults.length !== 0 &&
         (othersOpen ? (
           <>
-            <HideMoreResults theme={notificationTheme} onHide={() => setOthersOpen(false)} />
+            <HideMoreResults onHide={() => setOthersOpen(false)} />
             {otherNetworks.map(net => (
               <SearchResultsList
                 key={net}
@@ -79,7 +77,6 @@ export const GlobalSearchResultsView: FC<{
           </>
         ) : (
           <ShowMoreResults
-            theme={notificationTheme}
             hasWantedResults={!!mainnetResults.length}
             otherResultsCount={otherResults.length}
             onShow={() => setOthersOpen(true)}

src/app/pages/SearchResultsPage/ResultListFrame.tsx

@@ -1,26 +1,26 @@
-import { styled, useTheme } from '@mui/material/styles'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import { COLORS } from '../../../styles/theme/colors'
+import { FC } from 'react'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { useScopeParam } from 'app/hooks/useScopeParam'
 
-export const ResultListFrame = styled('div')(({ theme: wantedTheme }) => {
-  const currentTheme = useTheme()
-  const isMobile = useMediaQuery(wantedTheme.breakpoints.down('sm'))
-  return isMobile
-    ? {
-        [`&& > div > [data-slot="card"]`]:
-          currentTheme.palette.layout.border !== wantedTheme.palette.layout.networkBubbleBorder &&
-          wantedTheme.palette.layout.main !== wantedTheme.palette.layout.networkBubbleBorder
-            ? {
-                borderRadius: 0,
-                border: `solid ${wantedTheme.palette.layout.networkBubbleBorder}`,
-                borderWidth: '10px 1px',
-              }
-            : {},
-      }
-    : {
-        marginBottom: 20,
-        border: `solid 15px ${wantedTheme.palette.layout.networkBubbleBorder}`,
-        background: COLORS.white,
-        borderRadius: 6,
-      }
-})
+export const ResultListFrame: FC<{ children: React.ReactNode; networkForTheme: string }> = ({
+  children,
+  networkForTheme,
+}) => {
+  const { isMobile } = useScreenSize()
+  const scope = useScopeParam()
+  const fallbackTheme = 'mainnet'
+  const expectedTheme = scope?.network ?? fallbackTheme
+
+  return (
+    <div
+      className={cn(
+        !isMobile && 'mb-5 border-[15px] border-solid border-theme-layout-accent bg-white rounded-md',
+        isMobile && expectedTheme !== networkForTheme && 'mobile-card-border-override',
+        networkForTheme,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx

@@ -1,13 +1,12 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { getFilterForNetwork, getNetworkNames, isOnMainnet } from '../../../types/network'
+import { getFilterForNetwork, getNetworkNames } from '../../../types/network'
 import {
   getFilterForScope,
   getNameForScope,
   getInverseFilterForScope,
   SearchScope,
 } from '../../../types/searchScope'
-import { getThemeForScope } from '../../../styles/theme'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchResults } from './hooks'
 import { SearchResultsList } from './SearchResultsList'
@@ -31,7 +30,6 @@ export const ScopedSearchResultsView: FC<{
   const isNotInWantedScope = getInverseFilterForScope(wantedScope)
   const wantedResults = searchResults.filter(isInWantedScope)
   const otherResults = searchResults.filter(isNotInWantedScope)
-  const notificationTheme = getThemeForScope(otherResults.some(isOnMainnet) ? 'mainnet' : 'testnet')
 
   useRedirectIfSingleResult(wantedScope, searchParams, searchResults)
 
@@ -49,7 +47,7 @@ export const ScopedSearchResultsView: FC<{
       )}
       {othersOpen ? (
         <>
-          <HideMoreResults theme={notificationTheme} onHide={() => setOthersOpen(false)} />
+          <HideMoreResults onHide={() => setOthersOpen(false)} />
           {RouteUtils.getEnabledNetworks()
             .filter(net => net !== wantedScope.network)
             .map(net => (
@@ -65,7 +63,6 @@ export const ScopedSearchResultsView: FC<{
       ) : (
         !!otherResults.length && (
           <ShowMoreResults
-            theme={notificationTheme}
             onShow={() => setOthersOpen(true)}
             hasWantedResults={!!wantedResults.length}
             otherResultsCount={otherResults.length}

src/app/pages/SearchResultsPage/SearchResultsList.tsx

@@ -21,7 +21,6 @@ import {
   isConsensusBlock,
   isConsensusTransaction,
 } from './hooks'
-import { getThemeForScope } from '../../../styles/theme'
 import { Network } from '../../../types/network'
 import { SubPageCard } from '../../components/SubPageCard'
 import { AllTokenPrices } from '../../../coin-gecko/api'
@@ -50,10 +49,9 @@ export const SearchResultsList: FC<{
   if (!numberOfResults) {
     return null
   }
-  const theme = getThemeForScope(networkForTheme)
 
   return (
-    <ResultListFrame theme={theme}>
+    <ResultListFrame networkForTheme={networkForTheme}>
       <SubPageCard
         title={title}
         featured

src/app/pages/SearchResultsPage/ShowMoreResults.tsx

@@ -4,7 +4,7 @@ import ZoomOut from '@mui/icons-material/ZoomOut'
 import { Trans, useTranslation } from 'react-i18next'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 
-export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ onHide }) => {
+export const HideMoreResults: FC<{ onHide: () => void }> = ({ onHide }) => {
   return (
     <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] hover:bg-[#DDDDDE] cursor-pointer"
@@ -19,7 +19,6 @@ export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ onHi
 }
 
 export const ShowMoreResults: FC<{
-  theme: Theme
   onShow: () => void
   hasWantedResults: boolean
   otherResultsCount: number

src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx

@@ -11,6 +11,7 @@ import { SearchResultsList } from '../SearchResultsList'
 import { Ticker } from '../../../../types/ticker'
 
 vi.mock('../../../hooks/useAccountMetadata')
+vi.mock('../../../hooks/useScopeParam')
 
 describe('SearchResultsView', () => {
   beforeEach(() => {

src/styles/tailwind.css

@@ -36,6 +36,10 @@
   --color-theme-contrast-main: #000062;
 }
 
+.mobile-card-border-override > div > [data-slot='card'] {
+  @apply rounded-none border-solid border-theme-layout-accent border-y-[10px] border-x;
+}
+
 /* Specific fixes needed during migration to Oasis UI Library */
 
 /* Override MUI styles that are applied globally */

src/styles/theme/defaultTheme.ts

@@ -22,7 +22,6 @@ declare module '@mui/material/styles' {
     secondary?: string
     primaryBackground?: string
     secondaryBackground?: string
-    networkBubbleBorder?: string
     graphZoomOutText?: string
     helpScreenIconColor?: string
   }
@@ -75,7 +74,6 @@ export const defaultTheme = createTheme({
       secondary: COLORS.white,
       primaryBackground: COLORS.brandExtraDark,
       secondaryBackground: COLORS.iconBackground,
-      networkBubbleBorder: COLORS.white,
       graphZoomOutText: COLORS.white,
       helpScreenIconColor: COLORS.aqua,
     },

src/styles/theme/localnet/theme.ts

@@ -20,7 +20,6 @@ export const localnetTheme = createTheme(
         secondary: COLORS.localnet,
         primaryBackground: COLORS.localnetLight,
         secondaryBackground: COLORS.white,
-        networkBubbleBorder: COLORS.localnet,
         graphZoomOutText: COLORS.brandDark,
         helpScreenIconColor: COLORS.brandExtraDark,
       },

src/styles/theme/testnet/theme.ts

@@ -19,7 +19,6 @@ export const testnetTheme = createTheme(
         secondary: COLORS.testnet,
         primaryBackground: COLORS.testnetLight,
         secondaryBackground: COLORS.white,
-        networkBubbleBorder: COLORS.testnet,
         graphZoomOutText: COLORS.brandDark,
         helpScreenIconColor: COLORS.brandExtraDark,
       },