Merge pull request #203 from blockscout/txs-fix

txs fix

ui/txs/TxAdditionalInfo.tsx

@@ -5,6 +5,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 
 import type { txs } from 'data/txs';
 import useNetwork from 'lib/hooks/useNetwork';
+import { nbsp } from 'lib/html-entities';
 import useLink from 'lib/link/useLink';
 import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization';
@@ -23,6 +24,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
     color: 'gray.500',
     fontWeight: 600,
     marginBottom: 3,
+    fontSize: 'sm',
   };
 
   const link = useLink();
@@ -33,7 +35,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
       <Box { ...sectionProps } mb={ 4 }>
         <Text { ...sectionTitleProps }>Transaction fee</Text>
         <Flex>
-          <Text>{ tx.fee.value } { selectedNetwork?.currency }</Text>
+          <Text>{ tx.fee.value }{ nbsp }{ selectedNetwork?.currency }</Text>
           <Text variant="secondary" ml={ 1 }>(${ tx.fee.value_usd.toFixed(2) })</Text>
         </Flex>
       </Box>
@@ -66,7 +68,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
         <Box>
           <Text as="span" fontWeight="500">Txn type: </Text>
           <Text fontWeight="600" as="span">{ tx.type.value }</Text>
-          <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
+          <Text fontWeight="400" as="span" ml={ 1 } color="gray.500">({ tx.type.eip })</Text>
         </Box>
         <Box>
           <Text as="span" fontWeight="500">Nonce: </Text>
@@ -77,7 +79,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
           <Text fontWeight="600" as="span">{ tx.position }</Text>
         </Box>
       </Box>
-      <Link href={ link('tx_index', { id: tx.hash }) }>More details</Link>
+      <Link fontSize="sm" href={ link('tx_index', { id: tx.hash }) }>More details</Link>
     </>
   );
 };

ui/txs/TxAdditionalInfoButton.tsx

@@ -13,7 +13,7 @@ const TxAdditionalInfoButton = ({ isOpen, onClick }: {isOpen?: boolean; onClick?
   const infoColor = useColorModeValue('blue.600', 'blue.300');
 
   return (
-    <Center ref={ ref } background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="30px" h="30px" onClick={ onClick }>
+    <Center ref={ ref } background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="24px" h="24px" onClick={ onClick }>
       <Icon
         as={ infoIcon }
         boxSize={ 5 }

ui/txs/TxsListItem.tsx

@@ -63,7 +63,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
               />
             </Address>
           </Flex>
-          <Text variant="secondary" fontWeight="400">{ dayjs(tx.timestamp).fromNow() }</Text>
+          <Text variant="secondary" fontWeight="400" fontSize="sm">{ dayjs(tx.timestamp).fromNow() }</Text>
         </Flex>
         <Flex mt={ 3 }>
           <Text as="span" whiteSpace="pre">Method </Text>

ui/txs/TxsTable.tsx

@@ -28,9 +28,9 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
             <Th width="18%">Txn hash</Th>
             <Th width="15%">Method</Th>
             <Th width="11%">Block</Th>
-            <Th width={{ xl: '128px', base: '58px' }}>From</Th>
+            <Th width={{ xl: '128px', base: '66px' }}>From</Th>
             <Th width={{ xl: '36px', base: '0' }}></Th>
-            <Th width={{ xl: '128px', base: '58px' }}>To</Th>
+            <Th width={{ xl: '128px', base: '66px' }}>To</Th>
             <Th width="18%" isNumeric>
               <Link onClick={ sort('val') } display="flex" justifyContent="end">
                 { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }