(superset) 02/02: fix(ChartCreation): use theme vars and select style

[msyavuz]

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

msyavuz pushed a commit to branch msyavuz/fix/theming-visual-bugs-4
in repository https://gitbox.apache.org/repos/asf/superset.git

commit d98dd9a0b10020efb7378485edeee1b93fb3d21c
Author: Mehmet Salih Yavuz <salih.ya...@proton.me>
AuthorDate: Fri Aug 1 20:21:35 2025 +0300

    fix(ChartCreation): use theme vars and select style
---
 .../src/pages/ChartCreation/index.tsx              | 37 ++++++++--------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx 
b/superset-frontend/src/pages/ChartCreation/index.tsx
index 07a51309d0..34eaee7ec0 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -78,19 +78,19 @@ const StyledContainer = styled.div`
     background-color: ${theme.colorBgContainer};
     margin-left: auto;
     margin-right: auto;
-    padding-left: ${theme.sizeUnit * 4}px;
-    padding-right: ${theme.sizeUnit * 4}px;
-    padding-bottom: ${theme.sizeUnit * 4}px;
+    padding-left: ${theme.padding}px;
+    padding-right: ${theme.padding}px;
+    padding-bottom: ${theme.padding}px;
 
     h3 {
-      padding-bottom: ${theme.sizeUnit * 3}px;
+      padding-bottom: ${theme.paddingSM}px;
     }
 
     & .dataset {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: ${theme.sizeUnit * 5}px;
+      margin-bottom: ${theme.marginMD}px;
 
       & > div {
         min-width: 200px;
@@ -99,14 +99,14 @@ const StyledContainer = styled.div`
 
       & > span {
         color: ${theme.colorText};
-        margin-left: ${theme.sizeUnit * 4}px;
+        margin-left: ${theme.margin}px;
       }
     }
 
     & .viz-gallery {
       border: 1px solid ${theme.colorBorder};
       border-radius: ${theme.borderRadius}px;
-      margin: ${theme.sizeUnit}px 0px;
+      margin: ${theme.marginXXS}px 0px;
       max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px);
       flex: 1;
     }
@@ -120,7 +120,7 @@ const StyledContainer = styled.div`
 
       & > span {
         color: ${theme.colorText};
-        margin-right: ${theme.sizeUnit * 4}px;
+        margin-right: ${theme.margin}px;
       }
     }
 
@@ -131,7 +131,7 @@ const StyledContainer = styled.div`
     }
 
     &&&& .ant-steps-item-icon {
-      margin-right: ${theme.sizeUnit * 2}px;
+      margin-right: ${theme.marginXS}px;
       width: ${theme.sizeUnit * 5}px;
       height: ${theme.sizeUnit * 5}px;
       line-height: ${theme.sizeUnit * 5}px;
@@ -153,18 +153,6 @@ const StyledContainer = styled.div`
     &&&& .ant-tooltip-open {
       display: inline;
     }
-
-    &&&& .ant-select-selector {
-      padding: 0;
-    }
-
-    &&&& .ant-select-selection-placeholder {
-      padding-left: ${theme.sizeUnit * 3}px;
-    }
-
-    &&&& .ant-select-selection-item {
-      padding-left: ${theme.sizeUnit * 3}px;
-    }
   `}
 `;
 
@@ -176,9 +164,10 @@ const StyledStepTitle = styled.span`
 `;
 
 const StyledStepDescription = styled.div`
-  ${({ theme: { sizeUnit } }) => `
-    margin-top: ${sizeUnit * 4}px;
-    margin-bottom: ${sizeUnit * 3}px;
+  ${({ theme }) => `
+    margin-top: ${theme.margin}px;
+    margin-bottom: ${theme.marginSM}px;
+    margin-left: ${theme.marginMD}px;
   `}
 `;