fix margin of action bar

ui/blocks/BlocksContent.tsx

@@ -61,37 +61,48 @@ const BlocksContent = ({ type }: Props) => {
     handler: handleNewBlockMessage,
   });
 
-  if (isLoading) {
+  const content = (() => {
+    if (isLoading) {
+      return (
+        <>
+          <Show below="lg" key="skeleton-mobile">
+            <BlocksSkeletonMobile/>
+          </Show>
+          <Show above="lg" key="skeleton-desktop">
+            <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
+          </Show>
+        </>
+      );
+    }
+
+    if (isError) {
+      return <DataFetchAlert/>;
+    }
+
+    if (data.items.length === 0) {
+      return <Alert>There are no blocks.</Alert>;
+    }
+
     return (
       <>
-        <Show below="lg" key="skeleton-mobile">
-          <BlocksSkeletonMobile/>
-        </Show>
-        <Show above="lg" key="skeleton-desktop">
-          <Skeleton h={ 6 } mb={ 8 } w="150px"/>
-          <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
-        </Show>
+        { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
+        <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
+        <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       </>
     );
-  }
 
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (data.items.length === 0) {
-    return <Alert>There are no blocks.</Alert>;
-  }
+  })();
 
   return (
     <>
-      <Text as="span">Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      { data ?
+        <Text mb={{ base: 0, lg: 6 }}>Total of { data.items[0].height.toLocaleString() } blocks</Text> :
+        <Skeleton h="24px" w="200px" mb={{ base: 0, lg: 6 }}/>
+      }
       <ActionBar>
         <Pagination ml="auto" { ...pagination }/>
       </ActionBar>
-      { socketAlert && <Alert status="warning" mt={ 8 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
-      <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
-      <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
+      { content }
     </>
   );
 };

ui/blocks/BlocksList.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const BlocksList = ({ data }: Props) => {
   return (
-    <Box mt={ 8 }>
+    <Box>
       <AnimatePresence initial={ false }>
         { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
         { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }

ui/blocks/BlocksTable.tsx

@@ -17,7 +17,7 @@ interface Props {
 const BlocksTable = ({ data }: Props) => {
 
   return (
-    <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 } mt={ 8 }>
+    <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
       <Thead top={ 80 }>
         <Tr>
           <Th width="125px">Block</Th>

ui/pages/Block.tsx

@@ -24,9 +24,7 @@ const BlockPageContent = () => {
   return (
     <Page>
       <PageTitle text={ `Block #${ router.query.id }` }/>
-      <RoutedTabs
-        tabs={ TABS }
-      />
+      <RoutedTabs tabs={ TABS } tabListMarginBottom={{ base: 6, lg: 12 }}/>
     </Page>
   );
 };

ui/pages/Blocks.tsx

@@ -17,9 +17,7 @@ const BlocksPageContent = () => {
   return (
     <Page>
       <PageTitle text="Blocks"/>
-      <RoutedTabs
-        tabs={ TABS }
-      />
+      <RoutedTabs tabs={ TABS } tabListMarginBottom={{ base: 6, lg: 8 }}/>
     </Page>
   );
 };

ui/pages/PrivateTags.tsx

@@ -17,7 +17,7 @@ const PrivateTags = () => {
   return (
     <Page>
       <PageTitle text="Private tags"/>
-      <RoutedTabs tabs={ TABS }/>
+      <RoutedTabs tabs={ TABS } tabListMarginBottom={{ base: 6, lg: 8 }}/>
     </Page>
   );
 };

ui/pages/Transaction.tsx

@@ -75,9 +75,7 @@ const TransactionPageContent = () => {
           </Flex>
         ) }
       </Flex>
-      <RoutedTabs
-        tabs={ TABS }
-      />
+      <RoutedTabs tabs={ TABS } tabListMarginBottom={{ base: 6, lg: 12 }}/>
     </Page>
   );
 };

ui/pages/Transactions.tsx

@@ -22,7 +22,7 @@ const Transactions = () => {
     <Page hideMobileHeaderOnScrollDown>
       <Box h="100%">
         <PageTitle text="Transactions"/>
-        <RoutedTabs tabs={ TABS }/>
+        <RoutedTabs tabs={ TABS } tabListMarginBottom={{ base: 6, lg: 8 }}/>
       </Box>
     </Page>
   );

ui/shared/ActionBar.tsx

-import { Flex, useColorModeValue } from '@chakra-ui/react';
+import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 
@@ -6,12 +6,13 @@ import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 
 type Props = {
   children: React.ReactNode;
+  className?: string;
 }
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
 
-const ActionBar = ({ children }: Props) => {
+const ActionBar = ({ children, className }: Props) => {
   const [ isSticky, setIsSticky ] = React.useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
 
@@ -43,17 +44,16 @@ const ActionBar = ({ children }: Props) => {
     <ScrollDirectionContext.Consumer>
       { (scrollDirection) => (
         <Flex
+          className={ className }
           backgroundColor={ bgColor }
-          //   mt={ -6 }
-          pt={ 6 }
-          pb={ 6 }
+          py={ 6 }
           mx={{ base: -4, lg: 0 }}
           px={{ base: 4, lg: 0 }}
           justifyContent="space-between"
           width={{ base: '100vw', lg: 'unset' }}
           position="sticky"
           top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
-          transitionProperty="top,box-shadow"
+          transitionProperty="top,box-shadow,background-color,color"
           transitionDuration="slow"
           zIndex={{ base: 'sticky2', lg: 'docked' }}
           boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
@@ -66,4 +66,4 @@ const ActionBar = ({ children }: Props) => {
   );
 };
 
-export default ActionBar;
+export default chakra(ActionBar);

ui/shared/RoutedTabs/RoutedTabs.tsx

+import type { ChakraProps } from '@chakra-ui/react';
 import {
   Tab,
   Tabs,
@@ -25,9 +26,10 @@ const hiddenItemStyles: StyleProps = {
 
 interface Props {
   tabs: Array<RoutedTab>;
+  tabListMarginBottom?: ChakraProps['marginBottom'];
 }
 
-const RoutedTabs = ({ tabs }: Props) => {
+const RoutedTabs = ({ tabs, tabListMarginBottom }: Props) => {
   const router = useRouter();
   const [ activeTabIndex, setActiveTabIndex ] = useState<number>(tabs.length + 1);
   useEffect(() => {
@@ -59,7 +61,7 @@ const RoutedTabs = ({ tabs }: Props) => {
   return (
     <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTabIndex }>
       <TabList
-        marginBottom={{ base: 6, lg: 12 }}
+        marginBottom={ tabListMarginBottom }
         flexWrap="nowrap"
         whiteSpace="nowrap"
         ref={ listRef }

ui/txs/TxsContent.tsx

@@ -65,31 +65,33 @@ const TxsContent = ({
   } = useQueryWithPages<TransactionsResponse>(apiPath, queryName, stateFilter && { filter: stateFilter });
   // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
 
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
+  const content = (() => {
+    if (isError) {
+      return <DataFetchAlert/>;
+    }
 
-  const txs = data?.items;
+    const txs = data?.items;
 
-  if (!isLoading && !txs) {
-    return <Alert>There are no transactions.</Alert>;
-  }
+    if (!isLoading && !txs?.length) {
+      return <Alert>There are no transactions.</Alert>;
+    }
 
-  let content = (
-    <>
-      <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
-      <Show above="lg" ssr={ false }><TxsSkeletonDesktop/></Show>
-    </>
-  );
+    if (!isLoading && txs) {
+      return <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
+    }
 
-  if (!isLoading && txs) {
-    content = <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
-  }
+    return (
+      <>
+        <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
+        <Show above="lg" ssr={ false }><TxsSkeletonDesktop/></Show>
+      </>
+    );
+  })();
 
   return (
     <>
-      { showDescription && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
-      <TxsHeader sorting={ sorting } setSorting={ setSorting } paginationProps={ pagination }/>
+      { showDescription && <Box mb={{ base: 6, lg: 12 }}>Only the first 10,000 elements are displayed</Box> }
+      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSorting } paginationProps={ pagination }/>
       { content }
     </>
   );

ui/txs/TxsHeader.tsx

-import { HStack } from '@chakra-ui/react';
+import { HStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
@@ -16,13 +16,14 @@ type Props = {
   sorting: Sort;
   setSorting: (val: Sort | ((val: Sort) => Sort)) => void;
   paginationProps: PaginationProps;
+  className?: string;
 }
 
-const TxsHeader = ({ sorting, setSorting, paginationProps }: Props) => {
+const TxsHeader = ({ sorting, setSorting, paginationProps, className }: Props) => {
   const isMobile = useIsMobile(false);
 
   return (
-    <ActionBar>
+    <ActionBar className={ className }>
       <HStack>
         { /* api is not implemented */ }
         { /* <TxsFilters
@@ -51,4 +52,4 @@ const TxsHeader = ({ sorting, setSorting, paginationProps }: Props) => {
   );
 };
 
-export default TxsHeader;
+export default chakra(TxsHeader);