From 3ebbfbfbb27fda8816be7718d816b01e7fd5423d Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Mon, 13 Jun 2022 17:36:21 +0530
Subject: [PATCH] fix large dot seperator

---
 src/components/Sidebar/ShortcutButton.tsx     | 21 ++++++++-----------
 .../SubscriptionCard/styledComponents.tsx     |  3 +--
 src/components/Sidebar/styledComponents.tsx   |  5 ++---
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/Sidebar/ShortcutButton.tsx b/src/components/Sidebar/ShortcutButton.tsx
index da187894a..cc1a9d452 100644
--- a/src/components/Sidebar/ShortcutButton.tsx
+++ b/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>
     );
 };
diff --git a/src/components/Sidebar/SubscriptionCard/styledComponents.tsx b/src/components/Sidebar/SubscriptionCard/styledComponents.tsx
index 93f777ea7..74eb7bb7e 100644
--- a/src/components/Sidebar/SubscriptionCard/styledComponents.tsx
+++ b/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;
diff --git a/src/components/Sidebar/styledComponents.tsx b/src/components/Sidebar/styledComponents.tsx
index 02b9e3a50..852c4c22f 100644
--- a/src/components/Sidebar/styledComponents.tsx
+++ b/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;
 `;