text instead of alert if empty table

ui/blocks/BlocksContent.tsx

-import { Box, Text, Show, Alert, Skeleton } from '@chakra-ui/react';
+import { Box, Text, Show, Hide, Skeleton } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -31,10 +31,10 @@ const BlocksContent = ({ type }: Props) => {
         <Show below="lg" key="skeleton-mobile">
           <BlocksSkeletonMobile/>
         </Show>
-        <Show above="lg" key="skeleton-desktop">
+        <Hide below="lg" key="skeleton-desktop">
           <Skeleton h={ 6 } mb={ 8 } w="150px"/>
           <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
-        </Show>
+        </Hide>
       </>
     );
   }
@@ -44,14 +44,14 @@ const BlocksContent = ({ type }: Props) => {
   }
 
   if (data.items.length === 0) {
-    return <Alert>There are no blocks.</Alert>;
+    return <Text as="span">There are no blocks.</Text>;
   }
 
   return (
     <>
       <Text as="span">Total of { data.items[0].height.toLocaleString() } blocks</Text>
       <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
-      <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
+      <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items }/></Hide>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
         { /* eslint-disable-next-line react/jsx-no-bind */ }
         <Pagination page={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} } resetPage={ () => {} } hasNextPage/>

ui/tx/TxInternals.tsx

-import { Box, Flex, Alert, Show } from '@chakra-ui/react';
+import { Box, Flex, Text, Show, Hide } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -96,7 +96,7 @@ const TxInternals = () => {
     return (
       <>
         <Show below="lg"><TxInternalsSkeletonMobile/></Show>
-        <Show above="lg"><TxInternalsSkeletonDesktop/></Show>
+        <Hide below="lg"><TxInternalsSkeletonDesktop/></Hide>
       </>
     );
   }
@@ -106,7 +106,7 @@ const TxInternals = () => {
   }
 
   if (data.items.length === 0) {
-    return <Alert>There are no internal transactions for this transaction.</Alert>;
+    return <Text as="span">There are no internal transactions for this transaction.</Text>;
   }
 
   const content = (() => {

ui/tx/TxLogs.tsx

-import { Box, Alert } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -37,7 +37,7 @@ const TxLogs = () => {
   }
 
   if (data.items.length === 0) {
-    return <Alert>There are no logs for this transaction.</Alert>;
+    return <Text as="span">There are no logs for this transaction.</Text>;
   }
 
   return (

ui/txs/TxsContent.tsx

-import { Alert, Box, Show } from '@chakra-ui/react';
+import { Text, Box, Show, Hide } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
 import type { TTxsFilters } from 'types/api/txsFilters';
@@ -71,13 +71,13 @@ const TxsContent = ({
   const txs = data?.items;
 
   if (!isLoading && !txs) {
-    return <Alert>There are no transactions.</Alert>;
+    return <Text as="span">There are no transactions.</Text>;
   }
 
   let content = (
     <>
       <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
-      <Show above="lg" ssr={ false }><TxsSkeletonDesktop/></Show>
+      <Hide below="lg" ssr={ false }><TxsSkeletonDesktop/></Hide>
     </>
   );