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

9 files changed, 23 insertions, 14 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">