notifications look like other menus

Author: odeimaiz

services/static-webserver/client/source/class/osparc/notification/NotificationUI.js

@@ -22,6 +22,7 @@ qx.Class.define("osparc.notification.NotificationUI", {
     this.base(arguments);
 
     this.set({
+      margin: 4,
       maxWidth: this.self().MAX_WIDTH,
       padding: this.self().PADDING,
       cursor: "pointer"
@@ -216,9 +217,14 @@ qx.Class.define("osparc.notification.NotificationUI", {
         }
       });
 
-      notification.bind("read", this, "backgroundColor", {
-        converter: read => read ? "background-main-3" : "background-main-4"
-      });
+      const highlight = mouseOn => {
+        this.set({
+          backgroundColor: mouseOn ? "strong-main" : "transparent"
+        })
+      };
+      this.addListener("mouseover", () => highlight(true));
+      this.addListener("mouseout", () => highlight(false));
+      highlight(false);
     },
 
     __notificationTapped: function() {

services/static-webserver/client/source/class/osparc/notification/NotificationsContainer.js

@@ -27,9 +27,14 @@ qx.Class.define("osparc.notification.NotificationsContainer", {
       zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,
       maxWidth: osparc.notification.NotificationUI.MAX_WIDTH,
       maxHeight: 250,
-      backgroundColor: "background-main-3",
+      backgroundColor: "background-main",
       decorator: "rounded",
     });
+    let color = qx.theme.manager.Color.getInstance().resolve("text");
+    color = qx.util.ColorUtil.stringToRgb(color);
+    color.push(0.3); // add transparency
+    color = qx.util.ColorUtil.rgbToRgbString(color);
+    osparc.utils.Utils.addBorder(this, 1, color);
     osparc.utils.Utils.setIdToWidget(this, "notificationsContainer");
 
     const root = qx.core.Init.getApplication().getRoot();