From e08c96d8ad2f7213ecca2c35a404f670ab7f6802 Mon Sep 17 00:00:00 2001
From: Pianist038801 <steven@union.ai>
Date: Tue, 26 Oct 2021 12:34:36 -0400
Subject: [PATCH] feat: use opacity instead of dot

Signed-off-by: Pianist038801 <steven@union.ai>
---
 src/components/common/BarChart.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx
index b4dde32e7..c15c75d8d 100644
--- a/src/components/common/BarChart.tsx
+++ b/src/components/common/BarChart.tsx
@@ -41,13 +41,6 @@ const useStyles = makeStyles((theme: Theme) => ({
         cursor: 'pointer',
         width: '80%',
         marginLeft: '10%'
-    },
-    circle: {
-        borderRadius: '50%',
-        backgroundColor: 'purple',
-        height: 6,
-        marginTop: 3,
-        width: 6
     }
 }));
 
@@ -90,14 +83,12 @@ const BarChartItem: React.FC<BarChartItemProps> = ({
         <>
             <div
                 className={styles.itemBar}
-                style={{ backgroundColor: color, height: `${value}%` }}
-                onClick={onClick}
-            />
-            <div
-                className={styles.circle}
                 style={{
-                    backgroundColor: isSelected ? '#CC23E8' : 'transparent'
+                    backgroundColor: color,
+                    height: `${value}%`,
+                    opacity: isSelected ? '100%' : '50%'
                 }}
+                onClick={onClick}
             />
         </>
     );