Use components defined in the codebase; Extract some text for i18n purposes.

26 files changed, 118 insertions, 45 deletions

diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 7e74fe779..081f2d61f 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -11,6 +11,7 @@ import Infobox from '../ui/Infobox';
 import { url, required } from '../../helpers/validation-helpers';
 import { LIVE_FERDIUM_API, LIVE_FRANZ_API, LIVE_FERDI_API } from '../../config';
 import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -110,7 +111,7 @@ class ChangeServer extends Component {
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
           {(form.$('server').value === this.franzServer || form.$('server').value === this.ferdiServer) && (
             <Infobox type="warning">
               {intl.formatMessage(messages.warning)}
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 281ceda97..e7d5731f9 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -8,6 +8,7 @@ import classnames from 'classnames';
 import Form from '../../lib/Form';
 import Toggle from '../ui/Toggle';
 import Button from '../ui/Button';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -90,7 +91,7 @@ class Import extends Component {
             onSubmit={e => this.submit(e)}
           >
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
-            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <H1>{intl.formatMessage(messages.headline)}</H1>
             <table className="service-table available-services">
               <tbody>
                 {this.form.$('import').map((service, i) => (
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index a23af7c6b..81618b3bd 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -11,6 +11,7 @@ import Form from '../../lib/Form';
 import { email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   settingsHeadline: {
@@ -146,9 +147,9 @@ class Invite extends Component {
           {!embed && (
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
-          <h1 className={embed && 'invite__embed'}>
+          <H1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
-          </h1>
+          </H1>
           {form.$('invite').map(invite => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
@@ -184,7 +185,7 @@ class Invite extends Component {
       >
         {embed && (
           <div className="settings__header">
-            <h1>{this.props.intl.formatMessage(messages.settingsHeadline)}</h1>
+            <H1>{this.props.intl.formatMessage(messages.settingsHeadline)}</H1>
           </div>
         )}
         {!embed ? (
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index ac1bc4e8c..e09a7d540 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -7,6 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
+import { H1 } from '../ui/headline';
 import { isMac } from '../../environment';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
@@ -100,7 +101,7 @@ class Locked extends Component {
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
 
           {touchIdEnabled && (
             <>
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index ccffd0c6a..305ed38b2 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -13,6 +13,7 @@ import Button from '../ui/Button';
 import Link from '../ui/Link';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -117,7 +118,7 @@ class Login extends Component {
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
           {isTokenExpired && (
             <p className="error-message center">
               {intl.formatMessage(messages.tokenExpired)}
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 49930f6bd..8a5ef28f3 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -10,6 +10,7 @@ import Button from '../ui/Button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -79,7 +80,7 @@ class Password extends Component {
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
-          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
           {status.length > 0 && status.includes('sent') && (
             <Infobox type="success" icon="checkbox-marked-circle-outline">
               {intl.formatMessage(messages.successInfo)}
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index a24f4e4d5..90f6733a6 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -14,6 +14,7 @@ import Appear from '../ui/effects/Appear';
 import globalMessages from '../../i18n/globalMessages';
 
 import { CDN_URL } from '../../config';
+import { H1, H2 } from '../ui/headline';
 
 const SLACK_ID = 'slack';
 
@@ -213,8 +214,8 @@ class SetupAssistant extends Component {
         )}
 
         <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
-        <h1>{intl.formatMessage(messages.headline)}</h1>
-        <h2>{intl.formatMessage(messages.subHeadline)}</h2>
+        <H1>{intl.formatMessage(messages.headline)}</H1>
+        <H2>{intl.formatMessage(messages.subHeadline)}</H2>
         <div className={classnames('grid', classes.servicesGrid)}>
           {Object.keys(services).map(id => {
             const service = services[id];
@@ -252,7 +253,7 @@ class SetupAssistant extends Component {
                   className={classes.serviceIcon}
                   alt=""
                 />
-                <h2>{service.name}</h2>
+                <H2>{service.name}</H2>
                 {id === SLACK_ID && slackWorkspace && (
                   <Badge type="secondary" className={classes.slackBadge}>
                     {slackWorkspace}
@@ -280,7 +281,7 @@ class SetupAssistant extends Component {
         >
           <div className={classes.slackModalContent}>
             <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" />
-            <h1>Create your first Slack workspace</h1>
+            <H1>Create your first Slack workspace</H1>
             <form
               onSubmit={e => {
                 e.preventDefault();
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 3cccb2428..1c7b8e247 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -12,6 +12,7 @@ import Link from '../ui/Link';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 import { termsBase } from '../../api/apiBase';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -124,7 +125,7 @@ class Signup extends Component {
             onSubmit={e => this.submit(e)}
           >
             <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
-            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <H1>{intl.formatMessage(messages.headline)}</H1>
             <div className="grid__row">
               <Input field={form.$('firstname')} focus />
               <Input field={form.$('lastname')} />
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 94ea4d603..ec4e7b68a 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -7,6 +7,7 @@ import serverlessLogin from '../../helpers/serverless-helpers';
 import { shuffleArray } from '../../helpers/array-helpers';
 
 import Link from '../ui/Link';
+import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
   signupButton: {
@@ -56,7 +57,7 @@ class Welcome extends Component {
           />
           {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
           <div className="welcome__text">
-            <h1>Ferdium</h1>
+            <H1>Ferdium</H1>
           </div>
         </div>
         <div className="welcome__buttons">
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index d605b3a52..cdc12b01b 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -7,6 +7,7 @@ import injectSheet from 'react-jss';
 import Button from '../../../ui/Button';
 
 import styles from './styles';
+import { H1 } from '../../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -46,7 +47,7 @@ class WebviewErrorHandler extends Component {
 
     return (
       <div className={classes.component}>
-        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <H1>{intl.formatMessage(messages.headline)}</H1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <p>
           <strong>{intl.formatMessage(messages.errorMessage)}:</strong>{' '}
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index b4658618e..da5357bf2 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
+import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -28,7 +29,7 @@ class ServiceDisabled extends Component {
 
     return (
       <div className="services__info-layer">
-        <h1>{intl.formatMessage(messages.headline, { name })}</h1>
+        <H1>{intl.formatMessage(messages.headline, { name })}</H1>
         <Button
           label={intl.formatMessage(messages.action, { name })}
           buttonType="inverted"
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 1ca5ba415..7e635e9ab 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ms from 'ms';
 
 import Button from '../../ui/Button';
+import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -61,7 +62,7 @@ class WebviewCrashHandler extends Component {
 
     return (
       <div className="services__info-layer">
-        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <H1>{intl.formatMessage(messages.headline)}</H1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <Button
           // label={`Reload ${name}`}
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()}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index d2f4b8321..983e7ea6c 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import Loader from '../Loader';
 
 import styles from './styles';
+import { H1 } from '../headline';
 
 class FullscreenLoader extends Component {
   static propTypes = {
@@ -37,7 +38,7 @@ class FullscreenLoader extends Component {
             [`${className}`]: className,
           })}
         >
-          <h1 className={classes.title}>{title}</h1>
+          <H1 className={classes.title}>{title}</H1>
           <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
           {children && <div className={classes.content}>{children}</div>}
         </div>
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index 6a8b126f1..8687cc09f 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -4,6 +4,7 @@ import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
+import { H1 } from '../../ui/headline';
 
 import styles from './styles';
 
@@ -39,9 +40,9 @@ class ErrorBoundary extends Component {
     if (this.state.hasError) {
       return (
         <div className={classes.component}>
-          <h1 className={classes.title}>
+          <H1 className={classes.title}>
             {intl.formatMessage(messages.headline)}
-          </h1>
+          </H1>
           <Button
             label={intl.formatMessage(messages.action)}
             buttonType="inverted"
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index cf3d7b32f..038497f0d 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -579,11 +579,11 @@ class EditSettingsScreen extends Component {
           options: wakeUpHibernationStrategies,
           default: DEFAULT_APP_SETTINGS.wakeUpHibernationStrategy,
         },
-        wakeUpHibernationSplay: {
+        wakeUpHibernationSplay: {
           label: intl.formatMessage(messages.wakeUpHibernationSplay),
-          value: settings.all.app.wakeUpHibernationSplay,
-          default: DEFAULT_APP_SETTINGS.wakeUpHibernationSplay,
-        },
+          value: settings.all.app.wakeUpHibernationSplay,
+          default: DEFAULT_APP_SETTINGS.wakeUpHibernationSplay,
+        },
         predefinedTodoServer: {
           label: intl.formatMessage(messages.predefinedTodoServer),
           value: settings.all.app.predefinedTodoServer,
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index 89b0a4e72..ab5c518f8 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -14,6 +14,7 @@ import Form from './Form';
 
 import styles from './styles';
 import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../../components/ui/headline';
 
 const messages = defineMessages({
   signIn: {
@@ -64,7 +65,7 @@ class BasicAuthModal extends Component {
         close={this.cancel.bind(this)}
         showClose={false}
       >
-        <h1>{intl.formatMessage(messages.signIn)}</h1>
+        <H1>{intl.formatMessage(messages.signIn)}</H1>
         <p>
           http
           {authInfo.port === 443 && 's'}
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 878713fe9..6829fddaa 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -18,6 +18,7 @@ import Request from '../../../stores/lib/Request';
 import { KEEP_WS_LOADED_USID } from '../../../config';
 
 import Toggle from '../../../components/ui/Toggle';
+import { H2 } from '../../../components/ui/headline';
 
 const messages = defineMessages({
   buttonDelete: {
@@ -183,7 +184,7 @@ class EditWorkspaceForm extends Component {
               {intl.formatMessage(messages.keepLoadedInfo)}
             </p>
           </div>
-          <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
+          <H2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</H2>
           <div className={classes.serviceList}>
             {services.length === 0 ? (
               <div className="align-middle settings__empty-state">
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 770186be7..f21aaa258 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -12,6 +12,7 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import UIStore from '../../../stores/UIStore';
+import { H1 } from '../../../components/ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -98,7 +99,7 @@ class WorkspacesDashboard 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">
           {/* ===== Workspace updated info ===== */}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 9578df4de..8514530f3 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -267,6 +267,11 @@
   "settings.app.restartRequired": "Changes require restart",
   "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.",
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
+  "settings.app.sectionGeneralUi": "General UI",
+  "settings.app.sectionHibernation": "Hibernation",
+  "settings.app.sectionMain": "Main",
+  "settings.app.sectionServiceIconsSettings": "Service Icons Settings",
+  "settings.app.sectionSidebarSettings": "Sidebar Settings",
   "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdium - we will not send any personal information like your message data!",
   "settings.app.spellCheckerLanguageInfo": "Ferdium uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
   "settings.app.subheadlineCache": "Cache",
@@ -369,6 +374,8 @@
   "settings.team.manageAction": "Manage your Team on meetfranz.com",
   "settings.team.teamsUnavailable": "Teams are unavailable",
   "settings.team.teamsUnavailableInfo": "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.",
+  "settings.team.tryReloadUserInfoRequest": "Try reloading",
+  "settings.team.userInfoRequestFailed": "User Info request failed",
   "settings.user.form.accountType.company": "Company",
   "settings.user.form.accountType.individual": "Individual",
   "settings.user.form.accountType.label": "Account type",
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 3178f718d..100e627ea 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -34,6 +34,10 @@
       }
     }
 
+    .settings__section_header {
+      text-align: center;
+    }
+
     .settings__main {
       background: $dark-theme-gray-darkest;
     }
@@ -268,6 +272,10 @@
     a {
       display: inline-block;
     }
+
+    .no-bottom-margin {
+      margin-bottom: 0;
+    }
   }
 
   .settings__close {