🎨 [Frontend] Unify border-radius (#6451)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js

@@ -36,10 +36,8 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
         alignX: "center",
         padding: 12,
         allowGrowX: true,
-        maxWidth: 300
-      });
-      loginAnnouncement.getContentElement().setStyles({
-        "border-radius": "8px"
+        maxWidth: osparc.auth.core.BaseAuthPage.FORM_WIDTH,
+        decorator: "rounded",
       });
 
       if (title) {

services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js

@@ -75,7 +75,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
           });
           control.getChildControl("image").set({
             anonymous: true,
-            decorator: "rounded"
+            decorator: "rounded",
           });
           this._add(control, {
             row: 0,

services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js

@@ -28,10 +28,8 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     this.set({
       backgroundColor: "input_background",
       paddingLeft: 6,
-      height: this.self().HEIGHT
-    });
-    this.getContentElement().setStyles({
-      "border-radius": "5px"
+      height: this.self().HEIGHT,
+      decorator: "rounded",
     });
 
     this.__buildLayout();

services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js

@@ -91,10 +91,8 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
             alignY: "middle",
             alignX: "center",
             allowGrowX: true,
-            allowGrowY: true
-          });
-          control.getContentElement().setStyles({
-            "border-radius": "4px"
+            allowGrowY: true,
+            decorator: "rounded",
           });
           this._add(control);
           break;

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js

@@ -23,10 +23,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
 
     this.set({
       indent: 12, // defaults to 19,
-    });
-
-    this.getContentElement().setStyles({
-      "border-radius": "8px"
+      decorator: "rounded",
     });
 
     this.set({

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsServiceListItem.js

@@ -85,8 +85,8 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
             minHeight: 32,
             minWidth: 32
           });
-          control.getChildControl("image").getContentElement().setStyles({
-            "border-radius": "4px"
+          control.getChildControl("image").set({
+            decorator: "rounded",
           });
           this._add(control, this.self().GRID.ICON);
           break;

services/static-webserver/client/source/class/osparc/info/CommentAdd.js

@@ -65,15 +65,13 @@ qx.Class.define("osparc.info.CommentAdd", {
             allowShrinkX: true,
             allowShrinkY: true,
             maxWidth: 32,
-            maxHeight: 32
+            maxHeight: 32,
+            decorator: "rounded",
           });
           const userEmail = osparc.auth.Data.getInstance().getEmail();
           control.set({
             source: osparc.utils.Avatar.getUrl(userEmail, 32)
           });
-          control.getContentElement().setStyles({
-            "border-radius": "8px"
-          });
           const layout = this.getChildControl("add-comment-layout");
           layout.add(control, {
             row: 0,

services/static-webserver/client/source/class/osparc/info/CommentUI.js

@@ -60,10 +60,8 @@ qx.Class.define("osparc.info.CommentUI", {
           control = new qx.ui.basic.Image().set({
             scale: true,
             maxWidth: 32,
-            maxHeight: 32
-          });
-          control.getContentElement().setStyles({
-            "border-radius": "8px"
+            maxHeight: 32,
+            decorator: "rounded",
           });
           this.getChildControl("meta-data-grid").add(control, {
             row: 0,

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

@@ -27,7 +27,8 @@ 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-3",
+      decorator: "rounded",
     });
     osparc.utils.Utils.setIdToWidget(this, "notificationsContainer");
 

services/static-webserver/client/source/class/osparc/study/PricingUnit.js

@@ -23,10 +23,8 @@ qx.Class.define("osparc.study.PricingUnit", {
 
     this.set({
       padding: 10,
-      center: true
-    });
-    this.getContentElement().setStyles({
-      "border-radius": "4px"
+      center: true,
+      decorator: "rounded",
     });
 
     this.setUnitData(new osparc.pricing.UnitData(pricingUnit));