aesthetics

Author: odeimaiz

services/static-webserver/client/source/class/osparc/share/AddCollaborators.js

@@ -16,7 +16,7 @@
 ************************************************************************ */
 
 /**
- *   Widget that offers the "Share with..." button to add collaborators to a resource.
+ *   Widget that offers the "Share" button to add collaborators to a resource.
  *   It also provides the "Check Organization..." direct access.
  *   As output, once the user select n gid in the NewCollaboratorsManager pop up window,
  * an event is fired with the list of collaborators.
@@ -60,7 +60,9 @@ qx.Class.define("osparc.share.AddCollaborators", {
           this._add(control);
           break;
         case "share-with":
-          control = new qx.ui.form.Button(this.tr("Share with...")).set({
+          control = new qx.ui.form.Button().set({
+            icon: "@FontAwesome5Solid/share-alt/12",
+            label: this.tr("Share"),
             appearance: "form-button",
             alignX: "left",
             allowGrowX: false

services/static-webserver/client/source/class/osparc/share/Collaborators.js

@@ -286,10 +286,13 @@ qx.Class.define("osparc.share.Collaborators", {
     __createCollaboratorsListSection: function() {
       const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 
-      const header = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+      const header = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
 
-      const label = new qx.ui.basic.Label(this.tr("Shared with"));
-      label.set({allowGrowX: true});
+      const label = new qx.ui.basic.Label(this.tr("Shared with:"));
+      label.set({
+        allowGrowX: true,
+        alignY: "middle",
+      });
       header.add(label, {
         flex: 1
       });
@@ -306,7 +309,8 @@ qx.Class.define("osparc.share.Collaborators", {
         decorator: "no-border",
         spacing: 3,
         width: 150,
-        padding: 0
+        padding: 0,
+        backgroundColor: "transparent",
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();

services/static-webserver/client/source/class/osparc/share/ShareTemplateWith.js

@@ -53,7 +53,10 @@ qx.Class.define("osparc.share.ShareTemplateWith", {
         value: this.tr("Make the template accessible to:"),
         font: "text-14",
       });
-      addCollaborators.getChildControl("share-with").setLabel(this.tr("Share with..."));
+      addCollaborators.getChildControl("share-with").set({
+        icon: "@FontAwesome5Solid/share-alt/12",
+        label: this.tr("Share"),
+      });
       this._add(addCollaborators);
 
       this._add(this.__selectedCollabs);

services/static-webserver/client/source/class/osparc/ui/list/ListItem.js

@@ -60,6 +60,7 @@ qx.Class.define("osparc.ui.list.ListItem", {
       padding: 5,
       minHeight: 48,
       alignY: "middle",
+      decorator: "rounded",
     });
 
     this.addListener("pointerover", this._onPointerOver, this);