diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppUpdateInfoBar.tsx | 4 | ||||
-rw-r--r-- | src/components/auth/AuthLayout.js | 6 | ||||
-rw-r--r-- | src/components/auth/Invite.js | 4 | ||||
-rw-r--r-- | src/components/auth/Login.js | 4 | ||||
-rw-r--r-- | src/components/layout/AppLayout.js | 8 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 25 | ||||
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 28 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.js | 27 | ||||
-rw-r--r-- | src/components/settings/SettingsLayout.js | 8 | ||||
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.js | 4 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 10 | ||||
-rw-r--r-- | src/components/settings/services/ServiceItem.js | 14 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 8 | ||||
-rw-r--r-- | src/components/settings/supportFerdi/SupportFerdiDashboard.tsx | 12 | ||||
-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 |
19 files changed, 134 insertions, 71 deletions
diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx index 1dd3723cc..d2402945e 100644 --- a/src/components/AppUpdateInfoBar.tsx +++ b/src/components/AppUpdateInfoBar.tsx | |||
@@ -1,8 +1,10 @@ | |||
1 | import { defineMessages, useIntl } from 'react-intl'; | 1 | import { defineMessages, useIntl } from 'react-intl'; |
2 | 2 | ||
3 | import { mdiInformation } from '@mdi/js'; | ||
3 | import InfoBar from './ui/InfoBar'; | 4 | import InfoBar from './ui/InfoBar'; |
4 | import { GITHUB_FERDI_URL } from '../config'; | 5 | import { GITHUB_FERDI_URL } from '../config'; |
5 | import { openExternalUrl } from '../helpers/url-helpers'; | 6 | import { openExternalUrl } from '../helpers/url-helpers'; |
7 | import { Icon } from './ui/icon'; | ||
6 | 8 | ||
7 | const messages = defineMessages({ | 9 | const messages = defineMessages({ |
8 | updateAvailable: { | 10 | updateAvailable: { |
@@ -34,7 +36,7 @@ const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => { | |||
34 | onClick={onInstallUpdate} | 36 | onClick={onInstallUpdate} |
35 | onHide={onHide} | 37 | onHide={onHide} |
36 | > | 38 | > |
37 | <span className="mdi mdi-information" /> | 39 | <Icon icon={mdiInformation} /> |
38 | {intl.formatMessage(messages.updateAvailable)}{' '} | 40 | {intl.formatMessage(messages.updateAvailable)}{' '} |
39 | <button | 41 | <button |
40 | className="info-bar__inline-button" | 42 | className="info-bar__inline-button" |
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js index 047b10775..f26282cfc 100644 --- a/src/components/auth/AuthLayout.js +++ b/src/components/auth/AuthLayout.js | |||
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react'; | |||
4 | import { TitleBar } from 'electron-react-titlebar/renderer'; | 4 | import { TitleBar } from 'electron-react-titlebar/renderer'; |
5 | 5 | ||
6 | import { injectIntl } from 'react-intl'; | 6 | import { injectIntl } from 'react-intl'; |
7 | import { mdiFlash } from '@mdi/js'; | ||
7 | import Link from '../ui/Link'; | 8 | import Link from '../ui/Link'; |
8 | import InfoBar from '../ui/InfoBar'; | 9 | import InfoBar from '../ui/InfoBar'; |
9 | 10 | ||
@@ -16,6 +17,7 @@ import globalMessages from '../../i18n/globalMessages'; | |||
16 | import { isWindows } from '../../environment'; | 17 | import { isWindows } from '../../environment'; |
17 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 18 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
18 | import { GITHUB_FERDI_URL } from '../../config'; | 19 | import { GITHUB_FERDI_URL } from '../../config'; |
20 | import { Icon } from '../ui/icon'; | ||
19 | 21 | ||
20 | @observer | 22 | @observer |
21 | class AuthLayout extends Component { | 23 | class AuthLayout extends Component { |
@@ -61,7 +63,7 @@ class AuthLayout extends Component { | |||
61 | <div className="auth"> | 63 | <div className="auth"> |
62 | {!isOnline && ( | 64 | {!isOnline && ( |
63 | <InfoBar type="warning"> | 65 | <InfoBar type="warning"> |
64 | <span className="mdi mdi-flash" /> | 66 | <Icon icon={mdiFlash} /> |
65 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 67 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
66 | </InfoBar> | 68 | </InfoBar> |
67 | )} | 69 | )} |
@@ -81,7 +83,7 @@ class AuthLayout extends Component { | |||
81 | sticky | 83 | sticky |
82 | onClick={retryHealthCheck} | 84 | onClick={retryHealthCheck} |
83 | > | 85 | > |
84 | <span className="mdi mdi-flash" /> | 86 | <Icon icon={mdiFlash} /> |
85 | {intl.formatMessage(globalMessages.APIUnhealthy)} | 87 | {intl.formatMessage(globalMessages.APIUnhealthy)} |
86 | </InfoBar> | 88 | </InfoBar> |
87 | )} | 89 | )} |
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index dd71c2450..f23417870 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -125,8 +125,8 @@ class Invite extends Component { | |||
125 | .some(emailValue => emailValue.trim() !== ''); | 125 | .some(emailValue => emailValue.trim() !== ''); |
126 | 126 | ||
127 | const sendButtonClassName = classnames({ | 127 | const sendButtonClassName = classnames({ |
128 | auth__button: true, | 128 | 'auth__button': true, |
129 | 'invite__embed--button': embed, | 129 | 'invite__embed--button': embed |
130 | }); | 130 | }); |
131 | 131 | ||
132 | const renderForm = ( | 132 | const renderForm = ( |
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js index 6ed89afb6..956205258 100644 --- a/src/components/auth/Login.js +++ b/src/components/auth/Login.js | |||
@@ -173,7 +173,9 @@ class Login extends Component { | |||
173 | <p className="error-message center"> | 173 | <p className="error-message center"> |
174 | {intl.formatMessage(messages.customServerQuestion)}{' '} | 174 | {intl.formatMessage(messages.customServerQuestion)}{' '} |
175 | <Link | 175 | <Link |
176 | to={`${window['ferdi'].stores.settings.all.app.server.replace( | 176 | to={`${window[ |
177 | 'ferdi' | ||
178 | ].stores.settings.all.app.server.replace( | ||
177 | API_VERSION, | 179 | API_VERSION, |
178 | '', | 180 | '', |
179 | )}/import`} | 181 | )}/import`} |
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index af27e8854..a31419a5e 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -6,6 +6,7 @@ import { TitleBar } from 'electron-react-titlebar/renderer'; | |||
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { ipcRenderer } from 'electron'; | 7 | import { ipcRenderer } from 'electron'; |
8 | 8 | ||
9 | import { mdiFlash, mdiPowerPlug } from '@mdi/js'; | ||
9 | import InfoBar from '../ui/InfoBar'; | 10 | import InfoBar from '../ui/InfoBar'; |
10 | import { Component as BasicAuth } from '../../features/basicAuth'; | 11 | import { Component as BasicAuth } from '../../features/basicAuth'; |
11 | import { Component as QuickSwitch } from '../../features/quickSwitch'; | 12 | import { Component as QuickSwitch } from '../../features/quickSwitch'; |
@@ -20,6 +21,7 @@ import WorkspaceSwitchingIndicator from '../../features/workspaces/components/Wo | |||
20 | import { workspaceStore } from '../../features/workspaces'; | 21 | import { workspaceStore } from '../../features/workspaces'; |
21 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 22 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
22 | import Todos from '../../features/todos/containers/TodosScreen'; | 23 | import Todos from '../../features/todos/containers/TodosScreen'; |
24 | import { Icon } from '../ui/icon'; | ||
23 | 25 | ||
24 | const messages = defineMessages({ | 26 | const messages = defineMessages({ |
25 | servicesUpdated: { | 27 | servicesUpdated: { |
@@ -151,7 +153,7 @@ class AppLayout extends Component { | |||
151 | sticky | 153 | sticky |
152 | onClick={retryRequiredRequests} | 154 | onClick={retryRequiredRequests} |
153 | > | 155 | > |
154 | <span className="mdi mdi-flash" /> | 156 | <Icon icon={mdiFlash} /> |
155 | {intl.formatMessage(messages.requiredRequestsFailed)} | 157 | {intl.formatMessage(messages.requiredRequestsFailed)} |
156 | </InfoBar> | 158 | </InfoBar> |
157 | )} | 159 | )} |
@@ -163,7 +165,7 @@ class AppLayout extends Component { | |||
163 | sticky | 165 | sticky |
164 | onClick={retryRequiredRequests} | 166 | onClick={retryRequiredRequests} |
165 | > | 167 | > |
166 | <span className="mdi mdi-flash" /> | 168 | <Icon icon={mdiFlash} /> |
167 | {intl.formatMessage(messages.authRequestFailed)} | 169 | {intl.formatMessage(messages.authRequestFailed)} |
168 | </InfoBar> | 170 | </InfoBar> |
169 | )} | 171 | )} |
@@ -179,7 +181,7 @@ class AppLayout extends Component { | |||
179 | }); | 181 | }); |
180 | }} | 182 | }} |
181 | > | 183 | > |
182 | <span className="mdi mdi-power-plug" /> | 184 | <Icon icon={mdiPowerPlug} /> |
183 | {intl.formatMessage(messages.servicesUpdated)} | 185 | {intl.formatMessage(messages.servicesUpdated)} |
184 | </InfoBar> | 186 | </InfoBar> |
185 | )} | 187 | )} |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 18492be80..728613f42 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -4,6 +4,16 @@ import ReactTooltip from 'react-tooltip'; | |||
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { inject, observer } from 'mobx-react'; | 5 | import { inject, observer } from 'mobx-react'; |
6 | import { Link } from 'react-router'; | 6 | import { Link } from 'react-router'; |
7 | import { | ||
8 | mdiCheckAll, | ||
9 | mdiViewGrid, | ||
10 | mdiPlusBox, | ||
11 | mdiLoginVariant, | ||
12 | mdiCog, | ||
13 | mdiBellOff, | ||
14 | mdiBell, | ||
15 | mdiLock, | ||
16 | } from '@mdi/js'; | ||
7 | 17 | ||
8 | import Tabbar from '../services/tabs/Tabbar'; | 18 | import Tabbar from '../services/tabs/Tabbar'; |
9 | import { | 19 | import { |
@@ -19,6 +29,7 @@ import { todoActions } from '../../features/todos/actions'; | |||
19 | import AppStore from '../../stores/AppStore'; | 29 | import AppStore from '../../stores/AppStore'; |
20 | import SettingsStore from '../../stores/SettingsStore'; | 30 | import SettingsStore from '../../stores/SettingsStore'; |
21 | import globalMessages from '../../i18n/globalMessages'; | 31 | import globalMessages from '../../i18n/globalMessages'; |
32 | import { Icon } from '../ui/icon'; | ||
22 | 33 | ||
23 | const messages = defineMessages({ | 34 | const messages = defineMessages({ |
24 | addNewService: { | 35 | addNewService: { |
@@ -156,7 +167,7 @@ class Sidebar extends Component { | |||
156 | messages.lockFerdi, | 167 | messages.lockFerdi, |
157 | )} (${lockFerdiShortcutKey(false)})`} | 168 | )} (${lockFerdiShortcutKey(false)})`} |
158 | > | 169 | > |
159 | <i className="mdi mdi-lock" /> | 170 | <Icon icon={mdiLock} size={1.5} /> |
160 | </button> | 171 | </button> |
161 | ) : null} | 172 | ) : null} |
162 | {todosStore.isFeatureEnabledByUser ? ( | 173 | {todosStore.isFeatureEnabledByUser ? ( |
@@ -174,7 +185,7 @@ class Sidebar extends Component { | |||
174 | todosToggleMessage, | 185 | todosToggleMessage, |
175 | )} (${todosToggleShortcutKey(false)})`} | 186 | )} (${todosToggleShortcutKey(false)})`} |
176 | > | 187 | > |
177 | <i className="mdi mdi-check-all" /> | 188 | <Icon icon={mdiCheckAll} size={1.5} /> |
178 | </button> | 189 | </button> |
179 | ) : null} | 190 | ) : null} |
180 | <button | 191 | <button |
@@ -190,7 +201,7 @@ class Sidebar extends Component { | |||
190 | workspaceToggleMessage, | 201 | workspaceToggleMessage, |
191 | )} (${workspaceToggleShortcutKey(false)})`} | 202 | )} (${workspaceToggleShortcutKey(false)})`} |
192 | > | 203 | > |
193 | <i className="mdi mdi-view-grid" /> | 204 | <Icon icon={mdiViewGrid} size={1.5} /> |
194 | </button> | 205 | </button> |
195 | <button | 206 | <button |
196 | type="button" | 207 | type="button" |
@@ -205,7 +216,7 @@ class Sidebar extends Component { | |||
205 | isAppMuted ? messages.unmute : messages.mute, | 216 | isAppMuted ? messages.unmute : messages.mute, |
206 | )} (${muteFerdiShortcutKey(false)})`} | 217 | )} (${muteFerdiShortcutKey(false)})`} |
207 | > | 218 | > |
208 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 219 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> |
209 | </button> | 220 | </button> |
210 | <button | 221 | <button |
211 | type="button" | 222 | type="button" |
@@ -215,7 +226,7 @@ class Sidebar extends Component { | |||
215 | messages.addNewService, | 226 | messages.addNewService, |
216 | )} (${addNewServiceShortcutKey(false)})`} | 227 | )} (${addNewServiceShortcutKey(false)})`} |
217 | > | 228 | > |
218 | <i className="mdi mdi-plus-box" /> | 229 | <Icon icon={mdiPlusBox} size={1.5} /> |
219 | </button> | 230 | </button> |
220 | </> | 231 | </> |
221 | ) : ( | 232 | ) : ( |
@@ -224,7 +235,7 @@ class Sidebar extends Component { | |||
224 | className="sidebar__button sidebar__button--new-service" | 235 | className="sidebar__button sidebar__button--new-service" |
225 | data-tip="Login" | 236 | data-tip="Login" |
226 | > | 237 | > |
227 | <i className="mdi mdi-login-variant" /> | 238 | <Icon icon={mdiLoginVariant} size={1.5} /> |
228 | </Link> | 239 | </Link> |
229 | )} | 240 | )} |
230 | <button | 241 | <button |
@@ -235,7 +246,7 @@ class Sidebar extends Component { | |||
235 | globalMessages.settings, | 246 | globalMessages.settings, |
236 | )} (${settingsShortcutKey(false)})`} | 247 | )} (${settingsShortcutKey(false)})`} |
237 | > | 248 | > |
238 | <i className="mdi mdi-cog" /> | 249 | <Icon icon={mdiCog} size={1.5} /> |
239 | {(this.props.stores.app.updateStatus === | 250 | {(this.props.stores.app.updateStatus === |
240 | this.props.stores.app.updateStatusTypes.AVAILABLE || | 251 | this.props.stores.app.updateStatusTypes.AVAILABLE || |
241 | this.props.stores.app.updateStatus === | 252 | this.props.stores.app.updateStatus === |
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js index 2562c09ce..187785f82 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -31,13 +31,15 @@ class ServiceWebview extends Component { | |||
31 | debug('Service logged a message:', e.message); | 31 | debug('Service logged a message:', e.message); |
32 | }); | 32 | }); |
33 | this.webview.view.addEventListener('did-navigate', () => { | 33 | this.webview.view.addEventListener('did-navigate', () => { |
34 | document.title = `Ferdi - ${this.props.service.name} ${this.props.service.dialogTitle | 34 | document.title = `Ferdi - ${this.props.service.name} ${ |
35 | ? ` - ${this.props.service.dialogTitle}` | 35 | this.props.service.dialogTitle |
36 | : '' | 36 | ? ` - ${this.props.service.dialogTitle}` |
37 | } ${`- ${this.props.service._webview.getTitle()}`}`; | 37 | : '' |
38 | }) | 38 | } ${`- ${this.props.service._webview.getTitle()}`}`; |
39 | }); | ||
39 | } | 40 | } |
40 | }) | 41 | }, |
42 | ); | ||
41 | } | 43 | } |
42 | 44 | ||
43 | componentWillUnmount() { | 45 | componentWillUnmount() { |
@@ -53,10 +55,11 @@ class ServiceWebview extends Component { | |||
53 | webview.view.blur(); | 55 | webview.view.blur(); |
54 | webview.view.focus(); | 56 | webview.view.focus(); |
55 | window.setTimeout(() => { | 57 | window.setTimeout(() => { |
56 | document.title = `Ferdi - ${this.props.service.name} ${this.props.service.dialogTitle | 58 | document.title = `Ferdi - ${this.props.service.name} ${ |
57 | ? ` - ${this.props.service.dialogTitle}` | 59 | this.props.service.dialogTitle |
58 | : '' | 60 | ? ` - ${this.props.service.dialogTitle}` |
59 | } ${`- ${this.props.service._webview.getTitle()}`}`; | 61 | : '' |
62 | } ${`- ${this.props.service._webview.getTitle()}`}`; | ||
60 | }, 100); | 63 | }, 100); |
61 | } else { | 64 | } else { |
62 | debug('Refocus not required - Not active service'); | 65 | debug('Refocus not required - Not active service'); |
@@ -103,8 +106,9 @@ class ServiceWebview extends Component { | |||
103 | } | 106 | } |
104 | allowpopups | 107 | allowpopups |
105 | nodeintegration | 108 | nodeintegration |
106 | webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0 | 109 | webpreferences={`spellcheck=${ |
107 | }, contextIsolation=1, enableRemoteModule=1`} | 110 | isSpellcheckerEnabled ? 1 : 0 |
111 | }, contextIsolation=1, enableRemoteModule=1`} | ||
108 | /> | 112 | /> |
109 | ); | 113 | ); |
110 | } | 114 | } |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index 3ea6c5da2..5381d7c2b 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -9,10 +9,12 @@ import injectSheet from 'react-jss'; | |||
9 | import ms from 'ms'; | 9 | import ms from 'ms'; |
10 | 10 | ||
11 | import { observable, autorun, reaction } from 'mobx'; | 11 | import { observable, autorun, reaction } from 'mobx'; |
12 | import { mdiExclamation } from '@mdi/js'; | ||
12 | import ServiceModel from '../../../models/Service'; | 13 | import ServiceModel from '../../../models/Service'; |
13 | import { cmdOrCtrlShortcutKey } from '../../../environment'; | 14 | import { cmdOrCtrlShortcutKey, shiftKey, altKey } from '../../../environment'; |
14 | import globalMessages from '../../../i18n/globalMessages'; | 15 | import globalMessages from '../../../i18n/globalMessages'; |
15 | import SettingsStore from '../../../stores/SettingsStore'; | 16 | import SettingsStore from '../../../stores/SettingsStore'; |
17 | import { Icon } from '../../ui/icon'; | ||
16 | 18 | ||
17 | const IS_SERVICE_DEBUGGING_ENABLED = ( | 19 | const IS_SERVICE_DEBUGGING_ENABLED = ( |
18 | localStorage.getItem('debug') || '' | 20 | localStorage.getItem('debug') || '' |
@@ -253,24 +255,28 @@ class TabItem extends Component { | |||
253 | ? intl.formatMessage(messages.disableNotifications) | 255 | ? intl.formatMessage(messages.disableNotifications) |
254 | : intl.formatMessage(messages.enableNotifications), | 256 | : intl.formatMessage(messages.enableNotifications), |
255 | click: () => toggleNotifications(), | 257 | click: () => toggleNotifications(), |
258 | accelerator: `${cmdOrCtrlShortcutKey()}+${altKey()}+N`, | ||
256 | }, | 259 | }, |
257 | { | 260 | { |
258 | label: service.isMuted | 261 | label: service.isMuted |
259 | ? intl.formatMessage(messages.enableAudio) | 262 | ? intl.formatMessage(messages.enableAudio) |
260 | : intl.formatMessage(messages.disableAudio), | 263 | : intl.formatMessage(messages.disableAudio), |
261 | click: () => toggleAudio(), | 264 | click: () => toggleAudio(), |
265 | accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+A`, | ||
262 | }, | 266 | }, |
263 | { | 267 | { |
264 | label: service.isDarkModeEnabled | 268 | label: service.isDarkModeEnabled |
265 | ? intl.formatMessage(messages.disableDarkMode) | 269 | ? intl.formatMessage(messages.disableDarkMode) |
266 | : intl.formatMessage(messages.enableDarkMode), | 270 | : intl.formatMessage(messages.enableDarkMode), |
267 | click: () => toggleDarkMode(), | 271 | click: () => toggleDarkMode(), |
272 | accelerator: `${shiftKey()}+${altKey()}+D`, | ||
268 | }, | 273 | }, |
269 | { | 274 | { |
270 | label: intl.formatMessage( | 275 | label: intl.formatMessage( |
271 | service.isEnabled ? messages.disableService : messages.enableService, | 276 | service.isEnabled ? messages.disableService : messages.enableService, |
272 | ), | 277 | ), |
273 | click: () => (service.isEnabled ? disableService() : enableService()), | 278 | click: () => (service.isEnabled ? disableService() : enableService()), |
279 | accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+S`, | ||
274 | }, | 280 | }, |
275 | { | 281 | { |
276 | label: intl.formatMessage( | 282 | label: intl.formatMessage( |
@@ -334,10 +340,10 @@ class TabItem extends Component { | |||
334 | } | 340 | } |
335 | 341 | ||
336 | let errorBadge = null; | 342 | let errorBadge = null; |
337 | if ( service.isError ) { | 343 | if (service.isError) { |
338 | errorBadge=( | 344 | errorBadge = ( |
339 | <i className = " mdi mdi-exclamation tab-item__error-icon"/> | 345 | <Icon icon={mdiExclamation} className="tab-item__error-icon" /> |
340 | ) | 346 | ); |
341 | } | 347 | } |
342 | 348 | ||
343 | return ( | 349 | return ( |
@@ -359,11 +365,14 @@ class TabItem extends Component { | |||
359 | : '' | 365 | : '' |
360 | }`} | 366 | }`} |
361 | > | 367 | > |
362 | 368 | {showServiceNameSetting ? ( | |
363 | {showServiceNameSetting? <div> | 369 | <div> |
370 | <img src={service.icon} className="tab-item__icon" alt="" /> | ||
371 | <span className="tab-item__label">{service.name}</span> | ||
372 | </div> | ||
373 | ) : ( | ||
364 | <img src={service.icon} className="tab-item__icon" alt="" /> | 374 | <img src={service.icon} className="tab-item__icon" alt="" /> |
365 | <span className="tab-item__label">{service.name}</span> | 375 | )} |
366 | </div> : <img src={service.icon} className="tab-item__icon" alt="" />} | ||
367 | 376 | ||
368 | {notificationBadge} | 377 | {notificationBadge} |
369 | {errorBadge} | 378 | {errorBadge} |
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js index be11fdb8e..e9119a944 100644 --- a/src/components/settings/SettingsLayout.js +++ b/src/components/settings/SettingsLayout.js | |||
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | 5 | ||
6 | import { mdiClose } from '@mdi/js'; | ||
6 | import ErrorBoundary from '../util/ErrorBoundary'; | 7 | import ErrorBoundary from '../util/ErrorBoundary'; |
7 | import { oneOrManyChildElements } from '../../prop-types'; | 8 | import { oneOrManyChildElements } from '../../prop-types'; |
8 | import Appear from '../ui/effects/Appear'; | 9 | import Appear from '../ui/effects/Appear'; |
10 | import { Icon } from '../ui/icon'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | closeSettings: { | 13 | closeSettings: { |
@@ -62,10 +64,12 @@ class SettingsLayout extends Component { | |||
62 | {children} | 64 | {children} |
63 | <button | 65 | <button |
64 | type="button" | 66 | type="button" |
65 | className="settings__close mdi mdi-close" | 67 | className="settings__close" |
66 | onClick={closeSettings} | 68 | onClick={closeSettings} |
67 | aria-label={intl.formatMessage(messages.closeSettings)} | 69 | aria-label={intl.formatMessage(messages.closeSettings)} |
68 | /> | 70 | > |
71 | <Icon icon={mdiClose} size={1.35} /> | ||
72 | </button> | ||
69 | </div> | 73 | </div> |
70 | </ErrorBoundary> | 74 | </ErrorBoundary> |
71 | </div> | 75 | </div> |
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index bdb6f3ca0..dcf7a4784 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js | |||
@@ -6,6 +6,7 @@ import { Link } from 'react-router'; | |||
6 | 6 | ||
7 | import injectSheet from 'react-jss'; | 7 | import injectSheet from 'react-jss'; |
8 | 8 | ||
9 | import { mdiOpenInNew } from '@mdi/js'; | ||
9 | import { Button } from '../../ui/button/index'; | 10 | import { Button } from '../../ui/button/index'; |
10 | import { Input } from '../../ui/input/index'; | 11 | import { Input } from '../../ui/input/index'; |
11 | import { H3, H2 } from '../../ui/headline'; | 12 | import { H3, H2 } from '../../ui/headline'; |
@@ -16,6 +17,7 @@ import Loader from '../../ui/Loader'; | |||
16 | import Appear from '../../ui/effects/Appear'; | 17 | import Appear from '../../ui/effects/Appear'; |
17 | import { FRANZ_SERVICE_REQUEST } from '../../../config'; | 18 | import { FRANZ_SERVICE_REQUEST } from '../../../config'; |
18 | import RecipePreview from '../../../models/RecipePreview'; | 19 | import RecipePreview from '../../../models/RecipePreview'; |
20 | import { Icon } from '../../ui/icon'; | ||
19 | 21 | ||
20 | const messages = defineMessages({ | 22 | const messages = defineMessages({ |
21 | headline: { | 23 | headline: { |
@@ -197,7 +199,7 @@ class RecipesDashboard extends Component { | |||
197 | rel="noreferrer" | 199 | rel="noreferrer" |
198 | > | 200 | > |
199 | {intl.formatMessage(messages.missingService)}{' '} | 201 | {intl.formatMessage(messages.missingService)}{' '} |
200 | <i className="mdi mdi-open-in-new" /> | 202 | <Icon icon={mdiOpenInNew} /> |
201 | </a> | 203 | </a> |
202 | </div> | 204 | </div> |
203 | {/* )} */} | 205 | {/* )} */} |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index b040e6cc2..2c451d7bf 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -5,6 +5,7 @@ import { Link } from 'react-router'; | |||
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import normalizeUrl from 'normalize-url'; | 6 | import normalizeUrl from 'normalize-url'; |
7 | 7 | ||
8 | import { mdiInformation } from '@mdi/js'; | ||
8 | import Form from '../../../lib/Form'; | 9 | import Form from '../../../lib/Form'; |
9 | import Recipe from '../../../models/Recipe'; | 10 | import Recipe from '../../../models/Recipe'; |
10 | import Service from '../../../models/Service'; | 11 | import Service from '../../../models/Service'; |
@@ -19,6 +20,7 @@ import Select from '../../ui/Select'; | |||
19 | 20 | ||
20 | import { isMac } from '../../../environment'; | 21 | import { isMac } from '../../../environment'; |
21 | import globalMessages from '../../../i18n/globalMessages'; | 22 | import globalMessages from '../../../i18n/globalMessages'; |
23 | import { Icon } from '../../ui/icon'; | ||
22 | 24 | ||
23 | const messages = defineMessages({ | 25 | const messages = defineMessages({ |
24 | saveService: { | 26 | saveService: { |
@@ -315,7 +317,7 @@ class EditServiceForm extends Component { | |||
315 | marginTop: 0, | 317 | marginTop: 0, |
316 | }} | 318 | }} |
317 | > | 319 | > |
318 | <span className="mdi mdi-information" /> | 320 | <Icon icon={mdiInformation} /> |
319 | {recipe.message} | 321 | {recipe.message} |
320 | </p> | 322 | </p> |
321 | )} | 323 | )} |
@@ -415,11 +417,11 @@ class EditServiceForm extends Component { | |||
415 | </div> | 417 | </div> |
416 | </div> | 418 | </div> |
417 | <p> | 419 | <p> |
418 | <span className="mdi mdi-information" /> | 420 | <Icon icon={mdiInformation} /> |
419 | {intl.formatMessage(messages.proxyRestartInfo)} | 421 | {intl.formatMessage(messages.proxyRestartInfo)} |
420 | </p> | 422 | </p> |
421 | <p> | 423 | <p> |
422 | <span className="mdi mdi-information" /> | 424 | <Icon icon={mdiInformation} /> |
423 | {intl.formatMessage(messages.proxyInfo)} | 425 | {intl.formatMessage(messages.proxyInfo)} |
424 | </p> | 426 | </p> |
425 | </> | 427 | </> |
@@ -458,7 +460,7 @@ class EditServiceForm extends Component { | |||
458 | /> | 460 | /> |
459 | </div> | 461 | </div> |
460 | <p style={{ marginTop: 10, marginBottom: 10 }}> | 462 | <p style={{ marginTop: 10, marginBottom: 10 }}> |
461 | <span className="mdi mdi-information" /> | 463 | <Icon icon={mdiInformation} /> |
462 | {intl.formatMessage(messages.recipeFileInfo)} | 464 | {intl.formatMessage(messages.recipeFileInfo)} |
463 | </p> | 465 | </p> |
464 | </> | 466 | </> |
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js index e08b9af1f..d83e5fd56 100644 --- a/src/components/settings/services/ServiceItem.js +++ b/src/components/settings/services/ServiceItem.js | |||
@@ -5,7 +5,9 @@ import ReactTooltip from 'react-tooltip'; | |||
5 | import { observer } from 'mobx-react'; | 5 | import { observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | 7 | ||
8 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; | ||
8 | import ServiceModel from '../../../models/Service'; | 9 | import ServiceModel from '../../../models/Service'; |
10 | import { Icon } from '../../ui/icon'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | tooltipIsDisabled: { | 13 | tooltipIsDisabled: { |
@@ -59,24 +61,24 @@ class ServiceItem extends Component { | |||
59 | </td> | 61 | </td> |
60 | <td className="service-table__column-info" onClick={goToServiceForm}> | 62 | <td className="service-table__column-info" onClick={goToServiceForm}> |
61 | {service.isMuted && ( | 63 | {service.isMuted && ( |
62 | <span | 64 | <Icon |
63 | className="mdi mdi-bell-off" | 65 | icon={mdiBellOff} |
64 | data-tip={intl.formatMessage(messages.tooltipIsMuted)} | 66 | data-tip={intl.formatMessage(messages.tooltipIsMuted)} |
65 | /> | 67 | /> |
66 | )} | 68 | )} |
67 | </td> | 69 | </td> |
68 | <td className="service-table__column-info" onClick={goToServiceForm}> | 70 | <td className="service-table__column-info" onClick={goToServiceForm}> |
69 | {!service.isEnabled && ( | 71 | {!service.isEnabled && ( |
70 | <span | 72 | <Icon |
71 | className="mdi mdi-power" | 73 | icon={mdiPower} |
72 | data-tip={intl.formatMessage(messages.tooltipIsDisabled)} | 74 | data-tip={intl.formatMessage(messages.tooltipIsDisabled)} |
73 | /> | 75 | /> |
74 | )} | 76 | )} |
75 | </td> | 77 | </td> |
76 | <td className="service-table__column-info" onClick={goToServiceForm}> | 78 | <td className="service-table__column-info" onClick={goToServiceForm}> |
77 | {!service.isNotificationEnabled && ( | 79 | {!service.isNotificationEnabled && ( |
78 | <span | 80 | <Icon |
79 | className="mdi mdi-message-bulleted-off" | 81 | icon={mdiMessageBulletedOff} |
80 | data-tip={intl.formatMessage( | 82 | data-tip={intl.formatMessage( |
81 | messages.tooltipNotificationsDisabled, | 83 | messages.tooltipNotificationsDisabled, |
82 | )} | 84 | )} |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 54f2025e5..7e86ea79a 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'; | |||
5 | import prettyBytes from 'pretty-bytes'; | 5 | import prettyBytes from 'pretty-bytes'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 6 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | import { mdiGithub, mdiInformation, mdiOpenInNew } from '@mdi/js'; | ||
8 | import Form from '../../../lib/Form'; | 9 | import Form from '../../../lib/Form'; |
9 | import Button from '../../ui/Button'; | 10 | import Button from '../../ui/Button'; |
10 | import Toggle from '../../ui/Toggle'; | 11 | import Toggle from '../../ui/Toggle'; |
@@ -25,6 +26,7 @@ import { | |||
25 | } from '../../../environment-remote'; | 26 | } from '../../../environment-remote'; |
26 | import { openPath } from '../../../helpers/url-helpers'; | 27 | import { openPath } from '../../../helpers/url-helpers'; |
27 | import globalMessages from '../../../i18n/globalMessages'; | 28 | import globalMessages from '../../../i18n/globalMessages'; |
29 | import { Icon } from '../../ui/icon'; | ||
28 | 30 | ||
29 | const debug = require('debug')('Ferdi:EditSettingsForm'); | 31 | const debug = require('debug')('Ferdi:EditSettingsForm'); |
30 | 32 | ||
@@ -664,7 +666,7 @@ class EditSettingsForm extends Component { | |||
664 | rel="noreferrer" | 666 | rel="noreferrer" |
665 | > | 667 | > |
666 | {intl.formatMessage(messages.translationHelp)}{' '} | 668 | {intl.formatMessage(messages.translationHelp)}{' '} |
667 | <i className="mdi mdi-open-in-new" /> | 669 | <Icon icon={mdiOpenInNew} /> |
668 | </a> | 670 | </a> |
669 | </div> | 671 | </div> |
670 | )} | 672 | )} |
@@ -797,7 +799,7 @@ class EditSettingsForm extends Component { | |||
797 | </> | 799 | </> |
798 | )} | 800 | )} |
799 | <p className="settings__message"> | 801 | <p className="settings__message"> |
800 | <span className="mdi mdi-github-face" /> | 802 | <Icon icon={mdiGithub} /> |
801 | <span> | 803 | <span> |
802 | Ferdi is based on{' '} | 804 | Ferdi is based on{' '} |
803 | <a | 805 | <a |
@@ -817,7 +819,7 @@ class EditSettingsForm extends Component { | |||
817 | </a> | 819 | </a> |
818 | </span> | 820 | </span> |
819 | <br /> | 821 | <br /> |
820 | <span className="mdi mdi-information" /> | 822 | <Icon icon={mdiInformation} /> |
821 | {intl.formatMessage(messages.languageDisclaimer)} | 823 | {intl.formatMessage(messages.languageDisclaimer)} |
822 | </p> | 824 | </p> |
823 | </div> | 825 | </div> |
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx index 505c49812..88e936b71 100644 --- a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx +++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx | |||
@@ -1,6 +1,8 @@ | |||
1 | import { defineMessages, useIntl } from 'react-intl'; | 1 | import { defineMessages, useIntl } from 'react-intl'; |
2 | import { BrowserWindow } from '@electron/remote'; | 2 | import { BrowserWindow } from '@electron/remote'; |
3 | import { mdiOpenInNew } from '@mdi/js'; | ||
3 | import InfoBar from '../../ui/InfoBar'; | 4 | import InfoBar from '../../ui/InfoBar'; |
5 | import { Icon } from '../../ui/icon'; | ||
4 | 6 | ||
5 | const messages = defineMessages({ | 7 | const messages = defineMessages({ |
6 | headline: { | 8 | headline: { |
@@ -159,7 +161,7 @@ const SupportFerdiDashboard = () => { | |||
159 | > | 161 | > |
160 | {' '} | 162 | {' '} |
161 | {intl.formatMessage(messages.textListContributorsHere)} | 163 | {intl.formatMessage(messages.textListContributorsHere)} |
162 | <i className="mdi mdi-open-in-new" /> | 164 | <Icon icon={mdiOpenInNew} /> |
163 | </a> | 165 | </a> |
164 | <br /> | 166 | <br /> |
165 | <br /> | 167 | <br /> |
@@ -175,7 +177,7 @@ const SupportFerdiDashboard = () => { | |||
175 | > | 177 | > |
176 | {' '} | 178 | {' '} |
177 | {intl.formatMessage(messages.textSupportWelcomeHere)} | 179 | {intl.formatMessage(messages.textSupportWelcomeHere)} |
178 | <i className="mdi mdi-open-in-new" /> | 180 | <Icon icon={mdiOpenInNew} /> |
179 | </a> | 181 | </a> |
180 | </p> | 182 | </p> |
181 | <p> | 183 | <p> |
@@ -188,7 +190,7 @@ const SupportFerdiDashboard = () => { | |||
188 | > | 190 | > |
189 | {' '} | 191 | {' '} |
190 | {intl.formatMessage(messages.textOpenCollective)} | 192 | {intl.formatMessage(messages.textOpenCollective)} |
191 | <i className="mdi mdi-open-in-new" /> | 193 | <Icon icon={mdiOpenInNew} /> |
192 | </a> | 194 | </a> |
193 | </p> | 195 | </p> |
194 | <p> | 196 | <p> |
@@ -201,7 +203,7 @@ const SupportFerdiDashboard = () => { | |||
201 | > | 203 | > |
202 | {' '} | 204 | {' '} |
203 | {intl.formatMessage(messages.textOpenCollective)} | 205 | {intl.formatMessage(messages.textOpenCollective)} |
204 | <i className="mdi mdi-open-in-new" /> | 206 | <Icon icon={mdiOpenInNew} /> |
205 | </a>{' '} | 207 | </a>{' '} |
206 | {intl.formatMessage(messages.textDonationAnd)} | 208 | {intl.formatMessage(messages.textDonationAnd)} |
207 | <a | 209 | <a |
@@ -212,7 +214,7 @@ const SupportFerdiDashboard = () => { | |||
212 | > | 214 | > |
213 | {' '} | 215 | {' '} |
214 | {intl.formatMessage(messages.textGitHubSponsors)} | 216 | {intl.formatMessage(messages.textGitHubSponsors)} |
215 | <i className="mdi mdi-open-in-new" /> | 217 | <Icon icon={mdiOpenInNew} /> |
216 | </a> | 218 | </a> |
217 | </p> | 219 | </p> |
218 | </div> | 220 | </div> |
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> |