chore(explore): update Explore icons and icon colors (#20612)

* Update Explore icons and icon colors.

* Change shade of blue and make blue only appear when fields have never been filled in.

* Fix Cypress test.

* Update non-error validation color from blue to yellow.

* Unpack ternary.

* Replace direct AntD imports with our Icons component.

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

@@ -35,6 +35,7 @@ import {
   DatasourceType,
   css,
   SupersetTheme,
+  useTheme,
 } from '@superset-ui/core';
 import {
   ControlPanelSectionConfig,
@@ -42,7 +43,6 @@ import {
   CustomControlItem,
   Dataset,
   ExpandedControlItem,
-  InfoTooltipWithTrigger,
   sections,
 } from '@superset-ui/chart-controls';
 
@@ -56,8 +56,10 @@ import { getSectionsToRender } from 'src/explore/controlUtils';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import { ChartState, ExplorePageState } from 'src/explore/types';
 import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
 
 import { rgba } from 'emotion-rgba';
+import { kebabCase } from 'lodash';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import { ExploreAlert } from './ExploreAlert';
@@ -85,6 +87,16 @@ export type ExpandedControlPanelSectionConfig = Omit<
   controlSetRows: ExpandedControlItem[][];
 };
 
+const iconStyles = css`
+  &.anticon {
+    font-size: unset;
+    .anticon {
+      line-height: unset;
+      vertical-align: unset;
+    }
+  }
+`;
+
 const actionButtonsContainerStyles = (theme: SupersetTheme) => css`
   display: flex;
   position: sticky;
@@ -235,7 +247,19 @@ function getState(
   };
 }
 
+function useResetOnChangeRef(initialValue: () => any, resetOnChangeValue: any) {
+  const value = useRef(initialValue());
+  const prevResetOnChangeValue = useRef(resetOnChangeValue);
+  if (prevResetOnChangeValue.current !== resetOnChangeValue) {
+    value.current = initialValue();
+    prevResetOnChangeValue.current = resetOnChangeValue;
+  }
+
+  return value;
+}
+
 export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
+  const { colors } = useTheme();
   const pluginContext = useContext(PluginContext);
 
   const prevState = usePrevious(props.exploreState);
@@ -367,6 +391,11 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
     );
   };
 
+  const sectionHasHadNoErrors = useResetOnChangeRef(
+    () => ({}),
+    props.form_data.viz_type,
+  );
+
   const renderControlPanelSection = (
     section: ExpandedControlPanelSectionConfig,
   ) => {
@@ -394,6 +423,15 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
         );
       }),
     );
+
+    if (!hasErrors) {
+      sectionHasHadNoErrors.current[sectionId] = true;
+    }
+
+    const errorColor = sectionHasHadNoErrors.current[sectionId]
+      ? colors.error.base
+      : colors.alert.base;
+
     const PanelHeader = () => (
       <span data-test="collapsible-control-panel-header">
         <span
@@ -405,15 +443,22 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
           {label}
         </span>{' '}
         {description && (
-          // label is only used in tooltip id (should probably call this prop `id`)
-          <InfoTooltipWithTrigger label={sectionId} tooltip={description} />
+          <Tooltip id={sectionId} title={description}>
+            <Icons.InfoCircleOutlined css={iconStyles} />
+          </Tooltip>
         )}
         {hasErrors && (
-          <InfoTooltipWithTrigger
-            label="validation-errors"
-            bsStyle="danger"
-            tooltip="This section contains validation errors"
-          />
+          <Tooltip
+            id={`${kebabCase('validation-errors')}-tooltip`}
+            title="This section contains validation errors"
+          >
+            <Icons.InfoCircleOutlined
+              css={css`
+                ${iconStyles}
+                color: ${errorColor};
+              `}
+            />
+          </Tooltip>
         )}
       </span>
     );
@@ -514,14 +559,26 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
     [handleClearFormClick, handleContinueClick, hasControlsTransferred],
   );
 
-  const dataTabTitle = useMemo(
-    () => (
+  const dataTabHasHadNoErrors = useResetOnChangeRef(
+    () => false,
+    props.form_data.viz_type,
+  );
+
+  const dataTabTitle = useMemo(() => {
+    if (!props.errorMessage) {
+      dataTabHasHadNoErrors.current = true;
+    }
+
+    const errorColor = dataTabHasHadNoErrors.current
+      ? colors.error.base
+      : colors.alert.base;
+
+    return (
       <>
         <span>{t('Data')}</span>
         {props.errorMessage && (
           <span
             css={(theme: SupersetTheme) => css`
-              font-size: ${theme.typography.sizes.xs}px;
               margin-left: ${theme.gridUnit * 2}px;
             `}
           >
@@ -531,14 +588,23 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
               placement="right"
               title={props.errorMessage}
             >
-              <i className="fa fa-exclamation-circle text-danger fa-lg" />
+              <Icons.ExclamationCircleOutlined
+                css={css`
+                  ${iconStyles}
+                  color: ${errorColor};
+                `}
+              />
             </Tooltip>
           </span>
         )}
       </>
-    ),
-    [props.errorMessage],
-  );
+    );
+  }, [
+    colors.error.base,
+    colors.alert.base,
+    dataTabHasHadNoErrors,
+    props.errorMessage,
+  ]);
 
   const controlPanelRegistry = getChartControlPanelRegistry();
   if (