🎨 [Frontend] Team Black feedback 20.06 (#5971)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -985,7 +985,10 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       this.getChildControl("side-panel-right-tabs").setSelection([this.__serviceOptionsPage]);
 
       const spacing = 8;
-      const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing*2));
+      const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
+        separator: "separator-vertical",
+        spacing: spacing*2
+      }));
 
       // INPUTS FORM
       if (node.isPropertyInitialized("propsForm") && node.getPropsForm()) {

services/static-webserver/client/source/class/osparc/file/FilePicker.js

@@ -464,15 +464,7 @@ qx.Class.define("osparc.file.FilePicker", {
     },
 
     __buildAppModeLayout: function() {
-      let msg = this.tr("In order to Select a File you have three options:");
-      const options = [
-        this.tr("- Upload a New File"),
-        this.tr("- Provide a File Link"),
-        this.tr("- Select a File from other ") + osparc.product.Utils.getStudyAlias()
-      ];
-      for (let i=0; i<options.length; i++) {
-        msg += "<br>" + options[i];
-      }
+      const msg = this.tr("In order to Select a File you have three options:");
       const intro = new qx.ui.basic.Label(msg).set({
         font: "text-16",
         rich: true

services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js

@@ -487,7 +487,8 @@ qx.Class.define("osparc.form.renderer.PropForm", {
         label: this.tr("Input"),
         icon: "@FontAwesome5Solid/plus/14",
         marginTop: 6,
-        allowGrowX: false
+        allowGrowX: false,
+        minWidth: 70
       });
       addPortButton.addListener("execute", () => this.__addInputPortButtonClicked());
       this._add(addPortButton, {

services/static-webserver/client/source/class/osparc/info/StudyUtils.js

@@ -190,7 +190,8 @@ qx.Class.define("osparc.info.StudyUtils", {
       const cb = new qx.ui.form.CheckBox().set({
         value: "disableServiceAutoStart" in devObj ? !devObj["disableServiceAutoStart"] : true,
         label: qx.locale.Manager.tr("Autostart services"),
-        toolTipText: qx.locale.Manager.tr("This will help opening and closing studies faster"),
+        font: "text-14",
+        toolTipText: qx.locale.Manager.tr("Disabling this will help opening and closing studies/projects faster"),
         iconPosition: "right"
       });
       cb.addListener("changeValue", e => {

services/static-webserver/client/source/class/osparc/notification/NotificationsContainer.js

@@ -29,6 +29,7 @@ qx.Class.define("osparc.notification.NotificationsContainer", {
       maxHeight: 250,
       backgroundColor: "background-main-3"
     });
+    osparc.utils.Utils.setIdToWidget(this, "notificationsContainer");
 
     const root = qx.core.Init.getApplication().getRoot();
     root.add(this, {
@@ -37,7 +38,6 @@ qx.Class.define("osparc.notification.NotificationsContainer", {
     });
 
     const notificationsContainer = this.__container = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));
-    osparc.utils.Utils.setIdToWidget(notificationsContainer, "notificationsContainer");
     const scrollContainer = new qx.ui.container.Scroll();
     scrollContainer.add(notificationsContainer);
     this._add(scrollContainer, {

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js

@@ -56,7 +56,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
   },
 
   statics: {
-    getDashedBorderSytle(isRight) {
+    getDashedBorderStyle(isRight) {
       const side = isRight ? "right" : "left";
       const borderStyle = {};
       borderStyle["background-image"] = `linear-gradient(to bottom, #3D3D3D 50%, rgba(255, 255, 255, 0) 0%)`;
@@ -273,7 +273,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
         allowGrowX: false,
         padding: [0, 6]
       });
-      inputOutputNodesLayout.getContentElement().setStyles(this.self().getDashedBorderSytle(isInput));
+      inputOutputNodesLayout.getContentElement().setStyles(this.self().getDashedBorderStyle(isInput));
       const title = new qx.ui.basic.Label(label).set({
         alignX: "center",
         margin: [15, 0],