Remove hardcoded css

Fixes #2603

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -369,6 +369,7 @@
         "locale": "Select UI Language",
         "icon": "Icon",
         "inputType": "Input type",
+        "selectType": "select types...",
         "inputs" : {
             "input": "input",
             "select": "select",

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js

@@ -1615,25 +1615,16 @@ RED.projects = (function() {
     }
 
     function deleteProject(row,name,done) {
-        var cover = $('<div>').css({
+        var cover = $('<div class="red-ui-projects-dialog-project-list-entry-delete-confirm"></div>').on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
-            background:"white",
+        $('<span>').text(RED._("projects.delete.confirm")).appendTo(cover);
-            position:"absolute",
+        $('<button class="red-ui-button">'+RED._("common.label.cancel")+'</button>')
-            top:0,right:0,bottom:0,left:"100%",
-            overflow:"hidden",
-            padding: "5px 20px",
-            transition: "left 0.4s",
-            whitespace: "nowrap",
-            width:"1000px"
-        }).on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
-        $('<span>').css({"lineHeight":"40px"}).text(RED._("projects.delete.confirm")).appendTo(cover);
-        $('<button style="margin-left:20px" class="red-ui-button">'+RED._("common.label.cancel")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
                 cover.remove();
                 done(true);
             });
-        $('<button style="margin-left:20px" class="red-ui-button primary">'+RED._("common.label.delete")+'</button>')
+        $('<button class="red-ui-button primary">'+RED._("common.label.delete")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();

packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js

@@ -1165,11 +1165,7 @@ RED.subflow = (function() {
                     default: DEFAULT_ENV_TYPE_LIST,
                     valueLabel: function(container,value) {
                         container.css("padding",0);
-                        var innerContainer = $('<div>').css({
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box"
-                        }).appendTo(container);
 
                         var input = $('<div class="placeholder-input">').appendTo(innerContainer);
                         $('<span><i class="fa fa-i-cursor"></i></span>').appendTo(input);
@@ -1183,10 +1179,7 @@ RED.subflow = (function() {
                                 }
                             })
                         } else {
-                            $("<span>").css({
+                            $('<span class="red-ui-editor-subflow-env-input-type-placeholder"></span>').text(RED._("editor.selectType")).appendTo(input);
-                                "color":"#aaa",
-                                "padding-left": "4px"
-                            }).text("select types...").appendTo(input);
                         }
                     }
                 },
@@ -1195,10 +1188,7 @@ RED.subflow = (function() {
                     label: RED._("typedInput.type.cred"), icon:"fa fa-lock", showLabel: false,
                     valueLabel: function(container,value) {
                         container.css("padding",0);
-                        var innerContainer = $('<div>').css({
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type">').css({
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box",
                             "border-top-right-radius": "4px",
                             "border-bottom-right-radius": "4px"
                         }).appendTo(container);
@@ -1343,11 +1333,7 @@ RED.subflow = (function() {
                     label:RED._("editor.inputs.spinner"), icon:"fa fa-sort-numeric-asc", showLabel:false,
                     valueLabel: function(container,value) {
                         container.css("padding",0);
-                        var innerContainer = $('<div>').css({
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box"
-                        }).appendTo(container);
 
                         var input = $('<div class="placeholder-input">').appendTo(innerContainer);
                         $('<span><i class="fa fa-sort-numeric-asc"></i></span>').appendTo(input);

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -831,8 +831,18 @@ span.red-ui-editor-subflow-env-lang-icon {
     right: 4px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
-
 }
+
+.red-ui-editor-subflow-env-input-type {
+    background: $secondary-background;
+    height: 100%;
+    box-sizing: border-box;
+}
+.red-ui-editor-subflow-env-input-type-placeholder {
+    color: $tertiary-text-color;
+    padding-left: 4px;
+}
+
 // .red-ui-editor-subflow-ui-grid {
 //     width: 100%;
 //     .red-ui-editableList-container {

packages/node_modules/@node-red/editor-client/src/sass/projects.scss

@@ -265,6 +265,26 @@
         }
     }
 }
+.red-ui-projects-dialog-project-list-entry-delete-confirm {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 100%;
+    width: 1000px;
+    overflow: hidden;
+    padding: 5px 20px;
+    background: $secondary-background;
+    transition: left 0.4s;
+    white-space: nowrap;
+    > span {
+        line-height: 40px;
+    }
+    button {
+        margin-left: 20px;
+    }
+}
+
 .red-ui-projects-dialog-screen-create-type {
     position: relative;
 }