Resolve nightshift visual bugs

Closes https://github.com/TryGhost/Ghost/issues/8731, closes https://github.com/TryGhost/Ghost/issues/8742

- Visual bugs resolved
- Slack test message converted from alert to notiftication
- Slack test message notification copy update
- Increased size for notifications

app/controllers/settings/apps/slack.js

@@ -38,7 +38,7 @@ export default Controller.extend({
         try {
             yield this.get('save').perform();
             yield this.get('ajax').post(slackApi);
-            notifications.showAlert('Check your slack channel test message.', {type: 'info', key: 'slack-test.send.success'});
+            notifications.showNotification('Check your Slack channel for the test message!', {type: 'info', key: 'slack-test.send.success'});
             return true;
 
         } catch (error) {

app/styles/app-dark.css

@@ -74,9 +74,15 @@ pre {
     background: var(--lightgrey);
 }
 
+hr {
+    border-color: color(var(--lightgrey) l(+5%));
+}
+
 input,
 .gh-input,
-.gh-select {
+.gh-select,
+.selectize-input,
+.gh-select select {
     color: var(--darkgrey);
     border-color: color(var(--lightgrey));
     background: color(var(--lightgrey));
@@ -86,6 +92,13 @@ input,
 .settings-menu-container {
     background: #212A2E;
 }
+
+@media (max-width: 800px) {
+    .gh-mobile-nav-bar {
+        background: #212A2E;
+    }
+}
+
 .gh-menu-toggle {
     border-color: #212A2E;
 }
@@ -174,6 +187,16 @@ input,
     background: var(--lightgrey);
 }
 
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+    color: #fff;
+}
+
+.selectize-dropdown .option {
+    color: var(--lightgrey);
+}
+
 .selectize-input,
 .selectize-control.single .selectize-input.input-active {
     background: var(--lightgrey);
@@ -265,3 +288,15 @@ input,
 .gh-canvas-title span path {
     fill: #e5eff5;
 }
+
+.gh-loading-spinner {
+    border-color: rgba(255,255,255,0.1);
+}
+
+.gh-loading-spinner:before {
+    background: #fff;
+}
+
+.user-cover-edit {
+    color: #fff;
+}

app/styles/components/notifications.css

@@ -17,14 +17,14 @@
     display: flex;
     margin-top: 5px;
     padding: 4px;
-    width: 220px;
+    width: 240px;
     border: color(var(--blue) l(-10%)) 1px solid;
     background: var(--blue);
     border-radius: 4px;
     box-shadow: rgba(0,0,0,0.06) 0 1px 7px;
     color: #fff;
-    font-size: 1.2rem;
-    line-height: 1.4em;
+    font-size: 1.4rem;
+    line-height: 1.25em;
     opacity: 0.88;
     transition: opacity 0.3s ease;
 }
@@ -39,12 +39,14 @@
     padding: 10px 15px;
     border-radius: 3px;
     transition: background 0.2s ease;
+    color: rgba(255,255,255,0.8);
 }
 
 .gh-notification-title {
     display: block;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     font-weight: 600;
+    font-size: 1.5rem;
 }
 
 .gh-notification a {
@@ -74,6 +76,10 @@
     fill: #fff;
 }
 
+.gh-notification-close svg path {
+    stroke-width: 2px;
+}
+
 .gh-notification-close:hover {
     background: #fff;
 }

app/styles/layouts/main.css

@@ -475,7 +475,7 @@ body > .ember-view:not(.default-liquid-destination) {
     .gh-mobile-nav-bar a,
     .gh-mobile-nav-bar-more {
         height: 55px;
-        padding: 5px 15px;
+        padding: 10px 15px 5px 15px;
         text-align: center;
         cursor: pointer;
         color: var(--darkgrey);
@@ -483,13 +483,19 @@ body > .ember-view:not(.default-liquid-destination) {
         flex-direction: column;
         align-items: center;
         justify-content: space-around;
+        font-size: 1.2rem;
     }
 
-    .gh-mobile-nav-bar svg {
+    .gh-mobile-nav-bar svg,
+    .gh-mobile-nav-bar svg g {
         width: 15px;
         fill: var(--darkgrey);
     }
 
+    .gh-mobile-nav-bar svg g path {
+        stroke: var(--darkgrey);
+    }
+
     /* non-authed pages shouldn't have the mobile bar */
     .ghost-setup .gh-viewport,
     .ghost-reset .gh-viewport,

app/templates/settings/apps/slack.hbs

@@ -42,6 +42,6 @@
             </div>
         </form>
 
-        {{gh-task-button "Send Test Notification" task=sendTestNotification successText="Sent" class="gh-btn gh-btn-grey gh-btn-icon" disabled=testNotificationDisabled data-test-send-notification-button=true}}
+        {{gh-task-button "Send test notification" task=sendTestNotification successText="Sent" class="gh-btn gh-btn-green gh-btn-icon" disabled=testNotificationDisabled data-test-send-notification-button=true}}
     </section>
 </section>