design fixes, pt.1

toolkit/theme/foundations/semanticTokens.ts

@@ -149,8 +149,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     tooltip: {
       DEFAULT: {
-        bg: { value: { _light: '{colors.gray.700}', _dark: '{colors.gray.200}' } },
-        fg: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
+        bg: { value: '{colors.gray.900}' },
+        fg: { value: '{colors.white}' },
       },
       navigation: {
         bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
@@ -431,7 +431,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       error: { value: '{colors.red.500}' },
     },
     border: {
-      divider: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
+      divider: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.100}' } },
       error: { value: '{colors.red.500}' },
     },
     icon: {

toolkit/theme/recipes/table.recipe.ts

@@ -40,6 +40,7 @@ export const recipe = defineSlotRecipe({
         },
         cell: {
           borderBottomWidth: '1px',
+          borderColor: 'border.divider',
         },
         row: {
           bg: 'bg',

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -29,10 +29,10 @@ const AddressCoinBalanceListItem = (props: Props) => {
         </Skeleton>
         <Skeleton loading={ props.isLoading }>
           <Stat.Root flexGrow="0" positive={ isPositiveDelta } size="sm">
-            { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
             <Stat.ValueText fontWeight={ 600 }>
               { deltaBn.dp(8).toFormat() }
             </Stat.ValueText>
+            { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
           </Stat.Root>
         </Skeleton>
       </Flex>

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -58,10 +58,10 @@ const AddressCoinBalanceTableItem = (props: Props) => {
       <TableCell isNumeric display="flex" justifyContent="end">
         <Skeleton loading={ props.isLoading }>
           <Stat.Root flexGrow="0" size="sm" positive={ isPositiveDelta }>
-            { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
             <Stat.ValueText fontWeight={ 600 }>
               { deltaBn.dp(8).toFormat() }
             </Stat.ValueText>
+            { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
           </Stat.Root>
         </Skeleton>
       </TableCell>

ui/address/contract/methods/ContractAbi.tsx

@@ -57,11 +57,11 @@ const ContractAbi = ({ abi, addressHash, sourceAddress, tab, visibleItems }: Pro
       <Flex mb={ 3 }>
         <Box fontWeight={ 500 } mr="auto">Contract information</Box>
         { abi.length > 1 && (
-          <Link onClick={ handleExpandAll }>
+          <Link onClick={ handleExpandAll } variant="secondary">
             { expandedSections.length === abi.length ? 'Collapse' : 'Expand' } all
           </Link>
         ) }
-        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
+        <Link onClick={ handleReset } ml={ 3 } variant="secondary">Reset</Link>
       </Flex>
       <AccordionRoot multiple lazyMount position="relative" onValueChange={ handleAccordionStateChange } value={ expandedSections }>
         { abi.map((item, index) => (

ui/address/contract/methods/ContractAbiItem.tsx

@@ -70,7 +70,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
           alignItems="center"
           columnGap={ 2 }
         >
-          <CopyToClipboard text={ url } type="link" ml={ 0 } color="text.secondary" as="div"/>
+          <CopyToClipboard text={ url } type="link" ml={ 0 } as="div"/>
           <Box fontWeight={ 500 } display="flex" alignItems="center">
             { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
             { data.type === 'fallback' && (

ui/address/details/AddressMultichainButton.tsx

@@ -47,6 +47,7 @@ const AddressMultichainButton = ({ item, addressHash, onClick, hasSingleProvider
         textStyle="sm"
         fontWeight="medium"
         onClick={ onClick }
+        noIcon={ !hasSingleProvider }
       >
         { buttonContent }
       </Link>

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -96,7 +96,7 @@ const ContractVerificationFieldMethod = ({ methods }: Props) => {
         <Hint
           label={ tooltipContent }
           verticalAlign="text-bottom"
-          tooltipProps={{ interactive: true, contentProps: { textAlign: 'left', className: 'light' } }}
+          tooltipProps={{ interactive: true, contentProps: { textAlign: 'left' } }}
         />
       </Box>
       <FormFieldSelect<FormFields, 'method'>

ui/home/LatestTxsItem.tsx

@@ -40,10 +40,9 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       gridGap={ 8 }
       width="100%"
       minW="700px"
-      borderTop="1px solid"
+      borderBottom="1px solid"
       borderColor="border.divider"
       p={ 4 }
-      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       display={{ base: 'none', lg: 'grid' }}
     >
       <Flex overflow="hidden" w="100%">

ui/home/LatestTxsItemMobile.tsx

@@ -32,10 +32,9 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
   return (
     <Box
       width="100%"
-      borderTop="1px solid"
+      borderBottom="1px solid"
       borderColor="border.divider"
       py={ 4 }
-      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       display={{ base: 'block', lg: 'none' }}
     >
       <Flex justifyContent="space-between">

ui/home/latestDeposits/LatestDeposits.tsx

@@ -138,11 +138,10 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
   return (
     <Box
       width="100%"
-      borderTop="1px solid"
+      borderBottom="1px solid"
       borderColor="border.divider"
       py={ 4 }
       px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       textStyle="sm"
     >
       { content }

ui/marketplace/MarketplaceAppModal.tsx

@@ -328,6 +328,7 @@ const MarketplaceAppModal = ({
                 alignItems="center"
                 justifyContent="center"
                 external
+                noIcon
                 flexShrink={ 0 }
               >
                 <IconSvg

ui/pages/Address.tsx

@@ -396,7 +396,6 @@ const AddressPageContent = () => {
         noLink
         isSafeAddress={ isSafeAddress }
         icon={{ color: isSafeAddress ? { _light: 'black', _dark: 'white' } : undefined }}
-        mr={ 4 }
       />
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
         <AddressAddToWallet token={ addressQuery.data.token } variant="button"/> }

ui/pools/PoolsListItem.tsx

@@ -27,7 +27,7 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Contract</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/>
+        <AddressEntity address={{ hash: item.contract_address }} noIcon linkVariant="secondary" isLoading={ isLoading }/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Liquidity</ListItemMobileGrid.Label>
@@ -41,7 +41,7 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Value>
         <Skeleton loading={ isLoading }>
           { externalLinks.map((link) => (
-            <Link external href={ link.url } key={ link.url } display="inline-flex">
+            <Link external noIcon href={ link.url } key={ link.url } display="inline-flex">
               <Image src={ link.image } alt={ link.title } boxSize={ 5 } mr={ 2 }/>
               { link.title }
             </Link>

ui/pools/PoolsTableItem.tsx

@@ -42,6 +42,7 @@ const PoolsTableItem = ({
               noIcon
               isLoading={ isLoading }
               truncation="constant_long"
+              linkVariant="secondary"
             />
           </Box>
         </Flex>
@@ -59,7 +60,7 @@ const PoolsTableItem = ({
           { externalLinks.map((link) => (
             <Tooltip content={ link.title } key={ link.url }>
               <Box display="inline-block">
-                <Link external href={ link.url } display="inline-flex">
+                <Link external noIcon href={ link.url } display="inline-flex">
                   <Image src={ link.image } alt={ link.title } boxSize={ 5 }/>
                 </Link>
               </Box>

ui/shared/entities/base/components.tsx

@@ -2,6 +2,7 @@ import { chakra, Flex } from '@chakra-ui/react';
 import type { IconProps } from '@chakra-ui/react';
 import React from 'react';
 
+import type { LinkProps } from 'toolkit/chakra/link';
 import { Link as LinkToolkit } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import type { Props as CopyToClipboardProps } from 'ui/shared/CopyToClipboard';
@@ -32,6 +33,7 @@ export interface EntityBaseProps {
   target?: React.HTMLAttributeAnchorTarget;
   truncation?: Truncation;
   variant?: 'content' | 'heading' | 'subheading';
+  linkVariant?: LinkProps['variant'];
 }
 
 export interface ContainerBaseProps extends Pick<EntityBaseProps, 'className'> {
@@ -55,9 +57,10 @@ const Container = chakra(({ className, children, ...props }: ContainerBaseProps)
 
 export interface LinkBaseProps extends Pick<EntityBaseProps, 'className' | 'onClick' | 'isLoading' | 'isExternal' | 'href' | 'noLink' | 'query'> {
   children: React.ReactNode;
+  variant?: LinkProps['variant'];
 }
 
-const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }: LinkBaseProps) => {
+const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink, variant }: LinkBaseProps) => {
   const styles = {
     display: 'inline-flex',
     alignItems: 'center',
@@ -75,6 +78,7 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
       loading={ isLoading }
       external={ isExternal }
       onClick={ onClick }
+      variant={ variant }
     >
       { children }
     </LinkToolkit>

ui/shared/entities/base/utils.ts

@@ -29,13 +29,14 @@ export function getContentProps(variant: EntityBaseProps['variant'] = 'content')
 }
 
 export function distributeEntityProps<Props extends EntityBaseProps>(props: Props) {
-  const { className, onClick, icon, ...restProps } = props;
+  const { className, onClick, icon, linkVariant, ...mainProps } = props;
+  const { variant, ...restProps } = mainProps;
 
   return {
     container: { className },
-    icon: { ...restProps, ...icon },
-    link: { ...restProps, onClick },
-    content: restProps,
+    icon: { ...mainProps, ...icon },
+    link: { ...restProps, variant: linkVariant, onClick },
+    content: mainProps,
     symbol: restProps,
     copy: restProps,
   };

ui/shared/entities/tx/TxEntity.tsx

@@ -64,13 +64,12 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 
 const TxEntity = (props: EntityProps) => {
   const partsProps = distributeEntityProps(props);
+  const content = <Content { ...partsProps.content }/>;
 
   return (
     <Container { ...partsProps.container }>
       <Icon { ...partsProps.icon }/>
-      <Link { ...partsProps.link }>
-        <Content { ...partsProps.content }/>
-      </Link>
+      { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
       <Copy { ...partsProps.copy }/>
     </Container>
   );

ui/shared/filters/FilterButton.tsx

@@ -37,6 +37,7 @@ const FilterButton = ({ isLoading, appliedFiltersNum, ...rest }: Props, ref: Rea
       selected={ Boolean(appliedFiltersNum) }
       flexShrink={ 0 }
       pointerEvents="all"
+      px={{ base: 1, lg: 3 }}
       { ...rest }
     >
       <IconSvg name="filter" boxSize={ 5 }/>

ui/shared/gas/GasInfoTooltip.tsx

@@ -71,7 +71,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
       lazyMount
       interactive
       showArrow={ false }
-      contentProps={{ p: 4, borderRadius: 'md', className: 'light' }}
+      contentProps={{ p: 4, borderRadius: 'md' }}
     >
       { children }
     </Tooltip>

ui/shared/solidityscanReport/SolidityscanReportDetails.tsx

@@ -44,7 +44,7 @@ const SolidityScanReportItem = ({ item, vulnerabilities, vulnerabilitiesCount }:
         <Text color={ vulnerability > 0 ? 'text' : { _light: 'gray.400', _dark: 'gray.500' } }>{ vulnerabilities[item.id] }</Text>
       </Flex>
       <Box bg={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }} h="10px" borderRadius="8px">
-        <Box bg={ item.color } w={ vulnerability / vulnerabilitiesCount } h="10px" borderRadius="8px"/>
+        <Box bg={ item.color } w={ `${ vulnerability / vulnerabilitiesCount * 100 }%` } h="10px" borderRadius="8px"/>
       </Box>
     </>
   );

ui/showcases/Clipboard.tsx

@@ -18,7 +18,7 @@ const ClipboardShowcase = () => {
             <CopyToClipboard text="Hello, world!" type="link"/>
           </Sample>
           <Sample label="type: share">
-            <CopyToClipboard text="Hello, world!" type="share" boxSize={ 4 }/>
+            <CopyToClipboard text="Hello, world!" type="share"/>
           </Sample>
         </SamplesStack>
       </Section>

ui/snippets/searchBar/SearchBar.tsx

@@ -29,10 +29,11 @@ type Props = {
 const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
 const SearchBar = ({ isHomepage }: Props) => {
-  const { open, onClose, onOpen } = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const menuWidth = React.useRef<number>(0);
+
+  const { open, onClose, onOpen } = useDisclosure();
   const isMobile = useIsMobile();
   const router = useRouter();
 
@@ -93,6 +94,15 @@ const SearchBar = ({ isHomepage }: Props) => {
     onClose();
   }, [ router.pathname, searchTerm, onClose ]);
 
+  const handleBlur = React.useCallback((event: React.FocusEvent<HTMLFormElement>) => {
+    const isFocusInMenu = menuRef.current?.contains(event.relatedTarget);
+    const isFocusInInput = inputRef.current?.contains(event.relatedTarget);
+    if (!isFocusInMenu && !isFocusInInput) {
+      onClose();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ onClose ]);
+
   const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
@@ -137,6 +147,7 @@ const SearchBar = ({ isHomepage }: Props) => {
             onSubmit={ handleSubmit }
             onFocus={ handleFocus }
             onHide={ handelHide }
+            onBlur={ handleBlur }
             onClear={ handleClear }
             isHomepage={ isHomepage }
             value={ searchTerm }

ui/tokens/TokensListItem.tsx

@@ -74,6 +74,7 @@ const TokensTableItem = ({
           address={{ hash: address, filecoin: { robust: filecoinRobustAddress } }}
           isLoading={ isLoading }
           truncation="constant"
+          linkVariant="secondary"
           noIcon
         />
         <AddressAddToWallet token={ token } isLoading={ isLoading }/>

ui/tokens/TokensTableItem.tsx

@@ -86,6 +86,7 @@ const TokensTableItem = ({
                 noIcon
                 textStyle="sm"
                 fontWeight={ 500 }
+                linkVariant="secondary"
               />
               <AddressAddToWallet
                 token={ token }

ui/verifiedContracts/VerifiedContractsListItem.tsx

@@ -54,7 +54,7 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
           noIcon
           truncation="constant"
           ml="auto"
-          color="text.secondary"
+          linkVariant="secondary"
           flexShrink={ 0 }
         />
       </Flex>

ui/verifiedContracts/VerifiedContractsTableItem.tsx

@@ -55,7 +55,7 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
           truncation="constant"
           my={ 1 }
           ml={ 7 }
-          color="text.secondary"
+          linkVariant="secondary"
           w="fit-content"
         />
       </TableCell>