From fd8b2cb89be06743b180c0da5caecf1c776443f6 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 17 May 2021 17:53:32 -0300
Subject: [PATCH] fix: Fixes group by control icon colors (#14674)

---
 .../DndColumnSelectControl/Option.tsx         |  4 +--
 .../controls/OptionControls/index.tsx         | 34 ++++++++++++-------
 .../explore/components/optionRenderers.tsx    |  5 +--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
index 1315ddfa60..5b589f0972 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
@@ -39,12 +39,12 @@ export default function Option(props: OptionProps) {
         data-test="remove-control-button"
         onClick={() => props.clickClose(props.index)}
       >
-        <Icons.XSmall color={theme.colors.grayscale.light1} />
+        <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
       </CloseContainer>
       <Label data-test="control-label">{props.children}</Label>
       {props.withCaret && (
         <CaretContainer>
-          <Icons.CaretRight color={theme.colors.grayscale.light1} />
+          <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
         </CaretContainer>
       )}
     </OptionControlContainer>
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 216d606ddc..58d3d4856a 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -47,19 +47,27 @@ export const OptionControlContainer = styled.div<{
 `;
 
 export const Label = styled.div`
-  display: flex;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  align-items: center;
-  white-space: nowrap;
-  padding-left: ${({ theme }) => theme.gridUnit}px;
-  svg {
-    margin-right: ${({ theme }) => theme.gridUnit}px;
-  }
-  .option-label {
-    display: inline;
-  }
+  ${({ theme }) => `
+    display: flex;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: center;
+    white-space: nowrap;
+    padding-left: ${theme.gridUnit}px;
+    svg {
+      margin-right: ${theme.gridUnit}px;
+      margin-left: ${theme.gridUnit}px;
+    }
+    .type-label {
+      margin-right: ${theme.gridUnit}px;
+      margin-left: ${theme.gridUnit}px;
+      font-weight: ${theme.typography.weights.normal};
+    }
+    .option-label {
+      display: inline;
+    }
+  `}
 `;
 
 export const CaretContainer = styled.div`
diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx
index 16f3908c60..aa6bd9327c 100644
--- a/superset-frontend/src/explore/components/optionRenderers.tsx
+++ b/superset-frontend/src/explore/components/optionRenderers.tsx
@@ -42,8 +42,9 @@ const OptionContainer = styled.div`
     }
   }
   .type-label {
-    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-    width: ${({ theme }) => theme.gridUnit * 7}px;
+    margin-right: ${({ theme }) => theme.gridUnit * 3}px;
+    margin-left: ${({ theme }) => theme.gridUnit * 3}px;
+    width: ${({ theme }) => theme.gridUnit * 4}px;
     display: inline-block;
     text-align: center;
     font-weight: ${({ theme }) => theme.typography.weights.bold};