From 98a001a8cab9941e840dbfb6c158c4b76dc2c305 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 17 May 2019 10:42:43 +0100
Subject: [PATCH] Deprecate editor-button css class

---
 .../editor-client/src/js/ui/clipboard.js      | 16 +++---
 .../src/js/ui/common/editableList.js          |  4 +-
 .../@node-red/editor-client/src/js/ui/diff.js |  4 +-
 .../editor-client/src/js/ui/editor.js         | 18 +++----
 .../editor-client/src/js/ui/editors/buffer.js |  2 +-
 .../src/js/ui/editors/expression.js           |  6 +--
 .../editor-client/src/js/ui/editors/json.js   |  2 +-
 .../src/js/ui/editors/markdown.js             | 24 ++++-----
 .../editor-client/src/js/ui/keyboard.js       |  4 +-
 .../editor-client/src/js/ui/library.js        |  4 +-
 .../editor-client/src/js/ui/palette-editor.js | 18 +++----
 .../src/js/ui/projects/projectSettings.js     | 50 +++++++++----------
 .../src/js/ui/projects/projectUserSettings.js | 16 +++---
 .../src/js/ui/projects/projects.js            | 24 ++++-----
 .../src/js/ui/projects/tab-versionControl.js  | 38 +++++++-------
 .../editor-client/src/js/ui/tab-context.js    | 16 +++---
 .../editor-client/src/js/ui/tab-info.js       | 10 ++--
 .../editor-client/src/js/ui/utils.js          |  8 +--
 .../editor-client/src/js/ui/workspaces.js     |  2 +-
 .../editor-client/src/sass/debug.scss         |  4 +-
 .../editor-client/src/sass/editor.scss        | 14 ++++--
 .../src/sass/palette-editor.scss              |  2 +-
 .../editor-client/src/sass/popover.scss       |  4 +-
 .../editor-client/src/sass/projects.scss      |  4 +-
 .../nodes/core/core/80-function.html          |  2 +-
 .../nodes/core/core/lib/debug/debug-utils.js  |  2 +-
 .../@node-red/nodes/core/io/05-tls.html       | 12 ++---
 27 files changed, 158 insertions(+), 152 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
index d6678404d..0d16a7c42 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
@@ -167,9 +167,9 @@ RED.clipboard = (function() {
             '<div class="form-row">'+
                 '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+
                 '<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-selected" class="editor-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-flow" class="editor-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-selected" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-flow" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
                 '</span>'+
             '</div>'+
             '<div class="red-ui-clipboard-dialog-box">'+
@@ -183,8 +183,8 @@ RED.clipboard = (function() {
                         '</div>'+
                         '<div class="form-row" style="text-align: right;">'+
                             '<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
-                                '<a id="red-ui-clipboard-dialog-export-fmt-mini" class="editor-button editor-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
-                                '<a id="red-ui-clipboard-dialog-export-fmt-full" class="editor-button editor-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
+                                '<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
+                                '<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
                             '</span>'+
                         '</div>'+
                     '</div>'+
@@ -207,7 +207,7 @@ RED.clipboard = (function() {
                 '<div id="red-ui-clipboard-dialog-import-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
                     '<div id="red-ui-clipboard-dialog-import-tab-clipboard" class="red-ui-clipboard-dialog-tab-clipboard">'+
                         '<div class="form-row"><span data-i18n="clipboard.pasteNodes"></span>'+
-                            ' <a class="editor-button" id="red-ui-clipboard-dialog-import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
+                            ' <a class="red-ui-button" id="red-ui-clipboard-dialog-import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
                             '<input type="file" id="red-ui-clipboard-dialog-import-file-upload" accept=".json" style="display:none">'+
                         '</div>'+
                         '<div class="form-row">'+
@@ -222,8 +222,8 @@ RED.clipboard = (function() {
             '<div class="form-row">'+
                 '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.import.import"></label>'+
                 '<span id="red-ui-clipboard-dialog-import-opt" class="button-group">'+
-                    '<a id="red-ui-clipboard-dialog-import-opt-current" class="editor-button toggle selected" href="#" data-i18n="clipboard.export.current"></a>'+
-                    '<a id="red-ui-clipboard-dialog-import-opt-new" class="editor-button toggle" href="#" data-i18n="clipboard.import.newFlow"></a>'+
+                    '<a id="red-ui-clipboard-dialog-import-opt-current" class="red-ui-button toggle selected" href="#" data-i18n="clipboard.export.current"></a>'+
+                    '<a id="red-ui-clipboard-dialog-import-opt-new" class="red-ui-button toggle" href="#" data-i18n="clipboard.import.newFlow"></a>'+
                 '</span>'+
             '</div>';
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
index ddede026b..0464866f7 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
@@ -75,7 +75,7 @@
                         addLabel = 'add';
                     }
                 }
-                $('<a href="#" class="editor-button editor-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
+                $('<a href="#" class="red-ui-button red-ui-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
                     .appendTo(this.topContainer)
                     .on("click", function(evt) {
                         evt.preventDefault();
@@ -257,7 +257,7 @@
                 li.addClass("red-ui-editableList-item-sortable");
             }
             if (this.options.removable) {
-                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li);
+                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(li);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
                 li.addClass("red-ui-editableList-item-removable");
                 deleteButton.on("click", function(evt) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
index a67e5fccd..9ea599e3d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
@@ -978,7 +978,7 @@ RED.diff = (function() {
             }
             if (localNode && remoteNode && typeof localNode[d] === "string") {
                 if (/\n/.test(localNode[d]) || /\n/.test(remoteNode[d])) {
-                    $('<button class="editor-button editor-button-small red-ui-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() {
+                    $('<button class="red-ui-button red-ui-button-small red-ui-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() {
                         showTextDiff(localNode[d],remoteNode[d]);
                     }).appendTo(propertyNameCell);
                 }
@@ -1923,7 +1923,7 @@ RED.diff = (function() {
 
                                 }
                                 diffRow.addClass("mergeHeader-"+(isOurs?"ours":"theirs"));
-                                $('<button class="editor-button editor-button-small" style="float: right; margin-right: 20px;"><i class="fa fa-angle-double-'+(isOurs?"down":"up")+'"></i> use '+(isOurs?"local":"remote")+' changes</button>')
+                                $('<button class="red-ui-button red-ui-button-small" style="float: right; margin-right: 20px;"><i class="fa fa-angle-double-'+(isOurs?"down":"up")+'"></i> use '+(isOurs?"local":"remote")+' changes</button>')
                                     .appendTo(line)
                                     .on("click", function(evt) {
                                         evt.preventDefault();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index d580bd5e5..fe506c0e3 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -271,7 +271,7 @@ RED.editor = (function() {
         // set the style attr directly - using width() on FF causes a value of 114%...
         select.attr('style',"width:100%");
         updateConfigNodeSelect(property,type,node[property],prefix);
-        $('<a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>')
+        $('<a id="'+prefix+'-lookup-'+property+'" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
             .css({position:'absolute',right:0,top:0})
             .appendTo(outerWrap);
         $('#'+prefix+'-lookup-'+property).on("click", function(e) {
@@ -299,7 +299,7 @@ RED.editor = (function() {
         input.val(node[property]);
         input.attr("type","hidden");
 
-        var button = $("<a>",{id:prefix+"-edit-"+property, class:"editor-button"});
+        var button = $("<a>",{id:prefix+"-edit-"+property, class:"red-ui-button"});
         input.after(button);
 
         if (node[property]) {
@@ -580,7 +580,7 @@ RED.editor = (function() {
                     valueField.typedInput('type', opt.parent?(opt.type||opt.parent.type):opt.type);
                     valueField.typedInput('value', opt.parent?((opt.value !== undefined)?opt.value:opt.parent.value):opt.value);
 
-                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(container);
+                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(container);
                     $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
                     container.parent().addClass("red-ui-editableList-item-removable");
                     if (opt.parent) {
@@ -844,7 +844,7 @@ RED.editor = (function() {
             var id = "red-ui-editor-node-label-form-"+type+"-"+index;
             $('<label>',{for:id}).text((index+1)+".").appendTo(result);
             var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
-            var clear = $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
+            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
             clear.on("click", function(evt) {
                 evt.preventDefault();
                 input.val("");
@@ -901,7 +901,7 @@ RED.editor = (function() {
         var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
         var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
         var summary = $('<span>').appendTo(metaRow);
-        var resetButton = $('<button type="button" class="editor-button editor-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
+        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
             e.preventDefault();
             hide();
             done(null);
@@ -950,7 +950,7 @@ RED.editor = (function() {
 
         $('<div class="form-row">'+
             '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
-            '<button type="button" id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
+            '<button type="button" id="node-input-show-label-btn" class="red-ui-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
             '<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+
         '</div>').appendTo(dialogForm);
 
@@ -984,7 +984,7 @@ RED.editor = (function() {
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
             $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
 
-            var iconButton = $('<button type="button" class="editor-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
+            var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
 
             var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
             var colour = RED.utils.getNodeColor(node.type, node._def);
@@ -2402,7 +2402,7 @@ RED.editor = (function() {
             $(el).addClass("red-ui-editor-text-container-toolbar");
             editor.toolbar = customEditTypes['_markdown'].buildToolbar(toolbarRow,editor);
             if (options.expandable !== false) {
-                var expandButton = $('<button type="button" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
+                var expandButton = $('<button type="button" class="red-ui-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
 
                 expandButton.on("click", function(e) {
                     e.preventDefault();
@@ -2421,7 +2421,7 @@ RED.editor = (function() {
                     })
                 });
             }
-            var helpButton = $('<button type="button" class="red-ui-editor-text-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
+            var helpButton = $('<button type="button" class="red-ui-editor-text-help red-ui-button red-ui-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
             RED.popover.create({
                 target: helpButton,
                 trigger: 'click',
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
index 1c19ce87b..ec5b78c99 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
@@ -15,7 +15,7 @@
  **/
 (function() {
 
-    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
 
     function stringToUTF8Array(str) {
         var data = [];
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
index 609c4b480..8213d93d7 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
@@ -19,7 +19,7 @@
     var template = '<script type="text/x-red" data-template-name="_expression">'+
     '<div id="red-ui-editor-type-expression-panels">'+
         '<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+
-            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
+            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
             '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+
         '</div>'+
         '<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+
@@ -28,13 +28,13 @@
                 '<div id="red-ui-editor-type-expression-tab-help" class="red-ui-editor-type-expression-tab-content hide">'+
                     '<div>'+
                         '<select id="red-ui-editor-type-expression-func"></select>'+
-                        '<button id="red-ui-editor-type-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button>'+
+                        '<button id="red-ui-editor-type-expression-func-insert" class="red-ui-button" data-i18n="expressionEditor.insert"></button>'+
                     '</div>'+
                     '<div id="red-ui-editor-type-expression-help"></div>'+
                 '</div>'+
                 '<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+
                     '<div>'+
-                        '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
+                        '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
                         '<span style="display: inline-block; margin-left: 10px; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
                     '</div>'+
                     '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js
index 0d45d3492..7655e991c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js
@@ -16,7 +16,7 @@
 (function() {
 
 
-    var template = '<script type="text/x-red" data-template-name="_json"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button id="node-input-json-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></div><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_json"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button id="node-input-json-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="jsonEditor.format"></span></button></div><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div></div></script>';
 
     var definition = {
         show: function(options) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
index bf6415193..9a09ff3f5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
@@ -17,21 +17,21 @@
 
     var toolbarTemplate = '<div style="margin-bottom: 5px">'+
         '<span class="button-group">'+
-        '<button type="button" class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
-        '<button type="button" class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
-        '<button type="button" class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
+        '<button type="button" class="red-ui-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
+        '<button type="button" class="red-ui-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
+        '<button type="button" class="red-ui-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
         '</span>'+
         '<span class="button-group">'+
-            '<button type="button" class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
-            '<button type="button" class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
-            '<button type="button" class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="b"><i class="fa fa-bold"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="i"><i class="fa fa-italic"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="code"><i class="fa fa-code"></i></button>'+
         '</span>'+
         '<span class="button-group">'+
-            '<button type="button" class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
-            '<button type="button" class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
-            '<button type="button" class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
-            '<button type="button" class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
-            '<button type="button" class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="link"><i class="fa fa-link"></i></button>'+
         '</span>'
     '</div>';
 
@@ -128,7 +128,7 @@
                     panels.ratio(1);
 
                     $('<span class="button-group" style="float:right">'+
-                        '<button type="button" id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
+                        '<button type="button" id="node-btn-markdown-preview" class="red-ui-button toggle single"><i class="fa fa-eye"></i></button>'+
                     '</span>').appendTo(expressionEditor.toolbar);
 
                     $("#node-btn-markdown-preview").on("click", function(e) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
index d6579730c..b264f3bd8 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
@@ -403,8 +403,8 @@ RED.h = handlers;
             scopeSelect.val(object.scope||'*');
 
             var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope);
-            var okButton = $('<button class="editor-button editor-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
-            var revertButton = $('<button class="editor-button editor-button-small"><i class="fa fa-reply"></i></button>').appendTo(div);
+            var okButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
+            var revertButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-reply"></i></button>').appendTo(div);
 
             okButton.on("click", function(e) {
                 e.stopPropagation();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 6c3715afb..1d51ddd7e 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -202,7 +202,7 @@ RED.library = (function() {
         // Add the library button to the name <input> in the edit dialog
         $('#'+elementPrefix+"name").css("width","calc(100% - 52px)").after(
             '<div style="margin-left:5px; display: inline-block;position: relative;">'+
-            '<a id="node-input-'+options.type+'-lookup" class="editor-button"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
+            '<a id="node-input-'+options.type+'-lookup" class="red-ui-button"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '</div>'
 
             // '<ul class="red-ui-menu-dropdown pull-right" role="menu">'+
@@ -301,7 +301,7 @@ RED.library = (function() {
                 }
             });
         var itemTools = $("<div>").css({position: "absolute",bottom:"6px",right:"8px"});
-        var menuButton = $('<button class="editor-button editor-button-small" type="button"><i class="fa fa-ellipsis-h"></i></button>')
+        var menuButton = $('<button class="red-ui-button red-ui-button-small" type="button"><i class="fa fa-ellipsis-h"></i></button>')
             .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 5cde9031f..074a54469 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -611,11 +611,11 @@ RED.palette.editor = (function() {
                     var errorRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-errors"><i class="fa fa-warning"></i></div>').hide().appendTo(headerRow);
                     var errorList = $('<ul class="red-ui-palette-module-error-list"></ul>').appendTo(errorRow);
                     var buttonRow = $('<div>',{class:"red-ui-palette-module-meta"}).appendTo(headerRow);
-                    var setButton = $('<a href="#" class="editor-button editor-button-small red-ui-palette-module-set-button"><i class="fa fa-angle-right red-ui-palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
+                    var setButton = $('<a href="#" class="red-ui-button red-ui-button-small red-ui-palette-module-set-button"><i class="fa fa-angle-right red-ui-palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
                     var setCount = $('<span>').appendTo(setButton);
                     var buttonGroup = $('<div>',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow);
 
-                    var updateButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.update')).appendTo(buttonGroup);
+                    var updateButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.update')).appendTo(buttonGroup);
                     updateButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
                     updateButton.on("click", function(evt) {
                         evt.preventDefault();
@@ -626,7 +626,7 @@ RED.palette.editor = (function() {
                     })
 
 
-                    var removeButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.remove')).appendTo(buttonGroup);
+                    var removeButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.remove')).appendTo(buttonGroup);
                     removeButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
                     removeButton.on("click", function(evt) {
                         evt.preventDefault();
@@ -635,7 +635,7 @@ RED.palette.editor = (function() {
                     if (!entry.local) {
                         removeButton.hide();
                     }
-                    var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.disableall')).appendTo(buttonGroup);
+                    var enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.disableall')).appendTo(buttonGroup);
 
                     var contentRow = $('<div>',{class:"red-ui-palette-module-content"}).appendTo(container);
                     var shade = $('<div class="red-ui-palette-module-shade hide"><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(container);
@@ -677,7 +677,7 @@ RED.palette.editor = (function() {
                             typeSwatches[t] = $('<span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
                             $('<span>',{class:"red-ui-palette-module-type-node"}).text(t).appendTo(typeDiv);
                         })
-                        var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').appendTo(buttonGroup);
+                        var enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').appendTo(buttonGroup);
                         enableButton.on("click", function(evt) {
                             evt.preventDefault();
                             if (object.setUseCount[setName] === 0) {
@@ -839,7 +839,7 @@ RED.palette.editor = (function() {
 
                     var buttonRow = $('<div>',{class:"red-ui-palette-module-meta"}).appendTo(headerRow);
                     var buttonGroup = $('<div>',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow);
-                    var installButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.install')).appendTo(buttonGroup);
+                    var installButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.install')).appendTo(buttonGroup);
                     installButton.on("click", function(e) {
                         e.preventDefault();
                         if (!$(this).hasClass('disabled')) {
@@ -893,7 +893,7 @@ RED.palette.editor = (function() {
                     click: function() {
                         var spinner = RED.utils.addSpinnerOverlay(container, true);
                         var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                        $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+                        $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                             evt.preventDefault();
                             RED.actions.invoke("core:show-event-log");
                         });
@@ -952,7 +952,7 @@ RED.palette.editor = (function() {
                     click: function() {
                         var spinner = RED.utils.addSpinnerOverlay(container, true);
                         var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                        $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+                        $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                             evt.preventDefault();
                             RED.actions.invoke("core:show-event-log");
                         });
@@ -1018,7 +1018,7 @@ RED.palette.editor = (function() {
                 var spinner = RED.utils.addSpinnerOverlay(container, true);
 
                 var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+                $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                     evt.preventDefault();
                     RED.actions.invoke("core:show-event-log");
                 });
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
index 41cb2dc8b..9c3784410 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
@@ -172,14 +172,14 @@ RED.projects.settings = (function() {
         container.empty();
         var bg = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
         var input = $('<input type="text" style="width: calc(100% - 150px); margin-right: 10px;">').val(summary||"").appendTo(container);
-        $('<button class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
                 updateProjectSummary(activeProject.summary, container);
                 editButton.show();
             });
-        $('<button class="editor-button">' + RED._("common.label.save") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.save") + '</button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -234,7 +234,7 @@ RED.projects.settings = (function() {
         var summaryContent = $('<div></div>').appendTo(summary);
         updateProjectSummary(activeProject.summary, summaryContent);
         if (RED.user.hasPermission("projects.write")) {
-            $('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')
+            $('<button class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')
                 .prependTo(summary)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -249,7 +249,7 @@ RED.projects.settings = (function() {
         updateProjectDescription(activeProject, descriptionContent);
 
         if (RED.user.hasPermission("projects.write")) {
-            $('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editReadme') + '</button>')
+            $('<button class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.editReadme') + '</button>')
                 .prependTo(description)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -380,7 +380,7 @@ RED.projects.settings = (function() {
     function createDependenciesPane(activeProject) {
         var pane = $('<div id="red-ui-project-settings-tab-deps" class="red-ui-project-settings-tab-pane red-ui-help"></div>');
         if (RED.user.hasPermission("projects.write")) {
-            $('<button class="editor-button editor-button-small" style="margin-top:10px;float: right;">' + RED._("sidebar.project.projectSettings.edit") + '</button>')
+            $('<button class="red-ui-button red-ui-button-small" style="margin-top:10px;float: right;">' + RED._("sidebar.project.projectSettings.edit") + '</button>')
                 .appendTo(pane)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -402,7 +402,7 @@ RED.projects.settings = (function() {
                     headerRow.text(entry.label);
                     // if (RED.user.hasPermission("projects.write")) {
                     //     if (entry.index === 1) {
-                    //         var addButton = $('<button class="editor-button editor-button-small red-ui-palette-module-button">add to project</button>').appendTo(headerRow).on("click", function(evt) {
+                    //         var addButton = $('<button class="red-ui-button red-ui-button-small red-ui-palette-module-button">add to project</button>').appendTo(headerRow).on("click", function(evt) {
                     //             evt.preventDefault();
                     //             var deps = $.extend(true, {}, activeProject.dependencies);
                     //             for (var m in modulesInUse) {
@@ -413,7 +413,7 @@ RED.projects.settings = (function() {
                     //             editDependencies(activeProject,JSON.stringify(deps,"",4),pane,depsList);
                     //         });
                     //     } else if (entry.index === 3) {
-                    //         var removeButton = $('<button class="editor-button editor-button-small red-ui-palette-module-button">remove from project</button>').appendTo(headerRow).on("click", function(evt) {
+                    //         var removeButton = $('<button class="red-ui-button red-ui-button-small red-ui-palette-module-button">remove from project</button>').appendTo(headerRow).on("click", function(evt) {
                     //             evt.preventDefault();
                     //             var deps = $.extend(true, {}, activeProject.dependencies);
                     //             for (var m in activeProject.dependencies) {
@@ -450,7 +450,7 @@ RED.projects.settings = (function() {
                     var buttons = $('<div class="red-ui-palette-module-button-group"></div>').appendTo(metaRow);
                     if (RED.user.hasPermission("projects.write")) {
                         if (!entry.installed && RED.settings.theme('palette.editable') !== false) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.install") + '</a>').appendTo(buttons)
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.install") + '</a>').appendTo(buttons)
                                 .on("click", function(evt) {
                                     evt.preventDefault();
                                     RED.palette.editor.install(entry,row,function(err) {
@@ -471,7 +471,7 @@ RED.projects.settings = (function() {
                                     });
                                 })
                         } else if (entry.known && entry.count === 0) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.removeFromProject") + '</a>').appendTo(buttons)
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.removeFromProject") + '</a>').appendTo(buttons)
                                 .on("click", function(evt) {
                                     evt.preventDefault();
                                     var deps = $.extend(true, {}, activeProject.dependencies);
@@ -487,7 +487,7 @@ RED.projects.settings = (function() {
                                     });
                                 });
                         } else if (!entry.known) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.addToProject") + '</a>').appendTo(buttons)
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.addToProject") + '</a>').appendTo(buttons)
                                 .on("click", function(evt) {
                                     evt.preventDefault();
                                     var deps = $.extend(true, {}, activeProject.dependencies);
@@ -653,7 +653,7 @@ RED.projects.settings = (function() {
     //
     //     var flowFileInput = $('<input id="" type="text" style="width: calc(100% - 300px);">').val(flowFile).insertAfter(flowFileLabel);
     //
-    //     var flowFileInputSearch = $('<button class="editor-button" style="margin-left: 10px"><i class="fa fa-folder-open-o"></i></button>')
+    //     var flowFileInputSearch = $('<button class="red-ui-button" style="margin-left: 10px"><i class="fa fa-folder-open-o"></i></button>')
     //         .insertAfter(flowFileInput)
     //         .on("click", function(e) {
     //             showProjectFileListing(activeProject,'Select flow file',flowFileInput.val(),function(result) {
@@ -670,7 +670,7 @@ RED.projects.settings = (function() {
     //     flowFileLabel.hide();
     //
     //     var bg = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').prependTo(container);
-    //     $('<button class="editor-button">Cancel</button>')
+    //     $('<button class="red-ui-button">Cancel</button>')
     //         .appendTo(bg)
     //         .on("click", function(evt) {
     //             evt.preventDefault();
@@ -681,7 +681,7 @@ RED.projects.settings = (function() {
     //             bg.remove();
     //             editButton.show();
     //         });
-    //     var saveButton = $('<button class="editor-button">Save</button>')
+    //     var saveButton = $('<button class="red-ui-button">Save</button>')
     //         .appendTo(bg)
     //         .on("click", function(evt) {
     //             evt.preventDefault();
@@ -730,7 +730,7 @@ RED.projects.settings = (function() {
         var title = $('<h3></h3>').text(RED._("sidebar.project.projectSettings.files")).appendTo(pane);
         var filesContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         if (RED.user.hasPermission("projects.write")) {
-            var editFilesButton = $('<button type="button" id="red-ui-project-settings-tab-settings-file-edit" class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.projectSettings.edit') + '</button>')
+            var editFilesButton = $('<button type="button" id="red-ui-project-settings-tab-settings-file-edit" class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.projectSettings.edit') + '</button>')
                 .appendTo(title)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -768,7 +768,7 @@ RED.projects.settings = (function() {
         var packageFileLabelText = $('<span style="display:inline-block;  padding: 6px">').text(activeProject.files.package||"package.json").appendTo(packageFileLabel);
         var packageFileInput = $('<input type="hidden">').val(activeProject.files.package||"package.json").appendTo(packageFileLabel);
 
-        var packageFileInputSearch = $('<button type="button" class="editor-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
+        var packageFileInputSearch = $('<button type="button" class="red-ui-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
             .hide()
             .appendTo(packageFileLabel)
             .on("click", function(e) {
@@ -837,7 +837,7 @@ RED.projects.settings = (function() {
             });
         }
         var flowFileInput = $('<input type="text" style="padding-left:1px; margin-top: -2px; margin-bottom: 0;border: none;">').val(flowFileName).hide().appendTo(flowFileLabel);
-        var flowFileInputSearch = $('<button type="button" class="editor-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
+        var flowFileInputSearch = $('<button type="button" class="red-ui-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
             .hide()
             .appendTo(flowFileLabel)
             .on("click", function(e) {
@@ -949,7 +949,7 @@ RED.projects.settings = (function() {
 
         credentialStateLabel.css('color','#666');
         credentialSecretButtons.css('vertical-align','top');
-        var credentialSecretResetButton = $('<button type="button" class="editor-button" style="vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-trash-o"></i></button>')
+        var credentialSecretResetButton = $('<button type="button" class="red-ui-button" style="vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-trash-o"></i></button>')
             .appendTo(credentialSecretButtons)
             .on("click", function(e) {
                 e.preventDefault();
@@ -973,7 +973,7 @@ RED.projects.settings = (function() {
             });
         RED.popover.tooltip(credentialSecretResetButton,RED._("sidebar.project.projectSettings.resetTheEncryptionKey"));
 
-        var credentialSecretEditButton = $('<button type="button" class="editor-button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-pencil"></i></button>')
+        var credentialSecretEditButton = $('<button type="button" class="red-ui-button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-pencil"></i></button>')
             .appendTo(credentialSecretButtons)
             .on("click", function(e) {
                 e.preventDefault();
@@ -1064,7 +1064,7 @@ RED.projects.settings = (function() {
         }
 
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').hide().appendTo(filesContainer);
-        $('<button type="button" class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button type="button" class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -1083,7 +1083,7 @@ RED.projects.settings = (function() {
                 credFileLabelText.text(credFileName);
                 hideEditForm();
             });
-        var saveButton = $('<button type="button" class="editor-button">' + RED._("common.label.save") + '</button>')
+        var saveButton = $('<button type="button" class="red-ui-button">' + RED._("common.label.save") + '</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -1219,7 +1219,7 @@ RED.projects.settings = (function() {
 
                 if (!entry.current) {
                     var tools = $('<span class="entry-tools">').appendTo(container);
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.preventDefault();
@@ -1319,7 +1319,7 @@ RED.projects.settings = (function() {
         var repoContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         var title = $('<h4></h4>').text(RED._("sidebar.project.projectSettings.gitRemotes")).appendTo(repoContainer);
 
-        var editRepoButton = $('<button class="editor-button editor-button-small" style="float: right; margin-right: 10px;">' + RED._("sidebar.project.projectSettings.addRemote") + '</button>')
+        var editRepoButton = $('<button class="red-ui-button red-ui-button-small" style="float: right; margin-right: 10px;">' + RED._("sidebar.project.projectSettings.addRemote") + '</button>')
             .appendTo(title)
             .on("click", function(evt) {
                 editRepoButton.attr('disabled',true);
@@ -1364,7 +1364,7 @@ RED.projects.settings = (function() {
 
                     }
                     var tools = $('<span class="entry-tools">').appendTo(container);
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.preventDefault();
@@ -1490,13 +1490,13 @@ RED.projects.settings = (function() {
         }
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>')
             .appendTo(addRemoteDialog);
-        $('<button class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
                 hideEditForm();
             });
-        var saveButton = $('<button class="editor-button">' + RED._("sidebar.project.projectSettings.addRemote2") + '</button>')
+        var saveButton = $('<button class="red-ui-button">' + RED._("sidebar.project.projectSettings.addRemote2") + '</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
index fb7875551..4219b189f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
@@ -47,7 +47,7 @@ RED.projects.userSettings = (function() {
         var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.sshKeys")).appendTo(container);
         var subtitle = $('<div class="red-ui-settings-section-description"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
 
-        var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="editor-button editor-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
+        var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="red-ui-button red-ui-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
             .appendTo(subtitle)
             .on("click", function(evt) {
                 addKeyButton.attr('disabled',true);
@@ -97,9 +97,9 @@ RED.projects.userSettings = (function() {
         row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
         $('<div class="red-ui-settings-section-description"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
         // var bg = $('<div></div>',{class:"button-group", style:"text-align: center"}).appendTo(row);
-        // var addLocalButton = $('<button class="editor-button toggle selected">use local key</button>').appendTo(bg);
-        // var uploadButton = $('<button class="editor-button toggle">upload key</button>').appendTo(bg);
-        // var generateButton = $('<button class="editor-button toggle">generate key</button>').appendTo(bg);
+        // var addLocalButton = $('<button class="red-ui-button toggle selected">use local key</button>').appendTo(bg);
+        // var uploadButton = $('<button class="red-ui-button toggle">upload key</button>').appendTo(bg);
+        // var generateButton = $('<button class="red-ui-button toggle">generate key</button>').appendTo(bg);
         // bg.children().on("click", function(e) {
         //     e.preventDefault();
         //     if ($(this).hasClass("selected")) {
@@ -179,13 +179,13 @@ RED.projects.userSettings = (function() {
             }
         }
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>').appendTo(addKeyDialog);
-        $('<button class="editor-button">'+RED._("editor:sidebar.project.userSettings.cancel")+'</button>')
+        $('<button class="red-ui-button">'+RED._("editor:sidebar.project.userSettings.cancel")+'</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
                 hideEditForm();
             });
-        var saveButton = $('<button class="editor-button">'+RED._("editor:sidebar.project.userSettings.generate")+'</button>')
+        var saveButton = $('<button class="red-ui-button">'+RED._("editor:sidebar.project.userSettings.generate")+'</button>')
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -264,7 +264,7 @@ RED.projects.userSettings = (function() {
             utils.sendRequest(options);
 
             var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>').appendTo(row);
-            $('<button class="editor-button editor-button-small">'+RED._("editor:sidebar.project.userSettings.copyPublicKey")+'</button>')
+            $('<button class="red-ui-button red-ui-button-small">'+RED._("editor:sidebar.project.userSettings.copyPublicKey")+'</button>')
                 .appendTo(formButtons)
                 .on("click", function(evt) {
                     try {
@@ -308,7 +308,7 @@ RED.projects.userSettings = (function() {
                     }
                     })
                 if (!entry.system) {
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.stopPropagation();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
index 01d147f60..dc48e558c 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
@@ -81,8 +81,8 @@ RED.projects = (function() {
                     $('<p>').text(RED._("projects.welcome.desc2")).appendTo(body);
 
                     var row = $('<div style="text-align: center"></div>').appendTo(body);
-                    var createAsEmpty = $('<button data-type="empty" class="editor-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.welcome.create")+'</button>').appendTo(row);
-                    var createAsClone = $('<button data-type="clone" class="editor-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.welcome.clone")+'</button>').appendTo(row);
+                    var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.welcome.create")+'</button>').appendTo(row);
+                    var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.welcome.clone")+'</button>').appendTo(row);
 
                     createAsEmpty.on("click", function(e) {
                         e.preventDefault();
@@ -544,7 +544,7 @@ RED.projects = (function() {
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.clone-project.ssh-key-desc")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="editor-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button class="red-ui-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             dialog.dialog( "close" );
                             RED.userSettings.show('gitconfig');
@@ -1167,11 +1167,11 @@ RED.projects = (function() {
 
                         row = $('<div class="form-row button-group"></div>').appendTo(container);
 
-                        var openProject = $('<button data-type="open" class="editor-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
-                        var createAsEmpty = $('<button data-type="empty" class="editor-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
-                        // var createAsCopy = $('<button data-type="copy" class="editor-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
-                        var createAsClone = $('<button data-type="clone" class="editor-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
-                        // var createAsClone = $('<button data-type="clone" class="editor-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
+                        var openProject = $('<button data-type="open" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
+                        var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
+                        // var createAsCopy = $('<button data-type="copy" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
+                        var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
+                        // var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
                         row.find(".red-ui-projects-dialog-screen-create-type").on("click", function(evt) {
                             evt.preventDefault();
                             container.find(".red-ui-projects-dialog-screen-create-type").removeClass('selected');
@@ -1387,7 +1387,7 @@ RED.projects = (function() {
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.create.desc2")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="editor-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button class="red-ui-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             $('#red-ui-projects-dialog-cancel').trigger("click");
                             RED.userSettings.show('gitconfig');
@@ -1624,14 +1624,14 @@ RED.projects = (function() {
             width:"1000px"
         }).on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
         $('<span>').css({"lineHeight":"40px"}).text(RED._("projects.delete.confirm")).appendTo(cover);
-        $('<button style="margin-left:20px" class="editor-button">'+RED._("common.label.cancel")+'</button>')
+        $('<button style="margin-left:20px" class="red-ui-button">'+RED._("common.label.cancel")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
                 cover.remove();
                 done(true);
             });
-        $('<button style="margin-left:20px" class="editor-button primary">'+RED._("common.label.delete")+'</button>')
+        $('<button style="margin-left:20px" class="red-ui-button primary">'+RED._("common.label.delete")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
@@ -1804,7 +1804,7 @@ RED.projects = (function() {
                 header.addClass("selectable");
 
                 var tools = $('<div class="red-ui-projects-dialog-project-list-entry-tools"></div>').appendTo(header);
-                $('<button class="editor-button editor-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
+                $('<button class="red-ui-button red-ui-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
                     .appendTo(tools)
                     .on("click", function(e) {
                         e.stopPropagation();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
index 3f1cd7088..7069be6b7 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
@@ -128,7 +128,7 @@ RED.sidebar.versionControl = (function() {
                 })
                 var toolbar = $('<div style="float: right; margin: 5px; height: 50px;"></div>').appendTo(container);
 
-                $('<button class="editor-button editor-button-small"></button>').text(entry.button.label)
+                $('<button class="red-ui-button red-ui-button-small"></button>').text(entry.button.label)
                     .appendTo(toolbar)
                     .on("click", entry.button.click);
             }
@@ -150,7 +150,7 @@ RED.sidebar.versionControl = (function() {
         var revertButton;
         if (state === 'unstaged') {
             bg = $('<span class="button-group" style="margin-right: 5px;"></span>').appendTo(entryTools);
-            revertButton = $('<button class="editor-button editor-button-small"><i class="fa fa-reply"></i></button>')
+            revertButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-reply"></i></button>')
                 .appendTo(bg)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -205,7 +205,7 @@ RED.sidebar.versionControl = (function() {
         }
         bg = $('<span class="button-group"></span>').appendTo(entryTools);
         if (state !== 'unmerged') {
-            var stageButton = $('<button class="editor-button editor-button-small"><i class="fa fa-'+((state==='unstaged')?"plus":"minus")+'"></i></button>')
+            var stageButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-'+((state==='unstaged')?"plus":"minus")+'"></i></button>')
                 .appendTo(bg)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -322,7 +322,7 @@ RED.sidebar.versionControl = (function() {
         localChanges.content.css({height:"100%"});
 
         var bg = $('<div style="float: right"></div>').appendTo(localChanges.header);
-        var refreshButton = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        var refreshButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -336,7 +336,7 @@ RED.sidebar.versionControl = (function() {
 
         var unstagedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
         var header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.localFiles")+'</div>').appendTo(unstagedContent);
-        stageAllButton = $('<button class="editor-button editor-button-small" style="float: right"><i class="fa fa-plus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
+        stageAllButton = $('<button class="red-ui-button red-ui-button-small" style="float: right"><i class="fa fa-plus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
             .appendTo(header)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -369,7 +369,7 @@ RED.sidebar.versionControl = (function() {
 
         header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.unmergedChanges")+'</div>').appendTo(unmergedContent);
         bg = $('<div style="float: right"></div>').appendTo(header);
-        var abortMergeButton = $('<button class="editor-button editor-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.abortMerge")+'</button>')
+        var abortMergeButton = $('<button class="red-ui-button red-ui-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.abortMerge")+'</button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -454,7 +454,7 @@ RED.sidebar.versionControl = (function() {
             abortMergeButton.prop("disabled",true);
             commitMessage.trigger("focus");
         }
-        commitButton = $('<button class="editor-button editor-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.commit")+'</button>')
+        commitButton = $('<button class="red-ui-button red-ui-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.commit")+'</button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -462,7 +462,7 @@ RED.sidebar.versionControl = (function() {
                 showCommitBox();
             });
         RED.popover.tooltip(commitButton,RED._("sidebar.project.versionControl.commitChanges"));
-        unstageAllButton = $('<button class="editor-button editor-button-small"><i class="fa fa-minus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
+        unstageAllButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-minus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -497,7 +497,7 @@ RED.sidebar.versionControl = (function() {
             });
         var commitToolbar = $('<div class="red-ui-sidebar-vc-slide-box-toolbar button-group">').appendTo(commitBox);
 
-        var cancelCommitButton = $('<button class="editor-button">'+RED._("sidebar.project.versionControl.cancelCapital")+'</button>')
+        var cancelCommitButton = $('<button class="red-ui-button">'+RED._("sidebar.project.versionControl.cancelCapital")+'</button>')
             .appendTo(commitToolbar)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -515,7 +515,7 @@ RED.sidebar.versionControl = (function() {
                 abortMergeButton.prop("disabled",false);
 
             })
-        var submitCommitButton = $('<button class="editor-button">'+RED._("sidebar.project.versionControl.commitCapital")+'</button>')
+        var submitCommitButton = $('<button class="red-ui-button">'+RED._("sidebar.project.versionControl.commitCapital")+'</button>')
             .appendTo(commitToolbar)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -556,7 +556,7 @@ RED.sidebar.versionControl = (function() {
         });
 
         bg = $('<div style="float: right"></div>').appendTo(localHistory.header);
-        refreshButton = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        refreshButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -567,7 +567,7 @@ RED.sidebar.versionControl = (function() {
 
         var localBranchToolbar = $('<div class="red-ui-sidebar-vc-change-header" style="text-align: right;"></div>').appendTo(localHistory.content);
 
-        var localBranchButton = $('<button class="editor-button editor-button-small"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.branch")+' <span id="red-ui-sidebar-vc-local-branch"></span></button>')
+        var localBranchButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.branch")+' <span id="red-ui-sidebar-vc-local-branch"></span></button>')
             .appendTo(localBranchToolbar)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -587,7 +587,7 @@ RED.sidebar.versionControl = (function() {
                 }
             })
         RED.popover.tooltip(localBranchButton,RED._("sidebar.project.versionControl.changeLocalBranch"))
-        var repoStatusButton = $('<button class="editor-button editor-button-small" style="margin-left: 10px;" id="red-ui-sidebar-vc-repo-status-button">'+
+        var repoStatusButton = $('<button class="red-ui-button red-ui-button-small" style="margin-left: 10px;" id="red-ui-sidebar-vc-repo-status-button">'+
                                  '<span id="red-ui-sidebar-vc-repo-status-stats">'+
                                     '<i class="fa fa-long-arrow-up"></i> <span id="red-ui-sidebar-vc-commits-ahead"></span> '+
                                     '<i class="fa fa-long-arrow-down"></i> <span id="red-ui-sidebar-vc-commits-behind"></span>'+
@@ -761,7 +761,7 @@ RED.sidebar.versionControl = (function() {
         $('<div class="red-ui-sidebar-vc-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox);
 
         var remoteBranchRow = $('<div style="margin-bottom: 5px;"></div>').appendTo(remoteBox);
-        var remoteBranchButton = $('<button id="red-ui-sidebar-vc-repo-branch" class="red-ui-sidebar-vc-repo-action editor-button"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.remote")+': <span id="red-ui-sidebar-vc-remote-branch"></span></button>')
+        var remoteBranchButton = $('<button id="red-ui-sidebar-vc-repo-branch" class="red-ui-sidebar-vc-repo-action red-ui-button"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.remote")+': <span id="red-ui-sidebar-vc-remote-branch"></span></button>')
             .appendTo(remoteBranchRow)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -786,7 +786,7 @@ RED.sidebar.versionControl = (function() {
         var errorMessage = $('<div id="red-ui-sidebar-vc-repo-toolbar-error-message" class="red-ui-sidebar-vc-slide-box-header" style="min-height: 100px;"></div>').hide().appendTo(remoteBox);
         $('<div style="margin-top: 10px;"><i class="fa fa-warning"></i> '+RED._("sidebar.project.versionControl.unableToAccess")+'</div>').appendTo(errorMessage)
         var buttonRow = $('<div style="margin: 10px 30px; text-align: center"></div>').appendTo(errorMessage);
-        $('<button class="editor-button" style="width: 80%;"><i class="fa fa-refresh"></i> '+RED._("sidebar.project.versionControl.retry")+'</button>')
+        $('<button class="red-ui-button" style="width: 80%;"><i class="fa fa-refresh"></i> '+RED._("sidebar.project.versionControl.retry")+'</button>')
             .appendTo(buttonRow)
             .on("click", function(e) {
                 e.preventDefault();
@@ -875,13 +875,13 @@ RED.sidebar.versionControl = (function() {
 
         var row = $('<div style="margin-bottom: 5px;"></div>').appendTo(remoteBox);
 
-        $('<button id="red-ui-sidebar-vc-repo-push" class="red-ui-sidebar-vc-repo-sub-action editor-button"><i class="fa fa-long-arrow-up"></i> <span data-i18n="sidebar.project.versionControl.push"></span></button>')
+        $('<button id="red-ui-sidebar-vc-repo-push" class="red-ui-sidebar-vc-repo-sub-action red-ui-button"><i class="fa fa-long-arrow-up"></i> <span data-i18n="sidebar.project.versionControl.push"></span></button>')
             .appendTo(row)
             .on("click", function(e) {
                 e.preventDefault();
                 var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
                 var buttonRow = $('<div style="position: relative; bottom: 60px;"></div>').appendTo(spinner);
-                $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+                $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                     evt.preventDefault();
                     RED.actions.invoke("core:show-event-log");
                 });
@@ -931,7 +931,7 @@ RED.sidebar.versionControl = (function() {
             options = options || {};
             var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
             var buttonRow = $('<div style="position: relative; bottom: 60px;"></div>').appendTo(spinner);
-            $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+            $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                 evt.preventDefault();
                 RED.actions.invoke("core:show-event-log");
             });
@@ -1012,7 +1012,7 @@ RED.sidebar.versionControl = (function() {
                 spinner.remove();
             });
         }
-        $('<button id="red-ui-sidebar-vc-repo-pull" class="red-ui-sidebar-vc-repo-sub-action editor-button"><i class="fa fa-long-arrow-down"></i> <span data-i18n="sidebar.project.versionControl.pull"></span></button>')
+        $('<button id="red-ui-sidebar-vc-repo-pull" class="red-ui-sidebar-vc-repo-sub-action red-ui-button"><i class="fa fa-long-arrow-down"></i> <span data-i18n="sidebar.project.versionControl.pull"></span></button>')
             .appendTo(row)
             .on("click", function(e) {
                 e.preventDefault();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
index c78ee5d74..57fecdbf3 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
@@ -56,7 +56,7 @@ RED.sidebar.context = (function() {
         var table = $('<table class="red-ui-info-table"></table>').appendTo(nodeSection.content);
         nodeSection.table = $('<tbody>').appendTo(table);
         var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header);
-        $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.stopPropagation();
@@ -71,7 +71,7 @@ RED.sidebar.context = (function() {
         // subflowSection.expand();
         // subflowSection.content.css({height:"100%"});
         // bg = $('<div style="float: right"></div>').appendTo(subflowSection.header);
-        // $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        // $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
         //     .appendTo(bg)
         //     .on("click", function(evt) {
         //         evt.stopPropagation();
@@ -90,7 +90,7 @@ RED.sidebar.context = (function() {
         var table = $('<table class="red-ui-info-table"></table>').appendTo(flowSection.content);
         flowSection.table = $('<tbody>').appendTo(table);
         bg = $('<div style="float: right"></div>').appendTo(flowSection.header);
-        $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.stopPropagation();
@@ -109,7 +109,7 @@ RED.sidebar.context = (function() {
         globalSection.table = $('<tbody>').appendTo(table);
 
         bg = $('<div style="float: right"></div>').appendTo(globalSection.header);
-        $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
             .on("click", function(evt) {
                 evt.stopPropagation();
@@ -235,7 +235,7 @@ RED.sidebar.context = (function() {
                     obj.text(k);
                     var tools = $('<span class="button-group"></span>');
 
-                    var refreshItem = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
+                    var refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         $.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) {
@@ -252,7 +252,7 @@ RED.sidebar.context = (function() {
                             }
                         })
                     });
-                    var deleteItem = $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
+                    var deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         var popover = RED.popover.create({
@@ -264,12 +264,12 @@ RED.sidebar.context = (function() {
                                 $('<p data-i18n="sidebar.context.deleteConfirm"></p>').appendTo(content);
                                 var row = $('<p>').appendTo(content);
                                 var bg = $('<span class="button-group"></span>').appendTo(row);
-                                $('<button class="editor-button" data-i18n="common.label.cancel"></button>').appendTo(bg).on("click", function(e) {
+                                $('<button class="red-ui-button" data-i18n="common.label.cancel"></button>').appendTo(bg).on("click", function(e) {
                                     e.preventDefault();
                                     popover.close();
                                 });
                                 bg = $('<span class="button-group"></span>').appendTo(row);
-                                $('<button class="editor-button primary" data-i18n="common.label.delete"></button>').appendTo(bg).on("click", function(e) {
+                                $('<button class="red-ui-button primary" data-i18n="common.label.delete"></button>').appendTo(bg).on("click", function(e) {
                                     e.preventDefault();
                                     popover.close();
                                     $.ajax({
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
index 42d063735..209e527db 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
@@ -142,7 +142,7 @@ RED.sidebar.info = (function() {
             propRow = $('<tr class="red-ui-help-info-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
             $(propRow.children()[1]).text(activeProject.name||"");
             $('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
-            var editProjectButton = $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
+            var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
                 .appendTo(propRow.children()[1])
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -347,10 +347,10 @@ RED.sidebar.info = (function() {
         // var actionBar = $(propRow.children()[1]);
         //
         // // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
 
 
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index 80efffba1..038caac4a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -120,13 +120,13 @@ RED.utils = (function() {
         var tools = $('<span class="red-ui-debug-msg-tools"></span>').appendTo(obj);
         var copyTools = $('<span class="red-ui-debug-msg-tools-copy button-group"></span>').appendTo(tools);
         if (!!key) {
-            var copyPath = $('<button class="editor-button editor-button-small"><i class="fa fa-terminal"></i></button>').appendTo(copyTools).on("click", function(e) {
+            var copyPath = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-terminal"></i></button>').appendTo(copyTools).on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 RED.clipboard.copyText(key,copyPath,"clipboard.copyMessagePath");
             })
         }
-        var copyPayload = $('<button class="editor-button editor-button-small"><i class="fa fa-clipboard"></i></button>').appendTo(copyTools).on("click", function(e) {
+        var copyPayload = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-clipboard"></i></button>').appendTo(copyTools).on("click", function(e) {
             e.preventDefault();
             e.stopPropagation();
             RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
@@ -134,7 +134,7 @@ RED.utils = (function() {
         if (strippedKey !== undefined && strippedKey !== '') {
             var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey);
 
-            var pinPath = $('<button class="editor-button editor-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) {
+            var pinPath = $('<button class="red-ui-button red-ui-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 if (pinnedPaths[sourceId].hasOwnProperty(strippedKey)) {
@@ -424,7 +424,7 @@ RED.utils = (function() {
                         }
                         $('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr);
                         var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead);
-                        var switchFormat = $('<a class="editor-button editor-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
+                        var switchFormat = $('<a class="red-ui-button red-ui-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
                             e.preventDefault();
                             e.stopPropagation();
                             formatBuffer(element,$(this),sourceId,path,true);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index 9cbf84f72..35b62cba5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -159,7 +159,7 @@ RED.workspaces = (function() {
 
                 $('<div class="form-row">'+
                     '<label for="node-input-disabled-btn" data-i18n="editor:workspace.status"></label>'+
-                    '<button type="button" id="node-input-disabled-btn" class="editor-button"><i class="fa fa-toggle-on"></i> <span id="node-input-disabled-label"></span></button> '+
+                    '<button type="button" id="node-input-disabled-btn" class="red-ui-button"><i class="fa fa-toggle-on"></i> <span id="node-input-disabled-label"></span></button> '+
                     '<input type="checkbox" id="node-input-disabled" style="display: none;"/>'+
                 '</div>').appendTo(dialogForm);
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index aba5d82d6..45edf9eea 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -89,7 +89,7 @@
     }
 }
 .red-ui-debug-msg-meta .red-ui-debug-msg-tools {
-    .editor-button-small {
+    .red-ui-button-small {
         font-size: 11px;
     }
 }
@@ -97,7 +97,7 @@
     .button-group:not(:last-child) {
         margin-right: 3px;
     }
-    .editor-button-small {
+    .red-ui-button-small {
         height: 16px;
         line-height: 14px;
         font-size: 8px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 99346b562..d3f729a96 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -242,8 +242,11 @@ button.red-ui-tray-resize-button {
     }
 }
 
-a.editor-button,
-button.editor-button {
+a.editor-button, // Deprecated: use .red-ui-button
+button.editor-button, // Deprecated: use .red-ui-button
+a.red-ui-button,
+button.red-ui-button
+ {
     @include workspace-button;
     height: 34px;
     line-height: 32px;
@@ -258,8 +261,11 @@ button.editor-button {
 }
 
 
-a.editor-button-small,
-button.editor-button-small {
+a.editor-button-small, // Deprecated: use .red-ui-button-small
+button.editor-button-small, // Deprecated: use .red-ui-button-small
+a.red-ui-button-small,
+button.red-ui-button-small
+{
     height: 20px;
     min-width: 20px;
     line-height: 18px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index 448f7b5ec..7e167e4a4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -39,7 +39,7 @@
             // border: none;
             // border-top: 1px solid $primary-border-color;
             padding: 0px;
-            .editor-button {
+            .red-ui-button {
                 min-width: 60px;
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 4be74756a..e87eb7502 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -148,8 +148,8 @@
     padding: 1px 2px;
 }
 
-.red-ui-popover a.editor-button,
-.red-ui-popover button.editor-button {
+.red-ui-popover a.red-ui-button,
+.red-ui-popover button.red-ui-button {
     &.primary {
         border-color: $popover-button-border-color;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 44e08cc2f..9b1005f22 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -85,7 +85,7 @@
             font-size: 1.2em;
         }
     }
-    button.editor-button {
+    button.red-ui-button {
         width: calc(50% - 80px);
         margin: 20px;
         height: auto;
@@ -254,7 +254,7 @@
         }
     }
 }
-.red-ui-projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
+.red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
     color: $secondary-text-color-active !important;
 }
 .red-ui-projects-dialog-screen-input-status {
diff --git a/packages/node_modules/@node-red/nodes/core/core/80-function.html b/packages/node_modules/@node-red/nodes/core/core/80-function.html
index 4281230fe..30654c493 100644
--- a/packages/node_modules/@node-red/nodes/core/core/80-function.html
+++ b/packages/node_modules/@node-red/nodes/core/core/80-function.html
@@ -10,7 +10,7 @@
         <input type="hidden" id="node-input-noerr">
     </div>
     <div class="form-row node-text-editor-row" style="position:relative">
-        <div style="position: absolute; right:0; bottom:calc(100% + 3px);"><button id="node-function-expand-js" class="editor-button editor-button-small"><i class="fa fa-expand"></i></button></div>
+        <div style="position: absolute; right:0; bottom:calc(100% + 3px);"><button id="node-function-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
         <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-func-editor" ></div>
     </div>
     <div class="form-row" style="margin-bottom: 0px">
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
index 6ed46bbc0..e03e95e7c 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
@@ -485,7 +485,7 @@ RED.debug = (function() {
             $('<span class="red-ui-debug-msg-topic">function : (' + errorLvlType + ')</span>').appendTo(metaRow);
         } else {
             var tools = $('<span class="red-ui-debug-msg-tools button-group"></span>').appendTo(metaRow);
-            var filterMessage = $('<button class="editor-button editor-button-small"><i class="fa fa-caret-down"></i></button>').appendTo(tools);
+            var filterMessage = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-caret-down"></i></button>').appendTo(tools);
             filterMessage.on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
diff --git a/packages/node_modules/@node-red/nodes/core/io/05-tls.html b/packages/node_modules/@node-red/nodes/core/io/05-tls.html
index 2c2fc5f00..281324211 100644
--- a/packages/node_modules/@node-red/nodes/core/io/05-tls.html
+++ b/packages/node_modules/@node-red/nodes/core/io/05-tls.html
@@ -22,10 +22,10 @@
     <div class="form-row">
         <label style="width: 120px;"><i class="fa fa-file-text-o"></i> <span data-i18n="tls.label.cert"></span></label>
         <span class="tls-config-input-data">
-            <label class="editor-button" for="node-config-input-certfile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
+            <label class="red-ui-button" for="node-config-input-certfile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
             <input class="hide" type="file" id="node-config-input-certfile">
             <span id="tls-config-certname" style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;"> </span>
-            <button class="editor-button editor-button-small" id="tls-config-button-cert-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
+            <button class="red-ui-button red-ui-button-small" id="tls-config-button-cert-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
         </span>
         <input type="hidden" id="node-config-input-certname">
         <input type="hidden" id="node-config-input-certdata">
@@ -34,10 +34,10 @@
     <div class="form-row">
         <label style="width: 120px;" for="node-config-input-key"><i class="fa fa-file-text-o"></i> <span data-i18n="tls.label.key"></span></label>
         <span class="tls-config-input-data">
-            <label class="editor-button" for="node-config-input-keyfile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
+            <label class="red-ui-button" for="node-config-input-keyfile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
             <input class="hide" type="file" id="node-config-input-keyfile">
             <span id="tls-config-keyname" style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;"> </span>
-            <button class="editor-button editor-button-small" id="tls-config-button-key-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
+            <button class="red-ui-button red-ui-button-small" id="tls-config-button-key-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
         </span>
         <input type="hidden" id="node-config-input-keyname">
         <input type="hidden" id="node-config-input-keydata">
@@ -50,10 +50,10 @@
     <div class="form-row">
         <label style="width: 120px;" for="node-config-input-ca"><i class="fa fa-file-text-o"></i> <span data-i18n="tls.label.ca"></span></label>
         <span class="tls-config-input-data">
-            <label class="editor-button" for="node-config-input-cafile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
+            <label class="red-ui-button" for="node-config-input-cafile"><i class="fa fa-upload"></i> <span data-i18n="tls.label.upload"></span></label>
             <input class="hide" type="file" title=" " id="node-config-input-cafile">
             <span id="tls-config-caname" style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;"> </span>
-            <button class="editor-button editor-button-small" id="tls-config-button-ca-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
+            <button class="red-ui-button red-ui-button-small" id="tls-config-button-ca-clear" style="margin-left: 10px"><i class="fa fa-times"></i></button>
         </span>
         <input type="hidden" id="node-config-input-caname">
         <input type="hidden" id="node-config-input-cadata">