TI Planning uses ZMT color palette (ITISFoundation#2863)

Author: odeimaiz

services/web/client/compile.json

@@ -37,13 +37,13 @@
     },
     {
       "class": "osparc.Application",
-      "theme": "osparc.theme.ThemeLightBlue",
+      "theme": "osparc.theme.zmt.ThemeDark",
       "name": "s4l",
       "title": "Sim4Life",
       "include": [
         "iconfont.material.Load",
         "iconfont.fontawesome5.Load",
-        "osparc.theme.ThemeDark"
+        "osparc.theme.zmt.ThemeLight"
       ],
       "environment": {
         "product.name": "s4l"
@@ -52,12 +52,13 @@
     },
     {
       "class": "osparc.Application",
-      "theme": "osparc.theme.ThemePurple",
+      "theme": "osparc.theme.zmt.ThemeDark",
       "name": "tis",
-      "title": "TI Treatment Planning",
+      "title": "TI Planning",
       "include": [
         "iconfont.material.Load",
-        "iconfont.fontawesome5.Load"
+        "iconfont.fontawesome5.Load",
+        "osparc.theme.zmt.ThemeLight"
       ],
       "environment": {
         "product.name": "tis"

services/web/client/source/class/osparc/About.js

@@ -59,18 +59,18 @@ qx.Class.define("osparc.About", {
         contentPaddingLeft: 0,
         barPosition: "top"
       });
-      tabView.getChildControl("pane").setBackgroundColor("material-button-background");
+      tabView.getChildControl("pane").setBackgroundColor("background-main-2");
       this.add(tabView, {
         flex: 1
       });
 
       const frontendPage = new qx.ui.tabview.Page(this.tr("Front-end")).set({
         layout: new qx.ui.layout.VBox(5),
-        backgroundColor: "material-button-background"
+        backgroundColor: "background-main-2"
       });
       const backendPage = new qx.ui.tabview.Page(this.tr("Back-end")).set({
         layout: new qx.ui.layout.VBox(5),
-        backgroundColor: "material-button-background"
+        backgroundColor: "background-main-2"
       });
       tabView.add(frontendPage);
       tabView.add(backendPage);

services/web/client/source/class/osparc/component/form/tag/TagItem.js

@@ -193,11 +193,14 @@ qx.Class.define("osparc.component.form.tag.TagItem", {
      */
     __tagItemButtons: function() {
       const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());
-      const editButton = new qx.ui.form.Button(this.tr("Edit")).set({
-        appearance: "link-button"
+      const editButton = new qx.ui.form.Button().set({
+        icon: "@FontAwesome5Solid/pencil-alt/12",
+        toolTipText: this.tr("Edit")
       });
-      const deleteButton = new osparc.ui.form.FetchButton(this.tr("Delete")).set({
-        appearance: "link-button"
+      const deleteButton = new osparc.ui.form.FetchButton().set({
+        appearance: "danger-button",
+        icon: "@FontAwesome5Solid/trash/12",
+        toolTipText: this.tr("Delete")
       });
       buttonContainer.add(editButton);
       buttonContainer.add(deleteButton);

services/web/client/source/class/osparc/component/form/tag/TagManager.js

@@ -57,15 +57,11 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
     __selectedTags: null,
 
     __renderLayout: function() {
-      const filterBar = new qx.ui.toolbar.ToolBar();
       const filter = new osparc.component.filter.TextFilter("name", "studyBrowserTagManager").set({
         allowStretchX: true,
         margin: [0, 10, 5, 10]
       });
-      filterBar.add(filter, {
-        width: "100%"
-      });
-      this.add(filterBar);
+      this.add(filter);
 
       const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());
       this.add(buttonContainer, {

services/web/client/source/class/osparc/component/metadata/QualityEditor.js

@@ -600,37 +600,31 @@ qx.Class.define("osparc.component.metadata.QualityEditor", {
     // ANNOTATIONS //
 
     __createEditBtns: function() {
-      const editButton = new qx.ui.toolbar.Button(this.tr("Edit")).set({
-        appearance: "toolbar-md-button"
-      });
+      const editButton = new qx.ui.form.Button(this.tr("Edit"));
       this.bind("mode", editButton, "visibility", {
         converter: value => value === "display" ? "visible" : "excluded"
       });
       editButton.addListener("execute", () => {
         this.setMode("edit");
       }, this);
 
-      const saveButton = new osparc.ui.toolbar.FetchButton(this.tr("Save")).set({
-        appearance: "toolbar-md-button"
-      });
+      const saveButton = new osparc.ui.form.FetchButton(this.tr("Save"));
       this.bind("mode", saveButton, "visibility", {
         converter: value => value === "edit" ? "visible" : "excluded"
       });
       saveButton.addListener("execute", e => {
         this.__save(saveButton);
       }, this);
 
-      const cancelButton = new qx.ui.toolbar.Button(this.tr("Cancel")).set({
-        appearance: "toolbar-md-button"
-      });
+      const cancelButton = new qx.ui.form.Button(this.tr("Cancel"));
       this.bind("mode", cancelButton, "visibility", {
         converter: value => value === "edit" ? "visible" : "excluded"
       });
       cancelButton.addListener("execute", () => {
         this.setMode("display");
       }, this);
 
-      const buttonsToolbar = new qx.ui.toolbar.ToolBar();
+      const buttonsToolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
       buttonsToolbar.add(editButton);
       buttonsToolbar.add(saveButton);
       buttonsToolbar.add(cancelButton);

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -117,7 +117,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       });
 
       const nodeStatusUI = this.__nodeStatusUI = new osparc.ui.basic.NodeStatusUI().set({
-        backgroundColor: "contrasted-background+"
+        backgroundColor: "background-main-4"
       });
       nodeStatusUI.getChildControl("label").setFont("text-14");
       header.add(nodeStatusUI);

services/web/client/source/class/osparc/component/permissions/Permissions.js

@@ -112,6 +112,7 @@ qx.Class.define("osparc.component.permissions.Permissions", {
       });
 
       const addCollaboratorBtn = new qx.ui.form.Button(this.tr("Add")).set({
+        appearance: "strong-button",
         allowGrowY: false,
         enabled: false
       });
@@ -139,7 +140,7 @@ qx.Class.define("osparc.component.permissions.Permissions", {
         spacing: 3,
         width: 150,
         padding: 0,
-        backgroundColor: "material-button-background"
+        backgroundColor: "background-main-2"
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();

services/web/client/source/class/osparc/component/snapshots/IterationsView.js

@@ -240,6 +240,7 @@ qx.Class.define("osparc.component.snapshots.IterationsView", {
 
     __createDeleteIterationBtn: function() {
       const deleteIterationBtn = new qx.ui.form.Button(this.tr("Delete")).set({
+        appearance: "danger-button",
         allowGrowX: false,
         alignX: "left"
       });

services/web/client/source/class/osparc/component/study/SaveAsTemplate.js

@@ -58,6 +58,7 @@ qx.Class.define("osparc.component.study.SaveAsTemplate", {
       this._add(publishWithdData);
 
       const shareResourceBtn = new osparc.ui.form.FetchButton().set({
+        appearance: "strong-button",
         label: this.tr("Publish"),
         allowGrowX: false,
         alignX: "right"

services/web/client/source/class/osparc/component/widget/NodeTreeItem.js

@@ -134,6 +134,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
         }
         case "options-delete-button": {
           control = new qx.ui.menu.Button().set({
+            appearance: "danger-button",
             label: this.tr("Delete"),
             icon: "@FontAwesome5Solid/trash/10"
           });