diff --git a/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx b/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
index fa5cae1f82..0686f82f9f 100644
--- a/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
+++ b/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
@@ -18,6 +18,7 @@
*/
import React from 'react';
import { mount } from 'enzyme';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
import Toast from 'src/messageToasts/components/Toast';
import { act } from 'react-dom/test-utils';
import mockMessageToasts from '../mockMessageToasts';
@@ -27,7 +28,11 @@ const props = {
onCloseToast() {},
};
-const setup = overrideProps => mount();
+const setup = overrideProps =>
+ mount(, {
+ wrappingComponent: ThemeProvider,
+ wrappingComponentProps: { theme: supersetTheme },
+ });
describe('Toast', () => {
it('should render', () => {
diff --git a/superset-frontend/src/messageToasts/components/Toast.tsx b/superset-frontend/src/messageToasts/components/Toast.tsx
index 9018ed6ae2..5f7416aa4d 100644
--- a/superset-frontend/src/messageToasts/components/Toast.tsx
+++ b/superset-frontend/src/messageToasts/components/Toast.tsx
@@ -16,11 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@superset-ui/core';
+import { styled, css, SupersetTheme } from '@superset-ui/core';
import cx from 'classnames';
import Interweave from 'interweave';
import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Icon, { IconName } from 'src/components/Icon';
+import Icons from 'src/components/Icons';
import { ToastType } from 'src/messageToasts/constants';
import { ToastMeta } from '../types';
@@ -34,8 +34,9 @@ const ToastContainer = styled.div`
}
`;
-const StyledIcon = styled(Icon)`
- min-width: ${({ theme }) => theme.gridUnit * 5}px;
+const StyledIcon = (theme: SupersetTheme) => css`
+ min-width: ${theme.gridUnit * 5}px;
+ color: ${theme.colors.grayscale.base};
`;
interface ToastPresenterProps {
@@ -76,16 +77,17 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
};
}, [handleClosePress, toast.duration]);
- let iconName: IconName = 'circle-check-solid';
let className = 'toast--success';
+ let icon = StyledIcon(theme)} />;
+
if (toast.toastType === ToastType.WARNING) {
- iconName = 'warning-solid';
+ icon = ;
className = 'toast--warning';
} else if (toast.toastType === ToastType.DANGER) {
- iconName = 'error-solid';
+ icon = ;
className = 'toast--danger';
} else if (toast.toastType === ToastType.INFO) {
- iconName = 'info-solid';
+ icon = ;
className = 'toast--info';
}
@@ -95,7 +97,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
data-test="toast-container"
role="alert"
>
-
+ {icon}