diff options
Diffstat (limited to 'src/components/settings')
6 files changed, 59 insertions, 18 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 78d41a273..1d2d7a207 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -107,9 +107,9 @@ class AccountDashboard extends Component { | |||
107 | <div className="settings__body"> | 107 | <div className="settings__body"> |
108 | {isUsingWithoutAccount && ( | 108 | {isUsingWithoutAccount && ( |
109 | <> | 109 | <> |
110 | <h1 style={{ marginBottom: 0 }}> | 110 | <H1 className='.no-bottom-margin'> |
111 | {intl.formatMessage(messages.accountUnavailable)} | 111 | {intl.formatMessage(messages.accountUnavailable)} |
112 | </h1> | 112 | </H1> |
113 | <p | 113 | <p |
114 | className="settings__message" | 114 | className="settings__message" |
115 | style={{ | 115 | style={{ |
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index a10998085..cbfe676fe 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js | |||
@@ -9,7 +9,7 @@ import injectSheet from 'react-jss'; | |||
9 | import { mdiOpenInNew } from '@mdi/js'; | 9 | import { mdiOpenInNew } from '@mdi/js'; |
10 | import { Button } from '../../ui/button/index'; | 10 | import { Button } from '../../ui/button/index'; |
11 | import { Input } from '../../ui/input/index'; | 11 | import { Input } from '../../ui/input/index'; |
12 | import { H3, H2 } from '../../ui/headline'; | 12 | import { H3, H2, H1 } from '../../ui/headline'; |
13 | import SearchInput from '../../ui/SearchInput'; | 13 | import SearchInput from '../../ui/SearchInput'; |
14 | import Infobox from '../../ui/Infobox'; | 14 | import Infobox from '../../ui/Infobox'; |
15 | import RecipeItem from './RecipeItem'; | 15 | import RecipeItem from './RecipeItem'; |
@@ -157,7 +157,7 @@ class RecipesDashboard extends Component { | |||
157 | return ( | 157 | return ( |
158 | <div className="settings__main"> | 158 | <div className="settings__main"> |
159 | <div className="settings__header"> | 159 | <div className="settings__header"> |
160 | <h1>{intl.formatMessage(messages.headline)}</h1> | 160 | <H1>{intl.formatMessage(messages.headline)}</H1> |
161 | </div> | 161 | </div> |
162 | <div className="settings__body recipes"> | 162 | <div className="settings__body recipes"> |
163 | {serviceStatus.length > 0 && serviceStatus.includes('created') && ( | 163 | {serviceStatus.length > 0 && serviceStatus.includes('created') && ( |
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index b405593fd..c5bb1433c 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js | |||
@@ -10,6 +10,7 @@ import Loader from '../../ui/Loader'; | |||
10 | import FAB from '../../ui/FAB'; | 10 | import FAB from '../../ui/FAB'; |
11 | import ServiceItem from './ServiceItem'; | 11 | import ServiceItem from './ServiceItem'; |
12 | import Appear from '../../ui/effects/Appear'; | 12 | import Appear from '../../ui/effects/Appear'; |
13 | import { H1 } from '../../ui/headline'; | ||
13 | 14 | ||
14 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
15 | headline: { | 16 | headline: { |
@@ -87,7 +88,7 @@ class ServicesDashboard extends Component { | |||
87 | return ( | 88 | return ( |
88 | <div className="settings__main"> | 89 | <div className="settings__main"> |
89 | <div className="settings__header"> | 90 | <div className="settings__header"> |
90 | <h1>{intl.formatMessage(messages.headline)}</h1> | 91 | <H1>{intl.formatMessage(messages.headline)}</H1> |
91 | </div> | 92 | </div> |
92 | <div className="settings__body"> | 93 | <div className="settings__body"> |
93 | {(services.length > 0 || searchNeedle) && !isLoading && ( | 94 | {(services.length > 0 || searchNeedle) && !isLoading && ( |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 600345117..870264dfb 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -13,6 +13,7 @@ import Toggle from '../../ui/Toggle'; | |||
13 | import Select from '../../ui/Select'; | 13 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/Input'; |
15 | import Infobox from '../../ui/Infobox'; | 15 | import Infobox from '../../ui/Infobox'; |
16 | import { H1, H2 } from '../../ui/headline'; | ||
16 | 17 | ||
17 | import { | 18 | import { |
18 | DEFAULT_APP_SETTINGS, | 19 | DEFAULT_APP_SETTINGS, |
@@ -93,6 +94,26 @@ const messages = defineMessages({ | |||
93 | id: 'settings.app.headlineAppearance', | 94 | id: 'settings.app.headlineAppearance', |
94 | defaultMessage: 'Appearance', | 95 | defaultMessage: 'Appearance', |
95 | }, | 96 | }, |
97 | sectionMain: { | ||
98 | id: 'settings.app.sectionMain', | ||
99 | defaultMessage: 'Main', | ||
100 | }, | ||
101 | sectionHibernation: { | ||
102 | id: 'settings.app.sectionHibernation', | ||
103 | defaultMessage: 'Hibernation', | ||
104 | }, | ||
105 | sectionGeneralUi: { | ||
106 | id: 'settings.app.sectionGeneralUi', | ||
107 | defaultMessage: 'General UI', | ||
108 | }, | ||
109 | sectionSidebarSettings: { | ||
110 | id: 'settings.app.sectionSidebarSettings', | ||
111 | defaultMessage: 'Sidebar Settings', | ||
112 | }, | ||
113 | sectionServiceIconsSettings: { | ||
114 | id: 'settings.app.sectionServiceIconsSettings', | ||
115 | defaultMessage: 'Service Icons Settings', | ||
116 | }, | ||
96 | universalDarkModeInfo: { | 117 | universalDarkModeInfo: { |
97 | id: 'settings.app.universalDarkModeInfo', | 118 | id: 'settings.app.universalDarkModeInfo', |
98 | defaultMessage: | 119 | defaultMessage: |
@@ -305,7 +326,7 @@ class EditSettingsForm extends Component { | |||
305 | return ( | 326 | return ( |
306 | <div className="settings__main"> | 327 | <div className="settings__main"> |
307 | <div className="settings__header"> | 328 | <div className="settings__header"> |
308 | <h1>{intl.formatMessage(globalMessages.settings)}</h1> | 329 | <H1>{intl.formatMessage(globalMessages.settings)}</H1> |
309 | </div> | 330 | </div> |
310 | <div className="settings__body"> | 331 | <div className="settings__body"> |
311 | <form | 332 | <form |
@@ -401,7 +422,9 @@ class EditSettingsForm extends Component { | |||
401 | {/* General */} | 422 | {/* General */} |
402 | {this.state.activeSetttingsTab === 'general' && ( | 423 | {this.state.activeSetttingsTab === 'general' && ( |
403 | <div> | 424 | <div> |
404 | <h2><center>Main</center></h2> | 425 | <H2 className='settings__section_header'> |
426 | {intl.formatMessage(messages.sectionMain)} | ||
427 | </H2> | ||
405 | <Toggle field={form.$('autoLaunchOnStart')} /> | 428 | <Toggle field={form.$('autoLaunchOnStart')} /> |
406 | <Toggle field={form.$('runInBackground')} /> | 429 | <Toggle field={form.$('runInBackground')} /> |
407 | <Toggle field={form.$('confirmOnQuit')} /> | 430 | <Toggle field={form.$('confirmOnQuit')} /> |
@@ -504,7 +527,9 @@ class EditSettingsForm extends Component { | |||
504 | 527 | ||
505 | <Hr /> | 528 | <Hr /> |
506 | 529 | ||
507 | <h2><center>Hibernation</center></h2> | 530 | <H2 className='settings__section_header'> |
531 | {intl.formatMessage(messages.sectionHibernation)} | ||
532 | </H2> | ||
508 | <Select field={form.$('hibernationStrategy')} /> | 533 | <Select field={form.$('hibernationStrategy')} /> |
509 | <Toggle field={form.$('hibernateOnStartup')} /> | 534 | <Toggle field={form.$('hibernateOnStartup')} /> |
510 | <p | 535 | <p |
@@ -522,14 +547,15 @@ class EditSettingsForm extends Component { | |||
522 | <Select field={form.$('wakeUpStrategy')} /> | 547 | <Select field={form.$('wakeUpStrategy')} /> |
523 | <Select field={form.$('wakeUpHibernationStrategy')} /> | 548 | <Select field={form.$('wakeUpHibernationStrategy')} /> |
524 | <Toggle field={form.$('wakeUpHibernationSplay')} /> | 549 | <Toggle field={form.$('wakeUpHibernationSplay')} /> |
525 | |||
526 | </div> | 550 | </div> |
527 | )} | 551 | )} |
528 | 552 | ||
529 | {/* Appearance */} | 553 | {/* Appearance */} |
530 | {this.state.activeSetttingsTab === 'appearance' && ( | 554 | {this.state.activeSetttingsTab === 'appearance' && ( |
531 | <div> | 555 | <div> |
532 | <h2><center>General UI</center></h2> | 556 | <H2 className='settings__section_header'> |
557 | {intl.formatMessage(messages.sectionGeneralUi)} | ||
558 | </H2> | ||
533 | {isMac && <Toggle field={form.$('showDragArea')} />} | 559 | {isMac && <Toggle field={form.$('showDragArea')} />} |
534 | 560 | ||
535 | <Toggle field={form.$('adaptableDarkMode')} /> | 561 | <Toggle field={form.$('adaptableDarkMode')} /> |
@@ -582,7 +608,9 @@ class EditSettingsForm extends Component { | |||
582 | 608 | ||
583 | <Hr /> | 609 | <Hr /> |
584 | 610 | ||
585 | <h2><center>Sidebar Settings</center></h2> | 611 | <H2 className='settings__section_header'> |
612 | {intl.formatMessage(messages.sectionSidebarSettings)} | ||
613 | </H2> | ||
586 | 614 | ||
587 | <Select field={form.$('serviceRibbonWidth')} /> | 615 | <Select field={form.$('serviceRibbonWidth')} /> |
588 | 616 | ||
@@ -602,7 +630,9 @@ class EditSettingsForm extends Component { | |||
602 | 630 | ||
603 | <Hr /> | 631 | <Hr /> |
604 | 632 | ||
605 | <h2><center>Service Icons Settings</center></h2> | 633 | <H2 className='settings__section_header'> |
634 | {intl.formatMessage(messages.sectionServiceIconsSettings)} | ||
635 | </H2> | ||
606 | 636 | ||
607 | <Toggle field={form.$('showDisabledServices')} /> | 637 | <Toggle field={form.$('showDisabledServices')} /> |
608 | <Toggle field={form.$('showServiceName')} /> | 638 | <Toggle field={form.$('showServiceName')} /> |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 22d386775..228796ad9 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -9,6 +9,7 @@ import classnames from 'classnames'; | |||
9 | import Loader from '../../ui/Loader'; | 9 | import Loader from '../../ui/Loader'; |
10 | import Button from '../../ui/Button'; | 10 | import Button from '../../ui/Button'; |
11 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
12 | import { H1 } from '../../ui/headline'; | ||
12 | import { LIVE_FRANZ_API } from '../../../config'; | 13 | import { LIVE_FRANZ_API } from '../../../config'; |
13 | 14 | ||
14 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
@@ -43,6 +44,14 @@ const messages = defineMessages({ | |||
43 | defaultMessage: | 44 | defaultMessage: |
44 | 'Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.', | 45 | 'Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.', |
45 | }, | 46 | }, |
47 | tryReloadUserInfoRequest: { | ||
48 | id: 'settings.team.tryReloadUserInfoRequest', | ||
49 | defaultMessage: 'Try reloading', | ||
50 | }, | ||
51 | userInfoRequestFailed: { | ||
52 | id: 'settings.team.userInfoRequestFailed', | ||
53 | defaultMessage: 'User Info request failed', | ||
54 | }, | ||
46 | }); | 55 | }); |
47 | 56 | ||
48 | const styles = { | 57 | const styles = { |
@@ -136,14 +145,14 @@ class TeamDashboard extends Component { | |||
136 | 145 | ||
137 | {!userInfoRequestFailed && !isLoading && ( | 146 | {!userInfoRequestFailed && !isLoading && ( |
138 | <> | 147 | <> |
139 | <h1 | 148 | <H1 |
140 | className={classnames({ | 149 | className={classnames({ |
141 | [classes.headline]: true, | 150 | [classes.headline]: true, |
142 | [classes.headlineWithSpacing]: true, | 151 | [classes.headlineWithSpacing]: true, |
143 | })} | 152 | })} |
144 | > | 153 | > |
145 | {intl.formatMessage(messages.contentHeadline)} | 154 | {intl.formatMessage(messages.contentHeadline)} |
146 | </h1> | 155 | </H1> |
147 | <div className={classes.container}> | 156 | <div className={classes.container}> |
148 | <div className={classes.content}> | 157 | <div className={classes.content}> |
149 | <p>{intl.formatMessage(messages.intro)}</p> | 158 | <p>{intl.formatMessage(messages.intro)}</p> |
@@ -177,9 +186,9 @@ class TeamDashboard extends Component { | |||
177 | </span> | 186 | </span> |
178 | </div> | 187 | </div> |
179 | <div className="settings__body"> | 188 | <div className="settings__body"> |
180 | <h1 className={classes.headline}> | 189 | <H1 className={classes.headline}> |
181 | {intl.formatMessage(messages.teamsUnavailable)} | 190 | {intl.formatMessage(messages.teamsUnavailable)} |
182 | </h1> | 191 | </H1> |
183 | <p | 192 | <p |
184 | className="settings__message" | 193 | className="settings__message" |
185 | style={{ | 194 | style={{ |
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js index 95498d9bb..4d101730f 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.js | |||
@@ -9,6 +9,7 @@ import Form from '../../../lib/Form'; | |||
9 | import Button from '../../ui/Button'; | 9 | import Button from '../../ui/Button'; |
10 | import Radio from '../../ui/Radio'; | 10 | import Radio from '../../ui/Radio'; |
11 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
12 | import { H2 } from '../../ui/headline'; | ||
12 | 13 | ||
13 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
14 | headline: { | 15 | headline: { |
@@ -85,7 +86,7 @@ class EditUserForm extends Component { | |||
85 | {intl.formatMessage(messages.successInfo)} | 86 | {intl.formatMessage(messages.successInfo)} |
86 | </Infobox> | 87 | </Infobox> |
87 | )} | 88 | )} |
88 | <h2>{intl.formatMessage(messages.headlineAccount)}</h2> | 89 | <H2>{intl.formatMessage(messages.headlineAccount)}</H2> |
89 | <div className="grid__row"> | 90 | <div className="grid__row"> |
90 | <Input {...form.$('firstname').bind()} focus /> | 91 | <Input {...form.$('firstname').bind()} focus /> |
91 | <Input {...form.$('lastname').bind()} /> | 92 | <Input {...form.$('lastname').bind()} /> |
@@ -95,7 +96,7 @@ class EditUserForm extends Component { | |||
95 | {form.$('accountType').value === 'company' && ( | 96 | {form.$('accountType').value === 'company' && ( |
96 | <Input field={form.$('organization')} /> | 97 | <Input field={form.$('organization')} /> |
97 | )} | 98 | )} |
98 | <h2>{intl.formatMessage(messages.headlinePassword)}</h2> | 99 | <H2>{intl.formatMessage(messages.headlinePassword)}</H2> |
99 | <Input {...form.$('oldPassword').bind()} showPasswordToggle /> | 100 | <Input {...form.$('oldPassword').bind()} showPasswordToggle /> |
100 | <Input | 101 | <Input |
101 | {...form.$('newPassword').bind()} | 102 | {...form.$('newPassword').bind()} |