🎨 [Frontend] Remove S4L's border and Enhance PO Center

services/static-webserver/client/source/class/osparc/data/model/IframeHandler.js

@@ -116,6 +116,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
 
     __initIFrame: function() {
       const iframe = new osparc.widget.PersistentIframe();
+      if (this.getNode().getKey().includes("s4l-ui")) {
+        iframe.getIframe().setAppearance("iframe-no-border");
+      }
       osparc.utils.Utils.setIdToWidget(iframe.getIframe(), "iframe_"+this.getNode().getNodeId());
       this.self().evalShowToolbar(iframe, this.getStudy());
       iframe.addListener("restart", () => this.restartIFrame(), this);

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

@@ -68,7 +68,7 @@ qx.Class.define("osparc.desktop.credits.BuyCreditsStepper", {
               const { paymentId, paymentFormUrl } = data;
               this.setPaymentId(paymentId)
               this.__iframe = new qx.ui.embed.Iframe(paymentFormUrl).set({
-                decorator: "no-border-2"
+                decorator: "no-border-0"
               });
               this.add(this.__iframe);
               this.setSelection([this.__iframe])

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

@@ -21,7 +21,7 @@ qx.Class.define("osparc.desktop.credits.PaymentGatewayWindow", {
   statics: {
     popUp: function(url, title, options) {
       const iframe = new qx.ui.embed.Iframe(url).set({
-        decorator: "no-border-2"
+        decorator: "no-border-0"
       })
       return osparc.ui.window.Window.popUpInWindow(iframe, title, options.width, options.height).set({
         clickAwayClose: false

services/static-webserver/client/source/class/osparc/po/UsersPending.js

@@ -105,6 +105,7 @@ qx.Class.define("osparc.po.UsersPending", {
           break;
         case "pending-users-layout": {
           const grid = new qx.ui.layout.Grid(15, 5);
+          grid.setColumnMaxWidth(2, 100); // date
           control = new qx.ui.container.Composite(grid);
           this.getChildControl("pending-users-container").add(control);
           break;
@@ -160,20 +161,26 @@ qx.Class.define("osparc.po.UsersPending", {
       pendingUsers.forEach(pendingUser => {
         grid.setRowAlign(row, "left", "middle");
 
-        pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.firstName + " " + pendingUser.lastName), {
+        const fullNameLabel = new qx.ui.basic.Label(pendingUser.firstName + " " + pendingUser.lastName).set({
+          selectable: true,
+        });
+        pendingUsersLayout.add(fullNameLabel, {
           row,
           column: 0,
         });
 
-        pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.email), {
+        const emailLabel = new qx.ui.basic.Label(pendingUser.email).set({
+          selectable: true,
+        });
+        pendingUsersLayout.add(emailLabel, {
           row,
           column: 1,
         });
 
         let date = null;
         switch (pendingUser.accountRequestStatus) {
           case "PENDING":
-            date = pendingUser.preRegistrationRequestedAt ? osparc.utils.Utils.formatDateAndTime(new Date(pendingUser.preRegistrationRequestedAt)) : "-";
+            date = pendingUser.preRegistrationCreated ? osparc.utils.Utils.formatDateAndTime(new Date(pendingUser.preRegistrationCreated)) : "-";
             break;
           default:
             date = pendingUser.accountRequestReviewedAt ? osparc.utils.Utils.formatDateAndTime(new Date(pendingUser.accountRequestReviewedAt)) : "-";

services/static-webserver/client/source/class/osparc/support/SupportCenter.js

@@ -40,10 +40,12 @@ qx.Class.define("osparc.support.SupportCenter", {
     });
 
     this.getChildControl("home-page");
-    this.getChildControl("conversations-page");
-    this.getChildControl("conversation-page");
-    this.getChildControl("home-button");
-    this.getChildControl("conversations-button");
+    if (osparc.store.Groups.getInstance().isSupportEnabled()) {
+      this.getChildControl("conversations-page");
+      this.getChildControl("conversation-page");
+      this.getChildControl("home-button");
+      this.getChildControl("conversations-button");
+    }
 
     this.__showHome();
   },

services/static-webserver/client/source/class/osparc/theme/Appearance.js

@@ -19,6 +19,15 @@ qx.Theme.define("osparc.theme.Appearance", {
   extend: osparc.theme.common.Appearance,
 
   appearances: {
+    "iframe-no-border": {
+      style: () => {
+        return {
+          backgroundColor: "transparent",
+          decorator: "no-border-0"
+        };
+      }
+    },
+
     "strong-ui": {
       style: () => {
         return {

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -265,9 +265,10 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "no-border-2": {
+    "no-border-0": {
       style: {
-        width: 0
+        width: 0,
+        color: "transparent"
       }
     },
 

services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js

@@ -359,9 +359,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
             break;
           }
           case "openSupport": {
-            if (osparc.store.Groups.getInstance().isSupportEnabled()) {
-              osparc.support.SupportCenter.openWindow();
-            }
+            osparc.support.SupportCenter.openWindow();
             break;
           }
         }