Refined editor main buttons

ghost/admin/app/components/gh-publishmenu.hbs

@@ -1,5 +1,5 @@
 <BasicDropdown @verticalPosition="below" @onOpen={{action "open"}} @onClose={{action "close"}} as |dd|>
-    <dd.Trigger class="gh-btn gh-btn-black gh-publishmenu-trigger">
+    <dd.Trigger class="gh-btn gh-btn-editor {{if (or (eq this.displayState "published") (eq this.displayState "scheduled")) "green"}} gh-publishmenu-trigger">
         <span data-test-publishmenu-trigger>{{this.triggerText}} {{svg-jar "arrow-down"}}</span>
     </dd.Trigger>
 

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

@@ -4,8 +4,8 @@
 /* Base notification style */
 .gh-notifications {
     position: absolute;
-    bottom: 28px;
-    left: 20px;
+    bottom: 30px;
+    left: 30px;
     z-index: 7000;
     display: flex;
     flex-direction: column;

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

@@ -11,7 +11,7 @@
 }
 
 .gh-publishmenu-trigger svg path {
-    stroke: var(--white);
+    stroke: var(--darkgrey);
     stroke-width: 4px;
 }
 
@@ -43,15 +43,7 @@
     will-change: transform, opacity;
     z-index: 99999; /* needs to sit on top of preview modal */
     /* box-shadow: 0 0 0 1px rgba(99,114,130,0.06), 0 8px 16px rgba(27,39,51,0.08); */
-    box-shadow:
-        0 0 7px rgba(0, 0, 0, 0.08),
-        0 2.1px 2.2px -5px rgba(0, 0, 0, 0.011),
-        0 5.1px 5.3px -5px rgba(0, 0, 0, 0.016),
-        0 9.5px 10px -5px rgba(0, 0, 0, 0.02),
-        0 17px 17.9px -5px rgba(0, 0, 0, 0.024),
-        0 31.8px 33.4px -5px rgba(0, 0, 0, 0.029),
-        0 76px 80px -5px rgba(0, 0, 0, 0.04)
-    ;
+    box-shadow: var(--box-shadow-m);
 }
 
 .gh-publishmenu-dropdown.ember-basic-dropdown--transitioning-in {

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

@@ -298,6 +298,32 @@
     z-index: 799;
 }
 
+.gh-btn-editor {
+    background: var(--white) !important;
+}
+
+.gh-btn-editor span {
+    color: var(--darkgrey);
+}
+
+.gh-btn-editor:hover {
+    background: var(--whitegrey) !important;
+}
+
+.gh-btn-editor.green span {
+    color: var(--green);
+}
+
+.gh-editor-wordcount-container {
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+    display: flex;
+    align-items: center;
+    border-radius: 3px;
+    background: transparent;
+}
+
 @media (max-width: 750px) {
     .gh-editor-header {
         padding: 0 4vw;

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

@@ -134,7 +134,7 @@
     top: -344px;
     left: 20px;
     margin: 10px 0 0;
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.08), 0 18px 45px -5px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--box-shadow-m);
     min-width: 280px;
     padding: 6px 0;
 }
@@ -413,12 +413,18 @@
     height: 16px;
     position: absolute;
     left: 8px;
-    top: 11px;
+    top: 9px;
     z-index: 99999;
+    opacity: 1;
 }
 
 .gh-nav-button-expand.expanded {
     padding-left: 9px;
+    opacity: 0;
+}
+
+.gh-nav:hover .gh-nav-button-expand {
+    opacity: 1;
 }
 
 .gh-nav-button-expand svg {

ghost/admin/app/styles/patterns/buttons.css

@@ -396,6 +396,7 @@ Usage: CTA buttons grouped together horizontally.
     box-shadow: none;
     margin: 2px;
     border-radius: 2px;
+    color: var(--midgrey);
 }
 
 .gh-btn-group .gh-btn span {

ghost/admin/app/styles/patterns/global.css

@@ -155,6 +155,16 @@
     --shadow-2: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08);
     --shadow-3: 0 0 1px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.12);
 
+    --box-shadow-m:
+        0 0 7px rgba(0, 0, 0, 0.08),
+        0 2.1px 2.2px -5px rgba(0, 0, 0, 0.011),
+        0 5.1px 5.3px -5px rgba(0, 0, 0, 0.016),
+        0 9.5px 10px -5px rgba(0, 0, 0, 0.02),
+        0 17px 17.9px -5px rgba(0, 0, 0, 0.024),
+        0 31.8px 33.4px -5px rgba(0, 0, 0, 0.029),
+        0 76px 80px -5px rgba(0, 0, 0, 0.04)
+    ;
+
     /* Inputs */
     --input-bg-color: var(--white);
     --input-border-color: var(--whitegrey-d2);

ghost/admin/app/templates/editor.hbs

@@ -69,7 +69,7 @@
                 {{/unless}}
 
                 <div>
-                    <button type="button" class="gh-btn gh-btn-icon only-has-icon gh-actions-cog ml3" title="Settings" data-test-button="psm-toggle" {{action "openSettingsMenu" target=this.ui}} data-test-psm-trigger>
+                    <button type="button" class="gh-btn gh-btn-editor gh-btn-icon only-has-icon gh-actions-cog ml3" title="Settings" data-test-button="psm-toggle" {{action "openSettingsMenu" target=this.ui}} data-test-psm-trigger>
                         <span>{{svg-jar "settings"}}</span>
                     </button>
                 </div>
@@ -100,7 +100,7 @@
             @deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
         />
 
-        <div class="absolute flex items-center br3 bg-transparent {{if editor.headerClass "right-4 bottom-4" "right-6 bottom-6"}}">
+        <div class="gh-editor-wordcount-container {{if editor.headerClass "small"}}">
             <div class="midgrey-l2 {{if editor.headerClass "f-supersmall pl2 pr2" "f8 pl4 pr3"}} fw4">
                 {{gh-pluralize this.wordCount.wordCount "word"}}
             </div>