diff --git a/.changelog/2343.internal.md b/.changelog/2343.internal.md new file mode 100644 index 0000000000..63f044adef --- /dev/null +++ b/.changelog/2343.internal.md @@ -0,0 +1 @@ +Remove MUI themes from search results diff --git a/src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx b/src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx index f992c36a88..6f7863e63a 100644 --- a/src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx +++ b/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 ? ( <> - setOthersOpen(false)} /> + setOthersOpen(false)} /> {otherNetworks.map(net => ( ) : ( setOthersOpen(true)} diff --git a/src/app/pages/SearchResultsPage/ResultListFrame.tsx b/src/app/pages/SearchResultsPage/ResultListFrame.tsx index 81fb921dc0..41a978e01f 100644 --- a/src/app/pages/SearchResultsPage/ResultListFrame.tsx +++ b/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 ( +
+ {children} +
+ ) +} diff --git a/src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx b/src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx index 685a9478e6..7cebbcf45a 100644 --- a/src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx +++ b/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 ? ( <> - setOthersOpen(false)} /> + setOthersOpen(false)} /> {RouteUtils.getEnabledNetworks() .filter(net => net !== wantedScope.network) .map(net => ( @@ -65,7 +63,6 @@ export const ScopedSearchResultsView: FC<{ ) : ( !!otherResults.length && ( setOthersOpen(true)} hasWantedResults={!!wantedResults.length} otherResultsCount={otherResults.length} diff --git a/src/app/pages/SearchResultsPage/SearchResultsList.tsx b/src/app/pages/SearchResultsPage/SearchResultsList.tsx index e5c5661180..6137888826 100644 --- a/src/app/pages/SearchResultsPage/SearchResultsList.tsx +++ b/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 ( - + void }> = ({ onHide }) => { +export const HideMoreResults: FC<{ onHide: () => void }> = ({ onHide }) => { return (
void }> = ({ onHi } export const ShowMoreResults: FC<{ - theme: Theme onShow: () => void hasWantedResults: boolean otherResultsCount: number diff --git a/src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx b/src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx index 38349d2ec5..d9ad0caa65 100644 --- a/src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx +++ b/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(() => { diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 53f72e09e8..89cd27e7ec 100644 --- a/src/styles/tailwind.css +++ b/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 */ diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts index 9f0bf43d53..f8a7c98f6f 100644 --- a/src/styles/theme/defaultTheme.ts +++ b/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, }, diff --git a/src/styles/theme/localnet/theme.ts b/src/styles/theme/localnet/theme.ts index 9b404c1973..c27248ab21 100644 --- a/src/styles/theme/localnet/theme.ts +++ b/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, }, diff --git a/src/styles/theme/testnet/theme.ts b/src/styles/theme/testnet/theme.ts index de3c2794cf..0abea406fd 100644 --- a/src/styles/theme/testnet/theme.ts +++ b/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, },