fix(UI): remaining UI fixes

Author: gabotorresruiz

superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx

@@ -105,6 +105,15 @@ const StyledTable = styled(Table)<{
       white-space: nowrap;
     }
 
+    .ant-table-tbody > tr > td {
+      height: ${theme.sizeUnit * 12}px;
+    }
+
+    .ant-table-tbody > tr > td.ant-table-cell:has(.ant-avatar-group) {
+      padding-top: ${theme.sizeUnit}px;
+      padding-bottom: ${theme.sizeUnit}px;
+    }
+
     .ant-table-placeholder .ant-table-cell {
       border-bottom: 0;
     }

superset-frontend/src/components/ListView/ListView.tsx

@@ -60,7 +60,7 @@ const ListViewStyles = styled.div`
         & .controls {
           display: flex;
           flex-wrap: wrap;
-          column-gap: ${theme.sizeUnit * 6}px;
+          column-gap: ${theme.sizeUnit * 7}px;
           row-gap: ${theme.sizeUnit * 4}px;
         }
       }

superset-frontend/src/components/ListView/utils.ts

@@ -70,7 +70,7 @@ const RisonParam: QueryParamConfig<string, any> = {
       : rison.decode(dataStr),
 };
 
-export const SELECT_WIDTH = 175;
+export const SELECT_WIDTH = 176;
 export const RANGE_WIDTH = 300;
 export const WIDER_DROPDOWN_WIDTH = '300px';
 

superset-frontend/src/explore/components/ControlHeader.tsx

@@ -167,7 +167,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
                 placement="top"
                 title={validationErrors?.join(' ')}
               >
-                <Icons.InfoCircleOutlined iconColor={theme.colorErrorText} />
+                <Icons.ExclamationCircleOutlined iconColor={theme.colorError} />
               </Tooltip>{' '}
             </span>
           )}

superset-frontend/src/explore/components/ControlPanelsContainer.tsx

@@ -627,7 +627,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
             id={`${kebabCase('validation-errors')}-tooltip`}
             title={t('This section contains validation errors')}
           >
-            <Icons.InfoCircleOutlined iconColor={theme.colorErrorText} />
+            <Icons.ExclamationCircleOutlined iconColor={theme.colorError} />
           </Tooltip>
         )}
       </span>
@@ -752,9 +752,9 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
               placement="right"
               title={props.errorMessage}
             >
-              <Icons.InfoCircleOutlined
+              <Icons.ExclamationCircleOutlined
                 data-test="query-error-tooltip-trigger"
-                iconColor={theme.colorErrorText}
+                iconColor={theme.colorError}
                 iconSize="s"
               />
             </Tooltip>
@@ -813,9 +813,9 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
               placement="right"
               title={t('This section contains validation errors')}
             >
-              <Icons.InfoCircleOutlined
+              <Icons.ExclamationCircleOutlined
                 data-test="matrixify-validation-error-tooltip-trigger"
-                iconColor={theme.colorErrorText}
+                iconColor={theme.colorError}
                 iconSize="s"
               />
             </Tooltip>

superset-frontend/src/features/home/Menu.tsx

@@ -44,7 +44,6 @@ const StyledHeader = styled.header`
   ${({ theme }) => css`
     background-color: ${theme.colorBgContainer};
     border-bottom: 1px solid ${theme.colorBorderSecondary};
-    min-height: ${theme.sizeUnit * 13}px;
     padding: 0 ${theme.sizeUnit * 4}px;
     z-index: 10;
 
@@ -116,17 +115,18 @@ const { SubMenu } = MainNav;
 const StyledSubMenu = styled(SubMenu)`
   ${({ theme }) => css`
     &.ant-menu-submenu.ant-menu-submenu-horizontal {
-      padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
       display: flex;
       align-items: center;
       height: 100%;
+      padding: 0;
 
       .ant-menu-submenu-title {
         display: flex;
         gap: ${theme.sizeUnit * 2}px;
         flex-direction: row-reverse;
         align-items: center;
-        padding: 0;
+        height: 100%;
+        padding: 0 ${theme.sizeUnit * 4}px;
       }
 
       &:hover,
@@ -151,7 +151,8 @@ const StyledSubMenu = styled(SubMenu)`
         transition: 0.2s all ease-out;
       }
 
-      &:hover::after {
+      &:hover::after,
+      &.ant-menu-submenu-open::after {
         transform: scale(1);
       }
     }
@@ -162,6 +163,13 @@ const StyledSubMenu = styled(SubMenu)`
   `}
 `;
 
+const StyledBrandWrapper = styled.div<{ margin?: string }>`
+  ${({ margin }) => css`
+    height: ${margin ? 'auto' : '100%'};
+    margin: ${margin ?? 0};
+  `}
+`;
+
 const StyledBrandLink = styled(Typography.Link)`
   ${({ theme }) => css`
     align-items: center;
@@ -281,10 +289,10 @@ export function Menu({
       <StyledSubMenu
         key={label}
         title={label}
+        popupOffset={[0, -8]}
         icon={
           showMenu === 'inline' ? <></> : <Icons.DownOutlined iconSize="xs" />
         }
-        popupOffset={[10, 3]}
       >
         {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
           if (typeof child === 'string' && child === '-' && label !== 'Data') {
@@ -318,14 +326,16 @@ export function Menu({
     let link;
     if (theme.brandLogoUrl) {
       link = (
-        <StyledBrandLink href={theme.brandLogoHref}>
-          <Image
-            preview={false}
-            src={theme.brandLogoUrl}
-            alt={theme.brandLogoAlt || 'Apache Superset'}
-            height={theme.brandLogoHeight}
-          />
-        </StyledBrandLink>
+        <StyledBrandWrapper margin={theme.brandLogoMargin}>
+          <StyledBrandLink href={theme.brandLogoHref}>
+            <Image
+              preview={false}
+              src={theme.brandLogoUrl}
+              alt={theme.brandLogoAlt || 'Apache Superset'}
+              height={theme.brandLogoHeight}
+            />
+          </StyledBrandLink>
+        </StyledBrandWrapper>
       );
     } else if (isFrontendRoute(window.location.pathname)) {
       // ---------------------------------------------------------------------------------

superset-frontend/src/features/home/RightMenu.tsx

@@ -69,7 +69,6 @@ const StyledDiv = styled.div<{ align: string }>`
   flex-direction: row;
   justify-content: ${({ align }) => align};
   align-items: center;
-  margin-right: ${({ theme }) => theme.sizeUnit}px;
 `;
 
 const StyledMenuItemWithIcon = styled.div`

superset/config.py

@@ -752,6 +752,7 @@ class D3TimeFormat(TypedDict, total=False):
         # Brand
         "brandLogoAlt": "Apache Superset",
         "brandLogoUrl": APP_ICON,
+        "brandLogoMargin": "18px 0",
         "brandLogoHref": "/",
         "brandLogoHeight": "24px",
         # Spinner
@@ -1868,8 +1869,7 @@ def EMAIL_HEADER_MUTATOR(  # pylint: disable=invalid-name,unused-argument  # noq
 CONTENT_SECURITY_POLICY_WARNING = True
 
 # Do you want Talisman enabled?
-# TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", True))
-TALISMAN_ENABLED = False
+TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", True))
 
 # If you want Talisman, how do you want it configured??
 # For more information on setting up Talisman, please refer to