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

3 files changed, 6 insertions, 3 deletions

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}`}