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/ControlHeader.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useMemo, useRef } from 'react';
 import { t, css, useTheme, SupersetTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
@@ -40,6 +40,16 @@ export type ControlHeaderProps = {
   danger?: string;
 };
 
+const iconStyles = css`
+  &.anticon {
+    font-size: unset;
+    .anticon {
+      line-height: unset;
+      vertical-align: unset;
+    }
+  }
+`;
+
 const ControlHeader: FC<ControlHeaderProps> = ({
   name,
   label,
@@ -55,6 +65,22 @@ const ControlHeader: FC<ControlHeaderProps> = ({
   danger,
 }) => {
   const { gridUnit, colors } = useTheme();
+  const hasHadNoErrors = useRef(false);
+  const labelColor = useMemo(() => {
+    if (!validationErrors.length) {
+      hasHadNoErrors.current = true;
+    }
+
+    if (hasHadNoErrors.current) {
+      if (validationErrors.length) {
+        return colors.error.base;
+      }
+
+      return 'unset';
+    }
+
+    return colors.alert.base;
+  }, [colors.error.base, colors.alert.base, validationErrors.length]);
 
   if (!label) {
     return null;
@@ -78,12 +104,16 @@ const ControlHeader: FC<ControlHeaderProps> = ({
       >
         {description && (
           <span>
-            <InfoTooltipWithTrigger
-              label={t('description')}
-              tooltip={description}
+            <Tooltip
+              id={`${t('description')}-tooltip`}
+              title={description}
               placement="top"
-              onClick={tooltipOnClick}
-            />{' '}
+            >
+              <Icons.InfoCircleOutlined
+                css={iconStyles}
+                onClick={tooltipOnClick}
+              />
+            </Tooltip>{' '}
           </span>
         )}
         {renderTrigger && (
@@ -100,8 +130,6 @@ const ControlHeader: FC<ControlHeaderProps> = ({
     );
   };
 
-  const labelClass = validationErrors?.length > 0 ? 'text-danger' : '';
-
   return (
     <div className="ControlHeader" data-test={`${name}-header`}>
       <div className="pull-left">
@@ -118,7 +146,6 @@ const ControlHeader: FC<ControlHeaderProps> = ({
             role="button"
             tabIndex={0}
             onClick={onClick}
-            className={labelClass}
             style={{ cursor: onClick ? 'pointer' : '' }}
           >
             {label}
@@ -138,13 +165,18 @@ const ControlHeader: FC<ControlHeaderProps> = ({
             </span>
           )}
           {validationErrors?.length > 0 && (
-            <span>
+            <span data-test="error-tooltip">
               <Tooltip
                 id="error-tooltip"
                 placement="top"
                 title={validationErrors?.join(' ')}
               >
-                <Icons.ErrorSolid iconColor={colors.error.base} iconSize="s" />
+                <Icons.ExclamationCircleOutlined
+                  css={css`
+                    ${iconStyles}
+                    color: ${labelColor};
+                  `}
+                />
               </Tooltip>{' '}
             </span>
           )}