From bc540eefb649143db1ab04ee9f8abfb284c3bcb2 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 7 May 2019 15:47:33 +0100
Subject: [PATCH] Namespace projects CSS

---
 .../@node-red/editor-client/src/js/red.js     |   2 +-
 .../src/js/ui/projects/projectSettings.js     |  66 ++--
 .../src/js/ui/projects/projectUserSettings.js |  32 +-
 .../src/js/ui/projects/projects.js            | 360 +++++++++---------
 .../src/js/ui/projects/tab-versionControl.js  | 204 +++++-----
 .../editor-client/src/js/ui/utils.js          |   4 +-
 .../editor-client/src/sass/base.scss          |  46 +++
 .../editor-client/src/sass/projects.scss      | 219 +++++------
 8 files changed, 467 insertions(+), 466 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index 80527e063..a060e13d6 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -42,7 +42,7 @@ var RED = (function() {
                             done()
                         }
                     }
-                    $('body').append(newScript);
+                    $("#red-ui-editor-node-configs").append(newScript);
                     newScript.src = RED.settings.apiRootUrl+srcUrl;
                     hasDeferred = true;
                 } else {
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 e48293391..b4707e97b 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
@@ -87,14 +87,14 @@ RED.projects.settings = (function() {
 
                 panes.forEach(function(pane) {
                     settingsTabs.addTab({
-                        id: "project-settings-tab-"+pane.id,
+                        id: "red-ui-project-settings-tab-"+pane.id,
                         label: pane.title,
                         pane: pane
                     });
                     pane.get(project).hide().appendTo(tabContents);
                 });
                 settingsContent.i18n();
-                settingsTabs.activateTab("project-settings-tab-"+(initialTab||'main'))
+                settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main'))
                 $("#red-ui-sidebar-shade").show();
             },
             close: function() {
@@ -228,7 +228,7 @@ RED.projects.settings = (function() {
 
     function createMainPane(activeProject) {
 
-        var pane = $('<div id="project-settings-tab-main" class="project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-main" class="red-ui-project-settings-tab-pane node-help"></div>');
         $('<h1>').text(activeProject.name).appendTo(pane);
         var summary = $('<div style="position: relative">').appendTo(pane);
         var summaryContent = $('<div></div>',{style:"color: #999"}).appendTo(summary);
@@ -322,7 +322,7 @@ RED.projects.settings = (function() {
 
     function saveDependencies(depsList,container,dependencies,complete) {
         var activeProject = RED.projects.getActiveProject();
-        var spinner = utils.addSpinnerOverlay(container).addClass('projects-dialog-spinner-contain');
+        var spinner = utils.addSpinnerOverlay(container).addClass('red-ui-component-spinner-contain');
         var done = function(err,res) {
             spinner.remove();
             if (err) {
@@ -378,7 +378,7 @@ RED.projects.settings = (function() {
     }
 
     function createDependenciesPane(activeProject) {
-        var pane = $('<div id="project-settings-tab-deps" class="project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-deps" class="red-ui-project-settings-tab-pane node-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>')
                 .appendTo(pane)
@@ -530,7 +530,7 @@ RED.projects.settings = (function() {
         var dialogBody;
         var filesList;
         var selected;
-        var container = $('<div class="project-file-listing-container"></div>',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row);
+        var container = $('<div class="red-ui-projects-file-listing-container"></div>',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row);
         var spinner = utils.addSpinnerOverlay(container);
         $.getJSON("projects/"+activeProject.name+"/files",function(result) {
             var fileNames = Object.keys(result);
@@ -578,13 +578,13 @@ RED.projects.settings = (function() {
 
     function createFileSubList(container, files, current, selectFilter, onselect, style) {
         style = style || "";
-        var list = $('<ol>',{class:"projects-dialog-file-list", style:style}).appendTo(container).editableList({
+        var list = $('<ol>',{class:"red-ui-projects-dialog-file-list", style:style}).appendTo(container).editableList({
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var header = $('<div></div>',{class:"projects-dialog-file-list-entry"}).appendTo(row);
+                var header = $('<div></div>',{class:"red-ui-projects-dialog-file-list-entry"}).appendTo(row);
                 if (entry.children) {
-                    $('<span class="projects-dialog-file-list-entry-folder"><i class="fa fa-angle-right"></i> <i class="fa fa-folder-o"></i></span>').appendTo(header);
+                    $('<span class="red-ui-projects-dialog-file-list-entry-folder"><i class="fa fa-angle-right"></i> <i class="fa fa-folder-o"></i></span>').appendTo(header);
                     if (entry.children.length > 0) {
                         var children = $('<div></div>',{style:"padding-left: 20px;"}).appendTo(row);
                         if (current.indexOf(entry.path+"/") === 0) {
@@ -615,16 +615,16 @@ RED.projects.settings = (function() {
                         fileIcon = "fa-book";
                     } else if (/^\.git/i.test(entry.name)) {
                         fileIcon = "fa-code-fork";
-                        header.addClass("projects-dialog-file-list-entry-file-type-git");
+                        header.addClass("red-ui-projects-dialog-file-list-entry-file-type-git");
                     }
-                    $('<span class="projects-dialog-file-list-entry-file"> <i class="fa '+fileIcon+'"></i></span>').appendTo(header);
+                    $('<span class="red-ui-projects-dialog-file-list-entry-file"> <i class="fa '+fileIcon+'"></i></span>').appendTo(header);
                     if (selectFilter(entry)) {
                         header.addClass("selectable");
                         if (entry.path === current) {
                             header.addClass("selected");
                         }
                         header.on("click", function(e) {
-                            $(".projects-dialog-file-list-entry.selected").removeClass("selected");
+                            $(".red-ui-projects-dialog-file-list-entry.selected").removeClass("selected");
                             $(this).addClass("selected");
                             onselect(entry.path,true);
                         })
@@ -636,7 +636,7 @@ RED.projects.settings = (function() {
                         header.addClass("unselectable");
                     }
                 }
-                $('<span class="projects-dialog-file-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
+                $('<span class="red-ui-projects-dialog-file-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
             }
         });
         if (!style) {
@@ -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="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="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.projectSettings.edit') + '</button>')
                 .appendTo(title)
                 .on("click", function(evt) {
                     evt.preventDefault();
@@ -739,7 +739,7 @@ RED.projects.settings = (function() {
                     // packageFileLabelText.hide();
 
                     if (!activeProject.files.package) {
-                        packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate"));
+                        packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate"));
                         packageFileSubLabel.show();
                     }
 
@@ -774,7 +774,7 @@ RED.projects.settings = (function() {
             .on("click", function(e) {
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
-                    packageFileLabel.find('.project-file-listing-container').slideUp(200,function() {
+                    packageFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
                          $(this).remove();
                          packageFileLabel.css('height','');
                      });
@@ -807,9 +807,9 @@ RED.projects.settings = (function() {
                 }
             })
         RED.popover.tooltip(packageFileInputSearch,RED._("sidebar.project.projectSettings.selectFile"));
-        var packageFileSubLabel = $('<label style="margin-left: 110px" class="projects-edit-form-sublabel"><small><span class="form-warning"><i class="fa fa-warning"></i> <span class="projects-edit-form-sublabel-text"></span></small></label>').appendTo(row).hide();
+        var packageFileSubLabel = $('<label style="margin-left: 110px" class="red-ui-projects-edit-form-sublabel"><small><span class="form-warning"><i class="fa fa-warning"></i> <span class="red-ui-projects-edit-form-sublabel-text"></span></small></label>').appendTo(row).hide();
         if (!activeProject.files.package) {
-            packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+            packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
             packageFileSubLabel.show();
         }
 
@@ -843,7 +843,7 @@ RED.projects.settings = (function() {
             .on("click", function(e) {
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
-                    flowFileLabel.find('.project-file-listing-container').slideUp(200,function() {
+                    flowFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
                          $(this).remove();
                          flowFileLabel.css('height','');
                      });
@@ -1050,7 +1050,7 @@ RED.projects.settings = (function() {
             credentialStateLabel.css('height','');
 
             flowFileInputSearch.removeClass('selected');
-            flowFileLabel.find('.project-file-listing-container').remove();
+            flowFileLabel.find('.red-ui-projects-file-listing-container').remove();
             flowFileLabel.css('height','');
             flowFileLabel.css('color','');
 
@@ -1074,7 +1074,7 @@ RED.projects.settings = (function() {
                 credFileLabelPrefixText.text(projectRoot);
                 packageFileLabelText.text(activeProject.files.package||"package.json");
                 if (!activeProject.files.package) {
-                    packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+                    packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
                     packageFileSubLabel.show();
                 } else {
                     packageFileSubLabel.hide();
@@ -1181,7 +1181,7 @@ RED.projects.settings = (function() {
         var localBranchContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         $('<h4></h4>').text(RED._("sidebar.project.projectSettings.branches")).appendTo(localBranchContainer);
 
-        var row = $('<div class="red-ui-settings-row projects-dialog-list"></div>').appendTo(localBranchContainer);
+        var row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(localBranchContainer);
 
 
         var branchList = $('<ol>').appendTo(row).editableList({
@@ -1189,7 +1189,7 @@ RED.projects.settings = (function() {
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("sidebar.project.projectSettings.noBranches"));
@@ -1223,7 +1223,7 @@ RED.projects.settings = (function() {
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.preventDefault();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteConfirm", { name: entry.name }), {
                                 type: "warning",
                                 modal: true,
@@ -1339,15 +1339,15 @@ RED.projects.settings = (function() {
         var emptyItem = { empty: true };
         var isEmpty = true;
         var row = $('<div class="red-ui-settings-row"></div>').appendTo(repoContainer);
-        var addRemoteDialog = $('<div class="projects-dialog-list-dialog"></div>').hide().appendTo(row);
-        row = $('<div class="red-ui-settings-row projects-dialog-list"></div>').appendTo(repoContainer);
+        var addRemoteDialog = $('<div class="red-ui-projects-dialog-list-dialog"></div>').hide().appendTo(row);
+        row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(repoContainer);
         var remotesList = $('<ol>').appendTo(row);
         remotesList.editableList({
             addButton: false,
             height: 'auto',
             addItem: function(row,index,entry) {
 
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("sidebar.project.projectSettings.noRemotes"));
@@ -1368,7 +1368,7 @@ RED.projects.settings = (function() {
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.preventDefault();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteRemoteConfrim", { name: entry.name }), {
                                 type: "warning",
                                 modal: true,
@@ -1461,7 +1461,7 @@ RED.projects.settings = (function() {
         var remoteNameInputChanged = false;
         var remoteURLInputChanged = false;
 
-        $('<div class="projects-dialog-list-dialog-header">').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog);
+        $('<div class="red-ui-projects-dialog-list-dialog-header">').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog);
 
         row = $('<div class="red-ui-settings-row"></div>').appendTo(addRemoteDialog);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.remoteName")).appendTo(row);
@@ -1469,14 +1469,14 @@ RED.projects.settings = (function() {
             remoteNameInputChanged = true;
             validateForm();
         });
-        $('<label class="projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.nameRule") + '</small></label>').appendTo(row).find("small");
+        $('<label class="red-ui-projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.nameRule") + '</small></label>').appendTo(row).find("small");
         row = $('<div class="red-ui-settings-row"></div>').appendTo(addRemoteDialog);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.url")).appendTo(row);
         var remoteURLInput = $('<input type="text">').appendTo(row).on("change keyup paste",function() {
             remoteURLInputChanged = true;
             validateForm()
         });
-        var remoteURLLabel = $('<label class="projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.urlRule") +'</small></label>').appendTo(row).find("small");
+        var remoteURLLabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.urlRule") +'</small></label>').appendTo(row).find("small");
 
         var hideEditForm = function() {
             editRepoButton.attr('disabled',false);
@@ -1500,7 +1500,7 @@ RED.projects.settings = (function() {
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('projects-dialog-spinner-contain');
+                var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('red-ui-component-spinner-contain');
 
                 var payload = {
                     name: remoteNameInput.val(),
@@ -1576,7 +1576,7 @@ RED.projects.settings = (function() {
 
 
     function createSettingsPane(activeProject) {
-        var pane = $('<div id="project-settings-tab-settings" class="project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-settings" class="red-ui-project-settings-tab-pane node-help"></div>');
         createFilesSection(activeProject,pane);
         // createLocalRepositorySection(activeProject,pane);
         createRemoteRepositorySection(activeProject,pane);
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 ae224de88..f3533a19b 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
@@ -90,8 +90,8 @@ RED.projects.userSettings = (function() {
         };
 
         var row = $('<div class="red-ui-settings-row"></div>').appendTo(container);
-        var addKeyDialog = $('<div class="projects-dialog-list-dialog"></div>').hide().appendTo(row);
-        $('<div class="projects-dialog-list-dialog-header">').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog);
+        var addKeyDialog = $('<div class="red-ui-projects-dialog-list-dialog"></div>').hide().appendTo(row);
+        $('<div class="red-ui-projects-dialog-list-dialog-header">').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog);
         var addKeyDialogBody = $('<div>').appendTo(addKeyDialog);
 
         row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
@@ -131,33 +131,33 @@ RED.projects.userSettings = (function() {
             keyNameInputChanged = true;
             validateForm();
         });
-        $('<label class="projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.nameRule")+'</small></label>').appendTo(row).find("small");
+        $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.nameRule")+'</small></label>').appendTo(row).find("small");
 
         var generateKeyPane = $('<div>').appendTo(addKeyDialogBody);
         row = $('<div class="red-ui-settings-row"></div>').appendTo(generateKeyPane);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.passphrase")).appendTo(row);
         var passphraseInput = $('<input type="password">').appendTo(row).on("change keyup paste",validateForm);
-        var passphraseInputSubLabel = $('<label class="projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.optional")+'</small></label>').appendTo(row).find("small");
+        var passphraseInputSubLabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.optional")+'</small></label>').appendTo(row).find("small");
 
         // var addLocalKeyPane = $('<div>').hide().appendTo(addKeyDialogBody);
         // row = $('<div class="red-ui-settings-row"></div>').appendTo(addLocalKeyPane);
         // $('<label for=""></label>').text('Public key').appendTo(row);
         // var localPublicKeyPathInput = $('<input type="text">').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Public key file path, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Public key file path, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
         // row = $('<div class="red-ui-settings-row"></div>').appendTo(addLocalKeyPane);
         // $('<label for=""></label>').text('Private key').appendTo(row);
         // var localPrivateKeyPathInput = $('<input type="text">').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Private key file path, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Private key file path, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
         //
         // var uploadKeyPane = $('<div>').hide().appendTo(addKeyDialogBody);
         // row = $('<div class="red-ui-settings-row"></div>').appendTo(uploadKeyPane);
         // $('<label for=""></label>').text('Public key').appendTo(row);
         // var publicKeyInput = $('<textarea>').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Paste in public key contents, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Paste in public key contents, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
         // row = $('<div class="red-ui-settings-row"></div>').appendTo(uploadKeyPane);
         // $('<label for=""></label>').text('Private key').appendTo(row);
         // var privateKeyInput = $('<textarea>').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Paste in private key contents, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Paste in private key contents, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
 
 
 
@@ -189,7 +189,7 @@ RED.projects.userSettings = (function() {
             .appendTo(formButtons)
             .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(addKeyDialog).addClass('projects-dialog-spinner-contain');
+                var spinner = utils.addSpinnerOverlay(addKeyDialog).addClass('red-ui-component-spinner-contain');
                 var payload = {
                     name: keyNameInput.val()
                 };
@@ -239,12 +239,12 @@ RED.projects.userSettings = (function() {
                 },payload);
             });
 
-        row = $('<div class="red-ui-settings-row projects-dialog-list"></div>').appendTo(container);
+        row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(container);
         var emptyItem = { empty: true };
         var expandKey = function(container,entry) {
-            var row = $('<div class="projects-dialog-ssh-public-key">',{style:"position:relative"}).appendTo(container);
+            var row = $('<div class="red-ui-projects-dialog-ssh-public-key">',{style:"position:relative"}).appendTo(container);
             var keyBox = $('<pre>',{style:"min-height: 80px"}).appendTo(row);
-            var spinner = utils.addSpinnerOverlay(keyBox).addClass('projects-dialog-spinner-contain');
+            var spinner = utils.addSpinnerOverlay(keyBox).addClass('red-ui-component-spinner-contain');
             var options = {
                 url: 'settings/user/keys/'+entry.name,
                 type: "GET",
@@ -281,18 +281,18 @@ RED.projects.userSettings = (function() {
 
             return row;
         }
-        var keyList = $('<ol class="projects-dialog-ssh-key-list">').appendTo(row).editableList({
+        var keyList = $('<ol class="red-ui-projects-dialog-ssh-key-list">').appendTo(row).editableList({
             height: 'auto',
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("editor:sidebar.project.userSettings.noSshKeys"));
                     return;
                 }
-                var topRow = $('<div class="projects-dialog-ssh-key-header">').appendTo(container);
+                var topRow = $('<div class="red-ui-projects-dialog-ssh-key-header">').appendTo(container);
                 $('<span class="entry-icon"><i class="fa fa-key"></i></span>').appendTo(topRow);
                 $('<span class="entry-name">').text(entry.name).appendTo(topRow);
                 var tools = $('<span class="button-row entry-tools">').appendTo(topRow);
@@ -312,7 +312,7 @@ RED.projects.userSettings = (function() {
                         .appendTo(tools)
                         .on("click", function(e) {
                             e.stopPropagation();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("editor:sidebar.project.userSettings.deleteConfirm", {name:entry.name}), {
                                 type: 'warning',
                                 modal: true,
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 8d69be97f..17160872e 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
@@ -60,7 +60,7 @@ RED.projects = (function() {
     }
     var screens = {};
     function initScreens() {
-        var migrateProjectHeader = $('<div class="projects-dialog-screen-start-hero"></div>');
+        var migrateProjectHeader = $('<div class="red-ui-projects-dialog-screen-start-hero"></div>');
         $('<span><i class="fa fa-files-o fa-2x"></i> &nbsp; &nbsp; <i class="fa fa-long-arrow-right fa-2x"></i> &nbsp; &nbsp; <i class="fa fa-archive fa-2x"></i></span>').appendTo(migrateProjectHeader)
         $('<hr>').appendTo(migrateProjectHeader);
 
@@ -70,19 +70,19 @@ RED.projects = (function() {
             'welcome': {
                 content: function(options) {
 
-                    var container = $('<div class="projects-dialog-screen-start"></div>');
+                    var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
 
                     migrateProjectHeader.appendTo(container);
 
-                    var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                    var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
                     $('<p>').text(RED._("projects.welcome.hello")).appendTo(body);
                     $('<p>').text(RED._("projects.welcome.desc0")).appendTo(body);
                     $('<p>').text(RED._("projects.welcome.desc1")).appendTo(body);
                     $('<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 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 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="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);
 
                     createAsEmpty.on("click", function(e) {
                         e.preventDefault();
@@ -143,13 +143,13 @@ RED.projects = (function() {
                             var name = gitUsernameInput.val().trim();
                             var email = gitEmailInput.val().trim();
                             var valid = name.length > 0 && email.length > 0;
-                            $("#projects-dialog-git-config").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-git-config").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
 
                         }
 
-                        var container = $('<div class="projects-dialog-screen-start"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                         migrateProjectHeader.appendTo(container);
-                        var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                        var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
 
                         $('<p>').text(RED._("projects.git-config.setup")).appendTo(body);
                         $('<p>').text(RED._("projects.git-config.desc0")).appendTo(body);
@@ -186,7 +186,7 @@ RED.projects = (function() {
                             }
                         },
                         {
-                            id: "projects-dialog-git-config",
+                            id: "red-ui-projects-dialog-git-config",
                             text: RED._("common.label.next"),
                             class: "primary",
                             click: function() {
@@ -226,9 +226,9 @@ RED.projects = (function() {
                                 }
                             })
                         });
-                        var container = $('<div class="projects-dialog-screen-start"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                         migrateProjectHeader.appendTo(container);
-                        var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                        var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
 
                         $('<p>').text(RED._("projects.project-details.create")).appendTo(body);
                         $('<p>').text(RED._("projects.project-details.desc0")).appendTo(body);
@@ -263,15 +263,15 @@ RED.projects = (function() {
                                 projectNameLastChecked = projectName;
                             }
                             valid = projectNameValid;
-                            $("#projects-dialog-create-name").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-create-name").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
                         }
 
                         var row = $('<div class="form-row"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-name">'+RED._("projects.project-details.project-name")+'</label>').appendTo(row);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-name">'+RED._("projects.project-details.project-name")+'</label>').appendTo(row);
 
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectNameInput = $('<input id="projects-dialog-screen-create-project-name" type="text"></input>').val(createProjectOptions.name||"").appendTo(subrow);
-                        var projectNameStatus = $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        projectNameInput = $('<input id="red-ui-projects-dialog-screen-create-project-name" type="text"></input>').val(createProjectOptions.name||"").appendTo(subrow);
+                        var projectNameStatus = $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
 
                         var projectNameInputChanged = false;
                         var projectNameLastChecked = "";
@@ -297,13 +297,13 @@ RED.projects = (function() {
                                 checkProjectName = null;
                             },300)
                         });
-                        projectNameSublabel = $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.project-details.must-contain")+'</small></label>').appendTo(row).find("small");
+                        projectNameSublabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.project-details.must-contain")+'</small></label>').appendTo(row).find("small");
 
                         // Empty Project
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-desc">'+RED._("projects.project-details.desc")+'</label>').appendTo(row);
-                        projectSummaryInput = $('<input id="projects-dialog-screen-create-project-desc" type="text">').val(createProjectOptions.summary||"").appendTo(row);
-                        $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.project-details.opt")+'</small></label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(body);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-desc">'+RED._("projects.project-details.desc")+'</label>').appendTo(row);
+                        projectSummaryInput = $('<input id="red-ui-projects-dialog-screen-create-project-desc" type="text">').val(createProjectOptions.summary||"").appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.project-details.opt")+'</small></label>').appendTo(row);
 
                         setTimeout(function() {
                             projectNameInput.trigger("focus");
@@ -320,7 +320,7 @@ RED.projects = (function() {
                                 }
                             },
                             {
-                                id: "projects-dialog-create-name",
+                                id: "red-ui-projects-dialog-create-name",
                                 disabled: true,
                                 text: RED._("common.label.next"),
                                 class: "primary disabled",
@@ -355,9 +355,9 @@ RED.projects = (function() {
 
                 return {
                     content: function(options) {
-                        var container = $('<div class="projects-dialog-screen-start"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                         migrateProjectHeader.appendTo(container);
-                        var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                        var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
                         $('<p>').text(RED._("projects.clone-project.clone")).appendTo(body);
                         $('<p>').text(RED._("projects.clone-project.desc0")).appendTo(body);
 
@@ -409,7 +409,7 @@ RED.projects = (function() {
                             // var validRepo = /^(?:file|git|ssh|https?|[\d\w\.\-_]+@[\w\.]+):(?:\/\/)?[\w\.@:\/~_-]+(?:\/?|\#[\d\w\.\-_]+?)$/.test(repo);
                             var validRepo = repo.length > 0 && !/\s/.test(repo);
                             if (/^https?:\/\/[^/]+@/i.test(repo)) {
-                                $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.no-info-in-url"));
+                                $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.no-info-in-url"));
                                 validRepo = false;
                             }
                             if (!validRepo) {
@@ -421,30 +421,30 @@ RED.projects = (function() {
                                 projectRepoInput.removeClass("input-error");
                             }
                             if (/^https?:\/\//.test(repo)) {
-                                $(".projects-dialog-screen-create-row-creds").show();
-                                $(".projects-dialog-screen-create-row-sshkey").hide();
+                                $(".red-ui-projects-dialog-screen-create-row-creds").show();
+                                $(".red-ui-projects-dialog-screen-create-row-sshkey").hide();
                             } else if (/^(?:ssh|[\S]+?@[\S]+?):(?:\/\/)?/.test(repo)) {
-                                $(".projects-dialog-screen-create-row-creds").hide();
-                                $(".projects-dialog-screen-create-row-sshkey").show();
+                                $(".red-ui-projects-dialog-screen-create-row-creds").hide();
+                                $(".red-ui-projects-dialog-screen-create-row-sshkey").show();
                                 // if ( !getSelectedSSHKey(projectRepoSSHKeySelect) ) {
                                 //     valid = false;
                                 // }
                             } else {
-                                $(".projects-dialog-screen-create-row-creds").hide();
-                                $(".projects-dialog-screen-create-row-sshkey").hide();
+                                $(".red-ui-projects-dialog-screen-create-row-creds").hide();
+                                $(".red-ui-projects-dialog-screen-create-row-sshkey").hide();
                             }
 
-                            $("#projects-dialog-clone-project").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-clone-project").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
                         }
 
                         var row;
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty projects-dialog-screen-create-row-clone"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-name">'+RED._("projects.clone-project.project-name")+'</label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(body);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-name">'+RED._("projects.clone-project.project-name")+'</label>').appendTo(row);
 
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectNameInput = $('<input id="projects-dialog-screen-create-project-name" type="text"></input>').appendTo(subrow);
-                        var projectNameStatus = $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        projectNameInput = $('<input id="red-ui-projects-dialog-screen-create-project-name" type="text"></input>').appendTo(subrow);
+                        var projectNameStatus = $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
 
                         var projectNameInputChanged = false;
                         var projectNameLastChecked = "";
@@ -470,19 +470,19 @@ RED.projects = (function() {
                                 checkProjectName = null;
                             },300)
                         });
-                        projectNameSublabel = $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.clone-project.must-contain")+'</small></label>').appendTo(row).find("small");
+                        projectNameSublabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.clone-project.must-contain")+'</small></label>').appendTo(row).find("small");
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-clone"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-repo">'+RED._("projects.clone-project.git-url")+'</label>').appendTo(row);
-                        projectRepoInput = $('<input id="projects-dialog-screen-create-project-repo" type="text" placeholder="https://git.example.com/path/my-project.git"></input>').appendTo(row);
-                        $('<label id="projects-dialog-screen-create-project-repo-label" class="projects-edit-form-sublabel"><small>'+RED._("projects.clone-project.protocols")+'</small></label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(body);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo">'+RED._("projects.clone-project.git-url")+'</label>').appendTo(row);
+                        projectRepoInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo" type="text" placeholder="https://git.example.com/path/my-project.git"></input>').appendTo(row);
+                        $('<label id="red-ui-projects-dialog-screen-create-project-repo-label" class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.clone-project.protocols")+'</small></label>').appendTo(row);
                         var projectRepoChanged = false;
                         var lastProjectRepo = "";
                         projectRepoInput.on("change keyup paste",function() {
                             projectRepoChanged = true;
                             var repo = $(this).val();
                             if (lastProjectRepo !== repo) {
-                                $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.protocols"));
+                                $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.protocols"));
                             }
                             lastProjectRepo = repo;
 
@@ -498,26 +498,26 @@ RED.projects = (function() {
                             validateForm();
                         });
 
-                        var cloneAuthRows = $('<div class="projects-dialog-screen-create-row"></div>').appendTo(body);
-                        row = $('<div class="form-row projects-dialog-screen-create-row-auth-error"></div>').hide().appendTo(cloneAuthRows);
+                        var cloneAuthRows = $('<div class="red-ui-projects-dialog-screen-create-row"></div>').appendTo(body);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row-auth-error"></div>').hide().appendTo(cloneAuthRows);
                         $('<div><i class="fa fa-warning"></i> '+RED._("projects.clone-project.auth-failed")+'</div>').appendTo(row);
 
                         // Repo credentials - username/password ----------------
-                        row = $('<div class="hide form-row projects-dialog-screen-create-row-creds"></div>').hide().appendTo(cloneAuthRows);
+                        row = $('<div class="hide form-row red-ui-projects-dialog-screen-create-row-creds"></div>').hide().appendTo(cloneAuthRows);
 
                         var subrow = $('<div style="width: calc(50% - 10px); display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-user">'+RED._("projects.clone-project.username")+'</label>').appendTo(subrow);
-                        projectRepoUserInput = $('<input id="projects-dialog-screen-create-project-repo-user" type="text"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-user">'+RED._("projects.clone-project.username")+'</label>').appendTo(subrow);
+                        projectRepoUserInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-user" type="text"></input>').appendTo(subrow);
 
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-pass">'+RED._("projects.clone-project.passwd")+'</label>').appendTo(subrow);
-                        projectRepoPasswordInput = $('<input id="projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-pass">'+RED._("projects.clone-project.passwd")+'</label>').appendTo(subrow);
+                        projectRepoPasswordInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
                         // -----------------------------------------------------
 
                         // Repo credentials - key/passphrase -------------------
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-sshkey"></div>').hide().appendTo(cloneAuthRows);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').hide().appendTo(cloneAuthRows);
                         subrow = $('<div style="width: calc(50% - 10px); display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.clone-project.ssh-key")+'</label>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.clone-project.ssh-key")+'</label>').appendTo(subrow);
                         projectRepoSSHKeySelect = $("<select>",{style:"width: 100%"}).appendTo(subrow);
 
                         $.getJSON("settings/user/keys", function(data) {
@@ -537,11 +537,11 @@ RED.projects = (function() {
                             }
                         });
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.clone-project.passphrase")+'</label>').appendTo(subrow);
-                        projectRepoPassphrase = $('<input id="projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.clone-project.passphrase")+'</label>').appendTo(subrow);
+                        projectRepoPassphrase = $('<input id="red-ui-projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
 
-                        subrow = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
-                        var sshwarningRow = $('<div class="projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
+                        subrow = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
+                        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) {
@@ -556,7 +556,7 @@ RED.projects = (function() {
 
 
                         // Secret - clone
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-clone"></div>').appendTo(body);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(body);
                         $('<label>'+RED._("projects.clone-project.credential-key")+'</label>').appendTo(row);
                         projectSecretInput = $('<input type="password"></input>').appendTo(row);
 
@@ -573,12 +573,12 @@ RED.projects = (function() {
                                 }
                             },
                             {
-                                id: "projects-dialog-clone-project",
+                                id: "red-ui-projects-dialog-clone-project",
                                 disabled: true,
                                 text: RED._("common.label.clone"),
                                 class: "primary disabled",
                                 click: function() {
-                                    var projectType = $(".projects-dialog-screen-create-type.selected").data('type');
+                                    var projectType = $(".red-ui-projects-dialog-screen-create-type.selected").data('type');
                                     var projectData = {
                                         name: projectNameInput.val(),
                                     }
@@ -615,8 +615,8 @@ RED.projects = (function() {
                                         };
                                     }
 
-                                    $(".projects-dialog-screen-create-row-auth-error").hide();
-                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.protocols"));
+                                    $(".red-ui-projects-dialog-screen-create-row-auth-error").hide();
+                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.protocols"));
 
                                     projectRepoUserInput.removeClass("input-error");
                                     projectRepoPasswordInput.removeClass("input-error");
@@ -643,18 +643,18 @@ RED.projects = (function() {
                                                 },
                                                 'git_connection_failed': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.connection-failed"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.connection-failed"));
                                                 },
                                                 'git_not_a_repository': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.not-git-repo"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.not-git-repo"));
                                                 },
                                                 'git_repository_not_found': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.repo-not-found"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.clone-project.repo-not-found"));
                                                 },
                                                 'git_auth_failed': function(error) {
-                                                    $(".projects-dialog-screen-create-row-auth-error").show();
+                                                    $(".red-ui-projects-dialog-screen-create-row-auth-error").show();
 
                                                     projectRepoUserInput.addClass("input-error");
                                                     projectRepoPasswordInput.addClass("input-error");
@@ -703,9 +703,9 @@ RED.projects = (function() {
                 var projectCredentialFileInput;
                 return {
                     content: function(options) {
-                        var container = $('<div class="projects-dialog-screen-start"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                         migrateProjectHeader.appendTo(container);
-                        var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                        var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
 
                         $('<p>').text(RED._("projects.default-files.create")).appendTo(body);
                         $('<p>').text(RED._("projects.default-files.desc0")).appendTo(body);
@@ -739,25 +739,25 @@ RED.projects = (function() {
                                 }
                                 projectCredentialFileInput.text(flowFile.substring(0,flowFile.length-5)+"_cred.json");
                             }
-                            $("#projects-dialog-create-default-files").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-create-default-files").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
                         }
                         var row = $('<div class="form-row"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-file">'+RED._("projects.default-files.flow-file")+'</label>').appendTo(row);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.default-files.flow-file")+'</label>').appendTo(row);
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
                         var defaultFlowFile = (createProjectOptions.files &&createProjectOptions.files.flow) || (RED.settings.files && RED.settings.files.flow)||"flow.json";
-                        projectFlowFileInput = $('<input id="projects-dialog-screen-create-project-file" type="text">').val(defaultFlowFile)
+                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val(defaultFlowFile)
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
-                        $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
-                        $('<label class="projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
+                        $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        $('<label class="red-ui-projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
 
                         var defaultCredentialsFile = (createProjectOptions.files &&createProjectOptions.files.credentials) || (RED.settings.files && RED.settings.files.credentials)||"flow_cred.json";
                         row = $('<div class="form-row"></div>').appendTo(body);
-                        $('<label for="projects-dialog-screen-create-project-credfile">'+RED._("projects.default-files.credentials-file")+'</label>').appendTo(row);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-credfile">'+RED._("projects.default-files.credentials-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectCredentialFileInput = $('<div style="width: 100%" class="uneditable-input" id="projects-dialog-screen-create-project-credentials">').text(defaultCredentialsFile)
+                        projectCredentialFileInput = $('<div style="width: 100%" class="uneditable-input" id="red-ui-projects-dialog-screen-create-project-credentials">').text(defaultCredentialsFile)
                             .appendTo(subrow);
-                        $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
 
                         setTimeout(function() {
                             projectFlowFileInput.trigger("focus");
@@ -780,7 +780,7 @@ RED.projects = (function() {
                                 }
                             },
                             {
-                                id: "projects-dialog-create-default-files",
+                                id: "red-ui-projects-dialog-create-default-files",
                                 text: RED._("common.label.next"),
                                 class: "primary",
                                 click: function() {
@@ -803,9 +803,9 @@ RED.projects = (function() {
                 return {
                     content: function(options) {
 
-                        var container = $('<div class="projects-dialog-screen-start"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                         migrateProjectHeader.appendTo(container);
-                        var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                        var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
 
                         $('<p>').text(RED._("projects.encryption-config.setup")).appendTo(body);
                         if (options.existingProject) {
@@ -845,11 +845,11 @@ RED.projects = (function() {
                                     valid = valid && emptyProjectCredentialInput.val()!=='';
                                 }
                             }
-                            $("#projects-dialog-create-encryption").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-create-encryption").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
                         }
 
 
-                        var row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty"></div>').appendTo(body);
+                        var row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(body);
                         $('<label>'+RED._("projects.encryption-config.credentials")+'</label>').appendTo(row);
 
                         var credentialsBox = $('<div style="width: 550px">').appendTo(row);
@@ -857,9 +857,9 @@ RED.projects = (function() {
                         var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px;  display: inline-block">').appendTo(credentialsBox);
 
                         var credentialsEnabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
                         var credentialsDisabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
 
                         credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
                             var val = $(this).val();
@@ -894,9 +894,9 @@ RED.projects = (function() {
                         })
 
                         row = $('<div class="form-row projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        $('<label class="projects-edit-form-inline-label '+((RED.settings.flowEncryptionType !== 'user')?'disabled':'')+'" style="margin-left: 5px"><input '+((RED.settings.flowEncryptionType !== 'user')?RED._("projects.encryption-config.disabled"):'')+' type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="default" name="projects-encryption-key"> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.copy")+'</span></label>').appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-inline-label '+((RED.settings.flowEncryptionType !== 'user')?'disabled':'')+'" style="margin-left: 5px"><input '+((RED.settings.flowEncryptionType !== 'user')?RED._("projects.encryption-config.disabled"):'')+' type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="default" name="projects-encryption-key"> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.copy")+'</span></label>').appendTo(row);
                         row = $('<div class="form-row projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="custom" name="projects-encryption-key"> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.use-custom")+'</span></label>').appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="custom" name="projects-encryption-key"> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.use-custom")+'</span></label>').appendTo(row);
                         row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
                         emptyProjectCredentialInput = $('<input disabled type="password" style="margin-left: 25px; width: calc(100% - 30px);"></input>').appendTo(row);
                         emptyProjectCredentialInput.on("change keyup paste", validateForm);
@@ -935,7 +935,7 @@ RED.projects = (function() {
                                 }
                             },
                             {
-                                id: "projects-dialog-create-encryption",
+                                id: "red-ui-projects-dialog-create-encryption",
                                 text: RED._(options.existingProject?"projects.encryption-config.create-project-files":"projects.encryption-config.create-project"),
                                 class: "primary disabled",
                                 disabled: true,
@@ -1018,9 +1018,9 @@ RED.projects = (function() {
             'create-success': {
                 content: function(options) {
 
-                    var container = $('<div class="projects-dialog-screen-start"></div>');
+                    var container = $('<div class="red-ui-projects-dialog-screen-start"></div>');
                     migrateProjectHeader.appendTo(container);
-                    var body = $('<div class="projects-dialog-screen-start-body"></div>').appendTo(container);
+                    var body = $('<div class="red-ui-projects-dialog-screen-start-body"></div>').appendTo(container);
 
                     $('<p>').text(RED._("projects.create-success.success")).appendTo(body);
                     $('<p>').text(RED._("projects.create-success.desc0")).appendTo(body);
@@ -1074,7 +1074,7 @@ RED.projects = (function() {
                             })
                         });
 
-                        var container = $('<div class="projects-dialog-screen-create"></div>');
+                        var container = $('<div class="red-ui-projects-dialog-screen-create"></div>');
                         var row;
 
                         var validateForm = function() {
@@ -1106,7 +1106,7 @@ RED.projects = (function() {
                             }
                             valid = projectNameValid;
 
-                            var projectType = $(".projects-dialog-screen-create-type.selected").data('type');
+                            var projectType = $(".red-ui-projects-dialog-screen-create-type.selected").data('type');
                             if (projectType === 'copy') {
                                 if (!copyProject) {
                                     valid = false;
@@ -1117,7 +1117,7 @@ RED.projects = (function() {
                                 // var validRepo = /^(?:file|git|ssh|https?|[\d\w\.\-_]+@[\w\.]+):(?:\/\/)?[\w\.@:\/~_-]+(?:\/?|\#[\d\w\.\-_]+?)$/.test(repo);
                                 var validRepo = repo.length > 0 && !/\s/.test(repo);
                                 if (/^https?:\/\/[^/]+@/i.test(repo)) {
-                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.no-info-in-url"));
+                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.no-info-in-url"));
                                     validRepo = false;
                                 }
                                 if (!validRepo) {
@@ -1129,17 +1129,17 @@ RED.projects = (function() {
                                     projectRepoInput.removeClass("input-error");
                                 }
                                 if (/^https?:\/\//.test(repo)) {
-                                    $(".projects-dialog-screen-create-row-creds").show();
-                                    $(".projects-dialog-screen-create-row-sshkey").hide();
+                                    $(".red-ui-projects-dialog-screen-create-row-creds").show();
+                                    $(".red-ui-projects-dialog-screen-create-row-sshkey").hide();
                                 } else if (/^(?:ssh|[\S]+?@[\S]+?):(?:\/\/)?/.test(repo)) {
-                                    $(".projects-dialog-screen-create-row-creds").hide();
-                                    $(".projects-dialog-screen-create-row-sshkey").show();
+                                    $(".red-ui-projects-dialog-screen-create-row-creds").hide();
+                                    $(".red-ui-projects-dialog-screen-create-row-sshkey").show();
                                     // if ( !getSelectedSSHKey(projectRepoSSHKeySelect) ) {
                                     //     valid = false;
                                     // }
                                 } else {
-                                    $(".projects-dialog-screen-create-row-creds").hide();
-                                    $(".projects-dialog-screen-create-row-sshkey").hide();
+                                    $(".red-ui-projects-dialog-screen-create-row-creds").hide();
+                                    $(".red-ui-projects-dialog-screen-create-row-sshkey").hide();
                                 }
 
 
@@ -1169,37 +1169,37 @@ RED.projects = (function() {
                                 valid = !!selectedProject;
                             }
 
-                            $("#projects-dialog-create").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
+                            $("#red-ui-projects-dialog-create").prop('disabled',!valid).toggleClass('disabled ui-button-disabled ui-state-disabled',!valid);
                         }
 
                         row = $('<div class="form-row button-group"></div>').appendTo(container);
 
-                        var openProject = $('<button data-type="open" class="editor-button 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 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 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 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 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(".projects-dialog-screen-create-type").on("click", function(evt) {
+                        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);
+                        row.find(".red-ui-projects-dialog-screen-create-type").on("click", function(evt) {
                             evt.preventDefault();
-                            container.find(".projects-dialog-screen-create-type").removeClass('selected');
+                            container.find(".red-ui-projects-dialog-screen-create-type").removeClass('selected');
                             $(this).addClass('selected');
-                            container.find(".projects-dialog-screen-create-row").hide();
-                            container.find(".projects-dialog-screen-create-row-"+$(this).data('type')).show();
+                            container.find(".red-ui-projects-dialog-screen-create-row").hide();
+                            container.find(".red-ui-projects-dialog-screen-create-row-"+$(this).data('type')).show();
                             validateForm();
                             projectNameInput.trigger("focus");
                             switch ($(this).data('type')) {
-                                case "open": $("#projects-dialog-create").text(RED._("projects.create.open")); break;
-                                case "empty": $("#projects-dialog-create").text(RED._("projects.create.create")); break;
-                                case "clone": $("#projects-dialog-create").text(RED._("projects.create.clone")); break;
+                                case "open": $("#red-ui-projects-dialog-create").text(RED._("projects.create.open")); break;
+                                case "empty": $("#red-ui-projects-dialog-create").text(RED._("projects.create.create")); break;
+                                case "clone": $("#red-ui-projects-dialog-create").text(RED._("projects.create.clone")); break;
                             }
                         })
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-open"></div>').hide().appendTo(container);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-open"></div>').hide().appendTo(container);
                         createProjectList({
                             canSelectActive: false,
                             dblclick: function(project) {
                                 selectedProject = project;
-                                $("#projects-dialog-create").trigger("click");
+                                $("#red-ui-projects-dialog-create").trigger("click");
                             },
                             select: function(project) {
                                 selectedProject = project;
@@ -1215,12 +1215,12 @@ RED.projects = (function() {
                             }
                         }).appendTo(row);
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty projects-dialog-screen-create-row-clone"></div>').appendTo(container);
-                        $('<label for="projects-dialog-screen-create-project-name">'+RED._("projects.create.project-name")+'</label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(container);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-name">'+RED._("projects.create.project-name")+'</label>').appendTo(row);
 
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectNameInput = $('<input id="projects-dialog-screen-create-project-name" type="text"></input>').appendTo(subrow);
-                        var projectNameStatus = $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        projectNameInput = $('<input id="red-ui-projects-dialog-screen-create-project-name" type="text"></input>').appendTo(subrow);
+                        var projectNameStatus = $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
 
                         var projectNameInputChanged = false;
                         var projectNameLastChecked = "";
@@ -1246,24 +1246,24 @@ RED.projects = (function() {
                                 checkProjectName = null;
                             },300)
                         });
-                        projectNameSublabel = $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.create.must-contain")+'</small></label>').appendTo(row).find("small");
+                        projectNameSublabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.create.must-contain")+'</small></label>').appendTo(row).find("small");
 
                         // Empty Project
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty"></div>').appendTo(container);
-                        $('<label for="projects-dialog-screen-create-project-desc">'+RED._("projects.create.desc")+'</label>').appendTo(row);
-                        projectSummaryInput = $('<input id="projects-dialog-screen-create-project-desc" type="text">').appendTo(row);
-                        $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.create.opt")+'</small></label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-desc">'+RED._("projects.create.desc")+'</label>').appendTo(row);
+                        projectSummaryInput = $('<input id="red-ui-projects-dialog-screen-create-project-desc" type="text">').appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.create.opt")+'</small></label>').appendTo(row);
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty"></div>').appendTo(container);
-                        $('<label for="projects-dialog-screen-create-project-file">'+RED._("projects.create.flow-file")+'</label>').appendTo(row);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.create.flow-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectFlowFileInput = $('<input id="projects-dialog-screen-create-project-file" type="text">').val("flow.json")
+                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val("flow.json")
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
-                        $('<div class="projects-dialog-screen-input-status"></div>').appendTo(subrow);
-                        $('<label class="projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
+                        $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
+                        $('<label class="red-ui-projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
 
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-empty"></div>').appendTo(container);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
                         $('<label>'+RED._("projects.create.credentials")+'</label>').appendTo(row);
 
                         var credentialsBox = $('<div style="width: 550px">').appendTo(row);
@@ -1271,9 +1271,9 @@ RED.projects = (function() {
                         var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px;  display: inline-block">').appendTo(credentialsBox);
 
                         var credentialsEnabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" checked style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.enable-encryption")+'</span></label>').appendTo(credentialsEnabledBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" checked style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.enable-encryption")+'</span></label>').appendTo(credentialsEnabledBox);
                         var credentialsDisabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.disable-encryption")+'</span></label>').appendTo(credentialsDisabledBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.disable-encryption")+'</span></label>').appendTo(credentialsDisabledBox);
 
                         credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
                             var val = $(this).val();
@@ -1307,11 +1307,11 @@ RED.projects = (function() {
                         })
 
                         row = $('<div class="form-row projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        $('<label class="projects-edit-form-inline-label">'+RED._("projects.create.encryption-key")+'</label>').appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-inline-label">'+RED._("projects.create.encryption-key")+'</label>').appendTo(row);
                         // row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
                         emptyProjectCredentialInput = $('<input type="password"></input>').appendTo(row);
                         emptyProjectCredentialInput.on("change keyup paste", validateForm);
-                        $('<label class="projects-edit-form-sublabel"><small>'+RED._("projects.create.desc0")+'</small></label>').appendTo(row);
+                        $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.create.desc0")+'</small></label>').appendTo(row);
 
 
                         row = $('<div class="form-row projects-encryption-disabled-row"></div>').hide().appendTo(credentialsRightBox);
@@ -1327,10 +1327,10 @@ RED.projects = (function() {
                         })
 
                         // Clone Project
-                        row = $('<div class="hide form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-clone"></div>').appendTo(container);
-                        $('<label for="projects-dialog-screen-create-project-repo">'+RED._("projects.create.git-url")+'</label>').appendTo(row);
-                        projectRepoInput = $('<input id="projects-dialog-screen-create-project-repo" type="text" placeholder="https://git.example.com/path/my-project.git"></input>').appendTo(row);
-                        $('<label id="projects-dialog-screen-create-project-repo-label" class="projects-edit-form-sublabel"><small>'+RED._("projects.create.protocols")+'</small></label>').appendTo(row);
+                        row = $('<div class="hide form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(container);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo">'+RED._("projects.create.git-url")+'</label>').appendTo(row);
+                        projectRepoInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo" type="text" placeholder="https://git.example.com/path/my-project.git"></input>').appendTo(row);
+                        $('<label id="red-ui-projects-dialog-screen-create-project-repo-label" class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.create.protocols")+'</small></label>').appendTo(row);
 
                         var projectRepoChanged = false;
                         var lastProjectRepo = "";
@@ -1338,7 +1338,7 @@ RED.projects = (function() {
                             projectRepoChanged = true;
                             var repo = $(this).val();
                             if (lastProjectRepo !== repo) {
-                                $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.protocols"));
+                                $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.protocols"));
                             }
                             lastProjectRepo = repo;
 
@@ -1355,26 +1355,26 @@ RED.projects = (function() {
                         });
 
 
-                        var cloneAuthRows = $('<div class="hide projects-dialog-screen-create-row projects-dialog-screen-create-row-clone"></div>').hide().appendTo(container);
-                        row = $('<div class="form-row projects-dialog-screen-create-row-auth-error"></div>').hide().appendTo(cloneAuthRows);
+                        var cloneAuthRows = $('<div class="hide red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').hide().appendTo(container);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row-auth-error"></div>').hide().appendTo(cloneAuthRows);
                         $('<div><i class="fa fa-warning"></i> '+RED._("projects.create.auth-failed")+'</div>').appendTo(row);
 
                         // Repo credentials - username/password ----------------
-                        row = $('<div class="hide form-row projects-dialog-screen-create-row-creds"></div>').hide().appendTo(cloneAuthRows);
+                        row = $('<div class="hide form-row red-ui-projects-dialog-screen-create-row-creds"></div>').hide().appendTo(cloneAuthRows);
 
                         var subrow = $('<div style="width: calc(50% - 10px); display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-user">'+RED._("projects.create.username")+'</label>').appendTo(subrow);
-                        projectRepoUserInput = $('<input id="projects-dialog-screen-create-project-repo-user" type="text"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-user">'+RED._("projects.create.username")+'</label>').appendTo(subrow);
+                        projectRepoUserInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-user" type="text"></input>').appendTo(subrow);
 
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-pass">'+RED._("projects.create.password")+'</label>').appendTo(subrow);
-                        projectRepoPasswordInput = $('<input id="projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-pass">'+RED._("projects.create.password")+'</label>').appendTo(subrow);
+                        projectRepoPasswordInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
                         // -----------------------------------------------------
 
                         // Repo credentials - key/passphrase -------------------
-                        row = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-sshkey"></div>').hide().appendTo(cloneAuthRows);
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').hide().appendTo(cloneAuthRows);
                         subrow = $('<div style="width: calc(50% - 10px); display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.create.ssh-key")+'</label>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.create.ssh-key")+'</label>').appendTo(subrow);
                         projectRepoSSHKeySelect = $("<select>",{style:"width: 100%"}).appendTo(subrow);
 
                         $.getJSON("settings/user/keys", function(data) {
@@ -1394,16 +1394,16 @@ RED.projects = (function() {
                             }
                         });
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
-                        $('<label for="projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.create.passphrase")+'</label>').appendTo(subrow);
-                        projectRepoPassphrase = $('<input id="projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
+                        $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.create.passphrase")+'</label>').appendTo(subrow);
+                        projectRepoPassphrase = $('<input id="red-ui-projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
 
-                        subrow = $('<div class="form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
-                        var sshwarningRow = $('<div class="projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
+                        subrow = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
+                        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) {
                             e.preventDefault();
-                            $('#projects-dialog-cancel').trigger("click");
+                            $('#red-ui-projects-dialog-cancel').trigger("click");
                             RED.userSettings.show('gitconfig');
                             setTimeout(function() {
                                 $("#user-settings-gitconfig-add-key").trigger("click");
@@ -1413,7 +1413,7 @@ RED.projects = (function() {
 
 
                         // Secret - clone
-                        row = $('<div class="hide form-row projects-dialog-screen-create-row projects-dialog-screen-create-row-clone"></div>').appendTo(container);
+                        row = $('<div class="hide form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(container);
                         $('<label>'+RED._("projects.create.credentials-encryption-key")+'</label>').appendTo(row);
                         projectSecretInput = $('<input type="password"></input>').appendTo(row);
 
@@ -1428,7 +1428,7 @@ RED.projects = (function() {
                             if ((options.screen||"empty") !== "open") {
                                 projectNameInput.trigger("focus");
                             } else {
-                                $("#projects-dialog-project-list-search").trigger("focus");
+                                $("#red-ui-projects-dialog-project-list-search").trigger("focus");
                             }
                         },50);
                         return container;
@@ -1442,19 +1442,19 @@ RED.projects = (function() {
                         }
                         return [
                             {
-                                id: "projects-dialog-cancel",
+                                id: "red-ui-projects-dialog-cancel",
                                 text: RED._("common.label.cancel"),
                                 click: function() {
                                     $( this ).dialog( "close" );
                                 }
                             },
                             {
-                                id: "projects-dialog-create",
+                                id: "red-ui-projects-dialog-create",
                                 text: initialLabel,
                                 class: "primary disabled",
                                 disabled: true,
                                 click: function() {
-                                    var projectType = $(".projects-dialog-screen-create-type.selected").data('type');
+                                    var projectType = $(".red-ui-projects-dialog-screen-create-type.selected").data('type');
                                     var projectData = {
                                         name: projectNameInput.val(),
                                     }
@@ -1518,8 +1518,8 @@ RED.projects = (function() {
                                         })
                                     }
 
-                                    $(".projects-dialog-screen-create-row-auth-error").hide();
-                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.protocols"));
+                                    $(".red-ui-projects-dialog-screen-create-row-auth-error").hide();
+                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.protocols"));
 
                                     projectRepoUserInput.removeClass("input-error");
                                     projectRepoPasswordInput.removeClass("input-error");
@@ -1546,18 +1546,18 @@ RED.projects = (function() {
                                                 },
                                                 'git_connection_failed': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.con-failed"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.con-failed"));
                                                 },
                                                 'git_not_a_repository': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.not-git"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.not-git"));
                                                 },
                                                 'git_repository_not_found': function(error) {
                                                     projectRepoInput.addClass("input-error");
-                                                    $("#projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.no-resource"));
+                                                    $("#red-ui-projects-dialog-screen-create-project-repo-label small").text(RED._("projects.create.no-resource"));
                                                 },
                                                 'git_auth_failed': function(error) {
-                                                    $(".projects-dialog-screen-create-row-auth-error").show();
+                                                    $(".red-ui-projects-dialog-screen-create-row-auth-error").show();
 
                                                     projectRepoUserInput.addClass("input-error");
                                                     projectRepoPasswordInput.addClass("input-error");
@@ -1695,11 +1695,11 @@ RED.projects = (function() {
     function createProjectList(options) {
         options = options||{};
         var height = options.height || "300px";
-        var container = $('<div></div>',{class:"projects-dialog-project-list-container" });
+        var container = $('<div></div>',{class:"red-ui-projects-dialog-project-list-container" });
         var filterTerm = "";
 
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(container);
-        var searchInput = $('<input id="projects-dialog-project-list-search" type="text" placeholder="'+RED._("projects.create-project-list.search")+'">').appendTo(searchDiv).searchBox({
+        var searchInput = $('<input id="red-ui-projects-dialog-project-list-search" type="text" placeholder="'+RED._("projects.create-project-list.search")+'">').appendTo(searchDiv).searchBox({
             //data-i18n="[placeholder]menu.label.searchInput"
             delay: 200,
             change: function() {
@@ -1781,7 +1781,7 @@ RED.projects = (function() {
         searchInput.i18n();
 
         var ensureSelectedIsVisible = function() {
-            var selectedEntry = list.find(".projects-dialog-project-list-entry.selected").parent().parent();
+            var selectedEntry = list.find(".red-ui-projects-dialog-project-list-entry.selected").parent().parent();
             if (selectedEntry.length === 1) {
                 var scrollWindow = listContainer;
                 var scrollHeight = scrollWindow.height();
@@ -1796,19 +1796,19 @@ RED.projects = (function() {
             }
         }
 
-        var listContainer = $('<div></div>',{class:"projects-dialog-project-list-inner-container" }).appendTo(container);
+        var listContainer = $('<div></div>',{class:"red-ui-projects-dialog-project-list-inner-container" }).appendTo(container);
 
-        var list = $('<ol>',{class:"projects-dialog-project-list"}).appendTo(listContainer).editableList({
+        var list = $('<ol>',{class:"red-ui-projects-dialog-project-list"}).appendTo(listContainer).editableList({
             addButton: false,
             height:"auto",
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var header = $('<div></div>',{class:"projects-dialog-project-list-entry"}).appendTo(row);
-                $('<span class="projects-dialog-project-list-entry-icon"><i class="fa fa-archive"></i></span>').appendTo(header);
-                $('<span class="projects-dialog-project-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
+                var header = $('<div></div>',{class:"red-ui-projects-dialog-project-list-entry"}).appendTo(row);
+                $('<span class="red-ui-projects-dialog-project-list-entry-icon"><i class="fa fa-archive"></i></span>').appendTo(header);
+                $('<span class="red-ui-projects-dialog-project-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
                 if (activeProject && activeProject.name === entry.name) {
                     header.addClass("projects-list-entry-current");
-                    $('<span class="projects-dialog-project-list-entry-current">'+RED._("projects.create-project-list.current")+'</span>').appendTo(header);
+                    $('<span class="red-ui-projects-dialog-project-list-entry-current">'+RED._("projects.create-project-list.current")+'</span>').appendTo(header);
                     if (options.canSelectActive === false) {
                         // active project cannot be selected; so skip the rest
                         return
@@ -1817,7 +1817,7 @@ RED.projects = (function() {
 
                 header.addClass("selectable");
 
-                var tools = $('<div class="projects-dialog-project-list-entry-tools"></div>').appendTo(header);
+                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>')
                     .appendTo(tools)
                     .on("click", function(e) {
@@ -1837,7 +1837,7 @@ RED.projects = (function() {
 
 
                 row.on("click", function(evt) {
-                    $('.projects-dialog-project-list-entry').removeClass('selected');
+                    $('.red-ui-projects-dialog-project-list-entry').removeClass('selected');
                     header.addClass('selected');
                     selectedListItem = row.parent();
                     if (options.select) {
@@ -1938,8 +1938,8 @@ RED.projects = (function() {
 
         var start = Date.now();
         // TODO: this is specific to the dialog-based requests
-        $(".projects-dialog-spinner").show();
-        $("#projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","hidden")
+        $(".red-ui-component-spinner").show();
+        $("#red-ui-projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","hidden")
         if (body) {
             options.data = JSON.stringify(body);
             options.contentType = "application/json; charset=utf-8";
@@ -2066,8 +2066,8 @@ RED.projects = (function() {
             delta = Math.max(0,500-delta);
             setTimeout(function() {
                 // dialogBody.show();
-                $(".projects-dialog-spinner").hide();
-                $("#projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","")
+                $(".red-ui-component-spinner").hide();
+                $("#red-ui-projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","")
                 if (resultCallback) {
                     resultCallback(resultCallbackArgs)
                 }
@@ -2080,7 +2080,7 @@ RED.projects = (function() {
         var branchFilterCreateItem;
         var branches = [];
         var branchPrefix = "";
-        var container = $('<div class="projects-branch-list">').appendTo(options.container);
+        var container = $('<div class="red-ui-projects-branch-list">').appendTo(options.container);
 
         var branchFilter = $('<input type="text">').attr('placeholder',options.placeholder).appendTo(container).searchBox({
             delay: 200,
@@ -2097,7 +2097,7 @@ RED.projects = (function() {
                         branchFilterCreateItem.removeClass("input-error");
                         branchFilterCreateItem.find("i").removeClass("fa-warning").addClass("fa-code-fork");
                     }
-                    branchFilterCreateItem.find(".sidebar-version-control-branch-list-entry-create-name").text(branchPrefix+branchFilterTerm);
+                    branchFilterCreateItem.find(".red-ui-sidebar-vc-branch-list-entry-create-name").text(branchPrefix+branchFilterTerm);
                 }
                 branchList.editableList("filter");
             }
@@ -2107,12 +2107,12 @@ RED.projects = (function() {
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="sidebar-version-control-branch-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-sidebar-vc-branch-list-entry">').appendTo(row);
                 if (!entry.hasOwnProperty('commit')) {
                     branchFilterCreateItem = container;
                     $('<i class="fa fa-code-fork"></i>').appendTo(container);
                     $('<span>').text(RED._("projects.create-branch-list.create")+":").appendTo(container);
-                    $('<div class="sidebar-version-control-branch-list-entry-create-name" style="margin-left: 10px;">').text(entry.name).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-branch-list-entry-create-name" style="margin-left: 10px;">').text(entry.name).appendTo(container);
                 } else {
                     $('<i class="fa fa-code-fork"></i>').appendTo(container);
                     $('<span>').text(entry.name).appendTo(container);
@@ -2164,7 +2164,7 @@ RED.projects = (function() {
                 branchFilter.searchBox("value","");
                 branchList.editableList('empty');
                 var start = Date.now();
-                var spinner = addSpinnerOverlay(container).addClass("projects-dialog-spinner-contain");
+                var spinner = addSpinnerOverlay(container).addClass("red-ui-component-spinner-contain");
                 if (options.remote) {
                     branchPrefix = options.remote()+"/";
                 } else {
@@ -2212,12 +2212,12 @@ RED.projects = (function() {
     }
 
     function addSpinnerOverlay(container) {
-        var spinner = $('<div class="projects-dialog-spinner"><img src="red/images/spin.svg"/></div>').appendTo(container);
+        var spinner = $('<div class="red-ui-component-spinner"><img src="red/images/spin.svg"/></div>').appendTo(container);
         return spinner;
     }
 
     function init() {
-        dialog = $('<div id="projects-dialog" class="hide node-red-dialog projects-edit-form"><form class="form-horizontal"></form><div class="projects-dialog-spinner hide"><img src="red/images/spin.svg"/></div></div>')
+        dialog = $('<div id="red-ui-projects-dialog" class="hide node-red-dialog red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
             .appendTo("#red-ui-editor")
             .dialog({
                 modal: true,
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 81aedfe7f..b86098c9e 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
@@ -115,7 +115,7 @@ RED.sidebar.versionControl = (function() {
     }
 
     function createChangeEntry(row, entry, status, state) {
-        row.addClass("sidebar-version-control-change-entry");
+        row.addClass("red-ui-sidebar-vc-change-entry");
         var container = $('<div>').appendTo(row);
         if (entry.label) {
             row.addClass('node-info-none');
@@ -145,7 +145,7 @@ RED.sidebar.versionControl = (function() {
             });
         var label = $('<span>').appendTo(entryLink);
 
-        var entryTools = $('<div class="sidebar-version-control-change-entry-tools">').appendTo(row);
+        var entryTools = $('<div class="red-ui-sidebar-vc-change-entry-tools">').appendTo(row);
         var bg;
         var revertButton;
         if (state === 'unstaged') {
@@ -155,7 +155,7 @@ RED.sidebar.versionControl = (function() {
                 .on("click", function(evt) {
                     evt.preventDefault();
 
-                    var spinner = utils.addSpinnerOverlay(container).addClass('projects-dialog-spinner-contain');
+                    var spinner = utils.addSpinnerOverlay(container).addClass('red-ui-component-spinner-contain');
                     var notification = RED.notify(RED._("sidebar.project.versionControl.revert",{file:entry.file}), {
                         type: "warning",
                         modal: true,
@@ -306,8 +306,8 @@ RED.sidebar.versionControl = (function() {
         RED.events.on("login",function() {
             refresh(true);
         });
-        sidebarContent = $('<div>', {class:"sidebar-version-control"});
-        var stackContainer = $("<div>",{class:"sidebar-version-control-stack"}).appendTo(sidebarContent);
+        sidebarContent = $('<div>', {class:"red-ui-sidebar-vc"});
+        var stackContainer = $("<div>",{class:"red-ui-sidebar-vc-stack"}).appendTo(sidebarContent);
         sections = RED.stack.create({
             container: stackContainer,
             fill: true,
@@ -334,8 +334,8 @@ RED.sidebar.versionControl = (function() {
         emptyStagedItem = { label: RED._("sidebar.project.versionControl.none") };
         emptyMergedItem = { label: RED._("sidebar.project.versionControl.conflictResolve") };
 
-        var unstagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
-        var header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.localFiles")+'</div>').appendTo(unstagedContent);
+        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>')
             .appendTo(header)
             .on("click", function(evt) {
@@ -365,9 +365,9 @@ RED.sidebar.versionControl = (function() {
 
         })
 
-        unmergedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+        unmergedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
 
-        header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.unmergedChanges")+'</div>').appendTo(unmergedContent);
+        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>')
             .appendTo(bg)
@@ -429,9 +429,9 @@ RED.sidebar.versionControl = (function() {
         })
 
 
-        var stagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+        var stagedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
 
-        header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.changeToCommit")+'</div>').appendTo(stagedContent);
+        header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.changeToCommit")+'</div>').appendTo(stagedContent);
 
         bg = $('<div style="float: right"></div>').appendTo(header);
         var showCommitBox = function() {
@@ -488,14 +488,14 @@ RED.sidebar.versionControl = (function() {
             }
         })
 
-        commitBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
+        commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
 
         var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>')
             .appendTo(commitBox)
             .on("change keyup paste",function() {
                 submitCommitButton.prop('disabled',$(this).val().trim()==="");
             });
-        var commitToolbar = $('<div class="sidebar-version-control-slide-box-toolbar button-group">').appendTo(commitBox);
+        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>')
             .appendTo(commitToolbar)
@@ -519,7 +519,7 @@ RED.sidebar.versionControl = (function() {
             .appendTo(commitToolbar)
             .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('projects-dialog-spinner-sidebar');
+                var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('red-ui-component-spinner-sidebar');
                 var activeProject = RED.projects.getActiveProject();
                 RED.deploy.setDeployInflight(true);
                 utils.sendRequest({
@@ -565,9 +565,9 @@ RED.sidebar.versionControl = (function() {
             })
         RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshCommitHistory"))
 
-        var localBranchToolbar = $('<div class="sidebar-version-control-change-header" style="text-align: right;"></div>').appendTo(localHistory.content);
+        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="sidebar-version-control-local-branch"></span></button>')
+        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>')
             .appendTo(localBranchToolbar)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -587,12 +587,12 @@ 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="sidebar-version-control-repo-status-button">'+
-                                 '<span id="sidebar-version-control-repo-status-stats">'+
-                                    '<i class="fa fa-long-arrow-up"></i> <span id="sidebar-version-control-commits-ahead"></span> '+
-                                    '<i class="fa fa-long-arrow-down"></i> <span id="sidebar-version-control-commits-behind"></span>'+
+        var repoStatusButton = $('<button class="editor-button editor-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>'+
                                  '</span>'+
-                                 '<span id="sidebar-version-control-repo-status-auth-issue">'+
+                                 '<span id="red-ui-sidebar-vc-repo-status-auth-issue">'+
                                     '<i class="fa fa-warning"></i>'+
                                  '</span>'+
                                  '</button>')
@@ -606,7 +606,7 @@ RED.sidebar.versionControl = (function() {
                     localCommitListShade.show();
                     $(this).addClass('selected');
                     var activeProject = RED.projects.getActiveProject();
-                    $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
+                    $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
                     remoteBox.show();
 
                     setTimeout(function() {
@@ -623,9 +623,9 @@ RED.sidebar.versionControl = (function() {
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                row.addClass('sidebar-version-control-commit-entry');
+                row.addClass('red-ui-sidebar-vc-commit-entry');
                 if (entry.url) {
-                    row.addClass('sidebar-version-control-commit-more');
+                    row.addClass('red-ui-sidebar-vc-commit-more');
                     row.text("+ "+(entry.total-entry.totalKnown)+RED._("sidebar.project.versionControl.moreCommits"));
                     row.on("click", function(e) {
                         e.preventDefault();
@@ -648,21 +648,21 @@ RED.sidebar.versionControl = (function() {
                         }
                     });
                     var container = $('<div>').appendTo(row);
-                    $('<div class="sidebar-version-control-commit-subject">').text(entry.subject).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-subject">').text(entry.subject).appendTo(container);
                     if (entry.refs) {
-                        var refDiv = $('<div class="sidebar-version-control-commit-refs">').appendTo(container);
+                        var refDiv = $('<div class="red-ui-sidebar-vc-commit-refs">').appendTo(container);
                         entry.refs.forEach(function(ref) {
                             var label = ref;
                             if (/HEAD -> /.test(ref)) {
                                 label = ref.substring(8);
                             }
-                            $('<span class="sidebar-version-control-commit-ref">').text(label).appendTo(refDiv);
+                            $('<span class="red-ui-sidebar-vc-commit-ref">').text(label).appendTo(refDiv);
                         });
-                        row.addClass('sidebar-version-control-commit-head');
+                        row.addClass('red-ui-sidebar-vc-commit-head');
                     }
-                    $('<div class="sidebar-version-control-commit-sha">').text(entry.sha.substring(0,7)).appendTo(container);
-                    // $('<div class="sidebar-version-control-commit-user">').text(entry.author).appendTo(container);
-                    $('<div class="sidebar-version-control-commit-date">').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-sha">').text(entry.sha.substring(0,7)).appendTo(container);
+                    // $('<div class="red-ui-sidebar-vc-commit-user">').text(entry.author).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-date">').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container);
                 }
             }
         });
@@ -678,9 +678,9 @@ RED.sidebar.versionControl = (function() {
                 if (done) { done() }
             },200);
         }
-        var localBranchBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-top" style="top:30px;"></div>').hide().appendTo(localHistory.content);
+        var localBranchBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-top" style="top:30px;"></div>').hide().appendTo(localHistory.content);
 
-        $('<div class="sidebar-version-control-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox);
+        $('<div class="red-ui-sidebar-vc-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox);
 
         var localBranchList = utils.createBranchList({
             placeholder: RED._("sidebar.project.versionControl.createBranchPlaceholder"),
@@ -735,9 +735,9 @@ RED.sidebar.versionControl = (function() {
             }
         });
 
-        var remoteBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-top" style="top:30px"></div>').hide().appendTo(localHistory.content);
+        var remoteBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-top" style="top:30px"></div>').hide().appendTo(localHistory.content);
         var closeRemoteBox = function() {
-            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false);
+            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false);
             repoStatusButton.removeClass('selected')
             remoteBox.css("height","0");
             localCommitListShade.hide();
@@ -758,10 +758,10 @@ RED.sidebar.versionControl = (function() {
                 },200);
             }
         }
-        $('<div class="sidebar-version-control-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox);
+        $('<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="sidebar-version-control-repo-branch" class="sidebar-version-control-repo-action editor-button"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.remote")+': <span id="sidebar-version-control-remote-branch"></span></button>')
+        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>')
             .appendTo(remoteBranchRow)
             .on("click", function(evt) {
                 evt.preventDefault();
@@ -780,10 +780,10 @@ RED.sidebar.versionControl = (function() {
                 }
             });
 
-        $('<div id="sidebar-version-control-repo-toolbar-message" class="sidebar-version-control-slide-box-header" style="min-height: 100px;"></div>').appendTo(remoteBox);
+        $('<div id="red-ui-sidebar-vc-repo-toolbar-message" class="red-ui-sidebar-vc-slide-box-header" style="min-height: 100px;"></div>').appendTo(remoteBox);
 
 
-        var errorMessage = $('<div id="sidebar-version-control-repo-toolbar-error-message" class="sidebar-version-control-slide-box-header" style="min-height: 100px;"></div>').hide().appendTo(remoteBox);
+        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>')
@@ -791,7 +791,7 @@ RED.sidebar.versionControl = (function() {
             .on("click", function(e) {
                 e.preventDefault();
                 var activeProject = RED.projects.getActiveProject();
-                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain");
+                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
                 utils.sendRequest({
                     url: "projects/"+activeProject.name+"/branches/remote",
                     type: "GET",
@@ -824,7 +824,7 @@ RED.sidebar.versionControl = (function() {
                 });
             })
 
-        $('<div class="sidebar-version-control-slide-box-header" style="height: 20px;"><label id="sidebar-version-control-repo-toolbar-set-upstream-row" for="sidebar-version-control-repo-toolbar-set-upstream" class="hide"><input type="checkbox" id="sidebar-version-control-repo-toolbar-set-upstream"> '+RED._("sidebar.project.versionControl.setUpstreamBranch")+'</label></div>').appendTo(remoteBox);
+        $('<div class="red-ui-sidebar-vc-slide-box-header" style="height: 20px;"><label id="red-ui-sidebar-vc-repo-toolbar-set-upstream-row" for="red-ui-sidebar-vc-repo-toolbar-set-upstream" class="hide"><input type="checkbox" id="red-ui-sidebar-vc-repo-toolbar-set-upstream"> '+RED._("sidebar.project.versionControl.setUpstreamBranch")+'</label></div>').appendTo(remoteBox);
 
         var remoteBranchSubRow = $('<div style="height: 0;overflow:hidden; transition: height 0.2s ease-in-out;"></div>').hide().appendTo(remoteBranchRow);
         var remoteBranchList = utils.createBranchList({
@@ -837,20 +837,20 @@ RED.sidebar.versionControl = (function() {
             },
             container: remoteBranchSubRow,
             onselect: function(body) {
-                $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false);
-                $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',false);
-                $("#sidebar-version-control-remote-branch").text(body.name+(body.create?" *":""));
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false);
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',false);
+                $("#red-ui-sidebar-vc-remote-branch").text(body.name+(body.create?" *":""));
                 var activeProject = RED.projects.getActiveProject();
                 if (activeProject.git.branches.remote === body.name) {
                     delete activeProject.git.branches.remoteAlt;
                 } else {
                     activeProject.git.branches.remoteAlt = body.name;
                 }
-                $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
                 closeRemoteBranchBox(function() {
                     if (!body.create) {
                         var start = Date.now();
-                        var spinner = utils.addSpinnerOverlay($('#sidebar-version-control-repo-toolbar-message')).addClass("projects-dialog-spinner-contain");
+                        var spinner = utils.addSpinnerOverlay($('#red-ui-sidebar-vc-repo-toolbar-message')).addClass("red-ui-component-spinner-contain");
                         $.getJSON("projects/"+activeProject.name+"/branches/remote/"+body.name+"/status", function(result) {
                             setTimeout(function() {
                                 updateRemoteStatus(result.commits.ahead, result.commits.behind);
@@ -859,14 +859,14 @@ RED.sidebar.versionControl = (function() {
                         })
                     } else {
                         if (!activeProject.git.branches.remote) {
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch"));
-                            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',true);
-                            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',true);
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch"));
+                            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',true);
+                            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',true);
                         } else {
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch"));
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch"));
                         }
-                        $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                        $("#sidebar-version-control-repo-push").prop('disabled',false);
+                        $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-push").prop('disabled',false);
                     }
                 });
             }
@@ -875,11 +875,11 @@ RED.sidebar.versionControl = (function() {
 
         var row = $('<div style="margin-bottom: 5px;"></div>').appendTo(remoteBox);
 
-        $('<button id="sidebar-version-control-repo-push" class="sidebar-version-control-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 editor-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("projects-dialog-spinner-contain");
+                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) {
                     evt.preventDefault();
@@ -891,7 +891,7 @@ RED.sidebar.versionControl = (function() {
                 if (activeProject.git.branches.remoteAlt) {
                     url+="/"+activeProject.git.branches.remoteAlt;
                 }
-                var setUpstream = $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked');
+                var setUpstream = $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked');
                 if (setUpstream) {
                     url+="?u=true"
                 }
@@ -929,7 +929,7 @@ RED.sidebar.versionControl = (function() {
 
         var pullRemote = function(options) {
             options = options || {};
-            var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain");
+            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) {
                 evt.preventDefault();
@@ -1012,16 +1012,16 @@ RED.sidebar.versionControl = (function() {
                 spinner.remove();
             });
         }
-        $('<button id="sidebar-version-control-repo-pull" class="sidebar-version-control-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 editor-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();
                 pullRemote({
-                    setUpstream: $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked')
+                    setUpstream: $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked')
                 });
             });
 
-        $('<div class="component-shade sidebar-version-control-shade">').appendTo(sidebarContent);
+        $('<div class="component-shade red-ui-sidebar-vc-shade">').appendTo(sidebarContent);
 
         RED.sidebar.addTab({
             id: "version-control",
@@ -1068,7 +1068,7 @@ RED.sidebar.versionControl = (function() {
         } else {
             bulkChangeSpinner = utils.addSpinnerOverlay(stagedChangesList.parent());
         }
-        bulkChangeSpinner.addClass('projects-dialog-spinner-sidebar');
+        bulkChangeSpinner.addClass('red-ui-component-spinner-sidebar');
         var body = unstaged?{files:files}:undefined;
         utils.sendRequest({
             url: "projects/"+activeProject.name+"/stage",
@@ -1163,10 +1163,10 @@ RED.sidebar.versionControl = (function() {
         }
         isMerging = !!result.merging;
         if (isMerging) {
-            sidebarContent.addClass("sidebar-version-control-merging");
+            sidebarContent.addClass("red-ui-sidebar-vc-merging");
             unmergedContent.show();
         } else {
-            sidebarContent.removeClass("sidebar-version-control-merging");
+            sidebarContent.removeClass("red-ui-sidebar-vc-merging");
             unmergedContent.hide();
         }
         unstagedChangesList.editableList('removeItem',emptyStagedItem);
@@ -1299,52 +1299,52 @@ RED.sidebar.versionControl = (function() {
             $.getJSON(url,function(result) {
                 refreshFiles(result);
 
-                $('#sidebar-version-control-local-branch').text(result.branches.local);
-                $('#sidebar-version-control-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none"));
+                $('#red-ui-sidebar-vc-local-branch').text(result.branches.local);
+                $('#red-ui-sidebar-vc-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none"));
 
                 var commitsAhead = result.commits.ahead || 0;
                 var commitsBehind = result.commits.behind || 0;
 
                 if (activeProject.git.hasOwnProperty('remotes')) {
                     if (result.branches.hasOwnProperty("remoteError") && result.branches.remoteError.code !== 'git_remote_gone') {
-                        $("#sidebar-version-control-repo-status-auth-issue").show();
-                        $("#sidebar-version-control-repo-status-stats").hide();
-                        $('#sidebar-version-control-repo-branch').prop('disabled',true);
-                        $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                        $("#sidebar-version-control-repo-push").prop('disabled',true);
-                        $('#sidebar-version-control-repo-toolbar-message').hide();
-                        $('#sidebar-version-control-repo-toolbar-error-message').show();
+                        $("#red-ui-sidebar-vc-repo-status-auth-issue").show();
+                        $("#red-ui-sidebar-vc-repo-status-stats").hide();
+                        $('#red-ui-sidebar-vc-repo-branch').prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
+                        $('#red-ui-sidebar-vc-repo-toolbar-message').hide();
+                        $('#red-ui-sidebar-vc-repo-toolbar-error-message').show();
                     } else {
-                        $('#sidebar-version-control-repo-toolbar-message').show();
-                        $('#sidebar-version-control-repo-toolbar-error-message').hide();
+                        $('#red-ui-sidebar-vc-repo-toolbar-message').show();
+                        $('#red-ui-sidebar-vc-repo-toolbar-error-message').hide();
 
-                        $("#sidebar-version-control-repo-status-auth-issue").hide();
-                        $("#sidebar-version-control-repo-status-stats").show();
+                        $("#red-ui-sidebar-vc-repo-status-auth-issue").hide();
+                        $("#red-ui-sidebar-vc-repo-status-stats").show();
 
-                        $('#sidebar-version-control-repo-branch').prop('disabled',false);
+                        $('#red-ui-sidebar-vc-repo-branch').prop('disabled',false);
 
-                        $("#sidebar-version-control-repo-status-button").show();
+                        $("#red-ui-sidebar-vc-repo-status-button").show();
                         if (result.branches.hasOwnProperty('remote')) {
                             updateRemoteStatus(commitsAhead, commitsBehind);
                         } else {
-                            $('#sidebar-version-control-commits-ahead').text("");
-                            $('#sidebar-version-control-commits-behind').text("");
+                            $('#red-ui-sidebar-vc-commits-ahead').text("");
+                            $('#red-ui-sidebar-vc-commits-behind').text("");
 
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking"));
-                            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                            $("#sidebar-version-control-repo-push").prop('disabled',true);
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking"));
+                            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
                         }
                     }
                 } else {
-                    $("#sidebar-version-control-repo-status-button").hide();
+                    $("#red-ui-sidebar-vc-repo-status-button").hide();
                 }
                 refreshInProgress = false;
-                $('.sidebar-version-control-shade').hide();
+                $('.red-ui-sidebar-vc-shade').hide();
             }).fail(function() {
                 refreshInProgress = false;
             });
         } else {
-            $('.sidebar-version-control-shade').show();
+            $('.red-ui-sidebar-vc-shade').show();
             unstagedChangesList.editableList('empty');
             stagedChangesList.editableList('empty');
             unmergedChangesList.editableList('empty');
@@ -1353,31 +1353,31 @@ RED.sidebar.versionControl = (function() {
 
 
     function updateRemoteStatus(commitsAhead, commitsBehind) {
-        $('#sidebar-version-control-commits-ahead').text(commitsAhead);
-        $('#sidebar-version-control-commits-behind').text(commitsBehind);
+        $('#red-ui-sidebar-vc-commits-ahead').text(commitsAhead);
+        $('#red-ui-sidebar-vc-commits-behind').text(commitsBehind);
         if (isMerging) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged"));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged"));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead > 0 && commitsBehind === 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead}));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',false);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead}));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',false);
         } else if (commitsAhead === 0 && commitsBehind > 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind }));
-            $("#sidebar-version-control-repo-pull").prop('disabled',false);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind }));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead > 0 && commitsBehind > 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind1",{ count:commitsBehind })+
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind2",{ count:commitsAhead })+
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind3",{ count:commitsBehind }));
-            $("#sidebar-version-control-repo-pull").prop('disabled',false);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead === 0 && commitsBehind === 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate"));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate"));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         }
     }
     function show() {
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 fa028b3ef..c3159b887 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
@@ -872,9 +872,9 @@ RED.utils = (function() {
     }
 
     function addSpinnerOverlay(container,contain) {
-        var spinner = $('<div class="projects-dialog-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
+        var spinner = $('<div class="red-ui-component-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
         if (contain) {
-            spinner.addClass('projects-dialog-spinner-contain');
+            spinner.addClass('red-ui-component-spinner-contain');
         }
         return spinner;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index 8de9beabd..4d5a67f4d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -234,3 +234,49 @@ table {
 .show {
     display: block;
 }
+
+.red-ui-component-spinner {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
+    text-align: center;
+    padding: 40px;
+    background: white;
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em;
+    }
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        width: 80px;
+    }
+    &.red-ui-component-spinner-sidebar {
+        background: white;
+        padding:0;
+        img {
+            width: 40px;
+        }
+    }
+    &.projects-version-control-spinner-sidebar {
+        background: white;
+        padding:0;
+        img {
+            width: 20px;
+        }
+    }
+
+    &.red-ui-component-spinner-contain {
+        padding: 0;
+        img {
+            width: auto;
+            height: 100%;
+            max-height: 50px;
+        }
+    }
+}
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 df72e678e..8a773bd43 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
@@ -14,20 +14,20 @@
  * limitations under the License.
  **/
 
-#projects-dialog {
+#red-ui-projects-dialog {
     .red-ui-editableList-container {
         padding: 0px;
     }
 
 }
-#project-settings-tab-settings {
+#red-ui-project-settings-tab-settings {
     overflow-y: scroll;
 }
-.sidebar-version-control-shade {
+.red-ui-sidebar-vc-shade {
     background: #f3f3f3;
 }
 
-.projects-edit-form form {
+.red-ui-projects-edit-form form {
     margin: 0;
     .form-row {
         margin-bottom: 15px;
@@ -35,7 +35,7 @@
             color: #555;
             width: 100%;
             display: block;
-            &.projects-edit-form-inline-label {
+            &.red-ui-projects-edit-form-inline-label {
                 font-weight: normal;
                 color: inherit;
                 width: auto;
@@ -51,67 +51,22 @@
     }
 
 }
-.projects-edit-form-sublabel {
+.red-ui-projects-edit-form-sublabel {
     color: #999;
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
 }
-.project-settings-tab-pane {
-    & * .projects-edit-form-sublabel {
+.red-ui-project-settings-tab-pane {
+    & * .red-ui-projects-edit-form-sublabel {
         margin-right: 50px;
         margin-top: -10px !important;
         margin-bottom: 5px;
     }
 }
-.projects-dialog-spinner {
-    position: absolute;
-    top: 1px;
-    bottom: 1px;
-    left: 1px;
-    right: 1px;
-    text-align: center;
-    padding: 40px;
-    background: white;
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-      margin-right: -0.25em;
-    }
-    img {
-        display: inline-block;
-        vertical-align: middle;
-        width: 80px;
-    }
-    &.projects-dialog-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 40px;
-        }
-    }
-    &.projects-version-control-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 20px;
-        }
-    }
 
-    &.projects-dialog-spinner-contain {
-        padding: 0;
-        img {
-            width: auto;
-            height: 100%;
-            max-height: 50px;
-        }
-    }
-
-}
-.projects-dialog-screen-start {
-    .projects-dialog-screen-start-hero {
+.red-ui-projects-dialog-screen-start {
+    .red-ui-projects-dialog-screen-start-hero {
         // background: url(https://nodered.org/images/title-wave.png) no-repeat 0% 100% #8f0000;
         // background-size: contain;
         text-align: center;
@@ -126,7 +81,7 @@
             font-weight: normal;
         }
     }
-    .projects-dialog-screen-start-body {
+    .red-ui-projects-dialog-screen-start-body {
         min-height: 400px;
         line-height: 1.6em;
         p {
@@ -156,9 +111,9 @@
         text-align: center;
     }
 }
-.projects-dialog-screen-create {
+.red-ui-projects-dialog-screen-create {
     min-height: 500px;
-    button.projects-dialog-screen-create-type {
+    button.red-ui-projects-dialog-screen-create-type {
         height: auto;
         padding: 10px;
     }
@@ -167,14 +122,14 @@
     }
 }
 
-.projects-dialog-screen-secret {
+.red-ui-projects-dialog-screen-secret {
     min-height: auto;
 }
-.projects-dialog-project-list-container {
+.red-ui-projects-dialog-project-list-container {
     border: 1px solid $secondary-border-color;
     border-radius: 2px;
 }
-.projects-dialog-project-list-inner-container {
+.red-ui-projects-dialog-project-list-inner-container {
     height: 300px;
     overflow-y: scroll;
     position:relative;
@@ -182,12 +137,12 @@
         border: none;
     }
 }
-.projects-dialog-project-list {
+.red-ui-projects-dialog-project-list {
     li {
         padding: 0 !important;
     }
 }
-.projects-dialog-project-list-entry {
+.red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
@@ -207,7 +162,7 @@
             // border-right-color: #aaa;
         }
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
         i {
             color: #ccc;
             font-size: 2em;
@@ -223,20 +178,20 @@
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
          margin: 0 10px 0 5px;
     }
-    .projects-dialog-project-list-entry-name {
+    .red-ui-projects-dialog-project-list-entry-name {
         font-size: 1.2em;
     }
-    .projects-dialog-project-list-entry-current {
+    .red-ui-projects-dialog-project-list-entry-current {
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
         color: #999;
         padding-top: 4px;
     }
-    .projects-dialog-project-list-entry-tools {
+    .red-ui-projects-dialog-project-list-entry-tools {
         position: absolute;
         top: 16px;
         right: 30px;
@@ -244,16 +199,16 @@
         color: #999;
     }
     &:hover {
-        .projects-dialog-project-list-entry-tools {
+        .red-ui-projects-dialog-project-list-entry-tools {
             display: block;
         }
     }
 }
-.projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
+.red-ui-projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
     background: #fff !important;
     color: #666 !important;
 }
-.projects-dialog-screen-input-status {
+.red-ui-projects-dialog-screen-input-status {
     text-align: right;
     position: absolute;
     top: 2px;
@@ -263,10 +218,10 @@
     color: #999;
 }
 
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     height: 100%;
 }
-.sidebar-version-control-stack-info {
+.red-ui-sidebar-vc-stack-info {
     height: 100px;
     box-sizing: border-box;
     border-bottom: 1px solid $secondary-border-color;
@@ -275,7 +230,7 @@
         color: #999;
     }
 }
-.sidebar-version-control-stack {
+.red-ui-sidebar-vc-stack {
     position: absolute;
     top: 0px;
     bottom: 0;
@@ -290,7 +245,7 @@
     }
 }
 
-#project-settings-tab-deps {
+#red-ui-project-settings-tab-deps {
     .red-ui-editableList-container {
         padding: 0;
     }
@@ -326,7 +281,7 @@
 }
 
 
-.project-settings-tab-pane {
+.red-ui-project-settings-tab-pane {
     position: absolute;
     top:0;
     left:0;
@@ -335,7 +290,7 @@
     overflow-y: auto;
     padding: 8px 20px 20px;
 }
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     .red-ui-editableList-container {
         background: #f9f9f9;
         padding: 0;
@@ -350,7 +305,7 @@
     }
 }
 
-.sidebar-version-control-change-container {
+.red-ui-sidebar-vc-change-container {
     position: relative;
     height: 50%;
     box-sizing: border-box;
@@ -359,12 +314,12 @@
         // border-bottom: 1px solid $primary-border-color;
     }
 }
-.sidebar-version-control-merging {
-    .sidebar-version-control-change-container {
+.red-ui-sidebar-vc-merging {
+    .red-ui-sidebar-vc-change-container {
         height: 33%;
     }
 }
-.sidebar-version-control-slide-box {
+.red-ui-sidebar-vc-slide-box {
     position:absolute;
     bottom: 0;
     left:0;
@@ -374,7 +329,7 @@
     background: #f6f6f6;
     box-sizing: border-box;
     overflow: hidden;
-    &.sidebar-version-control-slide-box-top {
+    &.red-ui-sidebar-vc-slide-box-top {
         z-index: 4;
         top: 0px;
         left: auto;
@@ -391,7 +346,7 @@
         box-sizing: border-box;
 
     }
-    &.sidebar-version-control-slide-box-bottom {
+    &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
         border-top: 1px solid $secondary-border-color;
     }
@@ -406,7 +361,7 @@
     }
 
 }
-.projects-branch-list {
+.red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
         border-top: 1px solid $secondary-border-color;
@@ -433,7 +388,7 @@
         }
     }
 }
-.uneditable-input .projects-branch-list {
+.uneditable-input .red-ui-projects-branch-list {
     .red-ui-editableList {
         border-left: none;
         border-bottom: none;
@@ -444,15 +399,15 @@
         border-right: none;
     }
 }
-.sidebar-version-control-slide-box-header {
+.red-ui-sidebar-vc-slide-box-header {
     margin-bottom: 10px;
 }
 
-.sidebar-version-control-slide-box-toolbar {
+.red-ui-sidebar-vc-slide-box-toolbar {
     padding: 0 20px;
     text-align: right;
 }
-.sidebar-version-control-branch-list-entry {
+.red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
     color: #666;
     cursor: pointer;
@@ -482,7 +437,7 @@
     }
 }
 
-.sidebar-version-control-change-entry {
+.red-ui-sidebar-vc-change-entry {
     height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -496,7 +451,7 @@
             pointer-events: none;
         }
     }
-    .sidebar-version-control-change-entry-tools {
+    .red-ui-sidebar-vc-change-entry-tools {
         position: absolute;
         top: 4px;
         right: 4px;
@@ -507,7 +462,7 @@
     }
 
     &:hover {
-        .sidebar-version-control-change-entry-tools {
+        .red-ui-sidebar-vc-change-entry-tools {
             display: block;
         }
     }
@@ -519,7 +474,7 @@
     }
 }
 
-.sidebar-version-control-commit-entry {
+.red-ui-sidebar-vc-commit-entry {
     min-height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -530,13 +485,13 @@
         background: #eee;
     }
 }
-.sidebar-version-control-commit-more {
+.red-ui-sidebar-vc-commit-more {
     color: #999;
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
-.sidebar-version-control-commit-sha {
+.red-ui-sidebar-vc-commit-sha {
     float: right;
     font-family: monospace;
     color: #c38888;
@@ -544,13 +499,13 @@
     font-size: 0.85em;
     margin-left: 5px;
 }
-.sidebar-version-control-commit-subject {
+.red-ui-sidebar-vc-commit-subject {
     color: #666;
 }
-.sidebar-version-control-commit-refs {
+.red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
-.sidebar-version-control-commit-ref {
+.red-ui-sidebar-vc-commit-ref {
     color: #aaa;
     font-size: 0.7em;
     border: 1px solid #ccc;
@@ -558,18 +513,18 @@
     padding: 2px 5px;
     margin-right: 5px;
 }
-.sidebar-version-control-commit-date {
+.red-ui-sidebar-vc-commit-date {
     color: #999;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-user {
+.red-ui-sidebar-vc-commit-user {
     float: right;
     color: #999;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-head {
+.red-ui-sidebar-vc-commit-head {
 }
-.sidebar-version-control-change-header {
+.red-ui-sidebar-vc-change-header {
     color: #666;
     background: #f6f6f6;
     padding: 4px 10px;
@@ -581,22 +536,22 @@
         transition: all 0.2s ease-in-out;
     }
 }
-.sidebar-version-control-repo-toolbar {
+.red-ui-sidebar-vc-repo-toolbar {
     color: #666;
     background: #f6f6f6;
     padding: 10px;
     box-sizing: border-box;
 }
 
-.sidebar-version-control-repo-count {
+.red-ui-sidebar-vc-repo-count {
     margin-right: 8px;
     display: none;
 }
-.sidebar-version-control-repo-action  {
+.red-ui-sidebar-vc-repo-action  {
     text-align: left;
     width: 100%;
 }
-.sidebar-version-control-repo-sub-action  {
+.red-ui-sidebar-vc-repo-sub-action  {
     width: calc(50% - 5px);
     margin-right: 5px;
     &:not(:first-child) {
@@ -605,13 +560,13 @@
     }
 }
 
-.project-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
+.red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
     border-top: 1px solid $secondary-border-color;
 
 }
-.red-ui-editableList-container .projects-dialog-file-list {
+.red-ui-editableList-container .red-ui-projects-dialog-file-list {
     .red-ui-editableList-border {
         border: none;
     }
@@ -623,7 +578,7 @@
         padding: 0;
     }
 }
-.projects-dialog-file-list-entry {
+.red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
     border-left: 2px solid #fff;
     border-right: 2px solid #fff;
@@ -661,7 +616,7 @@
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-file-list-entry-folder {
+    .red-ui-projects-dialog-file-list-entry-folder {
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
@@ -670,19 +625,19 @@
 
          }
     }
-    .projects-dialog-file-list-entry-file {
+    .red-ui-projects-dialog-file-list-entry-file {
          margin: 0 10px 0 20px;
     }
-    .projects-dialog-file-list-entry-name {
+    .red-ui-projects-dialog-file-list-entry-name {
         font-size: 1em;
     }
     &.expanded .fa-angle-right {
         transform: rotate(90deg);
     }
 }
-.projects-dialog-file-list-entry-file-type-git { color: #999 }
+.red-ui-projects-dialog-file-list-entry-file-type-git { color: #999 }
 
-.projects-dialog-remote-list {
+.red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
         padding: 0;
         li {
@@ -694,34 +649,34 @@
     }
 }
 
-.projects-dialog-sshkey-list {
+.red-ui-projects-dialog-sshkey-list {
     li {
         padding: 0 !important;
     }
-    &.projects-dialog-sshkey-list-small {
-        .projects-dialog-sshkey-list-entry {
+    &.red-ui-projects-dialog-sshkey-list-small {
+        .red-ui-projects-dialog-sshkey-list-entry {
             padding: 6px 0;
             i {
                 font-size: 1em;
             }
         }
-        .projects-dialog-sshkey-list-entry-name {
+        .red-ui-projects-dialog-sshkey-list-entry-name {
             font-size: 1em;
         }
-        .projects-dialog-sshkey-list-entry-current {
+        .red-ui-projects-dialog-sshkey-list-entry-current {
             margin-right: 10px;
             padding-top: 2px;
         }
     }
 }
 .red-ui-editableList-container {
-    .projects-dialog-sshkey-list {
+    .red-ui-projects-dialog-sshkey-list {
         li:last-child {
             border-bottom: 0px none;
         }
     }
 }
-.projects-dialog-sshkey-list-entry {
+.red-ui-projects-dialog-sshkey-list-entry {
     padding: 12px 0;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
@@ -755,26 +710,26 @@
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-sshkey-list-entry-icon {
+    .red-ui-projects-dialog-sshkey-list-entry-icon {
          margin: 0 10px 0 5px;
     }
-    .projects-dialog-sshkey-list-entry-name {
+    .red-ui-projects-dialog-sshkey-list-entry-name {
         font-size: 1.2em;
     }
-    .projects-dialog-sshkey-list-entry-current {
+    .red-ui-projects-dialog-sshkey-list-entry-current {
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
         color: #999;
         padding-top: 4px;
     }
-    .projects-dialog-sshkey-list-button-remove {
+    .red-ui-projects-dialog-sshkey-list-button-remove {
         position: absolute;
         right: 4px;
     }
 }
 
-div.projects-dialog-ssh-public-key {
+div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     padding: 15px 20px 0;
     pre {
@@ -788,11 +743,11 @@ div.projects-dialog-ssh-public-key {
     }
 }
 
-.projects-dialog-ssh-key-list {
+.red-ui-projects-dialog-ssh-key-list {
     li {
         padding: 0 !important;
     }
-    .projects-dialog-ssh-key-header {
+    .red-ui-projects-dialog-ssh-key-header {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
@@ -801,7 +756,7 @@ div.projects-dialog-ssh-public-key {
     }
 }
 
-.projects-dialog-list {
+.red-ui-projects-dialog-list {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
@@ -812,7 +767,7 @@ div.projects-dialog-ssh-public-key {
     }
 }
 
-.projects-dialog-list-entry {
+.red-ui-projects-dialog-list-entry {
     &.red-ui-search-empty {
         padding: 0;
     }
@@ -847,14 +802,14 @@ div.projects-dialog-ssh-public-key {
         margin-right: 10px;
     }
 }
-.projects-dialog-list-dialog {
+.red-ui-projects-dialog-list-dialog {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
     background: white;
     border-radius: 4px;
     border: 1px solid $secondary-border-color;
-    .projects-edit-form-sublabel {
+    .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         display: block !important;
         width: auto !important;
@@ -865,7 +820,7 @@ div.projects-dialog-ssh-public-key {
         clear: both;
     }
 
-    .projects-dialog-list-dialog-header {
+    .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
         background: #f3f3f3;
         margin-top: 0 !important;