studio - alerts: revisited advanced editor notification UI to marry new styles/behavior - WIP

cms/static/js/base.js

@@ -57,7 +57,7 @@ $(document).ready(function () {
     });
 
     // alert and notifications - manual & action-based close
-    $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) {
+    $('.action-notification-close').click(function(e) {
         (e).preventDefault();
         $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
     });

cms/static/js/views/settings/advanced_view.js

@@ -141,13 +141,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                         event.keyCode === 8 || event.keyCode === 46)) return;
             }
             this.$el.find(".message-status").removeClass("is-shown");
-            $('.wrapper-notification').addClass('is-shown');
+            $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown');
             this.buttonsVisible = true;
         }
     },
 
     hideSaveCancelButtons: function() {
-        $('.wrapper-notification').removeClass('is-shown');
+        $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
         this.buttonsVisible = false;
     },
 

cms/templates/settings_advanced.html

@@ -105,20 +105,25 @@ editor.render();
 
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-warning">
-  <div class="notification warning">
-    <div class="copy">
+  <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
     
-      <p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
-      progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
+    <div class="copy">
+      <h2 class="title title-3">You've Made Some Changes</h2>
+      <p>Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
     </div>
 
-    <div class="actions">
+    <nav class="nav-actions">
+      <h3 class="sr">Notification Actions</h3>
       <ul>
-        <li><a href="#" class="save-button">Save</a></li>
-        <li><a href="#" class="cancel-button">Cancel</a></li>
+        <li class="nav-item">
+          <a href="#" class="action-primary save-button">Save Changes</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="action-secondary cancel-button">Cancel</a>
+        </li>
       </ul>
-    </div>
+    </nav>
   </div>
 </div>
 </%block>
\ No newline at end of file