Minor refactoring for css styles of headings (fontSize)

2 files changed, 24 insertions, 23 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index fcf540ba0..8e2696e6b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -21,6 +21,7 @@ import Select from '../../ui/Select';
 import { isMac } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
 import { Icon } from '../../ui/icon';
+import { H3 } from '../../ui/headline';
 
 const messages = defineMessages({
   saveService: {
@@ -324,7 +325,7 @@ class EditServiceForm extends Component {
             <div className="service-flex-grid">
               <div className="settings__options">
                 <div className="settings__settings-group">
-                  <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                  <H3>{intl.formatMessage(messages.headlineNotifications)}</H3>
                   <Toggle field={form.$('isNotificationEnabled')} />
                   <Toggle field={form.$('isMuted')} />
                   <p className="settings__help indented__help">
@@ -333,7 +334,7 @@ class EditServiceForm extends Component {
                 </div>
 
                 <div className="settings__settings-group">
-                  <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                  <H3>{intl.formatMessage(messages.headlineBadges)}</H3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages &&
                     form.$('isBadgeEnabled').value && (
@@ -352,7 +353,7 @@ class EditServiceForm extends Component {
                 </div>
 
                 <div className="settings__settings-group">
-                  <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                  <H3>{intl.formatMessage(messages.headlineGeneral)}</H3>
                   <Toggle field={form.$('isEnabled')} />
                   <Toggle field={form.$('isHibernationEnabled')} />
                   <p className="settings__help indented__help">
@@ -362,11 +363,11 @@ class EditServiceForm extends Component {
                   <Toggle field={form.$('isDarkModeEnabled')} />
                   {form.$('isDarkModeEnabled').value && (
                     <>
-                      <h3>
+                      <H3>
                         {intl.formatMessage(
                           messages.headlineDarkReaderSettings,
                         )}
-                      </h3>
+                      </H3>
                       <Slider field={form.$('darkReaderBrightness')} />
                       <Slider field={form.$('darkReaderContrast')} />
                       <Slider field={form.$('darkReaderSepia')} />
@@ -391,10 +392,10 @@ class EditServiceForm extends Component {
 
             {isProxyFeatureEnabled && (
               <div className="settings__settings-group">
-                <h3>
+                <H3>
                   {intl.formatMessage(messages.headlineProxy)}
                   <span className="badge badge--success">beta</span>
-                </h3>
+                </H3>
                 <Toggle field={form.$('proxy.isEnabled')} />
                 {form.$('proxy.isEnabled').value && (
                   <>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 870264dfb..a59314eb7 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -13,7 +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 { H1, H2, H3, H5 } from '../../ui/headline';
 
 import {
   DEFAULT_APP_SETTINGS,
@@ -336,7 +336,7 @@ class EditSettingsForm extends Component {
           >
             {/* Titles */}
             <div className="recipes__navigation">
-              <h2
+              <H5
                 id="general"
                 className={
                   this.state.activeSetttingsTab === 'general'
@@ -348,8 +348,8 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineGeneral)}
-              </h2>
-              <h2
+              </H5>
+              <H5
                 id="appearance"
                 className={
                   this.state.activeSetttingsTab === 'appearance'
@@ -361,8 +361,8 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineAppearance)}
-              </h2>
-              <h2
+              </H5>
+              <H5
                 id="privacy"
                 className={
                   this.state.activeSetttingsTab === 'privacy'
@@ -374,8 +374,8 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlinePrivacy)}
-              </h2>
-              <h2
+              </H5>
+              <H5
                 id="language"
                 className={
                   this.state.activeSetttingsTab === 'language'
@@ -387,8 +387,8 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineLanguage)}
-              </h2>
-              <h2
+              </H5>
+              <H5
                 id="advanced"
                 className={
                   this.state.activeSetttingsTab === 'advanced'
@@ -400,8 +400,8 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineAdvanced)}
-              </h2>
-              <h2
+              </H5>
+              <H5
                 id="updates"
                 className={
                   this.state.activeSetttingsTab === 'updates'
@@ -416,7 +416,7 @@ class EditSettingsForm extends Component {
                 {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable || showServicesUpdatedInfoBar) && (
                   <span className="update-available">•</span>
                 )}
-              </h2>
+              </H5>
             </div>
 
             {/* General */}
@@ -781,7 +781,7 @@ class EditSettingsForm extends Component {
                 <Hr />
 
                 <div className="settings__settings-group">
-                  <h3>{intl.formatMessage(messages.subheadlineCache)}</h3>
+                  <H3>{intl.formatMessage(messages.subheadlineCache)}</H3>
                   <p>
                     {intl.formatMessage(messages.cacheInfo, {
                       size: cacheSize,
@@ -817,9 +817,9 @@ class EditSettingsForm extends Component {
                 <Hr />
 
                 <div className="settings__settings-group">
-                  <h3>
+                  <H3>
                     {intl.formatMessage(messages.subheadlineFerdiumProfile)}
-                  </h3>
+                  </H3>
                   <p>
                     <div className="settings__open-settings-file-container">
                       <Button