Table: table header left/right hor padding

theme/components/Table.ts

@@ -30,39 +30,30 @@ const variantSimple = definePartsStyle((props) => {
 });
 
 const sizes = {
-  md: definePartsStyle({
-    th: {
-      px: 4,
-      fontSize: 'sm',
-    },
-    td: {
-      p: 4,
-    },
-  }),
   sm: definePartsStyle({
     th: {
-      px: '10px',
+      px: '6px',
       py: '10px',
       fontSize: 'sm',
+      _first: {
+        pl: 3,
       },
-    td: {
-      px: '10px',
-      py: 4,
-      fontSize: 'sm',
-      fontWeight: 500,
+      _last: {
+        pr: 3,
       },
-  }),
-  xs: definePartsStyle({
-    th: {
-      px: '6px',
-      py: '10px',
-      fontSize: 'sm',
     },
     td: {
       px: '6px',
       py: 4,
       fontSize: 'sm',
       fontWeight: 500,
+      lineHeight: 5,
+      _first: {
+        pl: 3,
+      },
+      _last: {
+        pr: 3,
+      },
     },
   }),
 };
@@ -104,6 +95,10 @@ const Table = defineMultiStyleConfig({
   baseStyle,
   sizes,
   variants,
+  defaultProps: {
+    size: 'sm',
+    variant: 'simple',
+  },
 });
 
 export default Table;

ui/address/AddressAccountHistory.tsx

@@ -87,7 +87,7 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
       </Hide>
 
       <Show above="lg" ssr={ false }>
-        <Table variant="simple" >
+        <Table>
           <TheadSticky top={ 75 }>
             <Tr>
               <Th width="120px">

ui/address/AddressBlocksValidated.tsx

@@ -105,7 +105,7 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
   const content = query.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+        <Table style={{ tableLayout: 'auto' }}>
           <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th>Block</Th>

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -26,7 +26,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
   const content = query.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
+        <Table>
           <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="20%">Block</Th>

ui/address/epochRewards/AddressEpochRewardsTable.tsx

@@ -15,7 +15,7 @@ import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
 
 const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px" style={{ tableLayout: 'auto' }}>
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Block</Th>

ui/address/internals/AddressIntTxsTable.tsx

@@ -18,7 +18,7 @@ interface Props {
 const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table>
         <Thead top={ 68 }>
           <Tr>
             <Th width="15%">Parent txn hash</Th>

ui/address/mud/AddressMudRecordValues.tsx

@@ -26,9 +26,9 @@ const AddressMudRecordValues = ({ data }: Props) => {
       {
         data?.schema.value_names.map((valName, index) => (
           <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
-            <Td fontSize="sm" w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
-            <Td fontSize="sm" w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
-            <Td fontSize="sm" wordBreak="break-word" py={ 0 } pb={ 4 }>
+            <Td fontWeight={ 400 } w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
+            <Td fontWeight={ 400 } w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
+            <Td fontWeight={ 400 } wordBreak="break-word" py={ 0 } pb={ 4 }>
               <Box>
                 { getValueString(data.record.decoded[valName]) }
               </Box>

ui/address/mud/AddressMudRecordsTable.tsx

@@ -140,7 +140,7 @@ const AddressMudRecordsTable = ({
   return (
     // can't implement both horizontal table scroll and sticky header
     <Box maxW="100%" overflowX={ hasHorizontalScroll ? 'scroll' : 'unset' } whiteSpace="nowrap" ref={ tableRef }>
-      <Table variant="simple" size="sm" style={{ tableLayout: 'fixed' }}>
+      <Table style={{ tableLayout: 'fixed' }}>
         <Thead top={ hasHorizontalScroll ? 0 : top } display={ hasHorizontalScroll ? 'table' : 'table-header-group' } w="100%">
           <Tr >
             { keys.map((keyName, index) => {

ui/address/mud/AddressMudTablesTable.tsx

@@ -18,7 +18,7 @@ type Props = {
 //sorry for the naming
 const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+    <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th width="24px"></Th>

ui/address/tokens/ERC20TokensTable.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const ERC20TokensTable = ({ data, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="30%">Asset</Th>

ui/addresses/AddressesTable.tsx

@@ -21,7 +21,7 @@ interface Props {
 const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }: Props) => {
   const hasPercentage = !totalSupply.eq(ZERO);
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>

ui/addressesLabelSearch/AddressesLabelSearchTable.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 const AddressesLabelSearchTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="70%">Address</Th>

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const ApiKeyTable = ({ data, isLoading, onDeleteClick, onEditClick, limit }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>{ `API key token (limit ${ limit } keys)` }</Th>

ui/block/epochRewards/BlockEpochElectionRewards.tsx

@@ -16,7 +16,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
     <Box mt={ 8 }>
       <Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+        <Table style={{ tableLayout: 'auto' }}>
           <Thead>
             <Tr>
               <Th width="24px"/>

ui/blocks/BlocksTable.tsx

@@ -40,7 +40,7 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
+      <Table minWidth="1040px" fontWeight={ 500 }>
         <Thead top={ top }>
           <Tr>
             <Th width="150px">Block</Th>

ui/customAbi/CustomAbiTable/CustomAbiTable.tsx

@@ -20,7 +20,7 @@ interface Props {
 
 const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>ABI for Smart contract address (0x...)</Th>

ui/deposits/optimisticL2/OptimisticDepositsTable.tsx

@@ -15,7 +15,7 @@ import OptimisticDepositsTableItem from './OptimisticDepositsTableItem';
 
 const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block No</Th>

ui/deposits/shibarium/DepositsTable.tsx

@@ -15,7 +15,7 @@ import DepositsTableItem from './DepositsTableItem';
 
 const DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block No</Th>

ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx

@@ -15,7 +15,7 @@ import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
 
 const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block</Th>

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>Index</Th>

ui/messages/ArbitrumL2MessagesTable.tsx

@@ -17,7 +17,7 @@ import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
 
 const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           { direction === 'to-rollup' && <Th>L1 block</Th> }

ui/mudWorlds/MudWorldsTable.tsx

@@ -16,7 +16,7 @@ type Props = {
 
 const MudWorldsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+    <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Address</Th>

ui/nameDomain/history/NameDomainHistoryTable.tsx

@@ -22,7 +22,7 @@ const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ 0 }>
         <Tr>
           <Th width="25%">Txn hash</Th>

ui/nameDomains/NameDomainsTable.tsx

@@ -21,7 +21,7 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.toLowerCase().includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="25%">Domain</Th>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="900px">
+    <Table minW="900px">
       <Thead top={ top }>
         <Tr>
           <Th width="160px">L2 output index</Th>

ui/pages/SearchResults.tsx

@@ -148,7 +148,7 @@ const SearchResultsPageContent = () => {
           )) }
         </Show>
         <Hide below="lg" ssr={ false }>
-          <Table variant="simple" size="md" fontWeight={ 500 }>
+          <Table fontWeight={ 500 }>
             <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
               <Tr>
                 <Th width="30%">Search result</Th>

ui/privateTags/AddressTagTable/AddressTagTable.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="60%">Address</Th>

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="75%">Transaction</Th>

ui/shared/SocketNewItemsNotice.tsx

@@ -88,7 +88,7 @@ export const Desktop = ({ ...props }: Props) => {
       my={ props.isLoading ? '6px' : 0 }
       { ...props }
     >
-      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 }>{ content }</Td></Tr> }
+      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</Td></Tr> }
     </SocketNewItemsNotice>
   );
 };

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -34,7 +34,7 @@ const TokenTransferTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }

ui/token/TokenHolders/TokenHoldersTable.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" layout="auto">
+    <Table layout="auto">
       <Thead top={ top }>
         <Tr>
           <Th>Holder</Th>

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -27,7 +27,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
             <Th width="280px">Txn hash</Th>

ui/tx/TxAssetFlows.tsx

@@ -82,7 +82,7 @@ export default function TxAssetFlows(props: FlowViewProps) {
       </Hide>
 
       <Show above="lg">
-        <Table variant="simple" size="sm">
+        <Table>
           <TheadSticky top={ 75 }>
             <Tr>
               <Th>

ui/tx/blobs/TxBlobsTable.tsx

@@ -16,7 +16,7 @@ interface Props {
 const TxInternalsTable = ({ data, top, isLoading }: Props) => {
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="60%">Blob hash</Th>

ui/tx/internals/TxInternalsTable.tsx

@@ -23,7 +23,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table>
         <Thead top={ top }>
           <Tr>
             <Th width="28%">Type</Th>

ui/tx/state/TxStateTable.tsx

@@ -21,7 +21,7 @@ interface Props {
 const TxStateTable = ({ data, isLoading, top }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1000px" size="sm" w="100%">
+      <Table minWidth="1000px" w="100%">
         <Thead top={ top }>
           <Tr>
             <Th width="140px">Type</Th>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px" style={{ tableLayout: 'auto' }}>
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Batch #</Th>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="850px" layout="auto">
+    <Table minW="850px" layout="auto">
       <Thead top={ top }>
         <Tr>
           <Th>Batch ID</Th>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px">
+    <Table minW="1000px">
       <Thead top={ top }>
         <Tr>
           <Th width="33%">Batch #</Th>

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px">
+    <Table minW="1000px">
       <Thead top={ top }>
         <Tr>
           <Th width="40%">Batch #</Th>

ui/txs/TxsTable.tsx

@@ -49,7 +49,7 @@ const TxsTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="950px" size="xs">
+      <Table minWidth="950px">
         <TheadSticky top={ top }>
           <Tr>
             <Th width="54px"></Th>

ui/userOps/UserOpsTable.tsx

@@ -18,7 +18,7 @@ import UserOpsTableItem from './UserOpsTableItem';
 
 const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px">
+    <Table minW="1000px">
       <Thead top={ top }>
         <Tr>
           <Th w="60%">User op hash</Th>

ui/validatorsBlackfort/ValidatorsTable.tsx

@@ -33,7 +33,7 @@ const ValidatorsTable = ({ data, sort, setSorting, isLoading, top }: Props) => {
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th>

ui/validatorsStability/ValidatorsTable.tsx

@@ -32,7 +32,7 @@ const ValidatorsTable = ({ data, sort, setSorting, isLoading }: Props) => {
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Validator’s address</Th>

ui/verifiedAddresses/VerifiedAddressesTable.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const VerifiedAddressesTable = ({ data, applications, onItemEdit, onItemAdd, isLoading }: Props) => {
   return (
-    <Table variant="simple">
+    <Table>
       <Thead>
         <Tr>
           <Th>Address</Th>

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -29,7 +29,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm" minW="915px">
+    <Table minW="915px">
       <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Contract</Th>

ui/watchlist/WatchlistTable/WatchlistTable.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="70%">Address</Th>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx

@@ -35,7 +35,7 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
   }
 
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th minW="140px">Index</Th>

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx

@@ -15,7 +15,7 @@ import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem
 
 const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>Msg nonce</Th>

ui/withdrawals/shibarium/WithdrawalsTable.tsx

@@ -15,7 +15,7 @@ import WithdrawalsTableItem from './WithdrawalsTableItem';
 
 const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L2 block No</Th>

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx

@@ -15,7 +15,7 @@ import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
 
 const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>Block</Th>