Move logo to the top bar in the welcome wizard

[MAILPOET-4819]

mailpoet/assets/css/src/components-plugin/_welcome-wizard.scss

@@ -22,6 +22,12 @@
   }
 }
 
+#mailpoet-wizard-container {
+  .mailpoet-top-bar {
+    left: 0;
+  }
+}
+
 .mailpoet-wizard-logo {
   margin-bottom: 100px;
   text-align: center;

mailpoet/assets/js/src/wizard/layout/step_layout.jsx

@@ -4,19 +4,9 @@ import { WelcomeWizardStepLayoutBody } from './step_layout_body.jsx';
 
 function WelcomeWizardStepLayout(props) {
   return (
-    <>
-      <div className="mailpoet-wizard-logo">
-        <img
-          src={window.mailpoet_logo_url}
-          width="160"
-          height="50"
-          alt="MailPoet logo"
-        />
-      </div>
-      <WelcomeWizardStepLayoutBody illustrationUrl={props.illustrationUrl}>
-        {props.children}
-      </WelcomeWizardStepLayoutBody>
-    </>
+    <WelcomeWizardStepLayoutBody illustrationUrl={props.illustrationUrl}>
+      {props.children}
+    </WelcomeWizardStepLayoutBody>
   );
 }
 

mailpoet/assets/js/src/wizard/welcome_wizard_controller.jsx

@@ -17,6 +17,7 @@ import {
 } from './steps_numbers.jsx';
 import { Steps } from '../common/steps/steps';
 import { StepsContent } from '../common/steps/steps_content';
+import { TopBar } from '../common/top_bar/top_bar';
 
 function WelcomeWizardStepsController(props) {
   const stepsCount = getStepsCount();
@@ -101,7 +102,9 @@ function WelcomeWizardStepsController(props) {
 
   return (
     <>
-      <Steps count={stepsCount} current={step} />
+      <TopBar>
+        <Steps count={stepsCount} current={step} />
+      </TopBar>
       <StepsContent>
         {stepName === 'WelcomeWizardSenderStep' ? (
           <WelcomeWizardStepLayout