colors

Author: odeimaiz

services/static-webserver/client/source/class/osparc/theme/ColorDark.js

@@ -50,6 +50,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "text-darker": "rgba(255, 255, 255, 1)",
     "contrasted-text-dark": "rgba(216, 216, 216, 1)",
     "contrasted-text-light": "rgba(255, 255, 255, 1)",
+    "text-complementary": "rgba(40, 40, 40, 1)",
     "link": "rgba(10, 182, 255, 1)",
 
     // shadows

services/static-webserver/client/source/class/osparc/theme/ColorLight.js

@@ -50,6 +50,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "text-darker": "rgba(20, 20, 20, 1)",
     "contrasted-text-dark": "rgba(20, 20, 20, 1)",
     "contrasted-text-light": "rgba(40, 40, 40, 1)",
+    "text-complementary": "rgba(216, 216, 216, 1)",
     "link": "rgba(10, 182, 255, 1)",
 
     // shadows

services/static-webserver/client/source/class/osparc/ui/basic/AvatarGroup.js

@@ -19,7 +19,7 @@
 qx.Class.define("osparc.ui.basic.AvatarGroup", {
   extend: qx.ui.core.Widget,
 
-  construct: function(size = 30, orientation = "right", maxWidth = 150) {
+  construct: function(size = 30, orientation = "left", maxWidth = 150) {
     this.base(arguments);
 
     this.set({
@@ -80,16 +80,13 @@ qx.Class.define("osparc.ui.basic.AvatarGroup", {
         let avatar;
 
         if (user.isExtra) {
-          const bgColor = qx.theme.manager.Color.getInstance().resolve("text");
-          const textColor = qx.theme.manager.Color.getInstance().resolve("contrasted-text-dark");
           avatar = new qx.ui.basic.Label(user.name);
           avatar.set({
             width: this.__avatarSize,
             height: this.__avatarSize,
             textAlign: "center",
-            backgroundColor: bgColor,
-            textColor: textColor,
-            font: "bold",
+            backgroundColor: "text",
+            textColor: "text-complementary",
             toolTipText: `${user.name.replace("+", "")} more`
           });