🎨 Update font: Manrope (#4815)

Author: odeimaiz

services/static-webserver/client/source/boot/index.html

@@ -33,6 +33,8 @@
   <!-- <meta property="og:description" id="openGraphDescription" content="open online simulations for Stimulating Peripheral Activity to Relieve Conditions" /> -->
   <!-- <meta property="og:image" id="openGraphImage" content="../resource/osparc/favicon-osparc.png" /> -->
 
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Manrope">
+
   <style>
     body {
       padding: 0px;

services/static-webserver/client/source/class/osparc/Application.js

@@ -241,7 +241,7 @@ qx.Class.define("osparc.Application", {
       osparc.store.StaticInfo.getInstance().getPlatformName()
         .then(platformName => {
           if (platformName !== "master") {
-            // first, pop up new relaese window
+            // first, pop up new release window
             this.__checkNewRelease();
             // then, pop up cookies accepted window. It will go on top.
             this.__checkCookiesAccepted();

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

@@ -105,7 +105,7 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
      */
     _addTitleHeader: function(txt) {
       let lbl = new qx.ui.basic.Label(txt).set({
-        font: "headline",
+        font: "text-24",
         alignX: "center"
       });
       this.add(lbl, {

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

@@ -62,7 +62,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     PADDING: 10,
     SPACING_IN: 5,
     SPACING: 15,
-    TITLE_MAX_HEIGHT: 34, // two lines
+    // TITLE_MAX_HEIGHT: 34, // two lines in Roboto
+    TITLE_MAX_HEIGHT: 38, // two lines in Manrope
     POS: {
       TITLE: {
         row: 0,
@@ -224,7 +225,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           }
         }
       });
-      maxHeight -= 4;
+      // maxHeight -= 4; // for Roboto
+      maxHeight -= 18; // for Manrope
       iconLayout.getChildControl("image").setMaxHeight(maxHeight);
       iconLayout.setMaxHeight(maxHeight);
       iconLayout.recheckSize();

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

@@ -45,7 +45,9 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
 
     popUpInWindow: function(moreOpts) {
       const title = qx.locale.Manager.tr("Details");
-      return osparc.ui.window.Window.popUpInWindow(moreOpts, title, this.WIDTH, this.HEIGHT);
+      return osparc.ui.window.Window.popUpInWindow(moreOpts, title, this.WIDTH, this.HEIGHT).set({
+        maxHeight: 1000
+      });
     },
 
     createPage: function(title, widget, icon, id) {

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

@@ -110,7 +110,9 @@ qx.Class.define("osparc.desktop.wallets.WalletEditor", {
         }
         case "create": {
           const buttons = this.getChildControl("buttonsLayout");
-          control = new osparc.ui.form.FetchButton(this.tr("Create"));
+          control = new osparc.ui.form.FetchButton(this.tr("Create")).set({
+            appearance: "strong-button"
+          });
           control.addListener("execute", () => {
             if (this.__validator.validate()) {
               control.setFetching(true);

services/static-webserver/client/source/class/osparc/editor/ClusterEditor.js

@@ -185,7 +185,9 @@ qx.Class.define("osparc.editor.ClusterEditor", {
         }
         case "create": {
           const buttons = this.getChildControl("buttonsLayout");
-          control = new osparc.ui.form.FetchButton(this.tr("Create"));
+          control = new osparc.ui.form.FetchButton(this.tr("Create")).set({
+            appearance: "strong-button"
+          });
           control.addListener("execute", () => {
             if (this.__validator.validate()) {
               control.setFetching(true);

services/static-webserver/client/source/class/osparc/editor/OrganizationEditor.js

@@ -110,7 +110,9 @@ qx.Class.define("osparc.editor.OrganizationEditor", {
         }
         case "create": {
           const buttons = this.getChildControl("buttonsLayout");
-          control = new osparc.ui.form.FetchButton(this.tr("Create"));
+          control = new osparc.ui.form.FetchButton(this.tr("Create")).set({
+            appearance: "strong-button"
+          });
           control.addListener("execute", () => {
             if (this.__validator.validate()) {
               control.setFetching(true);

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

@@ -71,7 +71,7 @@ qx.Class.define("osparc.info.StudyLarge", {
 
       const title = osparc.info.StudyUtils.createTitle(this.getStudy()).set({
         font: "text-14",
-        maxWidth: 400
+        maxWidth: 380
       });
       const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);
       let text = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id";

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -184,10 +184,9 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           break;
         case "logo-powered":
           control = new osparc.ui.basic.PoweredByOsparc().set({
-            width: 50,
             padding: 3,
             paddingTop: 1,
-            maxHeight: 50
+            maxHeight: this.self().HEIGHT - 2
           });
           this.getChildControl("left-items").add(control);
           break;

services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js

@@ -207,6 +207,9 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
             this.getChildControl("log-in");
           } else {
             this.getChildControl("user-center");
+            if (osparc.data.Permissions.getInstance().isProductOwner()) {
+              this.getChildControl("po-center");
+            }
             this.getChildControl("preferences");
             this.getChildControl("organizations");
             this.getChildControl("clusters");

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

@@ -179,7 +179,8 @@ qx.Class.define("osparc.po.Invitations", {
       const respLabel = new qx.ui.basic.Label(this.tr("Data encrypted in the invitation"));
       vBox.add(respLabel);
 
-      delete respData["invitation_link"];
+      const printData = osparc.utils.Utils.deepCloneObject(respData);
+      delete printData["invitation_link"];
       const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, "invitation-data");
       const container = new qx.ui.container.Scroll();
       container.add(invitationRespViewer);

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

@@ -98,7 +98,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       style: function(states) {
         return {
           marginLeft: 2,
-          font: "small"
+          font: "text-12"
         };
       }
     },

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

@@ -20,149 +20,139 @@ qx.Theme.define("osparc.theme.Font", {
   extend: osparc.theme.common.Font,
 
   fonts: {
-    "text-30": {
-      size: 30,
-      family: ["Roboto", "sanf-serif"],
+    "defaults": {
+      family: ["Manrope", "Roboto", "sanf-serif"],
       color: "text"
     },
 
+    "default": {
+      include: "defaults",
+      size: 13
+    },
+
+    "text-30": {
+      include: "defaults",
+      size: 30
+    },
+
     "text-26": {
-      size: 24,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 24
     },
 
     "text-24": {
-      size: 24,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 24
     },
 
     "text-22": {
-      size: 22,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 22
     },
 
     "title-20": {
+      include: "defaults",
       size: 20,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       bold: true
     },
 
     "text-20": {
-      size: 20,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 20
     },
 
     "title-18": {
+      include: "defaults",
       size: 18,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       bold: true
     },
 
     "text-18": {
-      size: 18,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 18
     },
 
     "title-16": {
+      include: "defaults",
       size: 16,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       bold: true
     },
 
     "text-16": {
-      size: 16,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 16
     },
 
     "text-15": {
-      size: 15,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 15
     },
 
     "title-14": {
+      include: "defaults",
       size: 14,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       bold: true
     },
 
     "text-14": {
-      size: 14,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 14
     },
 
     "link-label-14": {
+      include: "defaults",
       size: 14,
-      family: ["Roboto", "sanf-serif"],
       color: "text-darker",
       decoration: "underline"
     },
 
     "text-13": {
-      size: 13,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 13
     },
 
     "text-12": {
-      size: 12,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 12
     },
 
     "text-12-italic": {
+      include: "defaults",
       size: 12,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       italic: true
     },
 
     "link-label-12": {
+      include: "defaults",
       size: 12,
-      family: ["Roboto", "sanf-serif"],
       color: "text-darker",
       decoration: "underline"
     },
 
     "text-11": {
-      size: 11,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 11
     },
 
     "text-11-italic": {
+      include: "defaults",
       size: 11,
-      family: ["Roboto", "sanf-serif"],
-      color: "text",
       italic: true
     },
 
     "text-10": {
-      size: 10,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 10
     },
 
     "text-9": {
-      size: 9,
-      family: ["Roboto", "sanf-serif"],
-      color: "text"
+      include: "defaults",
+      size: 9
     },
 
     "workbench-start-hint": {
+      include: "defaults",
       size: 20,
-      family: ["Roboto", "sanf-serif"],
       color: "workbench-start-hint",
       bold: true
     }

services/static-webserver/client/source/class/osparc/ui/basic/PoweredByOsparc.js

@@ -50,7 +50,6 @@ qx.Class.define("osparc.ui.basic.PoweredByOsparc", {
       switch (id) {
         case "powered-by":
           control = new qx.ui.basic.Label(this.tr("powered by")).set({
-            minWidth: 47,
             alignX: "center",
             font: "text-9"
           });
@@ -60,13 +59,18 @@ qx.Class.define("osparc.ui.basic.PoweredByOsparc", {
           control = new qx.ui.basic.Image().set({
             width: 42,
             height: 33,
-            scale: true,
-            alignX: "center"
+            scale: true
           });
           const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
             alignY: "bottom"
           }));
+          logoContainer.add(new qx.ui.core.Spacer(), {
+            flex: 1
+          });
           logoContainer.add(control);
+          logoContainer.add(new qx.ui.core.Spacer(), {
+            flex: 1
+          });
           this._add(logoContainer);
           break;
         }

services/static-webserver/client/source/class/osparc/ui/window/Window.js

@@ -58,25 +58,23 @@ qx.Class.define("osparc.ui.window.Window", {
   },
 
   statics: {
-    popUpInWindow: function(widget, title = "", width = 400, height = 400, icon) {
+    popUpInWindow: function(widget, title = "", width = 400, minHeight = 400, icon) {
       const win = new osparc.ui.window.Window(title, icon).set({
-        layout: new qx.ui.layout.VBox(10),
+        layout: new qx.ui.layout.Grow(),
         autoDestroy: true,
         contentPadding: 10,
         showMinimize: false,
         showMaximize: false,
         resizable: true,
         width: width,
-        height: height,
+        minHeight: minHeight,
         modal: true,
         clickAwayClose: true
       });
 
       const scroll = new qx.ui.container.Scroll();
       scroll.add(widget);
-      win.add(scroll, {
-        flex: 1
-      });
+      win.add(scroll);
 
       win.center();
       win.open();