From 432ed264c2ea33bbe2875abb0e9109e9fb931482 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 22 Jun 2020 20:39:41 +0100
Subject: [PATCH] Remove hardcoded css Fixes #2603

---
 .../editor-client/locales/en-US/editor.json   |  1 +
 .../src/js/ui/projects/projects.js            | 17 ++++----------
 .../editor-client/src/js/ui/subflow.js        | 22 ++++---------------
 .../editor-client/src/sass/editor.scss        | 12 +++++++++-
 .../editor-client/src/sass/projects.scss      | 20 +++++++++++++++++
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index 8531b16b1..309f9db89 100755
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/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",
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 462ad7575..39c9d81a9 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
@@ -1615,25 +1615,16 @@ RED.projects = (function() {
     }
 
     function deleteProject(row,name,done) {
-        var cover = $('<div>').css({
-            background:"white",
-            position:"absolute",
-            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>')
+        var cover = $('<div class="red-ui-projects-dialog-project-list-entry-delete-confirm"></div>').on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
+        $('<span>').text(RED._("projects.delete.confirm")).appendTo(cover);
+        $('<button 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();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index 683d5b829..f787c5375 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/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({
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box"
-                        }).appendTo(container);
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').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({
-                                "color":"#aaa",
-                                "padding-left": "4px"
-                            }).text("select types...").appendTo(input);
+                            $('<span class="red-ui-editor-subflow-env-input-type-placeholder"></span>').text(RED._("editor.selectType")).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({
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box",
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type">').css({
                             "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({
-                            "background":"white",
-                            "height":"100%",
-                            "box-sizing": "border-box"
-                        }).appendTo(container);
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
 
                         var input = $('<div class="placeholder-input">').appendTo(innerContainer);
                         $('<span><i class="fa fa-sort-numeric-asc"></i></span>').appendTo(input);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 9fb3cda07..4e0aca45b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -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 {
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 e08551297..e42125c23 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
@@ -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;
 }