From b286e4adfda190d3fd038b0862bfd41138ec7386 Mon Sep 17 00:00:00 2001
From: Jure Grabnar <jgrabnar@biosistemika.com>
Date: Tue, 24 Sep 2019 09:24:16 +0200
Subject: [PATCH] Fix styles for notification bar

---
 app/assets/javascripts/sitewide/tiny_mce.js | 16 ++++++++++------
 app/assets/stylesheets/tiny_mce.scss        | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js
index 642aab446..2f36432d6 100644
--- a/app/assets/javascripts/sitewide/tiny_mce.js
+++ b/app/assets/javascripts/sitewide/tiny_mce.js
@@ -16,6 +16,12 @@ var TinyMCE = (function() {
     });
   }
 
+  function refreshSaveButton(editor) {
+    var editorForm = $(editor.getContainer()).closest('form');
+    editorForm.find('.tinymce-status-badge').addClass('hidden');
+    $(editor.getContainer())
+      .find('.tinymce-save-button').removeClass('hidden');
+  }
 
 
   // Get LocalStorage auto save path
@@ -36,8 +42,8 @@ var TinyMCE = (function() {
     var lastDraftTime = parseInt(tinyMCE.util.LocalStorage.getItem(prefix + 'time'), 10);
     var lastUpdated = $(selector).data('last-updated');
 
-    var restoreBtn = $('<button type="button" class="btn pull-right">Restore Draft</button>');
-    var cancelBtn = $('<div class="tinymce-cancel-button pull-right">' +
+    var restoreBtn = $('<button class="btn restore-draft-btn pull-right">Restore Draft</button>');
+    var cancelBtn = $('<div class="tinymce-cancel-notification-button pull-right">' +
       '<button type="button">' +
       '<span class="fas fa-times"></span>' +
       '</button></div>');
@@ -60,6 +66,7 @@ var TinyMCE = (function() {
       $(restoreBtn).click(function() {
         editor.plugins.autosave.restoreDraft();
         editor.plugins.autosave.removeDraft();
+        refreshSaveButton(editor);
         notificationBar.remove();
       });
 
@@ -281,10 +288,7 @@ var TinyMCE = (function() {
             });
 
             editor.on('Dirty', function() {
-              var editorForm = $(editor.getContainer()).closest('form');
-              editorForm.find('.tinymce-status-badge').addClass('hidden');
-              $(editor.getContainer())
-                .find('.tinymce-save-button').removeClass('hidden');
+              refreshSaveButton(editor);
             });
 
             editor.on('remove', function() {
diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss
index b27b5dfc3..3a4ddc868 100644
--- a/app/assets/stylesheets/tiny_mce.scss
+++ b/app/assets/stylesheets/tiny_mce.scss
@@ -67,12 +67,31 @@
   background: $color-white !important;
 }
 
+.tinymce-cancel-notification-button {
+  cursor: pointer;
+
+  .fas {
+    color: $color-silver-chalice;
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 501;
+    margin-left: 10px;
+    margin-top: 4px;
+  }
+}
+
 .restore-draft-notification {
   background: $state-info-bg !important;
   height: 25px !important;
   padding-left: 10px !important;
   padding-right: 10px !important;
   padding-top: 5px !important;
+
+  .restore-draft-btn {
+    border: 1px solid $color-silver-chalice;
+    font-size: 12px;
+    margin-top: -2px;
+    padding: 3px 10px 3px 10px;
+  }
 }
 
 // scss-lint:enable ImportantRule