fix2

ui/shared/Separator.tsx

-import { Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const Separator = () => {
-  const bgColor = useColorModeValue('gray.700', 'gray.200');
-  return (
-    <Box width="1px" background={ bgColor } height="20px" mx={ 3 }/>
-  );
-};
-
-export default Separator;

ui/txs/TxAdditionalInfo.tsx

@@ -5,11 +5,10 @@ import type ArrayElement from 'types/utils/ArrayElement';
 
 import type { txs } from 'data/txs';
 import useLink from 'lib/link/useLink';
-import Separator from 'ui/shared/Separator';
+import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization';
 
 const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
-
   const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
   const sectionProps = {
     borderBottom: '1px solid',
@@ -39,7 +38,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
         <Text { ...sectionTitleProps }>Gas limit & usage by transaction</Text>
         <Flex>
           <Text>{ tx.gas_used.toLocaleString('en') }</Text>
-          <Separator/>
+          <TextSeparator/>
           <Text>{ tx.gas_limit.toLocaleString('en') }</Text>
           <Utilization ml={ 4 } value={ tx.gas_used / tx.gas_limit }/>
         </Flex>

ui/txs/TxsContent.tsx

 import { Box, HStack } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import type { Sort } from 'types/client/txs-sort';
+
 import { txs } from 'data/txs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import FilterButton from 'ui/shared/FilterButton';
@@ -11,8 +13,6 @@ import SortButton from 'ui/shared/SortButton';
 import TxsListItem from './TxsListItem';
 import TxsTable from './TxsTable';
 
-type Sort = 'val-desc' | 'val-asc' | 'fee-desc' | 'fee-asc' | undefined;
-
 type Props = {
   isPending?: boolean;
 }

ui/txs/TxsListItem.tsx

@@ -31,11 +31,12 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const link = useLink();
 
   return (
     <>
-      <Box width="100%" borderBottom="1px solid" borderColor="blackAlpha.200" _first={{ borderTop: '1px solid', borderColor: 'blackAlpha.200' }}>
+      <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor: { borderColor } }}>
         <Flex justifyContent="space-between" mt={ 4 }>
           <HStack>
             <TxType type={ tx.txType }/>

ui/txs/TxsTable.tsx

-import { Link, Table, Thead, Tbody, Tr, Th, TableContainer, useBreakpointValue, Icon } from '@chakra-ui/react';
+import { Link, Table, Thead, Tbody, Tr, Th, TableContainer, Icon } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Sort } from 'types/client/txs-sort';
+
 import type { txs as data } from 'data/txs';
 import rightArrowIcon from 'icons/arrows/east.svg';
 
@@ -8,8 +10,6 @@ import TxsTableItem from './TxsTableItem';
 
 const CURRENCY = 'xDAI';
 
-export type Sort = 'val-desc' | 'val-asc' | 'fee-desc' | 'fee-asc' | undefined;
-
 type Props = {
   txs: typeof data;
   sort: (field: 'val' | 'fee') => () => void;
@@ -17,8 +17,6 @@ type Props = {
 }
 
 const TxsTable = ({ txs, sort, sorting }: Props) => {
-  const isLargeScreen = useBreakpointValue({ base: false, xl: true });
-
   return (
     <TableContainer width="100%" mt={ 6 }>
       <Table variant="simple" minWidth="810px" size="xs">
@@ -29,9 +27,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={ isLargeScreen ? '128px' : '58px' }>From</Th>
-            <Th width={ isLargeScreen ? '36px' : '0' }></Th>
-            <Th width={ isLargeScreen ? '128px' : '58px' }>To</Th>
+            <Th width={{ xl: '128px', base: '58px' }}>From</Th>
+            <Th width={{ xl: '36px', base: '0' }}></Th>
+            <Th width={{ xl: '128px', base: '58px' }}>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)"/> }