Updated publishmenu design

TryGhost · Nov 6, 2019 · ab801f0 · ab801f0
1 parent 80501a5
commit ab801f0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/app/styles/components/publishmenu.css b/app/styles/components/publishmenu.css
@@ -223,3 +223,12 @@
     font-weight: 200;
     color: var(--red);
 }
+
+.for-checkbox .gh-publishmenu-email-checkbox {
+    margin-right: 0;
+    background: var(--white);
+}
+
+.gh-publishmenu-email-label {
+    margin-left: 12px;
+}
diff --git a/app/templates/components/gh-publishmenu-draft.hbs b/app/templates/components/gh-publishmenu-draft.hbs
@@ -25,30 +25,22 @@
         </div>
     </div>
     {{#if this.feature.labs.members}}
-        <div class="flex mb4 justify-center">
+        <div class="gh-publishmenu-radio">
             {{#if this.backgroundLoader.isRunning}}
                 <div class="gh-loading-spinner" style="zoom: 50%"></div>
             {{else}}
-                {{#if this.deliveredAction}}
-                    <div class="mr3">
-                        💌
-                    </div>
-                    <div class="flex-grow-1">
-                        <div class="gh-publishmenu-radio-label">Sent</div>
-                        <div class="gh-publishmenu-radio-desc">Post was sent {{gh-format-post-time this.deliveredAction.createdAtUTC}}</div>
-                    </div>
-                {{else}}
-                    <div class="for-switch mr3">
-                        <label class="switch" for="email-when-published-checkbox">
+                {{#unless this.deliveredAction}}
+                    <div class="for-checkbox">
+                        <label class="checkbox" for="email-when-published-checkbox">
                             <Input @checked={{this.sendEmailWhenPublished}} @type="checkbox" @id="email-when-published-checkbox" @name="email-when-published" />
-                            <span class="input-toggle-component"></span>
+                            <span class="input-toggle-component gh-publishmenu-email-checkbox"></span>
                         </label>
                     </div>
-                    <div class="flex-grow-1">
+                    <div class="gh-publishmenu-email-label">
                         <div class="gh-publishmenu-radio-label">Email post</div>
                         <div class="gh-publishmenu-radio-desc">Send post to {{this.memberCount}} members when published</div>
                     </div>
-                {{/if}}
+                {{/unless}}
             {{/if}}
         </div>
     {{/if}}