diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ImageUpload.tsx | 6 | ||||
-rw-r--r-- | src/components/ui/InfoBar.js | 8 | ||||
-rw-r--r-- | src/components/ui/Infobox.js | 15 | ||||
-rw-r--r-- | src/components/ui/SearchInput.tsx | 12 | ||||
-rw-r--r-- | src/components/ui/input/index.tsx | 2 |
5 files changed, 30 insertions, 13 deletions
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx index 4b25be502..118e6b206 100644 --- a/src/components/ui/ImageUpload.tsx +++ b/src/components/ui/ImageUpload.tsx | |||
@@ -3,7 +3,9 @@ import { observer } from 'mobx-react'; | |||
3 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Dropzone, { DropzoneRef } from 'react-dropzone'; | 5 | import Dropzone, { DropzoneRef } from 'react-dropzone'; |
6 | import { mdiDelete, mdiFileImage } from '@mdi/js'; | ||
6 | import { isWindows } from '../../environment'; | 7 | import { isWindows } from '../../environment'; |
8 | import { Icon } from './icon'; | ||
7 | 9 | ||
8 | type Props = { | 10 | type Props = { |
9 | field: typeof Field; | 11 | field: typeof Field; |
@@ -75,7 +77,7 @@ class ImageUpload extends Component<Props> { | |||
75 | } | 77 | } |
76 | }} | 78 | }} |
77 | > | 79 | > |
78 | <i className="mdi mdi-delete" /> | 80 | <Icon icon={mdiDelete} /> |
79 | <p>{textDelete}</p> | 81 | <p>{textDelete}</p> |
80 | </button> | 82 | </button> |
81 | <div className="image-upload__action-background" /> | 83 | <div className="image-upload__action-background" /> |
@@ -92,7 +94,7 @@ class ImageUpload extends Component<Props> { | |||
92 | > | 94 | > |
93 | {({ getRootProps, getInputProps }) => ( | 95 | {({ getRootProps, getInputProps }) => ( |
94 | <div {...getRootProps()} className={cssClasses}> | 96 | <div {...getRootProps()} className={cssClasses}> |
95 | <i className="mdi mdi-file-image" /> | 97 | <Icon icon={mdiFileImage} /> |
96 | <p>{textUpload}</p> | 98 | <p>{textUpload}</p> |
97 | <input {...getInputProps()} /> | 99 | <input {...getInputProps()} /> |
98 | </div> | 100 | </div> |
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index 3311a949f..89b085907 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -5,7 +5,9 @@ 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 | 7 | ||
8 | import { mdiClose } from '@mdi/js'; | ||
8 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
10 | import { Icon } from './icon'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | hide: { | 13 | hide: { |
@@ -88,10 +90,12 @@ class InfoBar extends Component { | |||
88 | {!sticky && ( | 90 | {!sticky && ( |
89 | <button | 91 | <button |
90 | type="button" | 92 | type="button" |
91 | className="info-bar__close mdi mdi-close" | 93 | className="info-bar__close" |
92 | onClick={onHide} | 94 | onClick={onHide} |
93 | aria-label={intl.formatMessage(messages.hide)} | 95 | aria-label={intl.formatMessage(messages.hide)} |
94 | /> | 96 | > |
97 | <Icon icon={mdiClose} /> | ||
98 | </button> | ||
95 | )} | 99 | )} |
96 | </Appear> | 100 | </Appear> |
97 | ); | 101 | ); |
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 | ); |
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx index af55b0e11..49a50a4a0 100644 --- a/src/components/ui/SearchInput.tsx +++ b/src/components/ui/SearchInput.tsx | |||
@@ -2,6 +2,8 @@ import { ChangeEvent, Component } from 'react'; | |||
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { debounce } from 'lodash'; | 4 | import { debounce } from 'lodash'; |
5 | import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js'; | ||
6 | import { Icon } from './icon'; | ||
5 | 7 | ||
6 | type Props = { | 8 | type Props = { |
7 | value: string; | 9 | value: string; |
@@ -88,7 +90,8 @@ class SearchInput extends Component<Props> { | |||
88 | 90 | ||
89 | return ( | 91 | return ( |
90 | <div className={classnames([className, 'search-input'])}> | 92 | <div className={classnames([className, 'search-input'])}> |
91 | <label htmlFor={name} className="mdi mdi-magnify"> | 93 | <label htmlFor={name}> |
94 | <Icon icon={mdiMagnify} /> | ||
92 | <input | 95 | <input |
93 | name={name} | 96 | name={name} |
94 | id={name} | 97 | id={name} |
@@ -103,10 +106,9 @@ class SearchInput extends Component<Props> { | |||
103 | /> | 106 | /> |
104 | </label> | 107 | </label> |
105 | {value.length > 0 && ( | 108 | {value.length > 0 && ( |
106 | <span | 109 | <span onClick={() => this.reset()}> |
107 | className="mdi mdi-close-circle-outline" | 110 | <Icon icon={mdiCloseCircleOutline} /> |
108 | onClick={() => this.reset()} | 111 | </span> |
109 | /> | ||
110 | )} | 112 | )} |
111 | </div> | 113 | </div> |
112 | ); | 114 | ); |
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 0b16fe688..c46cafc5c 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx | |||
@@ -178,7 +178,7 @@ class InputComponent extends Component<IProps, IState> { | |||
178 | } | 178 | } |
179 | tabIndex={-1} | 179 | tabIndex={-1} |
180 | > | 180 | > |
181 | <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} /> | 181 | <Icon path={!showPassword ? mdiEye : mdiEyeOff} /> |
182 | </button> | 182 | </button> |
183 | )} | 183 | )} |
184 | </div> | 184 | </div> |