🎨 App design and Web presence alignment (#5065)

jsaq007 · ignapas · web-flow · commit 49e174598b26 · 2023-11-27T14:29:57.000Z
Co-authored-by: Ignacio Pascual &lt;4764217+ignapas@users.noreply.github.com&gt;
diff --git a/services/static-webserver/client/source/class/osparc/About.js b/services/static-webserver/client/source/class/osparc/About.js
@@ -94,7 +94,7 @@ qx.Class.define("osparc.About", {
         contentPaddingLeft: 0,
         barPosition: "top"
       });
-      tabView.getChildControl("pane").setBackgroundColor("background-main-2");
+      tabView.getChildControl("pane").setBackgroundColor("transparent_overlay");
       this.add(tabView, {
         flex: 1
       });
@@ -113,8 +113,7 @@ qx.Class.define("osparc.About", {
       layout.setColumnFlex(0, 1);
       layout.setColumnFlex(1, 1);
       const tabPage = new qx.ui.tabview.Page(title).set({
-        layout,
-        backgroundColor: "background-main-2"
+        layout
       });
       return tabPage;
     },
diff --git a/services/static-webserver/client/source/class/osparc/auth/LoginPage.js b/services/static-webserver/client/source/class/osparc/auth/LoginPage.js
@@ -62,7 +62,7 @@ qx.Class.define("osparc.auth.LoginPage", {
           control = new osparc.ui.basic.LogoWPlatform();
           control.setSize({
             width: 300,
-            height: 120
+            height: 90
           });
           control.setFont("text-18");
           this.getChildControl("main-layout").add(control);
@@ -133,7 +133,7 @@ qx.Class.define("osparc.auth.LoginPage", {
       this.getContentElement().setStyles({
         "background-image": backgroundImage,
         "background-repeat": "no-repeat",
-        "background-size": "auto 85%", // auto width, 85% height
+        "background-size": "auto 100%", // auto width, 85% height
         "background-position": "0% 100%" // left bottom
       });
     },
diff --git a/services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js b/services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js
@@ -29,7 +29,7 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
       const layout = new qx.ui.layout.HBox();
       this._setLayout(layout);
 
-      this.setBackgroundColor("#025887");
+      this.setBackgroundColor("primary-background-color");
 
       this._removeAll();
 
@@ -54,20 +54,20 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
       let backgroundImage = "";
       switch (osparc.product.Utils.getProductName()) {
         case "s4llite":
-          backgroundImage = "url(resource/osparc/s4llite_splitimage.png)";
+          backgroundImage = "url(resource/osparc/Sim4Life_login_page_master_transparent_bg.png)";
           break;
         case "s4lacad":
-          backgroundImage = "url(resource/osparc/s4lacad_splitimage.png)";
+          backgroundImage = "url(resource/osparc/Sim4Life_login_page_master_transparent_bg.png)";
           break;
         case "s4ldesktop":
-          backgroundImage = "url(resource/osparc/s4ldesktop_splitimage.png)";
+          backgroundImage = "url(resource/osparc/Sim4Life_login_page_master_transparent_bg.png)";
           break;
         case "s4ldesktopacad":
-          backgroundImage = "url(resource/osparc/s4ldesktopacad_splitimage.png)";
+          backgroundImage = "url(resource/osparc/Sim4Life_login_page_master_transparent_bg.png)";
           break;
         case "s4l":
         default:
-          backgroundImage = "url(resource/osparc/s4l_splitimage.png)";
+          backgroundImage = "url(resource/osparc/Sim4Life_login_page_master_transparent_bg.png)";
           break;
       }
       this._setBackgroundImage(backgroundImage);
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js
@@ -129,13 +129,11 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
       },
       TSR: {
         row: 2,
-        column: 0,
-        colSpan: 2
+        column: 0
       },
       HITS: {
         row: 2,
-        column: 2,
-        colSpan: 2
+        column: 2
       },
       UPDATES: {
         row: 0,
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js
@@ -78,7 +78,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           break;
         case "tags":
           control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3)).set({
-            anonymous: true
+            anonymous: true,
+            paddingLeft: osparc.dashboard.GridButtonBase.PADDING,
+            paddingRight: osparc.dashboard.GridButtonBase.PADDING,
+            paddingBottom: osparc.dashboard.GridButtonBase.PADDING / 2
           });
           this._mainLayout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
           break;
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js
@@ -52,7 +52,6 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
 
     createPage: function(title, widget, icon, id) {
       const tabPage = new qx.ui.tabview.Page().set({
-        backgroundColor: "background-main-2",
         paddingLeft: 20,
         layout: new qx.ui.layout.VBox(10),
         icon: icon + "/24"
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
@@ -26,12 +26,12 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     this._setLayout(new qx.ui.layout.HBox(5));
 
     this.set({
-      backgroundColor: "background-main-2",
+      backgroundColor: "input_background",
       paddingLeft: 6,
       height: 36
     });
     this.getContentElement().setStyles({
-      "border-radius": "8px"
+      "border-radius": "5px"
     });
 
     this.__buildLayout();
@@ -92,12 +92,15 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           break;
         case "text-field":
           control = new qx.ui.form.TextField().set({
-            backgroundColor: "background-main-2",
+            backgroundColor: "input_background",
             font: "text-16",
             placeholder: this.tr("search"),
             alignY: "bottom",
             marginBottom: 4
           });
+          control.getContentElement().setStyles({
+            "border-bottom": "none"
+          });
           this._add(control, {
             flex: 1
           });
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
@@ -43,7 +43,7 @@ qx.Class.define("osparc.desktop.MainPage", {
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.VBox(null, null, "separator-vertical"));
+    this._setLayout(new qx.ui.layout.VBox(null, null));
 
     this._add(osparc.notification.RibbonNotifications.getInstance());
 
@@ -119,7 +119,7 @@ qx.Class.define("osparc.desktop.MainPage", {
             msg += "<br><br>";
             msg += this.tr("Make sure you saved your changes to:");
             msg += "<br>";
-            msg += this.tr("- current <b>smash file</b> (running <b>simulations</b>, if any, will be terminated)");
+            msg += this.tr("- current <b>smash file</b>");
             msg += "<br>";
             msg += this.tr("- current <b>notebooks</b> (<b>jupyterlab</b> session will be terminated)");
             win.set({
diff --git a/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js b/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
@@ -231,7 +231,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
         "border-radius": "12px"
       });
       view.set({
-        backgroundColor: "background-main-2",
         maxWidth: node.isDynamic() ? null : 800,
         margin: this.self().CARD_MARGIN
       });
diff --git a/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js b/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
@@ -38,7 +38,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
   },
 
   statics: {
-    PRIMARY_COL_BG_COLOR: "background-main-2",
+    PRIMARY_COL_BG_COLOR: "transparent",
     TAB_BUTTON_HEIGHT: 46,
 
     decorateSplitter: function(splitter) {
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/DesktopCenter.js b/services/static-webserver/client/source/class/osparc/desktop/credits/DesktopCenter.js
@@ -25,10 +25,6 @@ qx.Class.define("osparc.desktop.credits.DesktopCenter", {
   construct: function() {
     this.base(arguments);
 
-    this.set({
-      backgroundColor: "background-main-2"
-    });
-
     const page = new osparc.desktop.credits.ProfilePage();
     page.showLabelOnTab();
     const profilePos = 2; // 0: Miniview, 1: Summary
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/Summary.js b/services/static-webserver/client/source/class/osparc/desktop/credits/Summary.js
@@ -86,8 +86,7 @@ qx.Class.define("osparc.desktop.credits.Summary", {
 
     __createOverviewCard: function(cardLabel, content, buttonLabel, signalName, signalData) {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
-        padding: 15,
-        backgroundColor: "background-main-1"
+        padding: 15
       });
       layout.getContentElement().setStyles({
         "border-radius": "4px"
diff --git a/services/static-webserver/client/source/class/osparc/desktop/organizations/MembersList.js b/services/static-webserver/client/source/class/osparc/desktop/organizations/MembersList.js
@@ -145,8 +145,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
       const memebersUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
-        width: 150,
-        backgroundColor: "background-main-2"
+        width: 150
       });
 
       const membersModel = this.__membersModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js b/services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js
@@ -165,9 +165,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
       const tabView = new qx.ui.tabview.TabView().set({
         contentPadding: 10
       });
-      tabView.getChildControl("pane").set({
-        backgroundColor: "background-main-2"
-      });
+      tabView.getChildControl("pane");
 
       const membersListPage = this.__createTabPage(this.tr("Members"), "@FontAwesome5Solid/users/14");
       const membersList = this.__membersList = new osparc.desktop.organizations.MembersList();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js b/services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js
@@ -124,8 +124,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         decorator: "no-border",
         spacing: 3,
         height: 150,
-        width: 150,
-        backgroundColor: "background-main-2"
+        width: 150
       });
       orgsUIList.addListener("changeSelection", e => this.__organizationSelected(e.getData()), this);
 
diff --git a/services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js b/services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js
@@ -64,8 +64,7 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
     __getServicesList: function() {
       const servicesUIList = new qx.ui.form.List().set({
         decorator: "no-border",
-        spacing: 3,
-        backgroundColor: "background-main-2"
+        spacing: 3
       });
 
       const servicesModel = this.__servicesModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/organizations/TemplatesList.js b/services/static-webserver/client/source/class/osparc/desktop/organizations/TemplatesList.js
@@ -64,8 +64,7 @@ qx.Class.define("osparc.desktop.organizations.TemplatesList", {
     __getTemplatesList: function() {
       const templatesUIList = new qx.ui.form.List().set({
         decorator: "no-border",
-        spacing: 3,
-        backgroundColor: "background-main-2"
+        spacing: 3
       });
 
       const templatesModel = this.__templatesModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js
@@ -184,7 +184,7 @@ qx.Class.define("osparc.desktop.paymentMethods.PaymentMethods", {
         spacing: 3,
         height: 150,
         width: 150,
-        backgroundColor: "background-main-2"
+        backgroundColor: "transparent_overlay"
       });
 
       const paymentMethodsModel = this.__paymentMethodsModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/BasePage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/BasePage.js
@@ -33,7 +33,7 @@ qx.Class.define("osparc.desktop.preferences.pages.BasePage", {
     // spacer
     this.add(new qx.ui.core.Spacer(null, 10)); // TODO add decorator?
     this.set({
-      backgroundColor: "background-main-2",
+      backgroundColor: "window-popup-background",
       paddingTop: 5,
       paddingLeft: 15
     });
diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/ClustersPage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/ClustersPage.js
@@ -95,8 +95,7 @@ qx.Class.define("osparc.desktop.preferences.pages.ClustersPage", {
         decorator: "no-border",
         spacing: 3,
         height: 150,
-        width: 150,
-        backgroundColor: "background-main-2"
+        width: 150
       });
       clustersList.addListener("changeSelection", e => {
         this.__clusterSelected(e.getData());
diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
@@ -28,7 +28,6 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
 
     this.__container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     this.__container.set({
-      backgroundColor: "background-main-2",
       paddingLeft: 10
     });
     const scroll = new qx.ui.container.Scroll(this.__container);
diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js
@@ -158,8 +158,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       const membersUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
-        width: 150,
-        backgroundColor: "background-main-2"
+        width: 150
       });
 
       const membersModel = this.__membersModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletDetails.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletDetails.js
@@ -158,10 +158,8 @@ qx.Class.define("osparc.desktop.wallets.WalletDetails", {
 
     __getTabs: function() {
       const tabView = new qx.ui.tabview.TabView().set({
-        contentPadding: 10
-      });
-      tabView.getChildControl("pane").set({
-        backgroundColor: "background-main-2"
+        contentPadding: 10,
+        backgroundColor: "transparent"
       });
 
       const membersListPage = this.__createTabPage(this.tr("Members"), "@FontAwesome5Solid/users/14");
diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js
@@ -83,7 +83,7 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
         spacing: 3,
         height: 150,
         width: 150,
-        backgroundColor: "background-main-2"
+        backgroundColor: "transparent"
       });
       walletsUIList.addListener("changeSelection", e => this.__walletSelected(e.getData()), this);
 
diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
@@ -50,7 +50,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       paddingLeft: 10,
       paddingRight: 10,
       height: this.self().HEIGHT,
-      backgroundColor: "background-main-1"
+      backgroundColor: "navigation_bar_background_color"
     });
   },
 
@@ -110,6 +110,9 @@ qx.Class.define("osparc.navigation.NavigationBar", {
     },
 
     __buildLayout: function() {
+      this.getContentElement().setStyles({
+        "background": "linear-gradient(0deg, rgba(1, 18, 26, 0.1) 0%, rgba(229, 229, 229, 0.1) 5%)"
+      });
       this.getChildControl("left-items");
       this.getChildControl("center-items");
       this.getChildControl("right-items");
diff --git a/services/static-webserver/client/source/class/osparc/product/Utils.js b/services/static-webserver/client/source/class/osparc/product/Utils.js
@@ -115,12 +115,12 @@ qx.Class.define("osparc.product.Utils", {
         case "s4l": {
           if (lightLogo) {
             if (longLogo) {
-              logosPath = "osparc/s4l_logo_white.svg";
+              logosPath = "osparc/Sim4Life_full_logo_white.svg";
             } else {
               logosPath = "osparc/s4l_logo_white_short.svg";
             }
           } else if (longLogo) {
-            logosPath = "osparc/s4l_logo_black.svg";
+            logosPath = "osparc/Sim4Life_full_logo_black.svg";
           } else {
             logosPath = "osparc/s4l_logo_black_short.svg";
           }
@@ -130,13 +130,13 @@ qx.Class.define("osparc.product.Utils", {
           logosPath = lightLogo ? "osparc/s4llite-white.png" : "osparc/s4llite-black.png";
           break;
         case "s4lacad":
-          logosPath = lightLogo ? "osparc/s4lacad-white.png" : "osparc/s4lacad-black.png";
+          logosPath = lightLogo ? "osparc/Sim4Life_full_logo_white.svg" : "osparc/Sim4Life_full_logo_black.svg";
           break;
         case "s4ldesktop":
-          logosPath = lightLogo ? "osparc/s4ldesktop-white.png" : "osparc/s4ldesktop-black.png";
+          logosPath = lightLogo ? "osparc/Sim4Life_full_logo_white.svg" : "osparc/Sim4Life_full_logo_black.svg";
           break;
         case "s4ldesktopacad":
-          logosPath = lightLogo ? "osparc/s4ldesktopacad-white.png" : "osparc/s4ldesktopacad-black.png";
+          logosPath = lightLogo ? "osparc/Sim4Life_full_logo_white.svg" : "osparc/Sim4Life_full_logo_black.svg";
           break;
         case "tis":
           logosPath = lightLogo ? "osparc/tip_itis-white.svg" : "osparc/tip_itis-black.svg";
diff --git a/services/static-webserver/client/source/class/osparc/share/Collaborators.js b/services/static-webserver/client/source/class/osparc/share/Collaborators.js
@@ -250,8 +250,7 @@ qx.Class.define("osparc.share.Collaborators", {
         decorator: "no-border",
         spacing: 3,
         width: 150,
-        padding: 0,
-        backgroundColor: "background-main-2"
+        padding: 0
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();
diff --git a/services/static-webserver/client/source/class/osparc/theme/Appearance.js b/services/static-webserver/client/source/class/osparc/theme/Appearance.js
@@ -155,7 +155,7 @@ qx.Theme.define("osparc.theme.Appearance", {
     "service-window/captionbar": {
       include: "window/captionbar",
       style: state => ({
-        backgroundColor: "background-main-2",
+        backgroundColor: "transparent",
         decorator: "workbench-small-cap-captionbar"
       })
     },
diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js
diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js
diff --git a/services/static-webserver/client/source/class/osparc/theme/Decoration.js b/services/static-webserver/client/source/class/osparc/theme/Decoration.js
diff --git a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js b/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js
diff --git a/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js b/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js
diff --git a/services/static-webserver/client/source/class/osparc/ui/window/Window.js b/services/static-webserver/client/source/class/osparc/ui/window/Window.js
diff --git a/services/static-webserver/client/source/resource/osparc/Sim4Life_full_logo_black.svg b/services/static-webserver/client/source/resource/osparc/Sim4Life_full_logo_black.svg
diff --git a/services/static-webserver/client/source/resource/osparc/Sim4Life_full_logo_white.svg b/services/static-webserver/client/source/resource/osparc/Sim4Life_full_logo_white.svg
diff --git a/services/static-webserver/client/source/resource/osparc/Sim4Life_login_page_master_transparent_bg.png b/services/static-webserver/client/source/resource/osparc/Sim4Life_login_page_master_transparent_bg.png
