From c53ab6423fb8b113c134e2c304bac43f9c3773a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Mon, 2 Nov 2020 10:19:40 +0100
Subject: [PATCH] Improving the dots icon in the value selector

---
 webapp/src/widgets/valueSelector.scss | 6 ++++++
 webapp/src/widgets/valueSelector.tsx  | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss
index 890df1eea..9e5d5bc0c 100644
--- a/webapp/src/widgets/valueSelector.scss
+++ b/webapp/src/widgets/valueSelector.scss
@@ -15,6 +15,12 @@
         .MenuWrapper {
             display: flex;
             align-self: flex-end;
+            .IconButton {
+                background-color: unset;
+                &:hover {
+                    background-color: rgba(var(--main-fg), 0.1);
+                }
+            }
         }
     }
 }
diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index 640ac8601..f738c64a6 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -10,7 +10,7 @@ import {Constants} from '../constants'
 
 import Menu from './menu'
 import MenuWrapper from './menuWrapper'
-import Button from './buttons/button'
+import IconButton from './buttons/iconButton'
 import OptionsIcon from './icons/options'
 import DeleteIcon from './icons/delete'
 
@@ -41,7 +41,7 @@ class ValueSelector extends React.Component<Props> {
                     <div className={`octo-label ${option.color}`}>{option.value}</div>
                 </div>
                 <MenuWrapper stopPropagationOnToggle={true}>
-                    <Button><OptionsIcon/></Button>
+                    <IconButton icon={<OptionsIcon/>}/>
                     <Menu position='left'>
                         <Menu.Text
                             id='delete'