Fix header appearance in the form editor

[MAILPOET-6054]

mailpoet/assets/css/src/components-form-editor/_block-editor.scss

@@ -12,12 +12,6 @@
   }
 }
 
-// Fix for settings toolbar placement in header
-.edit-post-header {
-  flex-direction: row-reverse;
-  justify-content: space-between;
-}
-
 // Fix for default appender appearance
 // We don't use any default block (WP Post editor has paragraph)
 // and CSS distributed within packages is works only with the paragraph block
@@ -140,18 +134,6 @@ h2 {
   padding: 10px;
 }
 
-// Close button animation
-.edit-post-header-toolbar.edit-post-header-toolbar__left
-  > .edit-post-header-toolbar__inserter-toggle {
-  svg {
-    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-  }
-
-  &.is-pressed svg {
-    transform: rotate(45deg);
-  }
-}
-
 // Hide block selector header with close button on desktops
 
 @include respond-to(not-small-screen) {

mailpoet/assets/css/src/components-form-editor/_header.scss

@@ -1,9 +1,26 @@
+// Fix for settings toolbar placement in header
+.edit-post-header {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+// Header buttons spacing
 .mailpoet-editor-header-button {
   padding-left: 8px;
   padding-right: 8px;
 
   @media (min-width: 600px) {
-    margin-right: 12px;
     padding: 0 12px;
   }
 }
+
+// Close button animation
+.editor-document-tools__left > .edit-post-header-toolbar__inserter-toggle {
+  svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+
+  &.is-pressed svg {
+    transform: rotate(45deg);
+  }
+}

mailpoet/assets/js/src/form-editor/components/header.jsx

@@ -35,8 +35,8 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
     useDispatch(storeName);
 
   return (
-    <div className="edit-post-header">
+    <div className="editor-header edit-post-header">
-      <div className="edit-post-header__settings">
+      <div className="editor-header__settings">
         <Button
           variant="secondary"
           onClick={showPreview}
@@ -87,8 +87,9 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
           )}
         </DropdownMenu>
       </div>
-      <div className="edit-post-header__toolbar">
+      <div className="editor-header__toolbar">
-        <div className="toolbar edit-post-header-toolbar edit-post-header-toolbar__left">
+        <div className="toolbar edit-post-header-toolbar">
+          <div className="editor-document-tools__left">
             <Button
               variant="secondary"
               href="?page=mailpoet-forms#/"
@@ -100,7 +101,7 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
               as={Button}
               data-automation-id="form_inserter_open"
               className="edit-post-header-toolbar__inserter-toggle"
-            isPrimary
+              variant="primary"
               isPressed={isInserterOpened}
               onClick={() => setIsInserterOpened(!isInserterOpened)}
               icon={plus}
@@ -111,6 +112,7 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
           </div>
         </div>
       </div>
+    </div>
   );
 }