Fixed header and footer button alignment in editor

ghost/admin/app/styles/components/publishmenu.css

@@ -22,7 +22,6 @@
 .gh-publishmenu {
     position: relative;
     z-index: 1000;
-    display: flex;
     margin-right: 8px;
 }
 

ghost/admin/app/styles/components/settings-menu.css

@@ -6,7 +6,7 @@
 
 .settings-menu-toggle {
     position: absolute;
-    top: 31px;
+    top: 30px;
     right: 24px;
     z-index: 9999;
     margin-right: 0 !important;

ghost/admin/app/styles/layouts/editor.css

@@ -353,7 +353,24 @@
     display: flex;
     align-items: center;
     border-radius: 3px;
-    background: transparent;
+    background: var(--white);
+}
+
+.gh-editor-wordcount-container svg {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin: 9px 12px;
+}
+
+.gh-editor-wordcount-container svg path {
+    stroke: var(--midgrey-l2);
+}
+
+.gh-editor-wordcount {
+    padding: 0 4px 0 14px;
+    color: var(--midgrey-l2);
+    font-size: 1.3rem;
+    font-weight: 400;
 }
 
 .gh-editor-status {
@@ -589,18 +606,6 @@
     }
 }
 
-.gh-editor-wordcount {
-    position: fixed;
-    bottom: 0;
-    padding: 10px;
-}
-
-@media (max-width: 1200px) {
-    .gh-editor-wordcount {
-        display: none;
-    }
-}
-
 @media (max-width: 500px) {
     .gh-editor-title {
         font-size: 3.4rem;

ghost/admin/app/templates/editor.hbs

@@ -90,10 +90,10 @@
             />
 
             <div class="gh-editor-wordcount-container">
-                <div class="midgrey-l2 f8 pl4 pr3 fw4">
+                <div class="gh-editor-wordcount">
                     {{gh-pluralize this.wordCount.wordCount "word"}}
                 </div>
-                <a href="https://ghost.org/help/using-the-editor/" class="flex pa3" target="_blank">{{svg-jar "help" class="w4 h4 stroke-midgrey-l2"}}</a>
+                <a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank">{{svg-jar "help"}}</a>
             </div>
 
         </GhEditor>