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 {
         <div className="settings__body">
           {isUsingWithoutAccount && (
             <>
-              <h1 style={{ marginBottom: 0 }}>
+              <H1 className='.no-bottom-margin'>
                 {intl.formatMessage(messages.accountUnavailable)}
-              </h1>
+              </H1>
               <p
                 className="settings__message"
                 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';
 import { mdiOpenInNew } from '@mdi/js';
 import { Button } from '../../ui/button/index';
 import { Input } from '../../ui/input/index';
-import { H3, H2 } from '../../ui/headline';
+import { H3, H2, H1 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
@@ -157,7 +157,7 @@ class RecipesDashboard extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
         </div>
         <div className="settings__body recipes">
           {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';
 import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
+import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -87,7 +88,7 @@ class ServicesDashboard extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
         </div>
         <div className="settings__body">
           {(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';
 import Select from '../../ui/Select';
 import Input from '../../ui/Input';
 import Infobox from '../../ui/Infobox';
+import { H1, H2 } from '../../ui/headline';
 
 import {
   DEFAULT_APP_SETTINGS,
@@ -93,6 +94,26 @@ const messages = defineMessages({
     id: 'settings.app.headlineAppearance',
     defaultMessage: 'Appearance',
   },
+  sectionMain: {
+    id: 'settings.app.sectionMain',
+    defaultMessage: 'Main',
+  },
+  sectionHibernation: {
+    id: 'settings.app.sectionHibernation',
+    defaultMessage: 'Hibernation',
+  },
+  sectionGeneralUi: {
+    id: 'settings.app.sectionGeneralUi',
+    defaultMessage: 'General UI',
+  },
+  sectionSidebarSettings: {
+    id: 'settings.app.sectionSidebarSettings',
+    defaultMessage: 'Sidebar Settings',
+  },
+  sectionServiceIconsSettings: {
+    id: 'settings.app.sectionServiceIconsSettings',
+    defaultMessage: 'Service Icons Settings',
+  },
   universalDarkModeInfo: {
     id: 'settings.app.universalDarkModeInfo',
     defaultMessage:
@@ -305,7 +326,7 @@ class EditSettingsForm extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <h1>{intl.formatMessage(globalMessages.settings)}</h1>
+          <H1>{intl.formatMessage(globalMessages.settings)}</H1>
         </div>
         <div className="settings__body">
           <form
@@ -401,7 +422,9 @@ class EditSettingsForm extends Component {
             {/* General */}
             {this.state.activeSetttingsTab === 'general' && (
               <div>
-                <h2><center>Main</center></h2>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionMain)}
+                </H2>
                 <Toggle field={form.$('autoLaunchOnStart')} />
                 <Toggle field={form.$('runInBackground')} />
                 <Toggle field={form.$('confirmOnQuit')} />
@@ -504,7 +527,9 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <h2><center>Hibernation</center></h2>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionHibernation)}
+                </H2>
                 <Select field={form.$('hibernationStrategy')} />
                 <Toggle field={form.$('hibernateOnStartup')} />
                 <p
@@ -522,14 +547,15 @@ class EditSettingsForm extends Component {
                 <Select field={form.$('wakeUpStrategy')} />
                 <Select field={form.$('wakeUpHibernationStrategy')} />
                 <Toggle field={form.$('wakeUpHibernationSplay')} />
-
               </div>
             )}
 
             {/* Appearance */}
             {this.state.activeSetttingsTab === 'appearance' && (
               <div>
-                <h2><center>General UI</center></h2>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionGeneralUi)}
+                </H2>
                 {isMac && <Toggle field={form.$('showDragArea')} />}
 
                 <Toggle field={form.$('adaptableDarkMode')} />
@@ -582,7 +608,9 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <h2><center>Sidebar Settings</center></h2>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionSidebarSettings)}
+                </H2>
 
                 <Select field={form.$('serviceRibbonWidth')} />
 
@@ -602,7 +630,9 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <h2><center>Service Icons Settings</center></h2>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionServiceIconsSettings)}
+                </H2>
 
                 <Toggle field={form.$('showDisabledServices')} />
                 <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';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
+import { H1 } from '../../ui/headline';
 import { LIVE_FRANZ_API } from '../../../config';
 
 const messages = defineMessages({
@@ -43,6 +44,14 @@ const messages = defineMessages({
     defaultMessage:
       '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.',
   },
+  tryReloadUserInfoRequest: {
+    id: 'settings.team.tryReloadUserInfoRequest',
+    defaultMessage: 'Try reloading',
+  },
+  userInfoRequestFailed: {
+    id: 'settings.team.userInfoRequestFailed',
+    defaultMessage: 'User Info request failed',
+  },
 });
 
 const styles = {
@@ -136,14 +145,14 @@ class TeamDashboard extends Component {
 
             {!userInfoRequestFailed && !isLoading && (
               <>
-                <h1
+                <H1
                   className={classnames({
                     [classes.headline]: true,
                     [classes.headlineWithSpacing]: true,
                   })}
                 >
                   {intl.formatMessage(messages.contentHeadline)}
-                </h1>
+                </H1>
                 <div className={classes.container}>
                   <div className={classes.content}>
                     <p>{intl.formatMessage(messages.intro)}</p>
@@ -177,9 +186,9 @@ class TeamDashboard extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <h1 className={classes.headline}>
+          <H1 className={classes.headline}>
             {intl.formatMessage(messages.teamsUnavailable)}
-          </h1>
+          </H1>
           <p
             className="settings__message"
             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';
 import Button from '../../ui/Button';
 import Radio from '../../ui/Radio';
 import Infobox from '../../ui/Infobox';
+import { H2 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -85,7 +86,7 @@ class EditUserForm extends Component {
                 {intl.formatMessage(messages.successInfo)}
               </Infobox>
             )}
-            <h2>{intl.formatMessage(messages.headlineAccount)}</h2>
+            <H2>{intl.formatMessage(messages.headlineAccount)}</H2>
             <div className="grid__row">
               <Input {...form.$('firstname').bind()} focus />
               <Input {...form.$('lastname').bind()} />
@@ -95,7 +96,7 @@ class EditUserForm extends Component {
             {form.$('accountType').value === 'company' && (
               <Input field={form.$('organization')} />
             )}
-            <h2>{intl.formatMessage(messages.headlinePassword)}</h2>
+            <H2>{intl.formatMessage(messages.headlinePassword)}</H2>
             <Input {...form.$('oldPassword').bind()} showPasswordToggle />
             <Input
               {...form.$('newPassword').bind()}