fix large dot seperator

src/components/Sidebar/ShortcutButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, ButtonProps } from '@mui/material';
+import { Box, ButtonProps, Typography } from '@mui/material';
 import SidebarButton from './Button';
 import { DotSeparator } from './styledComponents';
 
@@ -20,18 +20,15 @@ const ShortcutButton: FC<ButtonProps<'button', IProps>> = ({
             variant="contained"
             color="secondary"
             sx={{ px: '12px' }}
-            css={`
-                font-size: 14px;
-                line-height: 20px;
-                font-weight: 500;
-            `}
             {...props}>
-            <Box mr={'12px'}>{icon}</Box>
-            {label}
-            <DotSeparator />
-            <Box component={'span'} sx={{ color: 'text.secondary' }}>
-                {count}
-            </Box>
+            <Typography variant="body2" display={'flex'} alignItems="center">
+                <Box mr={'12px'}>{icon}</Box>
+                {label}
+                <Box sx={{ color: 'text.secondary' }}>
+                    <DotSeparator />
+                    {count}
+                </Box>
+            </Typography>
         </SidebarButton>
     );
 };

src/components/Sidebar/SubscriptionCard/styledComponents.tsx

@@ -14,8 +14,7 @@ Progressbar.defaultProps = {
 };
 
 export const LegendIndicator = styled(DotSeparator)`
-    width: 8.71px;
-    height: 8.71px;
+    font-size: 8.71px;
     margin: 0;
     margin-right: 4px;
     color: inherit;

src/components/Sidebar/styledComponents.tsx

@@ -20,8 +20,7 @@ export const PaddedDivider = MuiStyled(Divider)<{
 }));
 
 export const DotSeparator = styled(CircleIcon)`
-    height: 4px;
-    width: 4px;
+    font-size: 4px;
     margin: 0 ${({ theme }) => theme.spacing(1)};
-    color: ${({ theme }) => theme.palette.text.secondary};
+    color: inherit;
 `;