Skip to content

Commit 982412c

Browse files
kaja-osojnikkaja-osojnik
authored
Merge pull request #2234 from oasisprotocol/kaja/uil-search-results-box
Update links and boxes for search results
2 parents c8b3091 + 6488914 commit 982412c

8 files changed

Lines changed: 57 additions & 87 deletions

File tree

‎.changelog/2234.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Update links and boxes for search results.

‎src/app/components/Search/SearchSuggestionsButtons.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { FC } from 'react'
2-
import Typography from '@mui/material/Typography'
32
import { styled } from '@mui/material/styles'
43
import Button, { ButtonProps } from '@mui/material/Button'
54
import { Trans, useTranslation } from 'react-i18next'
6-
import { COLORS } from '../../../styles/theme/colors'
75
import WidgetsIcon from '@mui/icons-material/Widgets'
86
import RepeatIcon from '@mui/icons-material/Repeat'
97
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
@@ -27,6 +25,7 @@ const PlainTextButton = (props: ButtonProps) => (
2725

2826
export const SuggestionButton = styled(PlainTextButton)({
2927
gap: '0.2ch', // Space after icon
28+
lineHeight: '1',
3029
})
3130

3231
interface Props {
@@ -56,7 +55,7 @@ export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }
5655

5756
return (
5857
<span>
59-
<Typography component="span" sx={{ color: COLORS.grayExtraDark, fontSize: 12 }}>
58+
<span className="text-gray-800 text-xs">
6059
<Trans
6160
t={t}
6261
i18nKey={
@@ -66,7 +65,7 @@ export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }
6665
}
6766
components={scope?.layer === 'consensus' ? defaultComponents : runtimeComponents}
6867
/>
69-
</Typography>
68+
</span>
7069
</span>
7170
)
7271
}

‎src/app/components/Search/SearchSuggestionsLinksForNoResults.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,49 @@ import { FC } from 'react'
22
import { searchSuggestionTerms } from './search-utils'
33
import { Trans, useTranslation } from 'react-i18next'
44
import { Link as RouterLink } from 'react-router-dom'
5-
import Link from '@mui/material/Link'
6-
import WidgetsIcon from '@mui/icons-material/Widgets'
7-
import RepeatIcon from '@mui/icons-material/Repeat'
8-
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
9-
import TokenIcon from '@mui/icons-material/Token'
105
import { RouteUtils } from '../../utils/route-utils'
116
import { OptionalBreak } from '../OptionalBreak'
127
import { SearchScope } from '../../../types/searchScope'
13-
import { useScreenSize } from '../../hooks/useScreensize'
14-
import { SxProps } from '@mui/material/styles'
158

169
interface Props {
1710
scope: SearchScope | undefined
1811
suggestSearch?: boolean
1912
}
2013

21-
const iconSxProps: SxProps = {
22-
fontSize: '18px',
23-
verticalAlign: 'middle',
24-
marginBottom: 1,
25-
}
26-
27-
const empty = <></>
28-
2914
export const SearchSuggestionsLinksForNoResults: FC<Props> = ({ scope, suggestSearch }) => {
3015
const { t } = useTranslation()
31-
const { isMobile } = useScreenSize()
3216
const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
3317
(scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
3418
searchSuggestionTerms.mainnet.sapphire!
3519
const defaultComponents = {
3620
OptionalBreak: <OptionalBreak />,
37-
BlockIcon: isMobile ? empty : <WidgetsIcon sx={iconSxProps} />,
38-
BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedBlock)} />,
39-
TransactionIcon: isMobile ? empty : <RepeatIcon sx={iconSxProps} />,
21+
BlockLink: (
22+
<RouterLink
23+
to={RouteUtils.getSearchRoute(scope, suggestedBlock)}
24+
className="font-semibold inline-flex items-center gap-1"
25+
/>
26+
),
4027
TransactionLink: (
41-
<Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTransaction)} />
28+
<RouterLink
29+
to={RouteUtils.getSearchRoute(scope, suggestedTransaction)}
30+
className="font-semibold inline-flex items-center gap-1"
31+
/>
32+
),
33+
AccountLink: (
34+
<RouterLink
35+
to={RouteUtils.getSearchRoute(scope, suggestedAccount)}
36+
className="font-semibold inline-flex items-center gap-1"
37+
/>
4238
),
43-
AccountIcon: isMobile ? empty : <AccountBalanceWalletIcon sx={iconSxProps} />,
44-
AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
4539
}
4640
const runtimeComponents = {
4741
...defaultComponents,
48-
TokenIcon: isMobile ? empty : <TokenIcon sx={iconSxProps} />,
49-
TokenLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)} />,
42+
TokenLink: (
43+
<RouterLink
44+
to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)}
45+
className="font-semibold inline-flex items-center gap-1"
46+
/>
47+
),
5048
}
5149

5250
return (

‎src/app/pages/SearchResultsPage/ExploreOasisButton.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useNavigate } from 'react-router-dom'
22
import { FC, useCallback } from 'react'
33
import { Button } from '@mui/base/Button'
4-
import Box from '@mui/material/Box'
54
import ArrowForward from '@mui/icons-material/ArrowForward'
65
import { useTranslation } from 'react-i18next'
76

@@ -19,16 +18,10 @@ export const ExploreOasisButton: FC = () => {
1918
}}
2019
onClick={explore}
2120
>
22-
<Box
23-
sx={{
24-
display: 'flex',
25-
alignItems: 'center',
26-
gap: 2,
27-
}}
28-
>
21+
<div className="flex items-center gap-1">
2922
{t('home.exploreBtnText')}
3023
<ArrowForward fontSize={'small'} />
31-
</Box>
24+
</div>
3225
</Button>
3326
)
3427
}

‎src/app/pages/SearchResultsPage/NoResults.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { FC } from 'react'
2-
import Box from '@mui/material/Box'
32
import { EmptyState } from '../../components/EmptyState'
43
import { Trans, useTranslation } from 'react-i18next'
54
import { Link as RouterLink } from 'react-router-dom'
6-
import Link from '@mui/material/Link'
75
import { SearchSuggestionsLinksForNoResults } from '../../components/Search/SearchSuggestionsLinksForNoResults'
86
import { OptionalBreak } from '../../components/OptionalBreak'
97
import { getNameForScope, SearchScope } from '../../../types/searchScope'
@@ -26,24 +24,24 @@ export const NoResults: FC<{
2624
<EmptyState
2725
title={title}
2826
description={
29-
<Box sx={{ a: { color: 'inherit', textDecoration: 'underline' } }}>
27+
<div>
3028
<p>
31-
<Box>
29+
<span>
3230
<Trans
3331
t={t}
3432
i18nKey="search.noResults.description"
3533
components={{
3634
OptionalBreak: <OptionalBreak />,
37-
HomeLink: <Link component={RouterLink} to="/" />,
35+
HomeLink: <RouterLink to="/" className="font-semibold" />,
3836
}}
3937
/>
40-
</Box>
38+
</span>
4139
</p>
42-
<p>
40+
<p className="flex gap-1">
4341
<SearchSuggestionsLinksForNoResults scope={layer && network ? { network, layer } : undefined} />
4442
</p>
4543
<ExploreOasisButton />
46-
</Box>
44+
</div>
4745
}
4846
/>
4947
)

‎src/app/pages/SearchResultsPage/ResultsGroupByType.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
33
import Button from '@mui/material/Button'
4-
import Box from '@mui/material/Box'
54
import { CardDivider } from '../../components/Divider'
65
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
76

@@ -25,19 +24,19 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
2524

2625
return (
2726
<>
28-
<Box sx={{ mb: 5 }}>
27+
<div className="mb-7">
2928
<Typography variant="h4" className="inline">
3029
{title}
3130
</Typography>
32-
</Box>
31+
</div>
3332
{results.map((item, i) => (
3433
<div key={i}>
3534
{resultComponent(item)}
36-
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 5 }}>
35+
<div className="flex justify-center mt-7">
3736
<Button variant="contained" color="primary" component={RouterLink} to={link(item)}>
3837
{linkLabel}
3938
</Button>
40-
</Box>
39+
</div>
4140
{i < results.length - 1 && <CardDivider />}
4241
</div>
4342
))}

‎src/app/pages/SearchResultsPage/notifications.tsx‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,20 @@
1-
import { styled } from '@mui/material/styles'
2-
import Box from '@mui/material/Box'
31
import { FC } from 'react'
42
import { Theme } from '@mui/material/styles/createTheme'
53
import ZoomOut from '@mui/icons-material/ZoomOut'
64
import { Trans, useTranslation } from 'react-i18next'
75
import ZoomIn from '@mui/icons-material/ZoomIn'
86

9-
const NotificationBox = styled(Box)(({ theme }) => ({
10-
marginTop: 30,
11-
marginBottom: 30,
12-
marginLeft: '5%',
13-
marginRight: '5%',
14-
15-
boxSizing: 'border-box',
16-
display: 'flex',
17-
flexDirection: 'row',
18-
justifyContent: 'center',
19-
alignItems: 'center',
20-
padding: '5px 10px',
21-
gap: 10,
22-
23-
minHeight: 50,
24-
25-
background: theme.palette.layout.secondary,
26-
color: theme.palette.layout.titleOnBackground,
27-
cursor: 'pointer',
28-
borderRadius: 50,
29-
}))
30-
31-
export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ theme, onHide }) => {
7+
export const HideMoreResults: FC<{ theme: Theme; onHide: () => void }> = ({ onHide }) => {
328
return (
33-
<NotificationBox theme={theme} onClick={onHide}>
9+
<div
10+
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]"
11+
onClick={onHide}
12+
>
3413
<ZoomOut />
3514
<span>
3615
<Trans i18nKey="search.otherResults.clickToHide" />
3716
</span>
38-
</NotificationBox>
17+
</div>
3918
)
4019
}
4120

@@ -44,10 +23,13 @@ export const ShowMoreResults: FC<{
4423
onShow: () => void
4524
hasWantedResults: boolean
4625
otherResultsCount: number
47-
}> = ({ theme, onShow, hasWantedResults, otherResultsCount }) => {
26+
}> = ({ onShow, hasWantedResults, otherResultsCount }) => {
4827
const { t } = useTranslation()
4928
return (
50-
<NotificationBox theme={theme} onClick={onShow}>
29+
<div
30+
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]"
31+
onClick={onShow}
32+
>
5133
<ZoomIn />
5234
<span>
5335
<Trans
@@ -62,6 +44,6 @@ export const ShowMoreResults: FC<{
6244
}}
6345
/>
6446
</span>
65-
</NotificationBox>
47+
</div>
6648
)
6749
}

‎src/locales/en/translation.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -810,9 +810,9 @@
810810
"description": "Please try another search query <OptionalBreak> or <HomeLink>explore Oasis</HomeLink>.</OptionalBreak>"
811811
},
812812
"otherResults": {
813-
"clickToShowThem": "We found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
814-
"clickToShowMore": "We also found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
815-
"clickToHide": "The results from other <strong>Networks</strong> are shown below. Click to hide those results."
813+
"clickToShowThem": "We found {{ countLabel }} on other Networks. Click to open these results.",
814+
"clickToShowMore": "We also found {{ countLabel }} on other Networks. Click to open these results.",
815+
"clickToHide": "The results from other Networks are shown below. Click to hide those results."
816816
},
817817
"results": {
818818
"accounts": {
@@ -853,10 +853,10 @@
853853
"moreCount_other": "{{ count }} more results"
854854
},
855855
"searchBtnText": "Search",
856-
"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>.",
857-
"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>.",
858-
"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>.",
859-
"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>."
856+
"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>.",
857+
"searchSuggestionsForConsensus": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink></OptionalBreak>.",
858+
"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>.",
859+
"suggestSearchForConsensus": "Use search to find what you are looking for, i.e. <OptionalBreak><BlockLink>Block</BlockLink>, <TransactionLink>Transaction</TransactionLink>, <AccountLink>Address</AccountLink></OptionalBreak>."
860860
},
861861
"tableSearch": {
862862
"error": {

0 commit comments

Comments
 (0)