From b89e0d74befcf93da61fcae1f4c80106a1dc5dea Mon Sep 17 00:00:00 2001
From: Rafael Benitez <rebenitez1802@gmail.com>
Date: Mon, 18 Aug 2025 13:15:17 -0400
Subject: [PATCH] fix(theming): Some visual issues (#34676)

---
 .../new/DraggableNewComponent.tsx             | 43 +++++++++++++------
 .../DatasourcePanel/DatasourcePanelItem.tsx   |  4 +-
 .../components/controls/CheckboxControl.jsx   |  3 ++
 .../src/features/home/RightMenu.tsx           |  9 +++-
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
index cb757f8079a..8f384dc688e 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
@@ -19,6 +19,7 @@
 import { PureComponent } from 'react';
 import cx from 'classnames';
 import { css, styled } from '@superset-ui/core';
+import { Icons } from '@superset-ui/core/components/Icons';
 import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable';
 import { NEW_COMPONENTS_SOURCE_ID } from 'src/dashboard/util/constants';
 import { NEW_COMPONENT_SOURCE_TYPE } from 'src/dashboard/util/componentTypes';
@@ -36,18 +37,33 @@ interface DraggableNewComponentProps {
 const NewComponent = styled.div`
   ${({ theme }) => css`
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
     align-items: center;
-    padding: ${theme.sizeUnit * 4}px;
-    background: ${theme.colors.grayscale.light5};
+    justify-content: space-between;
+    padding: 0 ${theme.sizeUnit}px;
+    margin: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
+
+    // hack to make the drag preview image corners rounded
+    transform: translate(0, 0);
+    color: ${theme.colorText};
+    background-color: ${theme.colorBgLayout};
+    border-radius: ${theme.borderRadius}px;
     cursor: move;
-    &:not(.static):hover {
-      background: ${theme.colors.grayscale.light4};
+
+    &:hover {
+      background-color: ${theme.colorPrimaryBgHover};
     }
   `}
 `;
 
+const NewComponentContent = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    margin-right: ${theme.sizeUnit * 2}px;
+  `}
+`;
+
 const NewComponentPlaceholder = styled.div`
   ${({ theme }) => css`
     position: relative;
@@ -83,12 +99,15 @@ export default class DraggableNewComponent extends PureComponent<DraggableNewCom
       >
         {({ dragSourceRef }) => (
           <NewComponent ref={dragSourceRef} data-test="new-component">
-            <NewComponentPlaceholder
-              className={cx('new-component-placeholder', className)}
-            >
-              {IconComponent && <IconComponent iconSize="xl" />}
-            </NewComponentPlaceholder>
-            {label}
+            <NewComponentContent>
+              <NewComponentPlaceholder
+                className={cx('new-component-placeholder', className)}
+              >
+                {IconComponent && <IconComponent iconSize="xl" />}
+              </NewComponentPlaceholder>
+              {label}
+            </NewComponentContent>
+            <Icons.Drag iconSize="xl" />
           </NewComponent>
         )}
       </DragDroppable>
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
index 85c00fadfde..7ee6908d5dc 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
@@ -200,9 +200,9 @@ const DatasourcePanelItem = ({
             <SectionHeaderTextContainer>
               <SectionHeader ref={labelRef}>{folder.name}</SectionHeader>
               {collapsedFolderIds.has(folder.id) ? (
-                <Icons.DownOutlined iconSize="s" />
+                <Icons.DownOutlined iconSize="s" iconColor={theme.colorText} />
               ) : (
-                <Icons.UpOutlined iconSize="s" />
+                <Icons.UpOutlined iconSize="s" iconColor={theme.colorText} />
               )}
             </SectionHeaderTextContainer>
           </Tooltip>
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
index 63baa6454da..a991c73e2b9 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -41,6 +41,9 @@ const CheckBoxControlWrapper = styled.div`
     span:has(label) {
       padding-right: ${theme.sizeUnit * 2}px;
     }
+    .ant-checkbox-wrapper {
+      font-size: ${theme.fontSizeSM}px;
+    }
   `}
 `;
 
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index b86f98d4158..588f19c5045 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -458,7 +458,14 @@ const RightMenu = ({
               label: isFrontendRoute(child.url) ? (
                 <Link to={child.url || ''}>{menuItemDisplay}</Link>
               ) : (
-                <Typography.Link href={child.url || ''}>
+                <Typography.Link
+                  href={child.url || ''}
+                  css={css`
+                    display: flex;
+                    align-items: center;
+                    line-height: ${theme.sizeUnit * 10}px;
+                  `}
+                >
                   {menuItemDisplay}
                 </Typography.Link>
               ),