From 5f7a2d688528085217396e3f996a0fd374c0cfb4 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 26 Sep 2023 12:46:09 +0300
Subject: [PATCH] Use IconButtomWithDot with every icon

---
 src/pages/Dashboard/IconButtonWithDot.tsx |  6 ++--
 src/pages/Dashboard/LeftSidebar.tsx       | 36 +++++++----------------
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/pages/Dashboard/IconButtonWithDot.tsx b/src/pages/Dashboard/IconButtonWithDot.tsx
index d3f5c5df..55c28308 100644
--- a/src/pages/Dashboard/IconButtonWithDot.tsx
+++ b/src/pages/Dashboard/IconButtonWithDot.tsx
@@ -6,12 +6,14 @@ type IconButtonWithDotProps = {
     iconEl: any;
     variant: 'ghost' | 'outline';
     isDotOn: boolean;
+    selected?: boolean;
+    disabled?: boolean;
 };
 
-const IconButtonWithDot = ({ iconEl, variant, isDotOn }: IconButtonWithDotProps) => {
+const IconButtonWithDot = ({ iconEl, variant, isDotOn, selected, disabled }: IconButtonWithDotProps) => {
     return (
         <Stack style={{ position: 'relative', display: 'inline-block' }} >
-            <IconButton icon={iconEl} variant={variant} />
+            <IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} />
             {isDotOn && (
                 <Stack style={{
                     position: 'absolute',
diff --git a/src/pages/Dashboard/LeftSidebar.tsx b/src/pages/Dashboard/LeftSidebar.tsx
index ccb1bf78..96640e66 100644
--- a/src/pages/Dashboard/LeftSidebar.tsx
+++ b/src/pages/Dashboard/LeftSidebar.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from '@status-im/components'
 import {
   DashboardIcon,
   SpeedIcon,
@@ -8,9 +7,9 @@ import {
   CommunitiesIcon,
   ActivityCenterIcon,
   SettingsIcon,
-} from '@status-im/icons'
-import { Stack, YStack } from 'tamagui'
-import IconButtonWithDot from './IconButtonWithDot'
+} from '@status-im/icons';
+import { Stack, YStack } from 'tamagui';
+import IconButtonWithDot from './IconButtonWithDot';
 
 const LeftSidebar = () => {
   return (
@@ -25,29 +24,16 @@ const LeftSidebar = () => {
         border: '1px solid #F0F2F5',
       }}
     >
-      <IconButton icon={<DashboardIcon size={20} />} variant="ghost" selected />
-      <IconButton icon={<SpeedIcon size={20} />} variant="ghost" />
-      <IconButton icon={<ChartIcon size={20} />} variant="outline" disabled />
-      <IconButton icon={<HeartIcon size={20} />} variant="ghost" />
-      <IconButton icon={<CodeBlockIcon size={20} />} variant="ghost" />
-      <IconButton icon={<CommunitiesIcon size={20} />} variant="ghost" />
-      <Stack style={{ position: 'relative', display: 'inline-block' }}>
-        <IconButton icon={<ActivityCenterIcon size={20} />} variant="ghost" />
-        <Stack style={{
-          position: 'absolute',
-          right: 7,
-          top: 5,
-          width: '9px',
-          height: '9px',
-          borderRadius: '50%',
-          backgroundColor: '#1992D7',
-          border: '1.5px solid #fff'
-        }} />
-      </Stack>
+      <IconButtonWithDot iconEl={<DashboardIcon size={20} />} variant="ghost" isDotOn={false} selected={true} />
+      <IconButtonWithDot iconEl={<SpeedIcon size={20} />} variant="ghost" isDotOn={false} />
+      <IconButtonWithDot iconEl={<ChartIcon size={20} />} variant="outline" isDotOn={false} disabled={true} />
+      <IconButtonWithDot iconEl={<HeartIcon size={20} />} variant="ghost" isDotOn={false} />
+      <IconButtonWithDot iconEl={<CodeBlockIcon size={20} />} variant="ghost" isDotOn={false} />
+      <IconButtonWithDot iconEl={<CommunitiesIcon size={20} />} variant="ghost" isDotOn={false} />
       <IconButtonWithDot iconEl={<ActivityCenterIcon size={20} />} variant="ghost" isDotOn={true} />
-      <IconButton icon={<SettingsIcon size={20} />} variant="ghost" />
+      <IconButtonWithDot iconEl={<SettingsIcon size={20} />} variant="ghost" isDotOn={false} />
     </YStack>
   )
 }
 
-export default LeftSidebar
+export default LeftSidebar;