diff options
Diffstat (limited to 'src/components/settings')
6 files changed, 35 insertions, 21 deletions
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> |