🎨 [Frontend] Rebranding: S4L lite -> Sim4Life.lite (#6524)

services/static-webserver/client/compile.json

@@ -56,7 +56,7 @@
       "class": "osparc.Application",
       "theme": "osparc.theme.products.s4l.ThemeDark",
       "name": "s4llite",
-      "title": "Sim4Life Lite",
+      "title": "Sim4Life.lite",
       "include": [
         "iconfont.material.Load",
         "iconfont.fontawesome5.Load",

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

@@ -37,6 +37,12 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
     });
 
     if (title) {
+      title = osparc.utils.Utils.replaceTokens(
+        title,
+        "replace_me_product_name",
+        osparc.store.StaticInfo.getInstance().getDisplayName()
+      );
+
       const titleLabel = this.getChildControl("title");
       titleLabel.set({
         value: title,
@@ -45,6 +51,12 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
     }
 
     if (description) {
+      description = osparc.utils.Utils.replaceTokens(
+        description,
+        "replace_me_product_name",
+        osparc.store.StaticInfo.getInstance().getDisplayName()
+      );
+
       const descLabel = this.getChildControl("subtitle-text");
       descLabel.setValue(description.toString());
     }

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

@@ -34,6 +34,12 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
     });
 
     if (title) {
+      title = osparc.utils.Utils.replaceTokens(
+        title,
+        "replace_me_product_name",
+        osparc.store.StaticInfo.getInstance().getDisplayName()
+      );
+
       const titleLabel = this.getChildControl("title");
       titleLabel.set({
         value: title,

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

@@ -167,14 +167,7 @@ qx.Class.define("osparc.dashboard.NewStudies", {
       const newStudyClicked = () => this.fireDataEvent("newStudyClicked", templateInfo);
 
       const title = templateInfo.title;
-      let desc = templateInfo.description;
-      if (desc) {
-        desc = osparc.utils.Utils.replaceTokens(
-          desc,
-          "replace_me_product_name",
-          osparc.store.StaticInfo.getInstance().getDisplayName()
-        );
-      }
+      const desc = templateInfo.description;
       const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);
       newPlanButton.setCardKey(templateInfo.idToWidget);
       osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget);

services/static-webserver/client/source/class/osparc/product/AboutProduct.js

@@ -108,14 +108,14 @@ qx.Class.define("osparc.product.AboutProduct", {
 
     __buildS4LLiteLayout: function() {
       // https://zurichmedtech.github.io/s4l-lite-manual/#/docs/what_is_s4l_lite
-      const introText = "<i>S4L<sup>lite</sup></i> is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to design complex technical devices in a validated environment. With its intuitive interface and advanced tools, <i>S4L<sup>lite</sup></i> makes it easy to develop your simulation project, wherever you are.";
+      const introText = "Sim4Life.lite is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to design complex technical devices in a validated environment. With its intuitive interface and advanced tools, Sim4Life.lite makes it easy to develop your simulation project, wherever you are.";
 
       const licenseUrl = "https://zurichmedtech.github.io/s4l-lite-manual/#/docs/licensing/copyright_Sim4Life";
       const licenseText = `Click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)} to read the license agreements.`;
 
       // more info ZMT website
       const moreInfoUrl = "https://zmt.swiss/";
-      const moreInfoText = `For more information about <i>S4L<sup>lite</sup></i>, visit ${osparc.utils.Utils.createHTMLLink("our website", moreInfoUrl)}.`;
+      const moreInfoText = `For more information about Sim4Life.lite, visit ${osparc.utils.Utils.createHTMLLink("our website", moreInfoUrl)}.`;
 
       [
         introText,

services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Dashboard.js

@@ -40,7 +40,7 @@ qx.Class.define("osparc.product.quickStart.s4llite.Dashboard", {
       this._add(dashboardProjects);
 
       const newProjectText = this.tr("\
-        1) Start <i>S4L<sup>lite</sup></i>: Click the <b>+ Start <i>S4L<sup>lite</sup></i></b> button to create a new project. This will start the user interface of <i>S4L<sup>lite</sup></i>.\
+        1) Start Sim4Life.lite: Click the <b>+ Start Sim4Life.lite</b> button to create a new project. This will start the user interface of Sim4Life.lite.\
       ");
       const newProject = osparc.product.quickStart.Utils.createLabel(newProjectText);
       this._add(newProject);
@@ -53,7 +53,7 @@ qx.Class.define("osparc.product.quickStart.s4llite.Dashboard", {
       this._add(otherProjects);
 
       const otherProjects2Text = this.tr("\
-        3) TUTORIALS: A set of pre-built read-only tutorial projects with results is available to all <i>S4L<sup>lite</sup></i> users. When a tutorial is selected, a \
+        3) TUTORIALS: A set of pre-built read-only tutorial projects with results is available to all Sim4Life.lite users. When a tutorial is selected, a \
         copy is automatically created and added to the user’s Projects tab. This new copy is editable and can be shared.\
       ");
       const otherProjects2 = osparc.product.quickStart.Utils.createLabel(otherProjects2Text);
@@ -68,8 +68,8 @@ qx.Class.define("osparc.product.quickStart.s4llite.Dashboard", {
       this._add(dashboardTutorials);
 
       const importProjectsText = this.tr("\
-        4) To open an existing desktop project in <i>S4L<sup>lite</sup></i>: \
-        - Click the + Start <i>S4L<sup>lite</sup></i> button to create a new project.<br>\
+        4) To open an existing desktop project in Sim4Life.lite: \
+        - Click the + Start Sim4Life.lite button to create a new project.<br>\
         - Click the menu and select “File Browser…”.<br>\
         - Click “Upload File” for the .smash project and select the file from your desktop. Repeat the same step, but this \
         time select “Upload Folder” and then select the result folder from your desktop. Close the window<br>\

services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteSpecs.js

@@ -19,23 +19,23 @@ qx.Class.define("osparc.product.quickStart.s4llite.S4LLiteSpecs", {
   extend: osparc.product.quickStart.SlideBase,
 
   construct: function() {
-    const title = this.tr("<i>S4L<sup>lite</sup></i>: Features and Limitations");
+    const title = this.tr("Sim4Life.lite: Features and Limitations");
     this.base(arguments, title);
   },
 
   members: {
     _populateCard: function() {
       const introText = this.tr("\
-        <i>S4L<sup>lite</sup></i> is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to \
-        design complex technical devices in a validated environment. <i>S4L<sup>lite</sup></i> has been created specifically for students to \
+        Sim4Life.lite is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to \
+        design complex technical devices in a validated environment. Sim4Life.lite has been created specifically for students to \
         facilitate their understanding of computational modeling and simulations for various topics, ranging from wireless communication \
-        to medical applications. The access to <i>S4L<sup>lite</sup></i> is available free of charge to students enrolled at registered universities.\
+        to medical applications. The access to Sim4Life.lite is available free of charge to students enrolled at registered universities.\
       ");
       const intro = osparc.product.quickStart.Utils.createLabel(introText);
       this._add(intro);
 
       const featuresText = this.tr("\
-        <b><i>S4L<sup>lite</sup></i> offers</b><br>\
+        <b>Sim4Life.lite offers</b><br>\
         - Framework (GUI, Modeling, Postprocessing)<br>\
         - 3D modeling environment (based on the ACIS toolkit) and CAD translators<br>\
         - Postprocessing and visualization of the simulation results (2D and 3D viewers, 2D planar slice, volume rendering, streamlines, surface fields on arbitrary 3D structures, radiation and far-field data)<br>\

services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteUI.js

@@ -19,14 +19,14 @@ qx.Class.define("osparc.product.quickStart.s4llite.S4LLiteUI", {
   extend: osparc.product.quickStart.SlideBase,
 
   construct: function() {
-    const title = this.tr("<i>S4L<sup>lite</sup></i>");
+    const title = this.tr("Sim4Life.lite");
     this.base(arguments, title);
   },
 
   members: {
     _populateCard: function() {
       const introText = this.tr("\
-        To check the <i>S4L<sup>lite</sup></i> manual, please open a project and access the documentation via Help in the menu as shown below. Enjoy!\
+        To check the Sim4Life.lite manual, please open a project and access the documentation via Help in the menu as shown below. Enjoy!\
       ");
       const intro = osparc.product.quickStart.Utils.createLabel(introText);
       this._add(intro);

services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Welcome.js

@@ -30,13 +30,13 @@ qx.Class.define("osparc.product.quickStart.s4llite.Welcome", {
       this._add(welcome);
 
       const introText = this.tr("\
-        This quick user’s guide gives a short introduction to <i>S4L<sup>lite</sup></i>. We will show:<br>\
+        This quick user’s guide gives a short introduction to Sim4Life.lite. We will show:<br>\
           - how to get started with a new project,<br>\
           - how to get started from an existing tutorial project<br>\
-          - how to open Sim4Life lite desktop simulation projects in <i>S4L<sup>lite</sup></i>,<br>\
-          - <i>S4L<sup>lite</sup></i> features, limitations and user interface<br>\
+          - how to open Sim4Life desktop simulation projects in Sim4Life.lite,<br>\
+          - Sim4Life.lite features, limitations and user interface<br>\
           <br>\
-          For more specific technical information, please refer to the Dashboard Manual and the <i>S4L<sup>lite</sup></i> Manual.\
+          For more specific technical information, please refer to the Dashboard Manual and the Sim4Life.lite Manual.\
       ");
       const intro = osparc.product.quickStart.Utils.createLabel(introText);
       this._add(intro);

services/static-webserver/client/source/resource/osparc/new_studies.json

@@ -140,7 +140,7 @@
     "linkedResource": "services",
     "resources": [{
       "expectedKey": "simcore/services/dynamic/sim4life-lite",
-      "title": "Start <i>S4L<sup>lite</sup></i>",
+      "title": "Start ${replace_me_product_name}",
       "description": "New project",
       "newStudyLabel": "New project",
       "idToWidget": "startS4LButton"