From b9ee1d5aa08075c889b3ea1b5319e79aa6743f55 Mon Sep 17 00:00:00 2001
From: louis-md <louis@margot-duclot.fr>
Date: Wed, 15 May 2024 16:31:07 +0200
Subject: [PATCH] Fix design errors

---
 .github/scripts/generateApiReference.js  |  2 +-
 assets/svg/hashtag.svg                   |  3 +++
 components/ApiReference/ApiReference.tsx |  2 +-
 components/ApiReference/Network.tsx      |  1 -
 components/Loader.tsx                    | 26 +++++++++++-------------
 lib/mdx.tsx                              | 10 +++++----
 6 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 assets/svg/hashtag.svg

diff --git a/.github/scripts/generateApiReference.js b/.github/scripts/generateApiReference.js
index ba0843e6..5a93d2ed 100644
--- a/.github/scripts/generateApiReference.js
+++ b/.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'
diff --git a/assets/svg/hashtag.svg b/assets/svg/hashtag.svg
new file mode 100644
index 00000000..ff243859
--- /dev/null
+++ b/assets/svg/hashtag.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+  <path style="fill:rgb(97, 97, 97);" d="M30,12V8h-5.004l1-8h-4l-1,8h-7.998l1-8h-4l-1,8H2v4h6.498L7.5,20H2v4h5l-1,8h4l1-8h8l-1.002,8H22    l1-8h7v-4h-6.5l0.996-8H30z M19.5,20h-8l0.998-8h7.998L19.5,20z"/>
+</svg>
\ No newline at end of file
diff --git a/components/ApiReference/ApiReference.tsx b/components/ApiReference/ApiReference.tsx
index 90a343bc..33bf380b 100644
--- a/components/ApiReference/ApiReference.tsx
+++ b/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',
diff --git a/components/ApiReference/Network.tsx b/components/ApiReference/Network.tsx
index aaecdee3..70f89bf0 100644
--- a/components/ApiReference/Network.tsx
+++ b/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
diff --git a/components/Loader.tsx b/components/Loader.tsx
index 95f6b311..566d599f 100644
--- a/components/Loader.tsx
+++ b/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
diff --git a/lib/mdx.tsx b/lib/mdx.tsx
index c413f190..07a16703 100644
--- a/lib/mdx.tsx
+++ b/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>