[superset] branch master updated: feat(dashboard): Change default opacity of icon in FiltersBadge (#23350)

[kg...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new f3055fcaff feat(dashboard): Change default opacity of icon in FiltersBadge (#23350)
f3055fcaff is described below

commit f3055fcaff90f2dc922a0e77abb72c626df46857
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Mon Mar 13 17:09:15 2023 +0100

    feat(dashboard): Change default opacity of icon in FiltersBadge (#23350)
---
 .../dashboard/components/FiltersBadge/Styles.tsx   | 39 ++++++++++++----------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 0018a007ba..1b3be657af 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -73,27 +73,30 @@ export const FilterName = styled.span`
 `;
 
 export const FilterItem = styled.button`
-  cursor: pointer;
-  display: flex;
-  text-align: left;
-  padding: 0;
-  border: none;
-  background: none;
-  outline: none;
-  width: 100%;
+  ${({ theme }) => css`
+    cursor: pointer;
+    display: flex;
+    text-align: left;
+    padding: 0;
+    border: none;
+    background: none;
+    outline: none;
+    width: 100%;
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
-  & i svg {
-    color: transparent;
-    margin-right: ${({ theme }) => theme.gridUnit}px;
-  }
+    & i svg {
+      opacity: ${theme.opacity.mediumLight};
+      margin-right: ${theme.gridUnit}px;
+      transition: opacity ease-in-out ${theme.transitionTiming};
+    }
 
-  &:hover i svg {
-    color: inherit;
-  }
+    &:hover i svg {
+      opacity: 1;
+    }
+  `}
 `;
 
 export const FiltersContainer = styled.div`