fix(theming): Fix visual regressions from theming P4

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { styled, useTheme } from '@superset-ui/core';
+import { styled, useTheme, css } from '@superset-ui/core';
 import { Skeleton } from '../Skeleton';
 import { Card } from '../Card';
 import { CertifiedBadge } from '../CertifiedBadge';
@@ -93,12 +93,14 @@ const TitleLink = styled.span`
 `;
 
 const TitleRight = styled.span`
-  position: absolute;
-  right: -1px;
-  font-weight: 400;
-  bottom: ${({ theme }) => theme.sizeUnit}px;
+  ${({ theme }) => css`
+    position: absolute;
+    right: -1px;
+    font-weight: 400;
+    bottom: ${theme.sizeUnit * 3}px;
+    right: ${theme.sizeUnit * 2}px;
+  `}
 `;
-
 const CoverFooter = styled.div`
   display: flex;
   flex-wrap: nowrap;

superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx

@@ -473,6 +473,10 @@ const Select = forwardRef(
             onMouseDown={e => {
               e.preventDefault();
               e.stopPropagation();
+            }}
+            onClick={e => {
+              e.preventDefault();
+              e.stopPropagation();
               handleDeselectAll();
             }}
           >

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -939,8 +939,8 @@ const SqlEditor: FC<Props> = ({
             <p
               css={css`
                 font-size: ${theme.fontSize}px;
-                font-weight: ${theme.fontSize};
-                color: ${theme.colors.primary.dark2};
+                font-weight: ${theme.fontWeightStrong};
+                color: ${theme.colorPrimaryText};
               `}
             >
               {' '}
@@ -950,8 +950,8 @@ const SqlEditor: FC<Props> = ({
             <p
               css={css`
                 font-size: ${theme.fontSize}px;
-                font-weight: ${theme.fontSize};
-                color: ${theme.colors.primary.dark2};
+                font-weight: ${theme.fontWeightStrong};
+                color: ${theme.colorPrimaryText};
               `}
             >
               {t(

superset-frontend/src/SqlLab/components/TableElement/index.tsx

@@ -16,8 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// TODO: Remove fa-icon
-/* eslint-disable icons/no-fa-icons-usage */
 import { useState, useRef, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import type { Table } from 'src/SqlLab/types';

superset-frontend/src/SqlLab/components/TablePreview/index.tsx

@@ -16,8 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// TODO: Remove fa-icon
-/* eslint-disable icons/no-fa-icons-usage */
 import { type FC, useCallback, useMemo, useRef, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { nanoid } from 'nanoid';

superset-frontend/src/components/Datasource/CollectionTable.tsx

@@ -17,11 +17,8 @@
  * under the License.
  */
 import { PureComponent, ReactNode } from 'react';
-
 import { nanoid } from 'nanoid';
-
-import { t, styled, css } from '@superset-ui/core';
-
+import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import { Icons, Button, InfoTooltip } from '@superset-ui/core/components';
 import { FilterValue } from 'react-table';
 import Table, {
@@ -356,7 +353,11 @@ export default class CRUDCollection extends PureComponent<
           <span
             data-test="crud-delete-option"
             className="text-primary"
-            css={{ display: 'flex', justifyContent: 'center' }}
+            css={(theme: SupersetTheme) => css`
+              display: flex;
+              justify-content: center;
+              color: ${theme.colorTextTertiary};
+            `}
           >
             <Icons.DeleteOutlined
               aria-label="Delete item"
@@ -366,6 +367,7 @@ export default class CRUDCollection extends PureComponent<
               tabIndex={0}
               onClick={() => this.deleteItem(record.id)}
               iconSize="l"
+              iconColor="inherit"
             />
           </span>
         ),

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -1077,7 +1077,7 @@ class DatasourceEditor extends PureComponent {
     <div
       css={theme => css`
         position: absolute;
-        background: ${theme.colors.secondary.light5};
+        background: ${theme.colorBgLayout};
         align-items: center;
         display: flex;
         height: 100%;
@@ -1133,6 +1133,7 @@ class DatasourceEditor extends PureComponent {
       <span
         css={theme => css`
           font-size: ${theme.fontSizeSM}px;
+          margin-right: ${theme.sizeUnit}px;
         `}
       >
         {t(' to check for details.')}
@@ -1151,7 +1152,14 @@ class DatasourceEditor extends PureComponent {
     return (
       <div>
         <EditLockContainer>
-          <span role="button" tabIndex={0} onClick={this.onChangeEditMode}>
+          <span
+            css={theme => css`
+              color: ${theme.colorTextTertiary};
+            `}
+            role="button"
+            tabIndex={0}
+            onClick={this.onChangeEditMode}
+          >
             {this.state.isEditMode ? (
               <Icons.UnlockOutlined
                 iconSize="xl"
@@ -1280,6 +1288,9 @@ class DatasourceEditor extends PureComponent {
                         </>
                       ) : (
                         <TextAreaControl
+                          css={theme => css`
+                            margin-top: ${theme.sizeUnit * 2}px;
+                          `}
                           hotkeys={[
                             {
                               name: 'formatQuery',
@@ -1309,6 +1320,8 @@ class DatasourceEditor extends PureComponent {
                           display: flex;
                         `}
                       >
+                        {this.props.database?.error &&
+                          this.renderSqlErrorMessage()}
                         <Button
                           disabled={this.props.database?.isLoading}
                           tooltip={t('Open SQL Lab in a new tab')}
@@ -1321,7 +1334,7 @@ class DatasourceEditor extends PureComponent {
                           <Icons.ExportOutlined
                             iconSize="s"
                             css={theme => ({
-                              color: theme.colors.primary.dark1,
+                              color: theme.colorPrimaryBg,
                             })}
                           />
                         </Button>
@@ -1344,9 +1357,6 @@ class DatasourceEditor extends PureComponent {
                         </Button>
                       </div>
                     }
-                    errorMessage={
-                      this.props.database?.error && this.renderSqlErrorMessage()
-                    }
                   />
                   {this.props.database?.queryResult && (
                     <>

superset-frontend/src/components/Datasource/Field.tsx

@@ -72,10 +72,20 @@ export default function Field<V>({
   const extra = !compact && description ? description : undefined;
   const infoTooltip =
     compact && description ? (
-      <Tooltip id="field-descr" placement="right" title={description}>
-        <Icons.InfoCircleFilled
+      <Tooltip
+        css={css`
+          color: ${theme.colorTextTertiary};
+        `}
+        id="field-descr"
+        placement="right"
+        title={description}
+      >
+        <Icons.InfoCircleOutlined
           iconSize="s"
-          style={{ marginLeft: theme.sizeUnit }}
+          css={css`
+            margin-left: ${theme.sizeUnit}px;
+          `}
+          iconColor={theme.colorTextTertiary}
         />
       </Tooltip>
     ) : undefined;

superset-frontend/src/components/MessageToasts/Toast.tsx

@@ -139,7 +139,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
       <Icons.CloseOutlined
         iconSize="m"
         className="toast__close pointer"
-        iconColor="#888"
+        iconColor={theme.colorTextTertiary}
         role="button"
         tabIndex={0}
         onClick={handleClosePress}

superset-frontend/src/dashboard/components/DeleteComponentButton.tsx

@@ -19,16 +19,22 @@
 import { MouseEventHandler, FC } from 'react';
 
 import { Icons } from '@superset-ui/core/components/Icons';
+import type { IconType } from '@superset-ui/core/components/Icons/types';
 import IconButton from './IconButton';
 
 type DeleteComponentButtonProps = {
   onDelete: MouseEventHandler<HTMLDivElement>;
+  iconSize?: IconType['iconSize'];
 };
 
 const DeleteComponentButton: FC<DeleteComponentButtonProps> = ({
   onDelete,
+  iconSize,
 }) => (
-  <IconButton onClick={onDelete} icon={<Icons.DeleteOutlined iconSize="l" />} />
+  <IconButton
+    onClick={onDelete}
+    icon={<Icons.DeleteOutlined iconSize={iconSize ?? 'l'} />}
+  />
 );
 
 export default DeleteComponentButton;

superset-frontend/src/dashboard/components/gridComponents/Column.jsx

@@ -212,10 +212,13 @@ const Column = props => {
           {editMode && (
             <HoverMenu innerRef={dragSourceRef} position="top">
               <DragHandle position="top" />
-              <DeleteComponentButton onDelete={handleDeleteComponent} />
+              <DeleteComponentButton
+                iconSize="m"
+                onDelete={handleDeleteComponent}
+              />
               <IconButton
                 onClick={handleChangeFocus}
-                icon={<Icons.SettingOutlined iconSize="xl" />}
+                icon={<Icons.SettingOutlined iconSize="m" />}
               />
             </HoverMenu>
           )}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -212,6 +212,7 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
           />
           <Icons.FilterOutlined
             {...getFilterBarTestId('filter-icon')}
+            iconColor={theme.colorTextTertiary}
             iconSize="l"
           />
         </CollapsedBar>

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx

@@ -40,7 +40,6 @@ const Container = styled.div<TitleContainerProps>`
     cursor: ${isDragging ? 'grabbing' : 'pointer'};
     width: 100%;
     display: flex;
-    padding:  ${theme.sizeUnit}px;
   `}
 `;
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx

@@ -42,12 +42,11 @@ const Container = styled.div`
 
 const ContentHolder = styled.div`
   flex-grow: 3;
-  margin-left: ${({ theme }) => theme.sizeUnit * -1 - 1};
 `;
 
 const TitlesContainer = styled.div`
-  min-width: 300px;
-  max-width: 300px;
+  min-width: 290px;
+  max-width: 290px;
   border-right: 1px solid ${({ theme }) => theme.colorSplit};
 `;
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx

@@ -99,7 +99,7 @@ const FilterTitlePane: FC<Props> = ({
           alignItems: 'flex-start',
           paddingTop: theme.sizeUnit * 3,
           position: 'sticky',
-          bottom: theme.sizeUnit,
+          bottom: theme.sizeUnit * 3,
         }}
       >
         <Button

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -167,13 +167,14 @@ const DefaultValueContainer = styled.div`
 `;
 
 const StyledAsterisk = styled.span`
-  color: ${({ theme }) => theme.colorError};
-  font-size: ${({ theme }) => theme.fontSizeSM}px;
-  margin-left: ${({ theme }) => theme.sizeUnit - 1}px;
+  ${({ theme }) => `
+  color: ${theme.colorError};
+  font-size: ${theme.fontSizeSM}px;
+  margin-left: ${theme.sizeUnit - 1}px;
 
   &:before {
     content: '*';
-  }
+  `}
 `;
 
 const FilterTypeInfo = styled.div<{ expanded: boolean }>`

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

@@ -76,6 +76,7 @@ const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>`
 
   .ant-modal-body {
     padding: 0px;
+    overflow: auto;
   }
 
   ${({ expanded }) =>

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx

@@ -37,7 +37,6 @@ import {
 import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption';
 import {
   AddControlLabel,
-  AddIconButton,
   HeaderContainer,
   LabelsContainer,
 } from 'src/explore/components/controls/OptionControls';
@@ -359,23 +358,21 @@ class AdhocFilterControl extends Component {
       <div className="metrics-select" data-test="adhoc-filter-control">
         <HeaderContainer>
           <ControlHeader {...this.props} />
-          {this.addNewFilterPopoverTrigger(
-            <AddIconButton data-test="add-filter-button">
-              <Icons.PlusOutlined iconSize="m" />
-            </AddIconButton>,
-          )}
         </HeaderContainer>
         <LabelsContainer>
-          {this.state.values.length > 0
-            ? this.state.values.map((value, index) =>
-                this.valueRenderer(value, index),
-              )
-            : this.addNewFilterPopoverTrigger(
-                <AddControlLabel>
-                  <Icons.PlusOutlined iconSize="m" />
-                  {t('Add filter')}
-                </AddControlLabel>,
-              )}
+          {[
+            ...(this.state.values.length > 0
+              ? this.state.values.map((value, index) =>
+                  this.valueRenderer(value, index),
+                )
+              : []),
+            this.addNewFilterPopoverTrigger(
+              <AddControlLabel role="button" data-test="add-filter-button">
+                <Icons.PlusOutlined iconSize="m" />
+                {t('Add filter')}
+              </AddControlLabel>,
+            ),
+          ]}
         </LabelsContainer>
       </div>
     );