aesthetics

Author: odeimaiz

services/static-webserver/client/source/class/osparc/support/HomePage.js

@@ -43,8 +43,9 @@ qx.Class.define("osparc.support.HomePage", {
     decorateButton: function(button) {
       button.set({
         font: "text-14",
+        icon: null,
         minHeight: 28,
-        gap: 10,
+        gap: 8,
       });
       button.getChildControl("label").set({
         rich: true
@@ -72,21 +73,28 @@ qx.Class.define("osparc.support.HomePage", {
           break;
         }
         case "ask-a-question":
-          control = new qx.ui.form.Button(this.tr("Ask a Question"), "@FontAwesome5Solid/comments/16");
+          control = new qx.ui.form.Button(this.tr("Ask a Question"));
           osparc.support.HomePage.decorateButton(control);
           control.set({
+            icon: "@FontAwesome5Solid/comments/16",
             appearance: "strong-button",
             center: true,
           });
           control.addListener("execute", () => this.fireEvent("openConversation"));
           this._add(control);
           break;
         case "learning-box":
-          control = new osparc.widget.SectionBox(this.tr("Learning"));
+          control = new osparc.widget.SectionBox(this.tr("Learning"), "@FontAwesome5Solid/graduation-cap/14");
+          control.getChildControl("legend").set({
+            gap: 8
+          });
           this._add(control);
           break;
         case "references-box":
-          control = new osparc.widget.SectionBox(this.tr("References"));
+          control = new osparc.widget.SectionBox(this.tr("References"), "@FontAwesome5Solid/book/14");
+          control.getChildControl("legend").set({
+            gap: 8
+          });
           this._add(control);
           break;
       }
@@ -128,6 +136,9 @@ qx.Class.define("osparc.support.HomePage", {
       const releaseNotesButton = osparc.store.Support.getReleaseNotesButton();
       this._add(releaseNotesButton);
       this.self().decorateButton(releaseNotesButton);
+      releaseNotesButton.set({
+        icon: "@FontAwesome5Solid/bullhorn/14"
+      });
     },
   }
 });

services/static-webserver/client/source/class/osparc/widget/SectionBox.js

@@ -21,31 +21,39 @@ qx.Class.define("osparc.widget.SectionBox", {
   include: [qx.ui.core.MRemoteChildrenHandling, qx.ui.core.MLayoutHandling],
 
   /**
-   * @param legend {String?} Initial title
+   * @param legend {String?} Section title
+   * @param icon {String?} Section icon
    */
-  construct: function(legend) {
+  construct: function(legend, icon) {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.Canvas());
 
-    if (legend) {
-      this.setLegend(legend);
-    }
-
     // ensure child controls exist
     this.getChildControl("frame");
     this.getChildControl("legend");
+
+    if (legend) {
+      this.setLegend(legend);
+    }
+    if (icon) {
+      this.setIcon(icon);
+    }
   },
 
   properties: {
-    /** Title text shown on top of the border */
     legend: {
       check: "String",
       init: "",
       event: "changeLegend",
     },
 
-    /** Background for the title; should match panel bg token */
+    icon: {
+      check: "String",
+      init: "",
+      event: "changeIcon",
+    },
+
     legendBackgroundColor: {
       check: "Color",
       init: "background-main-1",
@@ -84,6 +92,7 @@ qx.Class.define("osparc.widget.SectionBox", {
             padding: [0, 6],
           });
           this.bind("legend", control, "label");
+          this.bind("icon", control, "icon");
           this.bind("legendBackgroundColor", control, "backgroundColor");
           this._add(control, { left: 12, top: 0 });
           break;