diff options
Diffstat (limited to 'src/components/ui/Infobox.js')
-rw-r--r-- | src/components/ui/Infobox.js | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index b88b01bd8..c0ba8f13c 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -4,6 +4,13 @@ import { observer } from 'mobx-react'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from 'react-loader'; | 5 | import Loader from 'react-loader'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 6 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; | ||
8 | import { Icon } from '../ui/icon'; | ||
9 | |||
10 | const icons = { | ||
11 | 'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline, | ||
12 | alert: mdiAlert, | ||
13 | }; | ||
7 | 14 | ||
8 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
9 | dismiss: { | 16 | dismiss: { |
@@ -73,7 +80,7 @@ class Infobox extends Component { | |||
73 | 'infobox--default': !type, | 80 | 'infobox--default': !type, |
74 | })} | 81 | })} |
75 | > | 82 | > |
76 | {icon && <i className={`mdi mdi-${icon}`} />} | 83 | {icon && <Icon icon={icons[icon]} />} |
77 | <div className="infobox__content">{children}</div> | 84 | <div className="infobox__content">{children}</div> |
78 | {ctaLabel && ( | 85 | {ctaLabel && ( |
79 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> | 86 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> |
@@ -94,9 +101,11 @@ class Infobox extends Component { | |||
94 | this.setState({ dismissed: true }); | 101 | this.setState({ dismissed: true }); |
95 | if (onDismiss) onDismiss(); | 102 | if (onDismiss) onDismiss(); |
96 | }} | 103 | }} |
97 | className="infobox__delete mdi mdi-close" | 104 | className="infobox__delete" |
98 | aria-label={intl.formatMessage(messages.dismiss)} | 105 | aria-label={intl.formatMessage(messages.dismiss)} |
99 | /> | 106 | > |
107 | <Icon icon={mdiClose} /> | ||
108 | </button> | ||
100 | )} | 109 | )} |
101 | </div> | 110 | </div> |
102 | ); | 111 | ); |