wc: Fix styles of tool-header and minor code format #TASK-7216 #TASK-…

…7100
opencb · Nov 26, 2024 · bf5e500 · bf5e500
1 parent 2a09b7f
commit bf5e500
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/src/webcomponents/commons/tool-header.js b/src/webcomponents/commons/tool-header.js
@@ -14,15 +14,11 @@
  * limitations under the License.
  */
 
-import {LitElement, html} from "lit";
+import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 
 export default class ToolHeader extends LitElement {
 
-    constructor() {
-        super();
-    }
-
     createRenderRoot() {
         return this;
     }
@@ -47,18 +43,33 @@ export default class ToolHeader extends LitElement {
         };
     }
 
+    renderIcon() {
+        if (this.icon) {
+            if (this.icon.match(/\./)?.length) {
+                return html`
+                    <img width="48px" height="48px" src="${this.icon}" alt="${this.title}">
+                `;
+            } else {
+                return html`
+                    <i class="fas ${this.icon}"></i>
+                `;
+            }
+        } else {
+            return nothing;
+        }
+    }
+
     render() {
         return html`
-            <!-- ms-n3 it's a negative margin (it works with sass) -->
-            <div class="d-flex align-items-center ms-n3 mt-0 mb-3 p-2 ${this.class ?? ""}" style="background-color:#f5f5f5; margin-right: -0.7rem; margin-left: -1rem;">
-                <h1 class="ps-2">
-                    ${this.icon ? this.icon.match(/\./)?.length ?
-                        html`<img width="50" height="50" src="${this.icon}" alt="${this.title}">` :
-                        html`<i class="${this.icon} px-2" aria-hidden="true"></i>` : ""}
-                    ${UtilsNew.renderHTML(this.title)}
+            <div class="d-flex align-items-center my-3 py-2 ${this.class ?? ""}">
+                <h1 class="d-flex align-items-center gap-3 user-select-none">
+                    ${this.renderIcon()}
+                    <span class="fw-bold">${UtilsNew.renderHTML(this.title)}</span>
                 </h1>
-                ${this.subtitle ? html`<h3>${this.subtitle}</h3>` : null}
-                <div class="ms-auto p-2">
+                ${this.subtitle ? html`
+                    <h3>${this.subtitle}</h3>
+                ` : nothing}
+                <div class="ms-auto">
                     ${this.rhs}
                 </div>
             </div>