From 4537353bcc247eb717f710e1b5d18a731edcdb26 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Wed, 20 Apr 2022 21:06:33 +0800
Subject: [PATCH] feat(explore): improve UI in the control panel (#19748)

* feat(explore): improve section header of control panel

* fix checkbox control color and radio button color
---
 .../src/sections/advancedAnalytics.tsx        |  6 ++---
 .../src/sections/chartTitle.tsx               |  4 +--
 .../components/RadioButtonControl.tsx         |  5 +++-
 .../src/controlPanel.tsx                      |  9 +++----
 .../src/controlPanel.tsx                      |  9 +++----
 .../src/NVD3Controls.tsx                      |  7 +++---
 .../BigNumber/BigNumberTotal/controlPanel.ts  |  2 +-
 .../BigNumberWithTrendline/controlPanel.tsx   |  5 ++--
 .../src/Funnel/controlPanel.tsx               |  2 +-
 .../src/Gauge/controlPanel.tsx                |  8 +++---
 .../src/Graph/controlPanel.tsx                |  2 +-
 .../src/MixedTimeseries/controlPanel.tsx      |  6 ++---
 .../src/Pie/controlPanel.tsx                  |  4 +--
 .../src/Radar/controlPanel.tsx                |  4 +--
 .../src/Timeseries/Area/controlPanel.tsx      |  4 +--
 .../Timeseries/Regular/Bar/controlPanel.tsx   |  4 +--
 .../Regular/Scatter/controlPanel.tsx          |  4 +--
 .../src/Timeseries/Regular/controlPanel.tsx   |  4 +--
 .../src/Timeseries/Step/controlPanel.tsx      |  4 +--
 .../src/Timeseries/controlPanel.tsx           |  4 +--
 .../src/Tree/controlPanel.tsx                 |  2 +-
 .../src/Treemap/controlPanel.tsx              |  2 +-
 .../plugin-chart-echarts/src/controls.tsx     |  4 +--
 .../assets/stylesheets/less/variables.less    |  1 +
 .../src/explore/components/Control.tsx        |  2 +-
 .../src/explore/components/ControlHeader.tsx  | 12 +++++----
 .../components/ControlPanelsContainer.tsx     | 18 +++++++++++--
 .../components/controls/CheckboxControl.jsx   | 25 +++++++++++++------
 .../src/explore/controlPanels/sections.tsx    |  8 +++---
 superset-frontend/src/explore/main.less       | 13 +++-------
 30 files changed, 99 insertions(+), 85 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
index 401e2a7e30a75..9d4c76bb58277 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
@@ -30,7 +30,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
       'of query results',
   ),
   controlSetRows: [
-    [<h1 className="section-header">{t('Rolling window')}</h1>],
+    [<div className="section-header">{t('Rolling window')}</div>],
     [
       {
         name: 'rolling_type',
@@ -85,7 +85,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
         },
       },
     ],
-    [<h1 className="section-header">{t('Time comparison')}</h1>],
+    [<div className="section-header">{t('Time comparison')}</div>],
     [
       {
         name: 'time_compare',
@@ -136,7 +136,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
         },
       },
     ],
-    [<h1 className="section-header">{t('Resample')}</h1>],
+    [<div className="section-header">{t('Resample')}</div>],
     [
       {
         name: 'resample_rule',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
index 5e99d976c55b3..314e983c589ae 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
@@ -28,7 +28,7 @@ export const titleControls: ControlPanelSectionConfig = {
   tabOverride: 'customize',
   expanded: true,
   controlSetRows: [
-    [<h1 className="section-header">{t('X Axis')}</h1>],
+    [<div className="section-header">{t('X Axis')}</div>],
     [
       {
         name: 'x_axis_title',
@@ -56,7 +56,7 @@ export const titleControls: ControlPanelSectionConfig = {
         },
       },
     ],
-    [<h1 className="section-header">{t('Y Axis')}</h1>],
+    [<div className="section-header">{t('Y Axis')}</div>],
     [
       {
         name: 'y_axis_title',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
index e9f6a6f9bc4d5..b613fed93aa87 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
@@ -56,8 +56,11 @@ export default function RadioButtonControl({
         '.control-label + .btn-group': {
           marginTop: 1,
         },
+        '.btn-group .btn-default': {
+          color: theme.colors.grayscale.dark1,
+        },
         '.btn-group .btn.active': {
-          background: theme.colors.secondary.light5,
+          background: theme.colors.grayscale.light4,
           fontWeight: theme.typography.weights.bold,
           boxShadow: 'none',
         },
diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
index c742e6d1335cb..93139f7ff7b8d 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
@@ -240,7 +240,7 @@ const config: ControlPanelConfig = {
       ),
       controlSetRows: [
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Rolling Window')}</h1>],
+        [<div className="section-header">{t('Rolling Window')}</div>],
         [
           {
             name: 'rolling_type',
@@ -292,7 +292,7 @@ const config: ControlPanelConfig = {
           },
         ],
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Time Comparison')}</h1>],
+        [<div className="section-header">{t('Time Comparison')}</div>],
         [
           {
             name: 'time_compare',
@@ -341,10 +341,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Python Functions')}</h1>],
-        // eslint-disable-next-line react/jsx-key
-        [<h2 className="section-header">pandas.resample</h2>],
+        [<div className="section-header">{t('Resample')}</div>],
         [
           {
             name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
index fd04117e6217c..e43da2de7237a 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
@@ -123,7 +123,7 @@ const config: ControlPanelConfig = {
       ),
       controlSetRows: [
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Rolling Window')}</h1>],
+        [<div className="section-header">{t('Rolling Window')}</div>],
         [
           {
             name: 'rolling_type',
@@ -175,7 +175,7 @@ const config: ControlPanelConfig = {
           },
         ],
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Time Comparison')}</h1>],
+        [<div className="section-header">{t('Time Comparison')}</div>],
         [
           {
             name: 'time_compare',
@@ -224,10 +224,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Python Functions')}</h1>],
-        // eslint-disable-next-line react/jsx-key
-        [<h2 className="section-header">pandas.resample</h2>],
+        [<div className="section-header">{t('Resample')}</div>],
         [
           {
             name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
index 3b0bb92ac758b..151c53e41f2ff 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
@@ -370,7 +370,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
         'of query results',
     ),
     controlSetRows: [
-      [<h1 className="section-header">{t('Rolling Window')}</h1>],
+      [<div className="section-header">{t('Rolling Window')}</div>],
       [
         {
           name: 'rolling_type',
@@ -423,7 +423,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
           },
         },
       ],
-      [<h1 className="section-header">{t('Time Comparison')}</h1>],
+      [<div className="section-header">{t('Time Comparison')}</div>],
       [
         {
           name: 'time_compare',
@@ -474,8 +474,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
           },
         },
       ],
-      [<h1 className="section-header">{t('Python Functions')}</h1>],
-      [<h2 className="section-header">pandas.resample</h2>],
+      [<div className="section-header">{t('Resample')}</div>],
       [
         {
           name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
index e30dcbe6bee6d..8511c3ca5645e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
@@ -34,7 +34,7 @@ export default {
       controlSetRows: [['metric'], ['adhoc_filters']],
     },
     {
-      label: t('Options'),
+      label: t('Display settings'),
       expanded: true,
       tabOverride: 'data',
       controlSetRows: [
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
index 6b99af91ce9c4..3ba00f55ea212 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -164,7 +164,7 @@ const config: ControlPanelConfig = {
       expanded: false,
       controlSetRows: [
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Rolling Window')}</h1>],
+        [<div className="section-header">{t('Rolling Window')}</div>],
         [
           {
             name: 'rolling_type',
@@ -217,8 +217,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Resample')}</h1>],
+        [<div className="section-header">{t('Resample')}</div>],
         [
           {
             name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index e1950bf9a5b37..fe2269cf89c05 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -76,7 +76,7 @@ const config: ControlPanelConfig = {
         ['color_scheme'],
         ...funnelLegendSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Labels')}</h1>],
+        [<div className="section-header">{t('Labels')}</div>],
         [
           {
             name: 'label_type',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 581d98c6b99f7..ff03da4153b18 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -75,7 +75,7 @@ const config: ControlPanelConfig = {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        [<h1 className="section-header">{t('General')}</h1>],
+        [<div className="section-header">{t('General')}</div>],
         [
           {
             name: 'min_val',
@@ -197,7 +197,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Axis')}</h1>],
+        [<div className="section-header">{t('Axis')}</div>],
         [
           {
             name: 'show_axis_tick',
@@ -236,7 +236,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Progress')}</h1>],
+        [<div className="section-header">{t('Progress')}</div>],
         [
           {
             name: 'show_progress',
@@ -277,7 +277,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Intervals')}</h1>],
+        [<div className="section-header">{t('Intervals')}</div>],
         [
           {
             name: 'intervals',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
index cdefae16cab54..cb2f586110177 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -98,7 +98,7 @@ const controlPanel: ControlPanelConfig = {
       controlSetRows: [
         ['color_scheme'],
         ...legendSection,
-        [<h1 className="section-header">{t('Layout')}</h1>],
+        [<div className="section-header">{t('Layout')}</div>],
         [
           {
             name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index 8cd681c5e33e1..97955eec3500c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -126,7 +126,7 @@ function createCustomizeSection(
   controlSuffix: string,
 ): ControlSetRow[] {
   return [
-    [<h1 className="section-header">{label}</h1>],
+    [<div className="section-header">{label}</div>],
     [
       {
         name: `seriesType${controlSuffix}`,
@@ -296,7 +296,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         ['x_axis_time_format'],
         [
           {
@@ -320,7 +320,7 @@ const config: ControlPanelConfig = {
         ],
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
         [
           {
             name: 'minorSplitLine',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
index c195c5e2214d9..9056446f9f412 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -90,7 +90,7 @@ const config: ControlPanelConfig = {
         ],
         ...legendSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Labels')}</h1>],
+        [<div className="section-header">{t('Labels')}</div>],
         [
           {
             name: 'label_type',
@@ -196,7 +196,7 @@ const config: ControlPanelConfig = {
           },
         ],
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Pie shape')}</h1>],
+        [<div className="section-header">{t('Pie shape')}</div>],
         [
           {
             name: 'outerRadius',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
index 0f8e390802a56..d24497280ae6b 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -85,7 +85,7 @@ const config: ControlPanelConfig = {
       controlSetRows: [
         ['color_scheme'],
         ...legendSection,
-        [<h1 className="section-header">{t('Labels')}</h1>],
+        [<div className="section-header">{t('Labels')}</div>],
         [
           {
             name: 'show_labels',
@@ -158,7 +158,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Radar')}</h1>],
+        [<div className="section-header">{t('Radar')}</div>],
         [
           {
             name: 'column_config',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
index 87503166b7977..b973cb6782c03 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -178,7 +178,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         [
           {
             name: 'x_axis_time_format',
@@ -213,7 +213,7 @@ const config: ControlPanelConfig = {
         ],
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
         ['y_axis_format'],
         [
           {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
index bd40eeebe0e75..a3b74aa12f4fe 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -139,7 +139,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         [
           {
             name: 'x_axis_time_format',
@@ -175,7 +175,7 @@ const config: ControlPanelConfig = {
         // eslint-disable-next-line react/jsx-key
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
 
         ['y_axis_format'],
         [
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
index 4cdf16c8395a2..abc5e9a29e724 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -119,7 +119,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
 
         [
           {
@@ -156,7 +156,7 @@ const config: ControlPanelConfig = {
         // eslint-disable-next-line react/jsx-key
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
         ['y_axis_format'],
         [
           {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
index d2f3acce9e08f..f234df0c82b4a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
@@ -136,7 +136,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         [
           {
             name: 'x_axis_time_format',
@@ -172,7 +172,7 @@ const config: ControlPanelConfig = {
         // eslint-disable-next-line react/jsx-key
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
 
         ['y_axis_format'],
         [
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
index 1416a7db4686c..b8d3a31b2c295 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -194,7 +194,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         [
           {
             name: 'x_axis_time_format',
@@ -229,7 +229,7 @@ const config: ControlPanelConfig = {
         ],
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
         ['y_axis_format'],
         [
           {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
index 1f1e22b49b3a5..8f22acadeefc3 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
@@ -197,7 +197,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [<div className="section-header">{t('X Axis')}</div>],
         [
           {
             name: 'x_axis_time_format',
@@ -232,7 +232,7 @@ const config: ControlPanelConfig = {
         ],
         ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        [<div className="section-header">{t('Y Axis')}</div>],
         ['y_axis_format'],
         [
           {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
index aa4a38fca871b..cd48e0f636e0b 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
@@ -107,7 +107,7 @@ const controlPanel: ControlPanelConfig = {
       label: t('Chart options'),
       expanded: true,
       controlSetRows: [
-        [<h1 className="section-header">{t('Layout')}</h1>],
+        [<div className="section-header">{t('Layout')}</div>],
         [
           {
             name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
index 9f6d4e297e031..63ca40225ffe6 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -62,7 +62,7 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['color_scheme'],
-        [<h1 className="section-header">{t('Labels')}</h1>],
+        [<div className="section-header">{t('Labels')}</div>],
         [
           {
             name: 'show_labels',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
index 053d0db8359fd..df050e6dbb418 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -94,7 +94,7 @@ const legendOrientationControl: ControlSetItem = {
 };
 
 export const legendSection: ControlSetRow[] = [
-  [<h1 className="section-header">{t('Legend')}</h1>],
+  [<div className="section-header">{t('Legend')}</div>],
   [showLegendControl],
   [legendTypeControl],
   [legendOrientationControl],
@@ -219,7 +219,7 @@ const tooltipSortByMetricControl: ControlSetItem = {
 };
 
 export const richTooltipSection: ControlSetRow[] = [
-  [<h1 className="section-header">{t('Tooltip')}</h1>],
+  [<div className="section-header">{t('Tooltip')}</div>],
   [richTooltipControl],
   [tooltipSortByMetricControl],
   [tooltipTimeFormatControl],
diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less
index 3f4fad5572708..e997f5fb78c96 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less
@@ -48,6 +48,7 @@
 @almost-black: #263238;
 @gray-dark: #484848;
 @gray-light: #e0e0e0;
+@gray-light5: #666666;
 @gray: #879399;
 @gray-bg: #f7f7f7;
 @gray-heading: #a3a3a3;
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 864bd171c6de8..5b8f8bf559112 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -55,7 +55,7 @@ export type ControlComponentProps<ValueType extends JsonValue = JsonValue> =
   Omit<ControlProps, 'value'> & BaseControlComponentProps<ValueType>;
 
 const StyledControl = styled.div`
-  padding-bottom: ${({ theme }) => theme.gridUnit}px;
+  padding-bottom: ${({ theme }) => theme.gridUnit * 4}px;
 `;
 
 export default function Control(props: ControlProps) {
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 939707515c205..16bf93d047c4a 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { FC, ReactNode } from 'react';
-import { css, t, useTheme } from '@superset-ui/core';
+import { t, css, useTheme, SupersetTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
 import { FormLabel } from 'src/components/Form';
@@ -106,10 +106,12 @@ const ControlHeader: FC<ControlHeaderProps> = ({
     <div className="ControlHeader" data-test={`${name}-header`}>
       <div className="pull-left">
         <FormLabel
-          css={{
-            marginBottom: 0,
-            position: 'relative',
-          }}
+          css={(theme: SupersetTheme) =>
+            css`
+              margin-bottom: ${theme.gridUnit * 0.5}px;
+              position: relative;
+            `
+          }
         >
           {leftNode && <span>{leftNode}</span>}
           <span
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index d4ef2690276a8..98d80275f6977 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -150,6 +150,21 @@ const ControlPanelsTabs = styled(Tabs)`
     .ant-tabs-content-holder {
       padding-top: ${theme.gridUnit * 4}px;
     }
+
+    .ant-collapse-ghost > .ant-collapse-item {
+      &:not(:last-child) {
+        border-bottom: 1px solid ${theme.colors.grayscale.light3};
+      }
+
+      & > .ant-collapse-header {
+        font-size: ${theme.typography.sizes.s}px;
+      }
+
+      & > .ant-collapse-content > .ant-collapse-content-box {
+        padding-bottom: 0;
+        font-size: ${theme.typography.sizes.s}px;
+      }
+    }
   `}
 `;
 
@@ -388,6 +403,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
 
           &:last-child {
             padding-bottom: ${theme.gridUnit * 16}px;
+            border-bottom: 0;
           }
 
           .panel-body {
@@ -515,7 +531,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       >
         <Tabs.TabPane key="query" tab={dataTabTitle}>
           <Collapse
-            bordered
             defaultActiveKey={expandedQuerySections}
             expandIconPosition="right"
             ghost
@@ -528,7 +543,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
         {showCustomizeTab && (
           <Tabs.TabPane key="display" tab={t('Customize')}>
             <Collapse
-              bordered
               defaultActiveKey={expandedCustomizeSections}
               expandIconPosition="right"
               ghost
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
index 5b14f0d52f772..a570bbfed6922 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled, css } from '@superset-ui/core';
 import ControlHeader from '../ControlHeader';
 import Checkbox from '../../../components/Checkbox';
 
@@ -32,7 +33,16 @@ const defaultProps = {
   onChange: () => {},
 };
 
-const checkboxStyle = { paddingRight: '5px' };
+const CheckBoxControlWrapper = styled.div`
+  ${({ theme }) => css`
+    .ControlHeader label {
+      color: ${theme.colors.grayscale.dark1};
+    }
+    span[role='checkbox'] {
+      padding-right: ${theme.gridUnit * 2}px;
+    }
+  `}
+`;
 
 export default class CheckboxControl extends React.Component {
   onChange() {
@@ -43,7 +53,6 @@ export default class CheckboxControl extends React.Component {
     return (
       <Checkbox
         onChange={this.onChange.bind(this)}
-        style={checkboxStyle}
         checked={!!this.props.value}
       />
     );
@@ -52,11 +61,13 @@ export default class CheckboxControl extends React.Component {
   render() {
     if (this.props.label) {
       return (
-        <ControlHeader
-          {...this.props}
-          leftNode={this.renderCheckbox()}
-          onClick={this.onChange.bind(this)}
-        />
+        <CheckBoxControlWrapper>
+          <ControlHeader
+            {...this.props}
+            leftNode={this.renderCheckbox()}
+            onClick={this.onChange.bind(this)}
+          />
+        </CheckBoxControlWrapper>
       );
     }
     return this.renderCheckbox();
diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx
index 12ab0685e4412..4c6825b6aca8f 100644
--- a/superset-frontend/src/explore/controlPanels/sections.tsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@@ -132,7 +132,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
         'of query results',
     ),
     controlSetRows: [
-      [<h1 className="section-header">{t('Rolling window')}</h1>],
+      [<div className="section-header">{t('Rolling window')}</div>],
       [
         {
           name: 'rolling_type',
@@ -181,7 +181,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
           },
         },
       ],
-      [<h1 className="section-header">{t('Time comparison')}</h1>],
+      [<div className="section-header">{t('Time comparison')}</div>],
       [
         {
           name: 'time_compare',
@@ -230,9 +230,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
           },
         },
       ],
-      [<h1 className="section-header">{t('Python functions')}</h1>],
-      // eslint-disable-next-line jsx-a11y/heading-has-content
-      [<h2 className="section-header">pandas.resample</h2>],
+      [<div className="section-header">{t('Resample')}</div>],
       [
         {
           name: 'resample_rule',
diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less
index d85e855b4d2cc..015a8a1a3bed3 100644
--- a/superset-frontend/src/explore/main.less
+++ b/superset-frontend/src/explore/main.less
@@ -127,18 +127,11 @@
   }
 }
 
-h1.section-header {
-  font-size: @font-size-m;
-  font-weight: @font-weight-bold;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-bottom: 5px;
-}
-
-h2.section-header {
+div.section-header {
   font-size: @font-size-s;
   font-weight: @font-weight-bold;
+  color: @gray-light5;
   margin-bottom: 0;
   margin-top: 0;
-  padding-bottom: 5px;
+  padding-bottom: 16px;
 }