Skip to content

F
frontend
Commit 1ff9a2dc authored by tom's avatar tom
Browse files
Options

change icon sizes in search suggest

parent 5a0f227c
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 61 deletions
icons/publictags.svg
View file @ 1ff9a2dc
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<path d="M13.61 25a2.262 2.262 0 0 1-1.615-.665l-6.318-6.318a2.265 2.265 0 0 1 0-3.23l8.456-8.457c.76-.76 2.138-1.33 3.183-1.33h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 1.045-.57 2.423-1.33 3.183l-8.456 8.456A2.262 2.262 0 0 1 13.61 25Zm3.706-18.575c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.187l6.318 6.319c.332.332.902.332 1.188 0l8.456-8.456c.475-.475.902-1.473.902-2.185V7.232a.852.852 0 0 0-.855-.855h-5.368v.047Z" stroke="currentColor" stroke-width=".5"/>
<path d="M19.311 13.504a2.808 2.808 0 0 1-2.803-2.803 2.808 2.808 0 0 1 2.803-2.803 2.808 2.808 0 0 1 2.803 2.803 2.808 2.808 0 0 1-2.803 2.803Zm0-4.276a1.48 1.48 0 0 0-1.473 1.473 1.48 1.48 0 0 0 1.473 1.473 1.48 1.48 0 0 0 1.473-1.473 1.48 1.48 0 0 0-1.473-1.473Z" stroke="currentColor" stroke-width=".5"/>
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.094 19.3c-.58 0-1.116-.223-1.517-.625l-5.936-5.94a2.13 2.13 0 0 1 0-3.036L9.585 1.75c.714-.714 2.008-1.25 2.99-1.25h5.088c1.16 0 2.142.982 2.142 2.143v5.091c0 .983-.536 2.278-1.25 2.992l-7.944 7.949a2.125 2.125 0 0 1-1.517.625Zm3.481-17.46c-.625 0-1.607.402-2.053.848l-7.944 7.949a.782.782 0 0 0 0 1.116l5.936 5.94c.312.312.848.312 1.115 0l7.944-7.95c.447-.446.848-1.384.848-2.053V2.599a.8.8 0 0 0-.803-.804h-5.043v.045Z" fill="currentColor"/>
<path d="M14.45 8.493a2.639 2.639 0 0 1-2.634-2.634 2.639 2.639 0 0 1 2.633-2.635 2.639 2.639 0 0 1 2.634 2.635 2.639 2.639 0 0 1-2.633 2.634Zm0-4.019a1.39 1.39 0 0 0-1.384 1.385c0 .759.625 1.384 1.383 1.384a1.39 1.39 0 0 0 1.384-1.384 1.39 1.39 0 0 0-1.383-1.385Z" fill="currentColor"/>
</svg>
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
View file @ 1ff9a2dc
import { Box, Text, Grid, Flex, Icon } from '@chakra-ui/react';
import { Box, Text, Grid, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultAddressOrContract } from 'types/api/search';
import iconSuccess from 'icons/status/success.svg';
import highlightText from 'lib/highlightText';
import AddressIcon from 'ui/shared/address/AddressIcon';
import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
interface Props {
......@@ -16,7 +15,11 @@ interface Props {
const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const icon = <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} flexShrink={ 0 }/>;
const icon = (
<AddressEntity.Icon
address={{ hash: data.address, is_contract: data.type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
/>
);
const name = data.name && (
<Text
variant="secondary"
......@@ -27,26 +30,22 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
);
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
if (isMobile) {
return (
<>
<Grid templateColumns="24px 1fr" gap={ 2 }>
<Grid templateColumns="24px 1fr">
{ icon }
<Flex alignItems="center" overflow="hidden">
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
</Box>
{ isContractVerified }
</Flex>
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
</Box>
</Grid>
{ name }
</>
......@@ -54,20 +53,19 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
}
return (
<Flex alignItems="center" gap={ 2 }>
<Flex alignItems="center">
{ icon }
<Flex alignItems="center" w="450px" overflow="hidden">
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
</Box>
{ isContractVerified }
</Flex>
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
w="450px"
mr={ 2 }
>
{ address }
</Box>
{ name }
</Flex>
);
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
View file @ 1ff9a2dc
......@@ -21,7 +21,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
const logo = (
<Image
borderRadius="base"
boxSize={ 6 }
boxSize={ 5 }
src={ useColorModeValue(data.logo, data.logoDarkMode || data.logo) }
alt={ `${ data.title } app icon` }
/>
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
View file @ 1ff9a2dc
import { Text, Icon, Flex, Grid } from '@chakra-ui/react';
import { Text, Flex, Grid } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultBlock } from 'types/api/search';
import blockIcon from 'icons/block.svg';
import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
interface Props {
......@@ -15,7 +15,8 @@ interface Props {
}
const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
// const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
const icon = <BlockEntity.Icon/>;
const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
const blockNumber = (
<Text
......@@ -43,7 +44,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
if (isMobile) {
return (
<>
<Flex alignItems="center" gap={ 2 }>
<Flex alignItems="center">
{ icon }
{ blockNumber }
</Flex>
......@@ -54,9 +55,11 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
}
return (
<Grid templateColumns="24px 200px minmax(auto, max-content) auto" gap={ 2 }>
{ icon }
{ blockNumber }
<Grid templateColumns="228px minmax(auto, max-content) auto" gap={ 2 }>
<Flex alignItems="center">
{ icon }
{ blockNumber }
</Flex>
{ hash }
<Text variant="secondary" textAlign="end">{ date }</Text>
</Grid>
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
View file @ 1ff9a2dc
......@@ -15,7 +15,7 @@ interface Props {
}
const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
const icon = <Icon as={ labelIcon } boxSize={ 6 } color="gray.500"/>;
const icon = <Icon as={ labelIcon } boxSize={ 5 } color="gray.500"/>;
const name = (
<Text
......@@ -56,9 +56,11 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
}
return (
<Grid alignItems="center" gridTemplateColumns="24px 200px max-content 24px" gap={ 2 }>
{ icon }
{ name }
<Grid alignItems="center" gridTemplateColumns="228px max-content 24px" gap={ 2 }>
<Flex alignItems="center" gap={ 2 }>
{ icon }
{ name }
</Flex>
<Flex alignItems="center" overflow="hidden" gap={ 1 }>
{ address }
{ isContractVerified }
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
View file @ 1ff9a2dc
......@@ -5,8 +5,8 @@ import type { SearchResultToken } from 'types/api/search';
import iconSuccess from 'icons/status/success.svg';
import highlightText from 'lib/highlightText';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import TokenLogo from 'ui/shared/TokenLogo';
interface Props {
data: SearchResultToken;
......@@ -15,7 +15,7 @@ interface Props {
}
const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
const icon = <TokenLogo boxSize={ 6 } data={ data }/>;
const icon = <TokenEntity.Icon token={ data }/>;
const name = (
<Text
fontWeight={ 700 }
......@@ -47,7 +47,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
return (
<>
<Flex alignItems="center" gap={ 2 }>
<Flex alignItems="center">
{ icon }
{ name }
</Flex>
......@@ -63,9 +63,11 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
}
return (
<Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
{ icon }
{ name }
<Grid templateColumns="228px 1fr auto" gap={ 2 }>
<Flex alignItems="center">
{ icon }
{ name }
</Flex>
<Flex alignItems="center" overflow="hidden">
{ address }
{ contractVerifiedIcon }
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
View file @ 1ff9a2dc
import { chakra, Grid, Text, Flex, Icon } from '@chakra-ui/react';
import { chakra, Text, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultTx } from 'types/api/search';
import txIcon from 'icons/transactions.svg';
import dayjs from 'lib/date/dayjs';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
interface Props {
......@@ -14,7 +14,7 @@ interface Props {
}
const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
const icon = <Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>;
const icon = <TxEntity.Icon/>;
const hash = (
<chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
<HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
......@@ -25,7 +25,7 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
if (isMobile) {
return (
<>
<Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
<Flex alignItems="center">
{ icon }
{ hash }
</Flex>
......@@ -35,11 +35,13 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
}
return (
<Grid templateColumns="24px minmax(auto, max-content) auto" gap={ 2 }>
{ icon }
{ hash }
<Text variant="secondary" textAlign="end">{ date }</Text>
</Grid>
<Flex columnGap={ 2 }>
<Flex alignItems="center" minW={ 0 }>
{ icon }
{ hash }
</Flex>
<Text variant="secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
</Flex>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment