Fix design errors

.github/scripts/generateApiReference.js

@@ -299,7 +299,7 @@ ${curlify({
       </CH.Code>
     </CH.Section>
 <Box sx={{ fontSize: '12px', mt: -5, mb: 3 }}>
-  This snippet shows a sample request on mainnet. For other networks you should use
+  This snippet shows a sample request on mainnet. For other networks please use
   <Link
     href='/core-api/transaction-service-supported-networks'
     rel='noopener noreferrer'

components/ApiReference/ApiReference.tsx

@@ -89,7 +89,7 @@ const ApiReference: React.FC = () => {
                 px: 0.8,
                 position: 'fixed',
                 bottom: [120, 60],
-                right: 10,
+                right: 16,
                 zIndex: 1000,
                 opacity: currentIndex !== '' ? 1 : 0,
                 transition: 'opacity 0.3s',

components/ApiReference/Network.tsx

@@ -85,7 +85,6 @@ const NetworkSwitcher: React.FC = () => {
           my={2}
           sx={{ width: ['100%', '100%', 'auto'] }}
           item
-          wrap='nowrap'
         >
           <Link href={network} target='_blank' rel='noopener noreferrer'>
             <Typography

components/Loader.tsx

@@ -1,19 +1,17 @@
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 
-const Loader: React.FC = () => {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh'
-      }}
-    >
-      <CircularProgress />
-    </Box>
-  )
-}
+const Loader: React.FC = () => (
+  <Box
+    sx={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh'
+    }}
+  >
+    <CircularProgress />
+  </Box>
+)
 
 export default Loader

lib/mdx.tsx

@@ -24,9 +24,10 @@ import MuiLink from '@mui/material/Link'
 import { type Heading } from '../components/ApiReference/TOC'
 import swagger from '../components/ApiReference/mainnet-swagger.json'
 import pathsMetadata from '../components/ApiReference/paths-metadata.json'
+import HashTag from '../assets/svg/hashtag.svg'
 
 export const slugify: (text: string) => string = text =>
-  text?.replace(' #', '')?.replace?.(/ /g, '-').replace(/\//g, '-')
+  text?.replace?.(/ /g, '-').replace(/\//g, '-')
 
 export const getHeadingChildren: (heading: string) => Heading[] = heading => {
   const headingPath = '/v1/' + heading + '/'
@@ -61,9 +62,10 @@ export const getHeadingsFromHtml: (
         const headingText = heading
           .replace(/<[^>]*>/g, '')
           .replace(/&nbsp;/g, ' ')
-          .replace(' #', '')
+          .split('.')[0]
           .trim()
-        const link = `#${slugify(headingText)}`
+        let link = `#${slugify(headingText)}`
+        if (link.slice(-1) === '-') link = link.slice(0, -1)
         return {
           text: headingText,
           link,
@@ -109,7 +111,7 @@ export const MdxHeading: React.FC<{
           }
         }}
       >
-        #
+        <HashTag width='15px' height='35px' />
       </Button>
     )}
   </Typography>