feat: ui overhaul (#676)

packages/docs/src/components/docs/BetaImage.tsx

@@ -1,14 +1,34 @@
-import Image from 'next/image';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 const BetaImage = () => {
   return (
-    <Image
-      src="https://img.shields.io/badge/-Beta%20Feature-blue"
-      alt="Beta Feature. Use at your own risk"
+    <Box
       title="Beta Feature. Use at your own risk"
-      width={81}
-      height={20}
-    />
+      sx={{
+        width: 81,
+        height: 20,
+        background: '#0593ca',
+        borderRadius: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
+        variant="caption"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontWeight: 'bold',
+          lineHeight: '20px',
+          color: 'white',
+        }}
+      >
+        Beta Feature
+      </Typography>
+    </Box>
   );
 };
 

packages/docs/src/components/docs/DocsLeftNavGroup.tsx

@@ -61,6 +61,7 @@ const DocsLeftNavGroup = ({ name, links }: DocsLeftNavGroupProps) => {
                   primaryTypographyProps={{
                     color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
                     fontWeight: selected ? 600 : 400,
+                    whiteSpace: 'nowrap',
                   }}
                   primary={
                     <StyledListItemPrimary>

packages/docs/src/components/docs/components/headers/components/LinkedHeader.tsx

@@ -40,9 +40,12 @@ const Header3 = ({ variant, children = '' }: Header3Props) => {
   return (
     <Typography
       variant={variant}
-      component={hasText ? variant : 'div'}
+      component={variant}
       id={anchor}
       sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
         [theme.breakpoints.down('sm')]: {
           marginLeft: '8px',
         },