🐛 Various issue in the study cards (ITISFoundation#5613)

Author: jsaq007

services/static-webserver/client/source/class/osparc/auth/LoginPage.js

@@ -145,12 +145,21 @@ qx.Class.define("osparc.auth.LoginPage", {
     },
 
     _setBackgroundImage: function(backgroundImage) {
-      this.getContentElement().setStyles({
-        "background-image": backgroundImage,
-        "background-repeat": "no-repeat",
-        "background-size": "65% auto, 80% auto", // auto width, 85% height
-        "background-position": "left bottom, left -440px bottom -230px" // left bottom
-      });
+      if (osparc.product.Utils.getProductName().includes("s4l")) {
+        this.getContentElement().setStyles({
+          "background-image": backgroundImage,
+          "background-repeat": "no-repeat",
+          "background-size": "65% auto, 80% auto", // auto width, 85% height
+          "background-position": "left bottom, left -440px bottom -230px" // left bottom
+        });
+      } else {
+        this.getContentElement().setStyles({
+          "background-image": backgroundImage,
+          "background-repeat": "no-repeat",
+          "background-size": "50% auto", // 50% of the view width
+          "background-position": "left 10% center" // left bottom
+        });
+      }
     },
 
     _resetBackgroundImage: function() {

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -419,8 +419,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         uiModeIcon.set({
           source,
           toolTipText,
-          alignY: "bottom",
-          marginBottom: 10
+          alignY: "bottom"
         });
       }
     },

services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js

@@ -65,12 +65,6 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
         row: 3,
         column: 0
       },
-      VIEWER_MODE: {
-        row: 3,
-        column: 1,
-        rowSpan: 2,
-        colSpan: 1
-      },
       FOOTER: {
         row: 4,
         column: 0,
@@ -79,30 +73,29 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
       }
     },
     FPOS: {
-      STATUS: {
+      MODIFIED: {
         row: 0,
         column: 0,
         rowSpan: 1,
-        colSpan: 4
+        colSpan: 2
       },
-      MODIFIED: {
-        row: 1,
-        column: 0,
-        rowSpan: 1,
-        colSpan: 3
+      VIEWER_MODE: {
+        row: 0,
+        column: 3,
+        colSpan: 1
       },
       UPDATES: {
-        row: 1,
+        row: 0,
         column: 4,
         colSpan: 1
       },
       TSR: {
-        row: 3,
+        row: 1,
         column: 0,
         colSpan: 2
       },
       HITS: {
-        row: 3,
+        row: 1,
         column: 2,
         colSpan: 1
       }
@@ -282,8 +275,9 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           control = new qx.ui.basic.Image().set({
             alignY: "middle",
             textColor: "status_icon",
-            height: 12,
-            width: 12,
+            height: 13,
+            width: 13,
+            margin: [0, 1]
           });
           layout = this.getChildControl("subtitle");
           layout.set({

services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js

@@ -52,10 +52,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           break;
         case "workbench-mode":
           control = new qx.ui.basic.Image().set({
-            alignY: "middle"
+            alignY: "middle",
+            padding: [0, 5]
           });
-          layout = this.getChildControl("main-layout");
-          layout.add(control, osparc.dashboard.GridButtonBase.POS.VIEWER_MODE);
+          layout = this.getChildControl("footer");
+          layout.add(control, osparc.dashboard.GridButtonBase.FPOS.VIEWER_MODE);
           break;
         case "empty-workbench": {
           control = this._getEmptyWorkbenchIcon();
@@ -68,7 +69,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
             source: "@MaterialIcons/update/16",
             visibility: "excluded",
             alignY: "middle",
-            alignX: "center"
+            padding: [0, 5]
           });
           osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn");
           layout = this.getChildControl("footer");

services/static-webserver/client/source/class/osparc/dashboard/GridButtonNew.js

@@ -40,7 +40,10 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
 
     if (title) {
       const titleLabel = this.getChildControl("title");
-      titleLabel.setValue(title);
+      titleLabel.set({
+        value: title,
+        rich: true
+      });
     }
 
     if (description) {