From 97e182d12d6cef082aaf0e86844239a04d77754c Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 27 Dec 2024 09:50:12 -0800
Subject: [PATCH] visual touchups

---
 .../src/explore/components/DataTablesPane/DataTablesPane.tsx | 2 +-
 .../src/explore/components/DatasourcePanel/index.tsx         | 1 -
 .../src/explore/components/ExploreViewContainer/index.jsx    | 5 ++---
 .../explore/components/controls/DatasourceControl/index.jsx  | 1 -
 .../src/explore/components/controls/OptionControls/index.tsx | 5 ++++-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 640834ba946a6..2906c756f6791 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -41,7 +41,7 @@ import { DataTablesPaneProps, ResultTypes } from './types';
 const SouthPane = styled.div`
   ${({ theme }) => `
     position: relative;
-    background-color: ${theme.colors.grayscale.light5};
+    background-color: ${theme.antd.colorBgBase};
     z-index: 5;
     overflow: hidden;
 
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
index d15df0a2f4425..d946576c1b9b8 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
@@ -80,7 +80,6 @@ export interface Props {
 
 const DatasourceContainer = styled.div`
   ${({ theme }) => css`
-    background-color: ${theme.colors.grayscale.light5};
     position: relative;
     height: 100%;
     display: flex;
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index 229d21aa2c04d..d6cae01e88d32 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -97,7 +97,7 @@ const propTypes = {
 
 const ExplorePanelContainer = styled.div`
   ${({ theme }) => css`
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colors.lightest};
     text-align: left;
     position: relative;
     width: 100%;
@@ -114,7 +114,6 @@ const ExplorePanelContainer = styled.div`
       max-height: 100%;
     }
     .data-source-selection {
-      background-color: ${theme.colors.grayscale.light5};
       padding: ${theme.gridUnit * 2}px 0;
       border-right: 1px solid ${theme.colors.grayscale.light2};
     }
@@ -150,7 +149,7 @@ const ExplorePanelContainer = styled.div`
     }
     .sidebar {
       height: 100%;
-      background-color: ${theme.colors.grayscale.light4};
+      background-color: ${theme.colors.lightest};
       padding: ${theme.gridUnit * 2}px;
       width: ${theme.gridUnit * 8}px;
     }
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index 90f8b5d99e4d7..3395624e520bf 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -106,7 +106,6 @@ const Styles = styled.div`
   .title-select {
     flex: 1 1 100%;
     display: inline-block;
-    background-color: ${({ theme }) => theme.colors.grayscale.light3};
     padding: ${({ theme }) => theme.gridUnit * 2}px;
     border-radius: ${({ theme }) => theme.borderRadius}px;
     text-align: center;
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 194a9944b63f6..52546e814b14e 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -42,9 +42,12 @@ export const OptionControlContainer = styled.div<{
   width: 100%;
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
   height: ${({ theme }) => theme.gridUnit * 6}px;
-  background-color: ${({ theme }) => theme.colors.grayscale.light3};
+  background-color: ${({ theme }) => theme.colors.grayscale.light4};
   border-radius: 3px;
   cursor: ${({ withCaret }) => (withCaret ? 'pointer' : 'default')};
+  :hover {
+    background-color: ${({ theme }) => theme.colors.grayscale.light3};
+  }
 `;
 export const Label = styled.div`
   ${({ theme }) => `