refactor: icon to icons for annotations & css templates modals (#15611)

* inital commit

* add css templates

superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx

@@ -21,9 +21,10 @@ import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import { RangePicker } from 'src/components/DatePicker';
 import moment from 'moment';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import Modal from 'src/components/Modal';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
+import { StyledIcon } from 'src/views/CRUD/utils';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
 
 import { AnnotationObject } from './types';
@@ -48,10 +49,6 @@ const StyledJsonEditor = styled(JsonEditor)`
   border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
 `;
 
-const StyledIcon = styled(Icon)`
-  margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
-`;
-
 const AnnotationContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit * 5}px;
 
@@ -281,9 +278,9 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
       title={
         <h4 data-test="annotaion-modal-title">
           {isEditMode ? (
-            <StyledIcon name="edit-alt" />
+            <Icons.EditAlt css={StyledIcon} />
           ) : (
-            <StyledIcon name="plus-large" />
+            <Icons.PlusLarge css={StyledIcon} />
           )}
           {isEditMode ? t('Edit annotation') : t('Add annotation')}
         </h4>

superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayerModal.tsx

@@ -20,7 +20,8 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
+import { StyledIcon } from 'src/views/CRUD/utils';
 import Modal from 'src/components/Modal';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 
@@ -39,10 +40,6 @@ const StyledAnnotationLayerTitle = styled.div`
     ${({ theme }) => theme.gridUnit * 4}px auto;
 `;
 
-const StyledIcon = styled(Icon)`
-  margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
-`;
-
 const LayerContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
 
@@ -234,9 +231,9 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
       title={
         <h4 data-test="annotation-layer-modal-title">
           {isEditMode ? (
-            <StyledIcon name="edit-alt" />
+            <Icons.EditAlt css={StyledIcon} />
           ) : (
-            <StyledIcon name="plus-large" />
+            <Icons.PlusLarge css={StyledIcon} />
           )}
           {isEditMode
             ? t('Edit annotation layer properties')

superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.tsx

@@ -20,7 +20,8 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
+import { StyledIcon } from 'src/views/CRUD/utils';
 import Modal from 'src/components/Modal';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { CssEditor } from 'src/components/AsyncAceEditor';
@@ -45,10 +46,6 @@ const StyledCssEditor = styled(CssEditor)`
   border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
 `;
 
-const StyledIcon = styled(Icon)`
-  margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
-`;
-
 const TemplateContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
 
@@ -228,9 +225,9 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
       title={
         <h4 data-test="css-template-modal-title">
           {isEditMode ? (
-            <StyledIcon name="edit-alt" />
+            <Icons.EditAlt css={StyledIcon} />
           ) : (
-            <StyledIcon name="plus-large" />
+            <Icons.PlusLarge css={StyledIcon} />
           )}
           {isEditMode
             ? t('Edit CSS template properties')

superset-frontend/src/views/CRUD/utils.tsx

@@ -23,6 +23,8 @@ import {
   SupersetClientResponse,
   logging,
   styled,
+  SupersetTheme,
+  css,
 } from '@superset-ui/core';
 import Chart from 'src/types/Chart';
 import rison from 'rison';
@@ -297,6 +299,11 @@ export const CardStyles = styled.div`
   }
 `;
 
+export const StyledIcon = (theme: SupersetTheme) => css`
+  margin: auto ${theme.gridUnit * 2}px auto 0;
+  color: ${theme.colors.grayscale.base};
+`;
+
 export /* eslint-disable no-underscore-dangle */
 const isNeedsPassword = (payload: any) =>
   typeof payload === 'object' &&