From ef936cfe4d9a437f0af4bf0baeab701c6441d110 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Sun, 20 Sep 2020 09:52:18 -0700
Subject: [PATCH 1/3] style: fix checkbox color

---
 superset-frontend/src/components/Checkbox/index.tsx | 11 +++++++++--
 superset-frontend/src/components/CheckboxIcons.tsx  |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/components/Checkbox/index.tsx b/superset-frontend/src/components/Checkbox/index.tsx
index 621ce1755c56..00d16f7921ee 100644
--- a/superset-frontend/src/components/Checkbox/index.tsx
+++ b/superset-frontend/src/components/Checkbox/index.tsx
@@ -30,8 +30,14 @@ interface CheckboxProps {
 }
 
 const Styles = styled.span`
-  &,
-  & svg {
+  cursor: pointer;
+  &.primary {
+    color: ${({ theme }) => theme.colors.primary.base};
+  }
+  &.grayscale {
+    color: ${({ theme }) => theme.colors.grayscale.light1};
+  }
+  svg {
     vertical-align: top;
   }
 `;
@@ -39,6 +45,7 @@ const Styles = styled.span`
 export default function Checkbox({ checked, onChange, style }: CheckboxProps) {
   return (
     <Styles
+      className={checked ? 'primary': 'grayscale'}
       style={style}
       onClick={() => {
         onChange(!checked);
diff --git a/superset-frontend/src/components/CheckboxIcons.tsx b/superset-frontend/src/components/CheckboxIcons.tsx
index 2c94c863fb04..a9addf8159e5 100644
--- a/superset-frontend/src/components/CheckboxIcons.tsx
+++ b/superset-frontend/src/components/CheckboxIcons.tsx
@@ -28,7 +28,7 @@ export const CheckboxChecked = () => (
   >
     <path
       d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.11 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0Z"
-      fill="#00A699"
+      fill="currentColor"
     />
     <path d="M7 14L2 9L3.41 7.59L7 11.17L14.59 3.58L16 5L7 14Z" fill="white" />
   </svg>
@@ -44,7 +44,7 @@ export const CheckboxHalfChecked = () => (
   >
     <path
       d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-      fill="#999999"
+      fill="currentColor"
     />
     <path d="M14 10H4V8H14V10Z" fill="white" />
   </svg>
@@ -60,7 +60,7 @@ export const CheckboxUnchecked = () => (
   >
     <path
       d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-      fill="#CCCCCC"
+      fill="currentColor"
     />
     <path d="M16 2V16H2V2H16V2Z" fill="white" />
   </svg>

From c321feb645e3d048a988cb6325ac4c199cdb90b4 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 21 Sep 2020 08:38:14 -0700
Subject: [PATCH 2/3] lint

---
 superset-frontend/src/components/Checkbox/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Checkbox/index.tsx b/superset-frontend/src/components/Checkbox/index.tsx
index 00d16f7921ee..6bff6d8947f4 100644
--- a/superset-frontend/src/components/Checkbox/index.tsx
+++ b/superset-frontend/src/components/Checkbox/index.tsx
@@ -45,7 +45,7 @@ const Styles = styled.span`
 export default function Checkbox({ checked, onChange, style }: CheckboxProps) {
   return (
     <Styles
-      className={checked ? 'primary': 'grayscale'}
+      className={checked ? 'primary' : 'grayscale'}
       style={style}
       onClick={() => {
         onChange(!checked);

From c87a610bcb3d9aa633f6405fa1b76c63470f325d Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 21 Sep 2020 12:06:58 -0700
Subject: [PATCH 3/3] wrap test into theme

---
 .../explore/components/CheckboxControl_spec.jsx            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
index 9a0740cb01a8..9dc24811f6b3 100644
--- a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import Checkbox from 'src/components/Checkbox';
@@ -48,7 +50,10 @@ describe('CheckboxControl', () => {
   });
 
   it('Checks the box when the label is clicked', () => {
-    const fullComponent = mount(<CheckboxControl {...defaultProps} />);
+    const fullComponent = mount(<CheckboxControl {...defaultProps} />, {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: { theme: supersetTheme },
+    });
 
     const spy = sinon.spy(fullComponent.instance(), 'onChange');