Save status display updates

app/assets/javascripts/app/controllers/editor.js

@@ -324,7 +324,7 @@ angular.module('app')
     }
 
     this.showSavingStatus = function() {
-      this.noteStatus = $sce.trustAsHtml("Saving...");
+      this.noteStatus = {message: "Saving..."};
     }
 
     this.showAllChangesSavedStatus = function() {
@@ -335,7 +335,7 @@ angular.module('app')
       if(authManager.offline()) {
         status += " (offline)";
       }
-      this.noteStatus = $sce.trustAsHtml(status);
+      this.noteStatus = {message: status};
     }
 
     this.showErrorStatus = function(error) {
@@ -347,7 +347,7 @@ angular.module('app')
       }
       this.saveError = true;
       this.syncTakingTooLong = false;
-      this.noteStatus = $sce.trustAsHtml(`<span class='error bold'>${error.message}</span><br>${error.desc}`)
+      this.noteStatus = error;
     }
 
     this.contentChanged = function() {

app/assets/stylesheets/app/_editor.scss

@@ -63,7 +63,11 @@ $heading-height: 75px;
     font-weight: normal;
     margin-top: 4px;
     text-align: right;
-    color: var(--sn-stylekit-secondary-contrast-background-color);
+
+    .desc, .message:not(.warning):not(.danger) {
+      // color: var(--sn-stylekit-editor-foreground-color);
+      opacity: 0.35;
+    }
   }
 
   .editor-tags {

app/assets/stylesheets/app/_main.scss

@@ -53,7 +53,6 @@ input, button, select, textarea {
 }
 
 a {
-  color: var(--sn-stylekit-info-color);
   text-decoration: none;
 
   &.no-decoration {

app/assets/templates/directives/account-menu.html.haml

@@ -84,8 +84,7 @@
           .sk-notification.danger{"ng-if" => "syncStatus.error"}
             .sk-notification-title Sync Unreachable
             .sk-notification-text Hmm...we can't seem to sync your account. The reason: {{syncStatus.error.message}}
-            %p
-              %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Need help?
+            %a.sk-a.info-contrast.sk-bold.sk-panel-row{"href" => "https://standardnotes.org/help", "target" => "_blank"} Need help?
 
           .sk-panel-row
             .sk-panel-column

app/assets/templates/editor.html.haml

@@ -1,4 +1,4 @@
-.section.editor#editor-column{"aria-label" => "Note"}
+.section.editor#editor-column.sn-component{"aria-label" => "Note"}
   .sn-component
     .sk-app-bar.no-edges{"ng-if" => "ctrl.note.locked", "ng-init" => "ctrl.lockText = 'Note Locked'", "ng-mouseover" => "ctrl.lockText = 'Unlock'", "ng-mouseleave" => "ctrl.lockText = 'Note Locked'"}
       .left
@@ -13,7 +13,9 @@
         "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
         "select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"}
 
-    #save-status{"ng-class" => "{'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
+    #save-status
+      .message{"ng-class" => "{'warning sk-bold': ctrl.syncTakingTooLong, 'danger sk-bold': ctrl.saveError}"} {{ctrl.noteStatus.message}}
+      .desc{"ng-show" => "ctrl.noteStatus.desc"} {{ctrl.noteStatus.desc}}
 
     .editor-tags
       #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}