fix(theming): Fix visual regressions from theming P6 (apache#33898)

Author: EnxDev

superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js

@@ -62,6 +62,6 @@ describe('Dashboard actions', () => {
     // Verify the color of the outlined star (gray)
     cy.get('@starIconOutlinedAfter')
       .should('have.css', 'color')
-      .and('eq', 'rgb(133, 133, 133)');
+      .and('eq', 'rgba(0, 0, 0, 0.45)');
   });
 });

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

@@ -71,7 +71,7 @@ export const FaveStar = ({
         <Icons.StarOutlined
           aria-label="unstarred"
           iconSize="l"
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorTextTertiary}
           name="favorite-unselected"
         />
       )}

superset-frontend/packages/superset-ui-core/src/components/MetadataBar/MetadataBar.test.tsx

@@ -165,8 +165,10 @@ test('renders clickable items with blue icons when the bar is collapsed', async
     const images = screen.getAllByRole('img');
     const clickableColor = window.getComputedStyle(images[0]).color;
     const nonClickableColor = window.getComputedStyle(images[1]).color;
-    expect(clickableColor).toBe(hexToRgb(supersetTheme.colors.primary.base));
-    expect(nonClickableColor).toBe(hexToRgb(supersetTheme.colorText));
+    expect(clickableColor).toBe(hexToRgb(supersetTheme.colorPrimary));
+    expect(nonClickableColor.replace(/\s+/g, '')).toBe(
+      supersetTheme.colorTextTertiary.replace(/\s+/g, ''),
+    );
   });
 });
 

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

@@ -80,7 +80,7 @@ const StyledItem = styled.div<{
     padding-right: ${last ? 0 : SPACE_BETWEEN_ITEMS}px;
     cursor: ${onClick ? 'pointer' : 'default'};
     & .metadata-icon {
-      color: ${onClick && collapsed ? theme.colorPrimary : theme.colorTextBase};
+      color: ${onClick && collapsed ? theme.colorPrimary : theme.colorTextTertiary};
       padding-right: ${collapsed ? 0 : ICON_PADDING}px;
       & .anticon {
         line-height: 0;

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -26,7 +26,6 @@ import {
   FeatureFlag,
   t,
   getExtensionsRegistry,
-  useTheme,
 } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
@@ -159,7 +158,6 @@ const discardChanges = () => {
 };
 
 const Header = () => {
-  const theme = useTheme();
   const dispatch = useDispatch();
   const [didNotifyMaxUndoHistoryToast, setDidNotifyMaxUndoHistoryToast] =
     useState(false);
@@ -650,10 +648,7 @@ const Header = () => {
                   data-test="header-save-button"
                   aria-label={t('Save')}
                 >
-                  <Icons.SaveOutlined
-                    iconColor={hasUnsavedChanges && theme.colors.primary.light5}
-                    iconSize="m"
-                  />
+                  <Icons.SaveOutlined iconSize="m" />
                   {t('Save')}
                 </Button>
               </div>

superset-frontend/src/explore/components/controls/TextAreaControl.jsx

@@ -25,7 +25,7 @@ import {
   TextAreaEditor,
   ModalTrigger,
 } from '@superset-ui/core/components';
-import { t, withTheme } from '@superset-ui/core';
+import { t, withTheme, css } from '@superset-ui/core';
 
 import ControlHeader from 'src/explore/components/ControlHeader';
 
@@ -112,6 +112,11 @@ class TextAreaControl extends Component {
       const codeEditor = (
         <div>
           <TextAreaEditor
+            css={css`
+              .ace_gutter-active-line {
+                background-color: inherit;
+              }
+            `}
             mode={this.props.language}
             style={style}
             minLines={minLines}

superset-frontend/src/pages/DatasetList/index.tsx

@@ -468,7 +468,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                           'You must be a dataset owner in order to edit. Please reach out to a dataset owner to request modifications or edit access.',
                         )
                   }
-                  placement="bottomRight"
+                  placement="bottom"
                 >
                   <span
                     role="button"