Add <TopBar> to Settings and Help pages

[MAILPOET-3073]

assets/css/src/components/_tabs.scss

@@ -3,14 +3,14 @@
   position: relative;
   z-index: 1;
 
-  .mailpoet-top-bar ~ & {
+  #screen-meta-links ~ .wrap .mailpoet-top-bar ~ & {
     top: -20px;
   }
 
   .notice ~ &,
   .error ~ &,
   .mailpoet-subscribers-in-plan ~ & {
-    top: 0;
+    top: 0 !important;
   }
 
   @include respond-to(small-screen) {

assets/js/src/help/help.jsx

@@ -9,9 +9,11 @@ import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
 import Notices from 'notices/notices.jsx';
 import RoutedTabs from '../common/tabs/routed_tabs';
 import Tab from '../common/tabs/tab';
+import { TopBar } from '../common/top_bar/top_bar';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
+    <TopBar />
     <Notices />
     <RoutedTabs activeKey="knowledgeBase">
       <Tab key="knowledgeBase" title={MailPoet.I18n.t('tabKnowledgeBaseTitle')}>

assets/js/src/settings/settings.tsx

@@ -5,6 +5,7 @@ import Loading from 'common/loading';
 import { t } from 'common/functions';
 import RoutedTabs from 'common/tabs/routed_tabs';
 import Tab from 'common/tabs/tab';
+import { TopBar } from 'common/top_bar/top_bar';
 import {
   Advanced,
   Basics,
@@ -27,9 +28,9 @@ export default function Settings() {
   const hasWooCommerce = useSelector('hasWooCommerce')();
   return (
     <>
+      <TopBar />
       {isSaving && <Loading />}
       <Notices />
-      <h1 className="title">{t('settings')}</h1>
       <RoutedTabs activeKey="basics" onSwitch={(tabKey: string) => trackTabSwitched(tabKey)}>
         <Tab key="basics" title={t('basicsTab')} automationId="basic_settings_tab">
           <Basics />

views/help.html

@@ -2,8 +2,6 @@
 
 <% block content %>
 
-<h1 class="title"><%= __('Help') %></h1>
-
 <div id="mailpoet_help">
 
   <script type="text/javascript">